HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。25.1標(biāo)準(zhǔn)文檔流布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標(biāo)：（1）掌握頁頭、主內(nèi)容區(qū)、頁腳的容器規(guī)劃。（2）頁頭、主內(nèi)容區(qū)、頁腳相應(yīng)的html及css代碼的編寫。能力目標(biāo)：（1）具備獨(dú)立完成企業(yè)首頁頁頭、主內(nèi)容區(qū)、頁腳的容器正確、合理規(guī)劃的能力。（2）具備完成頁頭、主內(nèi)容區(qū)、頁腳html及css代碼的編寫能力。素養(yǎng)目標(biāo)：弘揚(yáng)工匠精神，鼓勵學(xué)生追求技術(shù)的精湛和完美。通過設(shè)立技術(shù)榜樣、開展技能競賽等方式，激發(fā)學(xué)生對技術(shù)的熱愛和追求，形成精益求精的學(xué)習(xí)氛圍。標(biāo)準(zhǔn)流布局各區(qū)域的容器規(guī)劃，容器結(jié)構(gòu)代碼的編寫，樣式代碼的編寫。通過稻花香官網(wǎng)布局的模仿、鼓勵學(xué)生上網(wǎng)觀察官網(wǎng)源代碼，激發(fā)學(xué)生興趣。容器結(jié)構(gòu)代碼的編寫，樣式代碼的編寫。引導(dǎo)學(xué)生完成核心框架后，鼓勵學(xué)生獨(dú)立完成內(nèi)部容器的劃分及代碼實(shí)現(xiàn)。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動教學(xué)，鼓勵學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識點(diǎn)，引入本次課的相關(guān)知識點(diǎn)的背景知識，然后講授具體的知識要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評價(jià)或小組評價(jià)完成任務(wù)的檢測，教師最終進(jìn)行點(diǎn)評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價(jià)或小組評價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)標(biāo)準(zhǔn)文檔流布局的特點(diǎn)。無論什么流派布局，可以通過css樣式中clear屬性，讓后續(xù)元素的布局回歸到標(biāo)準(zhǔn)流布局?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識結(jié)構(gòu)。引入在之前的練習(xí)中，我們主要完成主體容器的規(guī)劃，但每個(gè)主體容器中肯定有大量的子容器分布，我們可以將每個(gè)子容器看成是一個(gè)單獨(dú)的個(gè)體，按照之前的操作思路，嘗試在頁頭、內(nèi)容區(qū)、頁腳容器細(xì)分出若干的子容器。聽講講授，演示。任務(wù)驅(qū)動法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識講授1.頁頭區(qū)的容器規(guī)劃。主要包含有：Logo，導(dǎo)航欄，banner海報(bào)，功能區(qū)。2.內(nèi)容區(qū)的容器規(guī)劃。主要包含有：重點(diǎn)推薦區(qū)，各欄目區(qū)，側(cè)邊欄。3.頁腳區(qū)的容器規(guī)劃。主要包含有：Logo，站點(diǎn)地圖，版權(quán)說明，網(wǎng)站備案?！景咐?】完成“稻花香集團(tuán)”首頁的頁面框架結(jié)構(gòu)?！钏颊v解：“稻花香”系列是白酒類，中國的酒文化源遠(yuǎn)流長，可追溯至數(shù)千年前，是中華文明不可或缺的一部分。古代文人墨客常以酒會友，吟詩作對，留下了眾多膾炙人口的詩篇。酒不僅是飲品，更承載著社交、禮儀、慶典等多重文化意義。但是作為學(xué)生，作為未成年人，切勿把酒文化當(dāng)成是朋友圈子的一種社交形式。校內(nèi)喝酒易引發(fā)各種問題，如酒精中毒、酒后鬧事、酒后傷人、酒后被拍丑態(tài)引發(fā)矛盾。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對個(gè)別難以理解的知識點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例3】完成“稻花香集團(tuán)”首頁的頁面框架結(jié)構(gòu)。（1）設(shè)計(jì)大體的HTML結(jié)構(gòu)，代碼如圖5-13所示。（2）編寫對應(yīng)的CSS代碼，如圖5-14所示。（3）保存文件，預(yù)覽的最終效果。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)站點(diǎn)目錄正確，文件名規(guī)范。10主體容器html結(jié)構(gòu)代碼正確，縮進(jìn)正確，有必要的注釋語句，容器名稱合理。20子容器的html結(jié)構(gòu)代碼正確，縮進(jìn)正確，有必要的注釋語句，容器名稱合理。30Css樣式選擇器合理，屬性值合理。20整體頁面效果運(yùn)行效果與原圖一致。20總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評作業(yè)抽樣點(diǎn)評分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課的學(xué)習(xí)：（1）掌握頁頭、主內(nèi)容區(qū)、頁腳的容器規(guī)劃。（2）掌握頁頭、主內(nèi)容區(qū)、頁腳相應(yīng)的html及css代碼的編寫