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

教案27案例25小米商城網(wǎng)站（3）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握盒子的相關(guān)屬性，能夠制作常見(jià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)樹(shù)立學(xué)生勤于動(dòng)手，獨(dú)立思考的觀念；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁(yè)布局；HTML5新增頁(yè)面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線(xiàn)上+線(xiàn)下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（制作廣告圖片和手機(jī)部分）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、制作廣告圖片和手機(jī)部分1．案例分析廣告圖片和手機(jī)部分由兩個(gè)塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放8張手機(jī)圖片，8張手機(jī)圖片采用無(wú)序列表搭建結(jié)構(gòu)。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建廣告圖片和手機(jī)部分結(jié)構(gòu)代碼略。（2）定義廣告圖片和手機(jī)部分CSS樣式代碼略。二、制作廣告圖片和電視部分1．案例分析廣告圖片和電視部分由兩個(gè)塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放4張電視圖片，4張電視圖片采用無(wú)序列表搭建結(jié)構(gòu)。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建廣告圖片和電視結(jié)構(gòu)代碼略。（2）定義廣告圖片和電視CSS樣式代碼略。第2學(xué)時(shí)（制作視頻、售后服務(wù)部分）一、制作視頻部分1．案例分析視頻部分其實(shí)也是4張圖片的展示，單擊圖片時(shí)播放視頻。但這里對(duì)圖片創(chuàng)建了空鏈接，不能播放視頻。視頻部分需要定義一個(gè)盒子，盒子中的4個(gè)塊使用無(wú)序列表搭建結(jié)構(gòu)，每個(gè)列表項(xiàng)中包含圖片和文字。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建視頻部分結(jié)構(gòu)代碼略。（2）定義視頻部分CSS樣式代碼略。二、制作售后服務(wù)部分1．案例分析售后服務(wù)部分是主體部分中最下面的部分。售后服務(wù)部分需要定義一個(gè)盒子，盒子中的內(nèi)容使用無(wú)序列表搭建結(jié)構(gòu)，每個(gè)列表項(xiàng)中包含圖標(biāo)和文字。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建售后服務(wù)部分結(jié)構(gòu)代碼略。（2）定義售后服務(wù)部分CSS樣式代碼略。三、制作版權(quán)信息部分1．案例分析版權(quán)信息部分是主頁(yè)最下面的部分。版權(quán)信息部分為通欄顯示，也就是與瀏覽器一樣寬，內(nèi)容占的寬度是1200px。因此需要一個(gè)大盒子，里面再嵌套小盒子。小盒子中包含上、下兩個(gè)塊，上面的塊又分為左、右兩個(gè)塊，左面的塊存放文字內(nèi)容，右面的塊存放小米Logo圖像；下面的塊存放一行文字。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建版權(quán)信息部分結(jié)構(gòu)代碼略。（2）定義版權(quán)信息部分CSS樣式代碼略。四=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站廣告圖片和手機(jī)部分、廣告圖片和電視部分、視頻以及售后服務(wù)、版權(quán)信息部分的制作，綜合利用了HTML5的各種標(biāo)記搭建頁(yè)面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁(yè)樣式。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)輪播網(wǎng)站登錄頁(yè)和網(wǎng)站注冊(cè)頁(yè)的制作。課前小組討