網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例25小米商城網(wǎng)站

模塊六綜合案例本模塊通過小米商城網(wǎng)站和美麗山東網(wǎng)站2個(gè)綜合案例的實(shí)現(xiàn)，介紹網(wǎng)站開發(fā)的完整流程。知識(shí)目標(biāo)：掌握網(wǎng)站規(guī)劃的方法；掌握使用HTML5+CSS3布局網(wǎng)頁(yè)方法；掌握使用JavaScript添加網(wǎng)頁(yè)動(dòng)態(tài)效果的方法。能力目標(biāo)：會(huì)對(duì)網(wǎng)站進(jìn)行統(tǒng)籌規(guī)劃，做好網(wǎng)站前期準(zhǔn)備工作；會(huì)熟練使用HTML5編輯網(wǎng)頁(yè)結(jié)構(gòu)代碼；會(huì)熟練使用CSS3編輯網(wǎng)頁(yè)樣式代碼；會(huì)熟練使用JavaScript編輯和調(diào)試腳本代碼。素質(zhì)目標(biāo)：培養(yǎng)整理規(guī)劃能力，具有大局意識(shí)；培養(yǎng)耐心細(xì)致、精益求精的工匠精神；培養(yǎng)文化自信和民族自豪感。教案25案例25小米商城網(wǎng)站（1）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果；掌握J(rèn)avaScript語(yǔ)言的用法，能夠制作網(wǎng)頁(yè)中動(dòng)態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進(jìn)行靜態(tài)頁(yè)面的設(shè)計(jì)與制作能力；具有熟練地進(jìn)行網(wǎng)站的制作、管理和維護(hù)的能力。素質(zhì)目標(biāo)樹立學(xué)生勤于動(dòng)手，獨(dú)立思考的觀念；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問題的能力；在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁(yè)布局；HTML5新增頁(yè)面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（前期工作、搭建主頁(yè)結(jié)構(gòu)）=1\*ROMANI.問題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述制作小米商城網(wǎng)站，該網(wǎng)站由3個(gè)頁(yè)面構(gòu)成，分別為主頁(yè)、登錄頁(yè)和注冊(cè)頁(yè)，從主頁(yè)可以進(jìn)入登錄頁(yè)和注冊(cè)頁(yè)，從登錄頁(yè)和注冊(cè)頁(yè)可以返回主頁(yè)。主頁(yè)有輪播圖效果和限時(shí)促銷效果。網(wǎng)站瀏覽效果如圖25-1~圖25-3所示。圖25-1小米商城網(wǎng)站主頁(yè)圖25-2小米商城網(wǎng)站登錄頁(yè)圖25-3小米商城網(wǎng)站注冊(cè)頁(yè)二、前期工作1.收集素材2.新建項(xiàng)目3.創(chuàng)建樣式表文件三、制作網(wǎng)站主頁(yè)1.主頁(yè)結(jié)構(gòu)分析主頁(yè)由頭部、導(dǎo)航條、輪播圖、主體部分和版權(quán)信息等構(gòu)成，主體部分從上到下又細(xì)分為圖片展示、產(chǎn)品促銷、廣告圖片、手機(jī)、電視、視頻和售后服務(wù)部分，主頁(yè)結(jié)構(gòu)劃分如圖所示。2.編寫主頁(yè)布局代碼學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時(shí)（制作主頁(yè)頭部）一、制作頭部1．案例分析頭部分為左、右兩部分，對(duì)每部分可以使用無(wú)序列表搭建結(jié)構(gòu)。鼠標(biāo)指針劃過“下載App”時(shí)，顯示二維碼，如圖25-7所示，對(duì)二維碼可以使用<img>標(biāo)記定義，通過定義樣式使二維碼隱藏，鼠標(biāo)指針劃過時(shí)再顯示。購(gòu)物車左側(cè)的圖標(biāo)使用字體庫(kù)中的圖標(biāo)字體。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。二、制作導(dǎo)航條部分1．案例分析該部分內(nèi)容分為3部分：左側(cè)是Logo、中間是導(dǎo)航條目、右側(cè)是搜索框。對(duì)Logo使用<img>標(biāo)記定義，并給圖像添加超鏈接，鏈接到主頁(yè)。對(duì)導(dǎo)航條目使用無(wú)序列表來構(gòu)建。對(duì)右側(cè)的搜索框使用<input>標(biāo)記定義，按鈕使用<button>標(biāo)記定義，按鈕上面的放大鏡圖像使用字體庫(kù)中的圖標(biāo)字體。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建導(dǎo)航條結(jié)構(gòu)代碼略。（2）定義導(dǎo)航條CSS樣式代碼略。三=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站。在制作主頁(yè)時(shí)，按照從上到下的順序，完成頭部、導(dǎo)航條的制作，綜合利用了HTML5的各種標(biāo)記搭建頁(yè)面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁(yè)樣式。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)輪播圖和圖片展示部分以及產(chǎn)品促銷部分的制作。課前