網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（李志云第2版）-教案 模塊六 綜合案例

模塊六綜合案例本模塊通過小米商城網(wǎng)站和美麗山東網(wǎng)站2個綜合案例的實現(xiàn)，介紹網(wǎng)站開發(fā)的完整流程。知識目標：掌握網(wǎng)站規(guī)劃的方法；掌握使用HTML5+CSS3布局網(wǎng)頁方法；掌握使用JavaScript添加網(wǎng)頁動態(tài)效果的方法。能力目標：會對網(wǎng)站進行統(tǒng)籌規(guī)劃，做好網(wǎng)站前期準備工作；會熟練使用HTML5編輯網(wǎng)頁結(jié)構(gòu)代碼；會熟練使用CSS3編輯網(wǎng)頁樣式代碼；會熟練使用JavaScript編輯和調(diào)試腳本代碼。素質(zhì)目標：培養(yǎng)整理規(guī)劃能力，具有大局意識；培養(yǎng)耐心細致、精益求精的工匠精神；培養(yǎng)文化自信和民族自豪感。教案25案例25小米商城網(wǎng)站（1）計劃學(xué)時2學(xué)時知識目標掌握HBuilderX軟件的基本操作；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果；掌握JavaScript語言的用法，能夠制作網(wǎng)頁中動態(tài)和交互效果。能力目標具有根據(jù)企業(yè)的需求進行靜態(tài)頁面的設(shè)計與制作能力；具有熟練地進行網(wǎng)站的制作、管理和維護的能力。素質(zhì)目標樹立學(xué)生勤于動手，獨立思考的觀念；培養(yǎng)學(xué)生嚴謹?shù)目茖W(xué)態(tài)度，提高分析和解決實際問題的能力；在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點CSS+DIV網(wǎng)頁布局；HTML5新增頁面元素應(yīng)用。教學(xué)難點JavaScript動態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（前期工作、搭建主頁結(jié)構(gòu)）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述制作小米商城網(wǎng)站，該網(wǎng)站由3個頁面構(gòu)成，分別為主頁、登錄頁和注冊頁，從主頁可以進入登錄頁和注冊頁，從登錄頁和注冊頁可以返回主頁。主頁有輪播圖效果和限時促銷效果。網(wǎng)站瀏覽效果如圖25-1~圖25-3所示。圖25-1小米商城網(wǎng)站主頁圖25-2小米商城網(wǎng)站登錄頁圖25-3小米商城網(wǎng)站注冊頁二、前期工作1.收集素材2.新建項目3.創(chuàng)建樣式表文件三、制作網(wǎng)站主頁1.主頁結(jié)構(gòu)分析主頁由頭部、導(dǎo)航條、輪播圖、主體部分和版權(quán)信息等構(gòu)成，主體部分從上到下又細分為圖片展示、產(chǎn)品促銷、廣告圖片、手機、電視、視頻和售后服務(wù)部分，主頁結(jié)構(gòu)劃分如圖所示。2.編寫主頁布局代碼學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時（制作主頁頭部）一、制作頭部1．案例分析頭部分為左、右兩部分，對每部分可以使用無序列表搭建結(jié)構(gòu)。鼠標指針劃過“下載App”時，顯示二維碼，如圖25-7所示，對二維碼可以使用<img>標記定義，通過定義樣式使二維碼隱藏，鼠標指針劃過時再顯示。購物車左側(cè)的圖標使用字體庫中的圖標字體。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。二、制作導(dǎo)航條部分1．案例分析該部分內(nèi)容分為3部分：左側(cè)是Logo、中間是導(dǎo)航條目、右側(cè)是搜索框。對Logo使用<img>標記定義，并給圖像添加超鏈接，鏈接到主頁。對導(dǎo)航條目使用無序列表來構(gòu)建。對右側(cè)的搜索框使用<input>標記定義，按鈕使用<button>標記定義，按鈕上面的放大鏡圖像使用字體庫中的圖標字體。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建導(dǎo)航條結(jié)構(gòu)代碼略。（2）定義導(dǎo)航條CSS樣式代碼略。三=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站。在制作主頁時，按照從上到下的順序，完成頭部、導(dǎo)航條的制作，綜合利用了HTML5的各種標記搭建頁面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁樣式。作業(yè)1：課本課后習(xí)題與實訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)輪播圖和圖片展示部分以及產(chǎn)品促銷部分的制作。課前小組討論培養(yǎng)學(xué)生共同探討的協(xié)作意識和良好的溝通能力。通過小米商城網(wǎng)站的制作，增強國家認同，樹立民族自信。任務(wù)完成中提高學(xué)生的空間布局能力。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教案26案例25小米商城網(wǎng)站（2）計劃學(xué)時2學(xué)時知識目標掌握HBuilderX軟件的基本操作；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果；掌握JavaScript語言的用法，能夠制作網(wǎng)頁中動態(tài)和交互效果。能力目標具有根據(jù)企業(yè)的需求進行靜態(tài)頁面的設(shè)計與制作能力；具有熟練地進行網(wǎng)站的制作、管理和維護的能力。素質(zhì)目標樹立學(xué)生勤于動手，獨立思考的觀念；培養(yǎng)學(xué)生嚴謹?shù)目茖W(xué)態(tài)度，提高分析和解決實際問題的能力；在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點CSS+DIV網(wǎng)頁布局；HTML5新增頁面元素應(yīng)用。教學(xué)難點JavaScript動態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（制作輪播圖、圖片展示部分）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、制作輪播圖部分1．案例分析將所有內(nèi)容放入一個大盒子，將兩側(cè)的箭頭分別放入兩個小盒子，對下面的圓點和圖像都使用無序列表標記<ul>定義。對盒子中的內(nèi)容采用絕對定位，定位到大盒子的指定位置。2．案例實現(xiàn)（1）搭建輪播圖結(jié)構(gòu)學(xué)生同步操作，做學(xué)教一體（2）鏈接輪播圖部分的樣式表文件css.css和腳本文件index.js學(xué)生已觀看微課，略講二、制作圖片展示部分1．案例分析圖片展示部分分為4個塊，需要定義一個大盒子，在大盒子中再定義4個子盒子。對第一個塊使用無序列表搭建結(jié)構(gòu)，第一個塊中的小圖標使用字體庫中的相應(yīng)圖標字體。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建圖片展示部分結(jié)構(gòu)代碼略。（2）定義圖片展示部分CSS樣式代碼略。第2學(xué)時（制作產(chǎn)品促銷部分）一、制作產(chǎn)品促銷部分1．案例分析對該部分需要定義一個盒子，在盒子中用無序列表構(gòu)建每個塊的內(nèi)容。每個塊中相同的樣式可以同時定義，不同的樣式分別定義。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建產(chǎn)品促銷部分結(jié)構(gòu)代碼略。（2）定義產(chǎn)品促銷部分CSS樣式代碼略。二=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站輪播圖、圖片展示部分以及產(chǎn)品促銷部分的制作，綜合利用了HTML5的各種標記搭建頁面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁樣式。作業(yè)1：課本課后習(xí)題與實訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)制作廣告圖片和手機部分、制作廣告圖片和電視部分、視頻以及售后服務(wù)部分的制作。課前小組討論過程中，培養(yǎng)學(xué)生共同探討的協(xié)作意識和良好的溝通能力。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。面對復(fù)雜的設(shè)計，培養(yǎng)學(xué)生不懼困難、迎難而上，解決問題的能力。教案27案例25小米商城網(wǎng)站（3）計劃學(xué)時2學(xué)時知識目標掌握HBuilderX軟件的基本操作；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果；掌握JavaScript語言的用法，能夠制作網(wǎng)頁中動態(tài)和交互效果。能力目標具有根據(jù)企業(yè)的需求進行靜態(tài)頁面的設(shè)計與制作能力；具有熟練地進行網(wǎng)站的制作、管理和維護的能力。素質(zhì)目標樹立學(xué)生勤于動手，獨立思考的觀念；培養(yǎng)學(xué)生嚴謹?shù)目茖W(xué)態(tài)度，提高分析和解決實際問題的能力；在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點CSS+DIV網(wǎng)頁布局；HTML5新增頁面元素應(yīng)用。教學(xué)難點JavaScript動態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（制作廣告圖片和手機部分）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、制作廣告圖片和手機部分1．案例分析廣告圖片和手機部分由兩個塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放8張手機圖片，8張手機圖片采用無序列表搭建結(jié)構(gòu)。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建廣告圖片和手機部分結(jié)構(gòu)代碼略。（2）定義廣告圖片和手機部分CSS樣式代碼略。二、制作廣告圖片和電視部分1．案例分析廣告圖片和電視部分由兩個塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放4張電視圖片，4張電視圖片采用無序列表搭建結(jié)構(gòu)。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建廣告圖片和電視結(jié)構(gòu)代碼略。（2）定義廣告圖片和電視CSS樣式代碼略。第2學(xué)時（制作視頻、售后服務(wù)部分）一、制作視頻部分1．案例分析視頻部分其實也是4張圖片的展示，單擊圖片時播放視頻。但這里對圖片創(chuàng)建了空鏈接，不能播放視頻。視頻部分需要定義一個盒子，盒子中的4個塊使用無序列表搭建結(jié)構(gòu)，每個列表項中包含圖片和文字。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建視頻部分結(jié)構(gòu)代碼略。（2）定義視頻部分CSS樣式代碼略。二、制作售后服務(wù)部分1．案例分析售后服務(wù)部分是主體部分中最下面的部分。售后服務(wù)部分需要定義一個盒子，盒子中的內(nèi)容使用無序列表搭建結(jié)構(gòu)，每個列表項中包含圖標和文字。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建售后服務(wù)部分結(jié)構(gòu)代碼略。（2）定義售后服務(wù)部分CSS樣式代碼略。三、制作版權(quán)信息部分1．案例分析版權(quán)信息部分是主頁最下面的部分。版權(quán)信息部分為通欄顯示，也就是與瀏覽器一樣寬，內(nèi)容占的寬度是1200px。因此需要一個大盒子，里面再嵌套小盒子。小盒子中包含上、下兩個塊，上面的塊又分為左、右兩個塊，左面的塊存放文字內(nèi)容，右面的塊存放小米Logo圖像；下面的塊存放一行文字。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建版權(quán)信息部分結(jié)構(gòu)代碼略。（2）定義版權(quán)信息部分CSS樣式代碼略。四=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站廣告圖片和手機部分、廣告圖片和電視部分、視頻以及售后服務(wù)、版權(quán)信息部分的制作，綜合利用了HTML5的各種標記搭建頁面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁樣式。作業(yè)1：課本課后習(xí)題與實訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)輪播網(wǎng)站登錄頁和網(wǎng)站注冊頁的制作。課前小組討論培養(yǎng)學(xué)生共同探討的協(xié)作意識和良好的溝通能力。在編寫代碼中培養(yǎng)耐心細致、精益求精的工匠精神。通過代碼編寫過程，逐步激發(fā)學(xué)生的求知欲，養(yǎng)成遇到問題解決問題的能力，提高抗挫折能力。教案28案例25小米商城網(wǎng)站（4）計劃學(xué)時2學(xué)時知識目標掌握HBuilderX軟件的基本操作；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果；掌握JavaScript語言的用法，能夠制作網(wǎng)頁中動態(tài)和交互效果。能力目標具有根據(jù)企業(yè)的需求進行靜態(tài)頁面的設(shè)計與制作能力；具有熟練地進行網(wǎng)站的制作、管理和維護的能力。素質(zhì)目標樹立學(xué)生勤于動手，獨立思考的觀念；培養(yǎng)學(xué)生嚴謹?shù)目茖W(xué)態(tài)度，提高分析和解決實際問題的能力；在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點CSS+DIV網(wǎng)頁布局；HTML5新增頁面元素應(yīng)用。教學(xué)難點JavaScript動態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（制作網(wǎng)站登錄頁）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、制作網(wǎng)站登錄頁1．案例分析網(wǎng)站登錄頁的頭部和版權(quán)信息同主頁。內(nèi)容部分分左、右2個部分，左側(cè)圖片使用<aside>標記定義，右側(cè)表單使用<div>、<form>標記定義，表單內(nèi)使用<h1>標記定義標題、使用<p>、<input>標記定義各表單項、表單控件。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。第2學(xué)時（制作網(wǎng)站注冊頁）一、制作網(wǎng)站注冊頁1．案例分析網(wǎng)站注冊頁結(jié)構(gòu)和樣式與登錄頁類似，此處略講。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。二=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站登錄頁和注冊頁2個子頁面。在制作過程中，綜合利用了HTML5標記和CSS3樣式完成了對表單的制作和樣式定義。通過該案例的學(xué)習(xí)，同學(xué)們可以學(xué)會時下流行的電商網(wǎng)站的開發(fā)流程和制作技術(shù)。作業(yè)1：課本課后習(xí)題與實訓(xùn)作業(yè)2：掃碼觀看案例26中的微課，學(xué)習(xí)美麗山東網(wǎng)站的設(shè)計思路。課前小組討論培養(yǎng)學(xué)生共同探討的協(xié)作意識和良好的溝通能力。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。登錄和注冊頁面的形式是多樣的，鼓勵學(xué)生獨立自主，勇于創(chuàng)新。教案29案例26美麗山東網(wǎng)站（1）計劃學(xué)時2學(xué)時知識目標掌握網(wǎng)站開發(fā)的一般流程，了解Web發(fā)展歷史及其未來方向；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握CSS3的高級應(yīng)用，實現(xiàn)過渡、變形、翻轉(zhuǎn)效果；掌握CSS3動畫屬性實現(xiàn)圖片輪播設(shè)計。能力目標具有根據(jù)企業(yè)的需求撰寫企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運用所學(xué)知識與技能進行Web前端開發(fā)與制作的能力。素質(zhì)目標培養(yǎng)和提高學(xué)生感受美、表現(xiàn)美和創(chuàng)造美的能力；培養(yǎng)學(xué)生嚴謹?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é)時（案例分析、網(wǎng)站規(guī)劃）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述設(shè)計并制作美麗山東網(wǎng)站，該網(wǎng)站由3個頁面構(gòu)成，包括主頁、初識山東頁和景點詳情頁，從主頁可以進入其他頁面，從其他頁面可以返回主頁。其中，主頁有使用CSS實現(xiàn)的輪播圖效果，初識山東頁有視頻播放效果，網(wǎng)站瀏覽效果如圖26-1～圖26-3所示。圖26-1美麗山東網(wǎng)站主頁圖26-2初識山東頁圖26-3景點詳情頁二、網(wǎng)站規(guī)劃1．網(wǎng)站需求分析設(shè)計美麗山東網(wǎng)站，旨在讓任何人在任何時間、任何地點都能借助網(wǎng)絡(luò)快速了解和品讀山東的歷史文化，同時為廣大游客提供詳細、準確、全面的旅游信息，如文旅資訊、專題推介等。在內(nèi)容組織上要做到條理清晰、簡單易懂，能夠讓用戶快速查找到相關(guān)信息。2.網(wǎng)站的風(fēng)格定位3.規(guī)劃草圖4.素材準備學(xué)生同步操作，做學(xué)教一體（1）選擇切片工具（2）繪制切片區(qū)域（3）導(dǎo)出切片（4）存儲圖片三、制作網(wǎng)站主頁1.新建項目2.創(chuàng)建樣式表文件3.主頁效果圖分析（1）HTML結(jié)構(gòu)分析（2）CSS樣式分析4.頁面整體布局主頁整體結(jié)構(gòu)代碼編寫學(xué)生同步操作，做學(xué)教一體5.定義公共樣式學(xué)生同步操作，做學(xué)教一體打開樣式文件index.css，編寫通用樣式代碼6.鏈接外部樣式表第2學(xué)時（制作頭部和導(dǎo)航條、輪播圖）一、制作頭部和導(dǎo)航條1．分析效果圖網(wǎng)頁的頭部分為左（Logo）、右（導(dǎo)航條）2個部分，可對導(dǎo)航條的結(jié)構(gòu)使用無序列表來搭建。當鼠標指針懸停于導(dǎo)航條中的各個導(dǎo)航條目時，改變文本顏色和邊框。2．代碼實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部和導(dǎo)航條結(jié)構(gòu)代碼略。（2）定義頭部和導(dǎo)航條CSS樣式代碼略。二、制作輪播圖1．分析效果圖觀察效果圖，可以看出只需在該盒子內(nèi)再添加1個包容所有圖片的盒子。每隔30s的時間，圖片會完成1次先向左后向右的交替移動動畫。2．代碼實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建輪播圖結(jié)構(gòu)（2）定義輪播圖CSS樣式三、小結(jié)本案例介紹了美麗山東網(wǎng)站規(guī)劃流程，綜合利用HTML5+CSS3最新網(wǎng)站開發(fā)技術(shù)，制作完成主頁頭部和導(dǎo)航條、輪播圖部分。作業(yè)1：課本課后習(xí)題與實訓(xùn)。作業(yè)2：掃碼觀看案例26中主頁中內(nèi)容部分（山東概況、禮儀之邦）的微課，學(xué)習(xí)制作過程。課前小組討論過程中，培養(yǎng)學(xué)生團隊合作，綜合分析問題的能力。通過分析、規(guī)劃網(wǎng)站內(nèi)容，激發(fā)學(xué)生的家國情懷，增強國家認同，培養(yǎng)愛國情感，樹立民族自信。引導(dǎo)同學(xué)們努力學(xué)習(xí)、多多實踐。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教案30案例26美麗山東網(wǎng)站（2）計劃學(xué)時2學(xué)時知識目標掌握網(wǎng)站開發(fā)的一般流程，了解Web發(fā)展歷史及其未來方向；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握CSS3的高級應(yīng)用，實現(xiàn)過渡、變形、翻轉(zhuǎn)效果；掌握CSS3動畫屬性實現(xiàn)圖片輪播設(shè)計。能力目標具有根據(jù)企業(yè)的需求撰寫企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運用所學(xué)知識與技能進行Web前端開發(fā)與制作的能力。素質(zhì)目標培養(yǎng)和提高學(xué)生感受美、表現(xiàn)美和創(chuàng)造美的能力；培養(yǎng)學(xué)生嚴謹?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é)時（制作山東概況內(nèi)容部分）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述美麗山東網(wǎng)站主頁中，內(nèi)容部分（山東概況）分為標題和圖文介紹兩部分，當鼠標指針懸停于中間的圖片上時，出現(xiàn)圖片放大效果。二、案例分析與實現(xiàn)1．案例分析圖中所示的網(wǎng)頁內(nèi)容由2部分構(gòu)成，分別為標題和內(nèi)容塊。標題使用<h1>標記定義，內(nèi)容塊使用<ul>和<li>標記定義。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建內(nèi)容部分（山東概況）結(jié)構(gòu)代碼略。（2）定義內(nèi)容部分（山東概況）CSS樣式代碼略。第2學(xué)時（制作禮儀之邦內(nèi)容部分）一、案例描述美麗山東網(wǎng)站主頁中，內(nèi)容部分（禮儀之邦）分為標題和圖文介紹2個部分，圖文介紹部分又分為左側(cè)文字和右側(cè)名勝圖片兩部分。當鼠標指針懸停于任意一張名勝圖片上時，圖片放大、傾斜，同時出現(xiàn)查看相冊的下拉遮罩。二、案例分析與實現(xiàn)1．案例分析圖中所示的網(wǎng)頁內(nèi)容由2部分構(gòu)成，分別為標題和內(nèi)容塊。標題使用<h1>標記定義，內(nèi)容塊分左側(cè)和右側(cè)兩個塊，右側(cè)塊使用<h1>定義標題，使用<ul>和<li>標記定義名勝圖片部分，其中使用<hgroup>標記定義查看相冊遮罩層的部分。2．案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建內(nèi)容部分（山東概況）結(jié)構(gòu)代碼略。（2）定義內(nèi)容部分（山東概況）CSS樣式代碼略。三、小結(jié)本案例制作了美麗山東網(wǎng)站中山東概況和禮儀之邦兩個內(nèi)容部分，這兩個部分的制作充分運用了CSS3的定位、過渡、變形效果，是需要重點掌握的內(nèi)容。作業(yè)1：課本課后習(xí)題與實訓(xùn)。作業(yè)2：掃碼觀看案例26中主頁中內(nèi)容部分（文化遺產(chǎn)）的微課，學(xué)習(xí)制作過程。課前小組討論培養(yǎng)學(xué)生團隊協(xié)作意識和良好的溝通能力。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。添加遮罩動畫效果，滿足用戶更多需求，培養(yǎng)學(xué)生服務(wù)客戶意識和以人為本的理念。在編寫代碼中培養(yǎng)學(xué)生耐心細致、精益求精的工匠精神。教案31案例26美麗山東網(wǎng)站（3）計劃學(xué)時2學(xué)時知識目標掌握網(wǎng)站開發(fā)的一般流程，了解Web發(fā)展歷史及其未來方向；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握CSS3的高級應(yīng)用，實現(xiàn)過渡、變形、翻轉(zhuǎn)效果；掌握CSS3動畫屬性實現(xiàn)圖片輪播設(shè)計。能力目標具有根據(jù)企業(yè)的需求撰寫企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運用所學(xué)知識與技能進行Web前端開發(fā)與制作的能力。素質(zhì)目標培養(yǎng)和提高學(xué)生感受美、表現(xiàn)美和創(chuàng)造美的能力；培養(yǎng)學(xué)生嚴謹?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)）分為標題和圖片組兩部分，當鼠標指針懸停于任意一張圖片上時，圖片翻轉(zhuǎn)，出現(xiàn)該圖片的相關(guān)介紹，該效果是通過3D變形來實現(xiàn)的。第2張圖片是其中一張圖片翻轉(zhuǎn)后的效果。二、案例分析與實現(xiàn)1．案例分析圖中所示的網(wǎng)頁內(nèi)容由2部分構(gòu)成，分別為標題和內(nèi)容塊。標題使用<header><h1>標記定義，內(nèi)容塊使用無序列表<ul>和<li>標記定義，并且在<li>標記內(nèi)嵌套1個<img>和1個<div>標記，<div>標記用于定義圖片的相關(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)頁文旅部分為標題和圖文資訊2個部分，圖文資訊又分為左（圖片）、右（資訊）2個部分。當鼠標滑過圖片有不透明度的變化，鼠標經(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é)生團隊合作，共同探討的協(xié)作意識。在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。觀看宣傳片，增強同學(xué)們民族文化自信和為融入中國標準而努力。面對復(fù)