教案31案例26美麗山東網(wǎng)站（3）計劃學(xué)時2學(xué)時知識目標(biāo)掌握網(wǎng)站開發(fā)的一般流程，了解Web發(fā)展歷史及其未來方向；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握CSS3的高級應(yīng)用，實現(xiàn)過渡、變形、翻轉(zhuǎn)效果；掌握CSS3動畫屬性實現(xiàn)圖片輪播設(shè)計。能力目標(biāo)具有根據(jù)企業(yè)的需求撰寫企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運用所學(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é)重點圖片切片工具；CSS3過渡、變形、翻轉(zhuǎn)及動畫屬性應(yīng)用。教學(xué)難點CSS3屬性高級應(yīng)用。教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（制作文化遺產(chǎn)內(nèi)容部分）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述內(nèi)容部分（文化遺產(chǎn)）分為標(biāo)題和圖片組兩部分，當(dāng)鼠標(biāo)指針懸停于任意一張圖片上時，圖片翻轉(zhuǎn)，出現(xiàn)該圖片的相關(guān)介紹，該效果是通過3D變形來實現(xiàn)的。第2張圖片是其中一張圖片翻轉(zhuǎn)后的效果。二、案例分析與實現(xiàn)1．案例分析圖中所示的網(wǎng)頁內(nèi)容由2部分構(gòu)成，分別為標(biāo)題和內(nèi)容塊。標(biāo)題使用<header><h1>標(biāo)記定義，內(nèi)容塊使用無序列表<ul>和<li>標(biāo)記定義，并且在<li>標(biāo)記內(nèi)嵌套1個<img>和1個<div>標(biāo)記，<div>標(biāo)記用于定義圖片的相關(guān)介紹塊。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建內(nèi)容部分（文化遺產(chǎn)）結(jié)構(gòu)代碼略。（2）定義內(nèi)容部分（文化遺產(chǎn)）CSS樣式代碼略。三、制作版權(quán)信息學(xué)生同步操作，做學(xué)教一體（1）搭建版權(quán)信息結(jié)構(gòu)（2）定義版權(quán)信息CSS樣式第2學(xué)時（制作初識山東頁面頭部及文旅資訊部分）一、制作頭部和導(dǎo)航條此處同網(wǎng)站主頁，略。二、制作視頻宣傳部分1．案例分析網(wǎng)頁視頻宣傳部分為左（圖片）、右（視頻）2個部分。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建視頻宣傳部分結(jié)構(gòu)（2）定義視頻宣傳部分CSS樣式三、制作文旅資訊部分1．案例分析網(wǎng)頁文旅部分為標(biāo)題和圖文資訊2個部分，圖文資訊又分為左（圖片）、右（資訊）2個部分。當(dāng)鼠標(biāo)滑過圖片有不透明度的變化，鼠標(biāo)經(jīng)過文字，文字變化顏色。左側(cè)部分又分成左右2個塊，用<div>定義，右邊<div>中放3張圖片，兩個盒子水平排列；右側(cè)資訊部分用5個<div>定義每條資訊條目，資訊條目再分為左右2個塊，左側(cè)為日期，右側(cè)為文本信息。由于不同文本樣式各不相同，因此單獨為不同樣式的文本用類選擇器區(qū)分定義。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建文旅資訊部分結(jié)構(gòu)（2）定義文旅資訊部分CSS樣式四、小結(jié)本案例綜合利用HTML5+CSS3最新網(wǎng)站開發(fā)技術(shù)，制作了美麗山東網(wǎng)站主頁文化遺產(chǎn)內(nèi)容部分、初識山東頁面的文旅資訊部分。實現(xiàn)圖片翻轉(zhuǎn)、視頻播放等效果，是重點掌握的內(nèi)容。作業(yè)1：課本課后習(xí)題與實訓(xùn)。作業(yè)2：掃碼觀看案例26中初識山東頁面景點攻略部分及景點詳情頁的微課，學(xué)習(xí)制作過程。課前小組討論培養(yǎng)學(xué)生團(tuán)隊合作，共同探討的