教案26案例25小米商城網(wǎng)站（2）計劃學(xué)時2學(xué)時知識目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動與定位布局的使用技巧，能夠運用CSS+DIV為網(wǎng)頁布局；掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果；掌握JavaScript語言的用法，能夠制作網(wǎng)頁中動態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進行靜態(tài)頁面的設(shè)計與制作能力；具有熟練地進行網(wǎng)站的制作、管理和維護的能力。素質(zhì)目標(biāo)樹立學(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è)的箭頭分別放入兩個小盒子，對下面的圓點和圖像都使用無序列表標(biāo)記<ul>定義。對盒子中的內(nèi)容采用絕對定位，定位到大盒子的指定位置。2．案例實現(xiàn)（1）搭建輪播圖結(jié)構(gòu)學(xué)生同步操作，做學(xué)教一體（2）鏈接輪播圖部分的樣式表文件css.css和腳本文件index.js學(xué)生已觀看微課，略講二、制作圖片展示部分1．案例分析圖片展示部分分為4個塊，需要定義一個大盒子，在大盒子中再定義4個子盒子。對第一個塊使用無序列表搭建結(jié)構(gòu)，第一個塊中的小圖標(biāo)使用字體庫中的相應(yīng)圖標(biāo)字體。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的各種標(biāo)記搭建頁面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁樣式。作業(yè)1：課本課后習(xí)題與實訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)制作廣告圖片和手機部分、制作廣告圖片和電視部分、視頻以及售后服務(wù)部分的制作。課前小組討論過程中，培養(yǎng)學(xué)生共同探