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

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