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

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