網(wǎng)頁設(shè)計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例26美麗山東網(wǎng)站

教案30案例26美麗山東網(wǎng)站（2）計劃學(xué)時2學(xué)時知識目標(biāo)掌握網(wǎng)站開發(fā)的一般流程，了解Web發(fā)展歷史及其未來方向；掌握浮動與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁布局；掌握CSS3的高級應(yīng)用，實現(xiàn)過渡、變形、翻轉(zhuǎn)效果；掌握CSS3動畫屬性實現(xiàn)圖片輪播設(shè)計。能力目標(biāo)具有根據(jù)企業(yè)的需求撰寫企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運(yùn)用所學(xué)知識與技能進(jìn)行Web前端開發(fā)與制作的能力。素質(zhì)目標(biāo)培養(yǎng)和提高學(xué)生感受美、表現(xiàn)美和創(chuàng)造美的能力；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實際問題的能力；樹立學(xué)生自主學(xué)習(xí)和終生學(xué)習(xí)的觀念。教學(xué)重點(diǎn)圖片切片工具；CSS3過渡、變形、翻轉(zhuǎn)及動畫屬性應(yīng)用。教學(xué)難點(diǎn)CSS3屬性高級應(yīng)用。教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（制作山東概況內(nèi)容部分）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述美麗山東網(wǎng)站主頁中，內(nèi)容部分（山東概況）分為標(biāo)題和圖文介紹兩部分，當(dāng)鼠標(biāo)指針懸停于中間的圖片上時，出現(xiàn)圖片放大效果。二、案例分析與實現(xiàn)1．案例分析圖中所示的網(wǎng)頁內(nèi)容由2部分構(gòu)成，分別為標(biāo)題和內(nèi)容塊。標(biāo)題使用<h1>標(biāo)記定義，內(nèi)容塊使用<ul>和<li>標(biāo)記定義。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建內(nèi)容部分（山東概況）結(jié)構(gòu)代碼略。（2）定義內(nèi)容部分（山東概況）CSS樣式代碼略。第2學(xué)時（制作禮儀之邦內(nèi)容部分）一、案例描述美麗山東網(wǎng)站主頁中，內(nèi)容部分（禮儀之邦）分為標(biāo)題和圖文介紹2個部分，圖文介紹部分又分為左側(cè)文字和右側(cè)名勝圖片兩部分。當(dāng)鼠標(biāo)指針懸停于任意一張名勝圖片上時，圖片放大、傾斜，同時出現(xiàn)查看相冊的下拉遮罩。二、案例分析與實現(xiàn)1．案例分析圖中所示的網(wǎng)頁內(nèi)容由2部分構(gòu)成，分別為標(biāo)題和內(nèi)容塊。標(biāo)題使用<h1>標(biāo)記定義，內(nèi)容塊分左側(cè)和右側(cè)兩個塊，右側(cè)塊使用<h1>定義標(biāo)題，使用<ul>和<li>標(biāo)記定義名勝圖片部分，其中使用<hgroup>標(biāo)記定義查看相冊遮罩層的部分。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建內(nèi)容部分（山東概況）結(jié)構(gòu)代碼略。（2）定義內(nèi)容部分（山東概況）CSS樣式代碼略。三、小結(jié)本案例制作了美麗山東網(wǎng)站中山東概況和禮儀之邦兩個內(nèi)容部分，這兩個部分的制作充分運(yùn)用了CSS3的定位、過渡、變形效果，是需要重點(diǎn)掌握的內(nèi)容。作業(yè)1：課本課后習(xí)題與實訓(xùn)。作業(yè)2：掃碼觀看案例26中主頁中內(nèi)容部分（文化遺產(chǎn)）的微課，學(xué)習(xí)制作過程。課前小組討論培養(yǎng)學(xué)生團(tuán)隊協(xié)作意識和良好的溝通能力。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。