HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.1確定研究目標(biāo)，8.2搜集相關(guān)圖文素材，8.3網(wǎng)站目錄及文件的搭建、整理該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）掌握收集網(wǎng)站相關(guān)圖文素材的方法。（2）合理規(guī)劃網(wǎng)站目錄結(jié)構(gòu)。（3）了解原型法的特點(diǎn)。能力目標(biāo)：（1）具備收集相關(guān)圖文素材的能力。（2）具備合理定義網(wǎng)站目錄結(jié)構(gòu)的能力。素養(yǎng)目標(biāo)：（1）通過(guò)項(xiàng)目驅(qū)動(dòng)學(xué)習(xí)、自主學(xué)習(xí)任務(wù)等方式，提升學(xué)生的自主學(xué)習(xí)能力，使其能夠持續(xù)跟進(jìn)技術(shù)發(fā)展。確定目標(biāo)、收集素材、項(xiàng)目搭建收集網(wǎng)站相關(guān)圖文素材的方法，原型開(kāi)發(fā)法的特點(diǎn)。通過(guò)上網(wǎng)收集指定網(wǎng)站相關(guān)圖文素材的前期工作，端正學(xué)生的學(xué)習(xí)態(tài)度。合理定義網(wǎng)站目錄結(jié)構(gòu)。通過(guò)回顧以往操作，對(duì)網(wǎng)站結(jié)構(gòu)的規(guī)范化提出更高要求。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)上一章節(jié)的練習(xí)中，總結(jié)哪些知識(shí)點(diǎn)在操作過(guò)程容易出錯(cuò)?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入期末，我們要整體完成若干個(gè)企業(yè)頁(yè)面的布局專項(xiàng)練習(xí)。通過(guò)增加難度，整合整個(gè)學(xué)期的知識(shí)點(diǎn)，掌握企業(yè)網(wǎng)站開(kāi)發(fā)的大致流程。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授8.1確定研究目標(biāo)作為初次完整地還原網(wǎng)站若干頁(yè)面的項(xiàng)目，我們搜索若干個(gè)公司官網(wǎng)做個(gè)比較，選擇頁(yè)面內(nèi)容量不太大，涉及的知識(shí)不太超過(guò)我們課程所學(xué)內(nèi)容的官網(wǎng)；從技術(shù)難度而言，要具備一定挑戰(zhàn)性，盡可能還原網(wǎng)頁(yè)布局、交互效果。最終要求完成企業(yè)網(wǎng)站首頁(yè)、某一欄目頁(yè)、詳情頁(yè)的布局?！钏颊v解：新能源車(chē)在市場(chǎng)占比越來(lái)越大，動(dòng)力電池作為新能源車(chē)的核心技術(shù)，寧德時(shí)代是全球領(lǐng)先的新能源創(chuàng)新科技公司之一。使用清潔能源作為動(dòng)力源，顯著減少了化石能源的消耗和溫室氣體的排放。這直接有助于實(shí)現(xiàn)碳中和目標(biāo)，即通過(guò)各種措施使溫室氣體凈排放為零。碳中和，也稱“凈零排放”，指人類經(jīng)濟(jì)社會(huì)活動(dòng)所必需的碳排放，通過(guò)森林碳匯和其他人工技術(shù)或工程手段加以捕集利用或封存，而使排放到大氣中的溫室氣體凈增量為零。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。8.2搜集相關(guān)圖文素材盡可能從“寧德時(shí)代”各目標(biāo)頁(yè)面中搜集對(duì)應(yīng)圖片、文字素材。圖片、文字素材收集工作要求。8.3網(wǎng)站目錄及文件的搭建、整理站點(diǎn)根目錄結(jié)構(gòu)如圖8-1所示。圖8-1站點(diǎn)根目錄新聞欄目對(duì)應(yīng)的目錄結(jié)構(gòu)如圖8-2所示。任務(wù)實(shí)施確定研究目標(biāo)，選擇要還原的網(wǎng)站頁(yè)面，并將頁(yè)面進(jìn)行截圖。收集這些頁(yè)面所需的圖片、文字素材。在本地創(chuàng)建項(xiàng)目，將圖片素材放置在對(duì)應(yīng)的文件夾中。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展無(wú)論看上去如何簡(jiǎn)單的商業(yè)網(wǎng)站頁(yè)面，對(duì)于初學(xué)者來(lái)說(shuō)還是具備一定難度。為了快速?gòu)拇缶职盐詹季值乃悸放c步驟，在本章節(jié)中，我們采用軟件編程領(lǐng)域中的“原型法”開(kāi)發(fā)策略。原型法的基本思想：首先由用戶與系統(tǒng)分析設(shè)計(jì)人員合作，在短期內(nèi)定義用戶的基本需求，開(kāi)發(fā)出一個(gè)功能不十分完善、實(shí)驗(yàn)性的、簡(jiǎn)易的應(yīng)用軟件系統(tǒng)的基本框架，稱之為原型。接著運(yùn)行這個(gè)原型，再不斷評(píng)價(jià)和改進(jìn)原型，使之逐步完善。其開(kāi)發(fā)過(guò)程是多次重復(fù)、不斷演進(jìn)的過(guò)程。?任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分頁(yè)面截圖完成三個(gè)頁(yè)面的整體頁(yè)面截圖20項(xiàng)目創(chuàng)建文件及文件夾命名及位置正確。30素材收集完成三個(gè)頁(yè)面對(duì)應(yīng)的圖文素材收集。50總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課的學(xué)習(xí)：（1） 掌握收集網(wǎng)站相關(guān)圖文素材的方法。（2） 合理規(guī)劃網(wǎng)站目錄結(jié)構(gòu)。（3） 了解原型法的特點(diǎn)。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.4制作首頁(yè)布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）完成首頁(yè)頁(yè)頭區(qū)域容器結(jié)構(gòu)。（2）頁(yè)頭區(qū)域容器對(duì)應(yīng)的css樣式。能力目標(biāo)：（1）具備制作首頁(yè)頁(yè)頭區(qū)域?qū)?yīng)的代碼編寫(xiě)能力。素養(yǎng)目標(biāo)：（1）培養(yǎng)在復(fù)雜頁(yè)面布局工作中書(shū)寫(xiě)代碼縮進(jìn)、充分注釋的習(xí)慣。初步搭建首頁(yè)頁(yè)面主要容器的HTML結(jié)構(gòu)頁(yè)頭區(qū)域容器的搭建、各容器的css樣式。通過(guò)具體案例的練習(xí)反復(fù)強(qiáng)化對(duì)容器基本樣式的熟練度。導(dǎo)航欄的實(shí)現(xiàn)。及時(shí)了解學(xué)習(xí)情況和任務(wù)進(jìn)度，調(diào)整教學(xué)策略，個(gè)別重要參數(shù)進(jìn)行引導(dǎo)、解釋。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)寧德時(shí)代官網(wǎng)的首頁(yè)，主要包含了哪些信息。回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入由于企業(yè)網(wǎng)站的結(jié)構(gòu)復(fù)雜，代碼量龐大，對(duì)于學(xué)習(xí)者而言，還原頁(yè)面并不是一件容易的事，我們可以以頁(yè)頭、主內(nèi)容區(qū)、頁(yè)腳三部分來(lái)“庖丁解?！?，一步步完成最終效果。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授頁(yè)頭區(qū)域包含的內(nèi)容。分析頁(yè)頭各部分采用的標(biāo)簽，推敲css樣式的主要屬性設(shè)置。將寧德時(shí)代首頁(yè)截圖在Photoshop或者畫(huà)圖中打開(kāi)，用線框講解，標(biāo)注容器包含關(guān)系，然后再讓學(xué)生敲入對(duì)應(yīng)html結(jié)構(gòu)代碼。學(xué)生基礎(chǔ)掌握較好的話，可以一次性將html結(jié)構(gòu)敲入；基礎(chǔ)不夠扎實(shí)的話，可先將下圖的header容器、nav-bar容器的結(jié)構(gòu)及樣式的效果調(diào)試出來(lái)，再逐步完成其余容器部分。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）編寫(xiě)頁(yè)頭區(qū)域?qū)?yīng)HTML代碼。（2）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖8-6所示。（3）保存文件，預(yù)覽的效果。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10頁(yè)頭區(qū)域html結(jié)構(gòu)容器包含關(guān)系正確，代碼正確40頁(yè)頭區(qū)域css樣式元素尺寸、位置符合要求30注釋在重要代碼行中有簡(jiǎn)要的注釋文字20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)：（1）完成首頁(yè)頁(yè)頭區(qū)域容器結(jié)構(gòu)。（2）頁(yè)頭區(qū)域容器對(duì)應(yīng)的css樣式。（3）采用原型法，因而過(guò)于細(xì)節(jié)的樣式，并不需要一步到位完成。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.4制作首頁(yè)布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）編寫(xiě)內(nèi)容區(qū)對(duì)應(yīng)的容器結(jié)構(gòu)。（2）編寫(xiě)對(duì)應(yīng)的css樣式。能力目標(biāo)：（1）具備制作內(nèi)容區(qū)多行多列布局的能力。素養(yǎng)目標(biāo)：（1）通過(guò)解決編程難題和挑戰(zhàn)性任務(wù)，增強(qiáng)學(xué)生的自信心和毅力，培養(yǎng)其面對(duì)困難不退縮的精神。制作主內(nèi)容區(qū)域布局內(nèi)容區(qū)ul容器結(jié)構(gòu)的設(shè)計(jì)。分區(qū)域解析，用已掌握的知識(shí)或熟悉的事物與重點(diǎn)相互關(guān)聯(lián)，在對(duì)比中領(lǐng)悟。li容器內(nèi)部的標(biāo)簽結(jié)構(gòu)。及時(shí)了解學(xué)習(xí)情況和任務(wù)進(jìn)度，調(diào)整教學(xué)策略，個(gè)別重要參數(shù)進(jìn)行引導(dǎo)、解釋。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)頁(yè)頭部分中導(dǎo)航條的設(shè)計(jì)，海報(bào)圖的定義?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入今天完成主要內(nèi)容區(qū)的制作，相對(duì)一些新聞門(mén)戶網(wǎng)站，寧德時(shí)代頁(yè)面的內(nèi)容區(qū)相對(duì)簡(jiǎn)單。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授分析內(nèi)容區(qū)對(duì)應(yīng)的容器結(jié)構(gòu)。分析各區(qū)域采用的標(biāo)簽。分析各容器的主要css屬性。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）編寫(xiě)主內(nèi)容區(qū)域?qū)?yīng)HTML代碼，如圖8-8所示。（2）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖8-9所示。（3）保存文件，預(yù)覽的效果。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10內(nèi)容區(qū)的主體容器容器居中，標(biāo)題及三列容器位置準(zhǔn)確20每條新聞塊時(shí)間、標(biāo)題等元素完整，結(jié)構(gòu)正確20內(nèi)容區(qū)樣式布局采用的css樣式正確，有背景色或邊框輔助設(shè)計(jì)30細(xì)節(jié)設(shè)計(jì)時(shí)間元素前面的圖標(biāo)，膠囊圖形的設(shè)計(jì)20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課的學(xué)習(xí)：（1）編寫(xiě)內(nèi)容區(qū)對(duì)應(yīng)的容器結(jié)構(gòu)。（2）編寫(xiě)對(duì)應(yīng)的css樣式。（3）內(nèi)容區(qū)的完成，意味著學(xué)習(xí)又邁進(jìn)一步，增強(qiáng)我們的自信心和毅力，面對(duì)困難不退縮。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.4制作首頁(yè)布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）頁(yè)腳區(qū)域的容器嵌套關(guān)系。（2）編寫(xiě)對(duì)應(yīng)初步的css樣式。能力目標(biāo)：（1）具備完成真實(shí)企業(yè)頁(yè)面頁(yè)腳的能力。素養(yǎng)目標(biāo)：（1）通過(guò)頁(yè)腳處的版權(quán)說(shuō)明，教育學(xué)生了解知識(shí)產(chǎn)權(quán)的重要性，尊重他人的知識(shí)產(chǎn)權(quán)成果，避免侵權(quán)行為。制作頁(yè)腳部分布局dl標(biāo)簽的應(yīng)用。特殊字符的輸入。提前講解特殊字符的前置知識(shí)，以幫助學(xué)生更好地理解和掌握教學(xué)重點(diǎn)。dl標(biāo)簽的應(yīng)用。采用講解、討論等多種教學(xué)方式，有助于學(xué)生更深入地理解教學(xué)難點(diǎn)。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)列舉一些內(nèi)容區(qū)尚未完成的細(xì)節(jié)?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入今天將進(jìn)行頁(yè)腳區(qū)域的練習(xí)。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授1.分析頁(yè)腳區(qū)對(duì)應(yīng)的容器結(jié)構(gòu)。2. 分析各區(qū)域采用的標(biāo)簽。3. 分析各容器的主要css屬性。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）編寫(xiě)頁(yè)腳區(qū)域?qū)?yīng)HTML代碼。先完成footer、map、map-left、map-right容器，設(shè)置樣式邊框或底色，優(yōu)先推薦底色。（2）其次完成map-left、map-right內(nèi)部元素的代碼。dd容器內(nèi)部的中文可以讓學(xué)生復(fù)制“資源包內(nèi)的文字素材文檔”的文字，節(jié)省時(shí)間。要求師生均充分利用快捷鍵操作加快編碼速度。（3）編寫(xiě)對(duì)應(yīng)的CSS代碼，先設(shè)置最外層容器的樣式，預(yù)覽達(dá)成預(yù)期后，逐步補(bǔ)充內(nèi)部容器的樣式。（4）保存文件，預(yù)覽的效果。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。重點(diǎn)講解容器的主要屬性，裝飾性的屬性可以逐步補(bǔ)全。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10主體容器左右布局，右側(cè)容器分5列布局20頁(yè)腳導(dǎo)航（站點(diǎn)地圖）采用dl標(biāo)簽設(shè)計(jì)，代碼正確20頁(yè)腳樣式布局采用的css樣式正確，有背景色或邊框輔助設(shè)計(jì)30細(xì)節(jié)設(shè)計(jì)時(shí)間元素前面的圖標(biāo)，膠囊圖形的設(shè)計(jì)20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)：（1） 頁(yè)腳區(qū)域的容器嵌套關(guān)系。（2） 編寫(xiě)對(duì)應(yīng)初步的css樣式。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.4制作首頁(yè)布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）完成頁(yè)頭、內(nèi)容區(qū)、頁(yè)腳區(qū)域的靜態(tài)CSS代碼的優(yōu)化。（2）完成頁(yè)面中具備交互效果的代碼優(yōu)化，包括：盒子陰影特效、導(dǎo)航交互特效。能力目標(biāo)：（1）具備利用原型法，逐步優(yōu)化頁(yè)面效果的能力。素養(yǎng)目標(biāo)：（1）通過(guò)原型法，強(qiáng)調(diào)在編程細(xì)節(jié)上追求卓越和完美，引導(dǎo)學(xué)生樹(shù)立精益求精的工匠精神。首頁(yè)效果優(yōu)化盒子陰影特效、導(dǎo)航交互特效。提前講解陰影參數(shù)等知識(shí)，在案例中進(jìn)行實(shí)際應(yīng)用。語(yǔ)言選擇區(qū)域的代碼優(yōu)化、搜索區(qū)域的設(shè)計(jì)。通過(guò)教師講解思路，讓學(xué)生在制作思路上有所擴(kuò)展。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)頁(yè)腳區(qū)域的欄目導(dǎo)航通常也稱之為站點(diǎn)地圖，反映著整個(gè)網(wǎng)站的欄目結(jié)構(gòu)。為用戶提供了一個(gè)清晰、簡(jiǎn)潔的網(wǎng)站結(jié)構(gòu)概覽，幫助他們快速找到所需的信息。站點(diǎn)地圖（Sitemap）在搜索引擎優(yōu)化（SEO）中具有多重重要意義。有助于確保所有頁(yè)面都能被用戶或搜索引擎爬蟲(chóng)有效訪問(wèn)，從而提高網(wǎng)站在搜索引擎中的可見(jiàn)性和排名。回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入從之前的頁(yè)頭、主內(nèi)容、頁(yè)腳部分的項(xiàng)目進(jìn)展來(lái)看，我們依然有許多樣式細(xì)節(jié)并沒(méi)有完成，頁(yè)面看上去甚至有點(diǎn)丑陋。當(dāng)我們完成框架布局后，接下來(lái)就要對(duì)細(xì)節(jié)進(jìn)行優(yōu)化設(shè)計(jì)。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授8.4.2原型優(yōu)化階段這一階段，我們分別從頁(yè)頭、主內(nèi)容、頁(yè)腳部分，一點(diǎn)點(diǎn)完善元素的外觀表現(xiàn)，但第一輪的優(yōu)化，我們還不打算涉及到動(dòng)態(tài)交互效果?！?思政講解：設(shè)計(jì)師不僅要有敏銳的藝術(shù)觸覺(jué)，更要有對(duì)細(xì)節(jié)的極致追求。從色彩搭配到布局規(guī)劃，從字體選擇到交互設(shè)計(jì)，每一步都需精雕細(xì)琢，力求完美。設(shè)計(jì)師們需要像匠人一樣，耐心打磨每一個(gè)元素，不斷測(cè)試與優(yōu)化，確保網(wǎng)頁(yè)在視覺(jué)上既美觀大方，又能在功能上滿足用戶需求。他們深知，一個(gè)細(xì)微的改動(dòng)，或許就能帶來(lái)用戶體驗(yàn)的顯著提升。正是這種對(duì)卓越的不懈追求，讓網(wǎng)頁(yè)設(shè)計(jì)作品煥發(fā)出獨(dú)特的魅力，成為連接用戶與信息的橋梁。精益求精的工匠精神，正是網(wǎng)頁(yè)設(shè)計(jì)師們不斷攀登藝術(shù)與技術(shù)高峰的動(dòng)力源泉。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施1.靜態(tài)CSS代碼的優(yōu)化CSS代碼盡可能把通用樣式、頁(yè)頭樣式、內(nèi)容區(qū)樣式、頁(yè)腳樣式對(duì)應(yīng)代碼集中放置。（1）頁(yè)頭區(qū)樣式的微調(diào)，代碼如圖8-14所示。（2）內(nèi)容區(qū)樣式的微調(diào)，代碼如圖8-15所示。（3）頁(yè)腳區(qū)樣式的微調(diào)，代碼如圖8-16所示。2.交互效果的優(yōu)化（1）盒子陰影樣式box-shadow，能為元素添加投影效果。（2）導(dǎo)航欄的級(jí)聯(lián)菜單效果：先完成光標(biāo)落在導(dǎo)航菜單時(shí)背景色、字體顏色改變的效果。修改HTML對(duì)應(yīng)代碼，先制作一個(gè)子菜單，做好效果后以此類推。調(diào)整對(duì)應(yīng)的CSS代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展3.語(yǔ)言選擇區(qū)域、搜索區(qū)域的設(shè)計(jì)思路。語(yǔ)言選擇區(qū)域，由于盒子面積跟前面導(dǎo)航子菜單面積樣式很多不一樣，加上代碼量現(xiàn)在有點(diǎn)多，我們建議不要采用復(fù)用樣式，還是另外再申明一個(gè)新樣式可能效率更高。搜索區(qū)域的實(shí)現(xiàn)，我們就停留在構(gòu)思就可以了，不要求完成對(duì)應(yīng)效果。這里大體說(shuō)一下設(shè)計(jì)思路：第一個(gè)思路，按照前面子菜單項(xiàng)的做法。第二個(gè)思路,使用js腳本，通過(guò)點(diǎn)擊“搜索”的放大鏡圖標(biāo)，將原來(lái)隱藏的子菜單容器顯示出來(lái)。當(dāng)然這需要百度搜索一下相關(guān)知識(shí)，搜索關(guān)鍵詞可以為“javascript顯示指定元素”，也可以簡(jiǎn)寫(xiě)成“js顯示指定元素”。任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分頁(yè)頭區(qū)優(yōu)化元素定位準(zhǔn)確，外觀與原圖一致。20內(nèi)容區(qū)優(yōu)化元素定位準(zhǔn)確，外觀與原圖一致。10頁(yè)腳區(qū)優(yōu)化元素定位準(zhǔn)確，外觀與原圖一致。10盒子陰影特效交互效果符合要求，屬性值合理。30導(dǎo)航交互特效交互效果符合要求，屬性值合理。30總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課的學(xué)習(xí)，要求我們：（1）完成頁(yè)頭、內(nèi)容區(qū)、頁(yè)腳區(qū)域的靜態(tài)CSS代碼的優(yōu)化。（2）完成頁(yè)面中具備交互效果的代碼優(yōu)化，包括：盒子陰影特效、導(dǎo)航交互特效。（3）應(yīng)用原型法，逐步優(yōu)化頁(yè)面效果，強(qiáng)調(diào)在編程細(xì)節(jié)上追求卓越和完美，樹(shù)立精益求精的工匠精神。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.4制作首頁(yè)布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：完成最終代碼的整理工作，添加必要注釋。能力目標(biāo)：具備刪去無(wú)關(guān)代碼，刪除輔助用的線框和背景色的代碼整理能力。素養(yǎng)目標(biāo)：在技術(shù)的細(xì)節(jié)上追求卓越和完美，培養(yǎng)學(xué)生的工匠精神和對(duì)技術(shù)的精益求精態(tài)度。代碼整理工作刪除輔助用的線框、背景色。通過(guò)相關(guān)案例的操作，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)輔助參數(shù)的重要。刪除輔助用的線框時(shí)導(dǎo)致細(xì)微位置、尺寸的變化，要求在相關(guān)屬性進(jìn)行糾正。刪除輔助參數(shù)時(shí)導(dǎo)致布局的錯(cuò)位，讓學(xué)生自行進(jìn)行糾正。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)交互效果優(yōu)化過(guò)程中，我們也應(yīng)該了解網(wǎng)頁(yè)交互效果設(shè)計(jì)需要綜合考慮若干因素，比如用戶需求、簡(jiǎn)潔性、一致性、可用性、響應(yīng)速度、視覺(jué)設(shè)計(jì)、人性化設(shè)計(jì)以及持續(xù)迭代與優(yōu)化等多個(gè)方面。回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入網(wǎng)頁(yè)代碼整理工作的意義在于提高代碼的可讀性、可維護(hù)性和性能，具體體現(xiàn)在以下幾個(gè)方面：（1）提高可讀性：通過(guò)合理的縮進(jìn)、空行和注釋，代碼的結(jié)構(gòu)更加清晰，其他開(kāi)發(fā)者（或未來(lái)的你）能夠更容易地理解代碼的邏輯和功能。（2）減少錯(cuò)誤：整潔的代碼更容易發(fā)現(xiàn)和修復(fù)錯(cuò)誤，因?yàn)榇a的邏輯和結(jié)構(gòu)更加明確。（3）便于調(diào)試：當(dāng)出現(xiàn)問(wèn)題時(shí)，整潔的代碼可以更快地定位問(wèn)題所在，減少調(diào)試時(shí)間。（4）便于協(xié)作：團(tuán)隊(duì)開(kāi)發(fā)時(shí)，整潔的代碼可以提高協(xié)作效率，減少因代碼風(fēng)格不一致導(dǎo)致的溝通成本。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授8.4.3代碼整理階段將輔助判定元素區(qū)域的背景色、邊框去除，檢查效果是否達(dá)成預(yù)期，最后將轉(zhuǎn)外聯(lián)樣式，更新圖片路徑。1.整理最終的HTML代碼。2.整理最終的CSS代碼。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施按提供的代碼參考，仔細(xì)檢查代碼，并整理縮減、添加注釋。參考步驟：（1）檢查錯(cuò)誤點(diǎn)。（2）增加背景色觀察錯(cuò)誤原因。排除后刪除背景色。（3）檢查個(gè)別屬性值是否合理。（4）添加必要的注釋。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分錯(cuò)誤排除手段能借助邊框、背景色觀察錯(cuò)誤原因30圖片呈現(xiàn)正常顯示，無(wú)明顯縮放失真。10Css外聯(lián)能將css代碼剝離到單獨(dú)文件。30整體效果效果與原圖基本一致。30總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)，要求我們：（1）了解代碼的整理工作，能正確刪去冗余代碼，刪除輔助用的線框和背景色。（2）選擇必要的代碼行中添加注釋。（3）在技術(shù)的細(xì)節(jié)上追求卓越和完美，培養(yǎng)工匠精神和對(duì)技術(shù)的精益求精態(tài)度。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.5設(shè)計(jì)一級(jí)欄目頁(yè)面該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）完成一級(jí)頁(yè)面的頁(yè)頭部分的制作。（2）掌握代碼復(fù)用的操作步驟。（3）修改海報(bào)區(qū)代碼。能力目標(biāo)：（1）強(qiáng)化代碼復(fù)用的意識(shí)，包括“快速?gòu)?fù)制、粘貼、插入技巧”、“樣式的復(fù)用”、“選擇器的并列申明”、“內(nèi)部樣式表轉(zhuǎn)外部樣式表”等。素養(yǎng)目標(biāo)：（1）在面對(duì)復(fù)雜問(wèn)題時(shí)，引導(dǎo)學(xué)生學(xué)會(huì)分解問(wèn)題、制定解決方案并實(shí)施驗(yàn)證的策略思維。一級(jí)欄目頁(yè)的制作更新海報(bào)區(qū)代碼。通過(guò)相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。復(fù)用首頁(yè)中有用的代碼及樣式。教學(xué)中引導(dǎo)學(xué)生自主探究、主動(dòng)思考，通過(guò)自己的思考和探究來(lái)理解和掌握難點(diǎn)。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)如何鏈接外置的Css文件？使用的標(biāo)簽的格式。外置樣式與內(nèi)置樣式相比，誰(shuí)的優(yōu)先級(jí)別更高一些？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入今天要完成“寧德時(shí)代”官網(wǎng)的“新聞”欄目頁(yè)，先登錄對(duì)應(yīng)頁(yè)面觀察頁(yè)面效果，搜集相關(guān)的圖文素材后開(kāi)始設(shè)計(jì)。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授8.5.1準(zhǔn)備工作本節(jié)的目標(biāo)是完成“寧德時(shí)代”官網(wǎng)的“新聞”欄目頁(yè)，先登錄對(duì)應(yīng)頁(yè)面觀察頁(yè)面效果。將所需的圖片、圖標(biāo)保存到news的img文件夾中，如圖8-28所示。8.5.2復(fù)用首頁(yè)中有用的代碼及樣式在Hbuilder中把index.html首頁(yè)的代碼全部復(fù)制到“news.html”，保留頁(yè)頭、頁(yè)腳區(qū)的代碼，刪除掉“內(nèi)容區(qū)”的HTML代碼。由于內(nèi)容區(qū)的布局版面完全不同，如果內(nèi)容區(qū)的容器依然叫“content”的話，通過(guò)外部樣式表勢(shì)必會(huì)把首頁(yè)的content樣式激活，所以我們需要將該頁(yè)面的內(nèi)容區(qū)容器class名稱修改成content-news。此外，還需要修改外部樣式表的路徑。8.5.3更新海報(bào)區(qū)代碼 由于index.css保留了海報(bào)區(qū)背景圖的設(shè)定，而一級(jí)頁(yè)面的海報(bào)區(qū)的元素、布局發(fā)生變化。所以我們可以采用在一級(jí)頁(yè)面news.html寫(xiě)上同樣名稱的內(nèi)部樣式，覆蓋掉index.css的海報(bào)區(qū)樣式。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）將所需的圖片、圖標(biāo)保存到news的img文件夾中。（2）在Hbuilder中把index.html首頁(yè)的代碼全部復(fù)制到“news.html”，保留頁(yè)頭、頁(yè)腳區(qū)的代碼，刪除掉“內(nèi)容區(qū)”的HTML代碼。將該頁(yè)面的內(nèi)容區(qū)容器class名稱修改成content-news。此外，還需要修改外部樣式表的路徑。（3）更新海報(bào)區(qū)代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10代碼復(fù)用能引用外部樣式。30代碼修改根據(jù)實(shí)際效果修改海報(bào)區(qū)代碼。40頁(yè)頭部分效果頁(yè)頭部分與效果基本一致。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)：（1）掌握代碼復(fù)用的操作步驟。（2）修改海報(bào)區(qū)代碼。（3）在面對(duì)復(fù)雜問(wèn)題時(shí)，學(xué)會(huì)分解問(wèn)題、制定解決方案并實(shí)施驗(yàn)證。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.5設(shè)計(jì)一級(jí)欄目頁(yè)面該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。（2）翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置。能力目標(biāo)：（1）具備多種思路完成每個(gè)新聞項(xiàng)容器的交互效果的能力。（2）具備完成翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置的能力。素養(yǎng)目標(biāo)：（1）通過(guò)實(shí)際案例、項(xiàng)目實(shí)踐等方式，讓學(xué)生將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。完成一級(jí)頁(yè)面中內(nèi)容區(qū)的制作。主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置，翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置。采用深加工法將復(fù)雜的知識(shí)點(diǎn)或難點(diǎn)進(jìn)行分解，找出其中的技術(shù)難點(diǎn)，分別進(jìn)行分析。每個(gè)新聞項(xiàng)容器的交互效果的制作。教學(xué)中引導(dǎo)學(xué)生自主探究、主動(dòng)思考，通過(guò)自己的思考和探究來(lái)理解和掌握難點(diǎn)。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)外部樣式的導(dǎo)入語(yǔ)句?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入上節(jié)課已經(jīng)完成頁(yè)頭部分，緊接著開(kāi)始完成內(nèi)容區(qū)的設(shè)計(jì)。與首頁(yè)版式有點(diǎn)類似，內(nèi)容區(qū)主要是一些圖文元素，增加了一個(gè)翻頁(yè)功能。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授內(nèi)容區(qū)的效果分析，容器結(jié)構(gòu)采用的標(biāo)簽。翻頁(yè)功能區(qū)采用的標(biāo)簽，主要采用的樣式屬性。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施8.5.4內(nèi)容區(qū)的設(shè)計(jì)（1）完成容器大體布局，對(duì)應(yīng)的HTML代碼如圖8-37所示。對(duì)應(yīng)的CSS代碼如圖8-38所示。（2）先給第一個(gè)li容器添加元素，完成效果后給其他li也添加相同內(nèi)容，期間采用復(fù)制完整的第一個(gè)容器對(duì)應(yīng)的代碼，再修改圖片及文字內(nèi)容，提高編寫(xiě)效率。對(duì)應(yīng)的CSS代碼如圖8-40所示。（3）制作圖片區(qū)域的交互效果。思路三：用并列的兩個(gè)1px高的空白容器，一個(gè)灰色背景色，一個(gè)藍(lán)色背景色，它倆采用絕對(duì)定位方式實(shí)現(xiàn)位置的重疊，hover狀態(tài)時(shí)把藍(lán)色容器顯示出來(lái)，并將width屬性做一個(gè)過(guò)渡效果。對(duì)應(yīng)的CSS代碼如圖8-42所示。（4）滾屏?xí)r，下方的圖片內(nèi)容卻覆蓋到導(dǎo)航欄上的異常，在樣式中申明頂部導(dǎo)航容器的z-index為一個(gè)足夠大的數(shù)值。（5）制作“頁(yè)碼”部分。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10新聞子項(xiàng)布局結(jié)構(gòu)正確30交互效果準(zhǔn)確，與效果一致。30翻頁(yè)按鈕容器對(duì)應(yīng)代碼正確10樣式呈現(xiàn)效果一致。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)：（1）主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。（2）翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置。（3）具備多種思路完成每個(gè)新聞項(xiàng)容器的交互效果的能力。（4）具備完成翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置的能力。（5）通過(guò)實(shí)際案例、項(xiàng)目實(shí)踐等方式，讓學(xué)生將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.5設(shè)計(jì)一級(jí)欄目頁(yè)面該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）了解常見(jiàn)外部樣式表的命名習(xí)慣。（2）將需要復(fù)用的css樣式保存到外部樣式表能力目標(biāo)：（1）具備合理拆分內(nèi)部樣式到外部樣式表的思維與技能。素養(yǎng)目標(biāo)：（1）在軟件開(kāi)發(fā)過(guò)程中，引導(dǎo)學(xué)生關(guān)注用戶需求和使用體驗(yàn)，培養(yǎng)其用戶導(dǎo)向的思維方式。CSS代碼的整理及樣式表外聯(lián)常見(jiàn)外部樣式表的命名。通過(guò)介紹常見(jiàn)樣式表命名，引導(dǎo)學(xué)生自行應(yīng)用到相關(guān)練習(xí)。將頁(yè)面部分需要復(fù)用的css樣式保存到外部樣式表。將全部樣式進(jìn)行分解，通過(guò)提問(wèn)、討論等方式引導(dǎo)學(xué)生找出所需的樣式。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)回憶翻頁(yè)按鈕中采用的標(biāo)簽。倘若為每個(gè)按鈕增加交互效果，可以采用哪些特效？分別可以使用什么樣式來(lái)達(dá)成預(yù)期？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入我們反復(fù)強(qiáng)調(diào)，代碼的整理，有利于發(fā)現(xiàn)細(xì)節(jié)紕漏，同時(shí)對(duì)知識(shí)點(diǎn)的鞏固，也有一定的幫助。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授8.5.5CSS代碼的整理及樣式表外聯(lián)（1）去除css中的輔助邊框、背景底色，body容器調(diào)整背景色為白色。代碼如圖8-51所示。圖8-51CSS代碼（2）將部分樣式轉(zhuǎn)到外部的樣式表文件中，考慮到有些布局樣式，在其他頁(yè)面中也可以派上用場(chǎng)。比如新聞列表項(xiàng)的樣式，可能極少機(jī)會(huì)在其他欄目中用的上。但頁(yè)碼區(qū)樣式，只要存在需要翻頁(yè)的情況，比如“解決方案”、“品牌”這些頁(yè)面量較多的欄目，就極大幾率也采用同樣的頁(yè)碼樣式。這樣理解下來(lái)，我們的頁(yè)碼區(qū)樣式就可以成為“公共”樣式，在許多網(wǎng)站中，會(huì)采用common.css來(lái)存儲(chǔ)公共樣式，另外也可以采用如表8-1所示的分類，拆開(kāi)來(lái)存儲(chǔ)到不同的樣式文件中。強(qiáng)調(diào)一個(gè)“拆”字，拆成不同規(guī)格的“積木”組件，方便以后反復(fù)拼成各種“布局作品”。用途文件名稱用途文件名稱主要的樣式表master.css布局，版面layout.css專欄columns.css文字font.css打印樣式print.css主題themes.css聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）在站點(diǎn)根目錄下css文件夾中，創(chuàng)建common.css，如圖8-52所示。（2）把頁(yè)碼區(qū)樣式復(fù)制到common.css，并更新圖片路徑，如圖8-53所示。（3）在news.html文件中追加一條鏈接指向common.css，如圖8-54所示。（4）將所有文件保存，預(yù)覽效果是否達(dá)到預(yù)期。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分代碼整理編碼習(xí)慣良好。20查漏補(bǔ)缺預(yù)覽效果達(dá)成預(yù)期。40樣式外置合理挑選能復(fù)用的css樣式添加到外部樣式表。40總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)：（1）了解常見(jiàn)外部樣式表的命名習(xí)慣。（2）將需要復(fù)用的css樣式保存到外部樣式表（3）具備合理拆分內(nèi)部樣式到外部樣式表的思維與技能。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.6設(shè)計(jì)詳情頁(yè)布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）完成主要框架的代碼復(fù)用。（2）頁(yè)頭區(qū)結(jié)構(gòu)和樣式的修改。（3）定義內(nèi)容區(qū)容器結(jié)構(gòu)，并添加圖文元素。能力目標(biāo)：（1）具備代碼復(fù)用的意識(shí)與操作能力。（2）具備重定義頁(yè)頭區(qū)結(jié)構(gòu)及樣式的能力。（3）具備新聞圖文排版的能力。素養(yǎng)目標(biāo)：（1）通過(guò)對(duì)新能源的認(rèn)識(shí)，引導(dǎo)學(xué)生關(guān)注能源消耗和資源利用問(wèn)題，培養(yǎng)其環(huán)保意識(shí)和社會(huì)責(zé)任感。制作詳情頁(yè)的頁(yè)頭和內(nèi)容區(qū)域。頁(yè)頭區(qū)的設(shè)計(jì)。通過(guò)代碼復(fù)用，教師提示并引導(dǎo)學(xué)生對(duì)個(gè)別參數(shù)進(jìn)行修正。內(nèi)容區(qū)的布局與內(nèi)容制作。及時(shí)了解學(xué)習(xí)情況和任務(wù)進(jìn)度，調(diào)整教學(xué)策略，個(gè)別重要參數(shù)進(jìn)行引導(dǎo)、解釋。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)新聞欄目頁(yè)中，內(nèi)容區(qū)的設(shè)計(jì)主要采用的標(biāo)簽，主要的樣式?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入當(dāng)完成新聞欄目頁(yè)后，瀏覽者點(diǎn)擊某條新聞，就可以瀏覽具體的新聞資訊，這個(gè)跳轉(zhuǎn)后的頁(yè)面就是我們本次課要完成的新聞詳情頁(yè)。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授本節(jié)的目標(biāo)是完成“寧德時(shí)代”官網(wǎng)的“新聞”欄目頁(yè)的其中一個(gè)頁(yè)面，如圖8-57所示。先登錄對(duì)應(yīng)頁(yè)面觀察頁(yè)面效果，同時(shí)將所需的圖片、圖標(biāo)保存到news的img文件夾中。觀察到詳情頁(yè)的海報(bào)區(qū)沒(méi)有了圖片，反而是文章的標(biāo)題和日期放在原來(lái)海報(bào)區(qū)的位置上。從結(jié)構(gòu)的角度出發(fā)，我們不能認(rèn)為只是將背景圖取消，文章標(biāo)題和日期放在頁(yè)頭的容器中，這樣處理的話，在內(nèi)容區(qū)容器的文章豈不是沒(méi)有了標(biāo)題？聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施8.6.1復(fù)用首頁(yè)中的相關(guān)代碼在news文件夾下新建一個(gè)名為“news-2024-0001.html”的文件，把index.html代碼復(fù)制到該文件中，得到頁(yè)頭、頁(yè)腳區(qū)域的布局效果。修改一下<title>標(biāo)簽內(nèi)容，把css樣式表路徑更換一下，并刪除內(nèi)容區(qū)代碼。8.6.2頁(yè)頭區(qū)的設(shè)計(jì)建議大家同時(shí)打開(kāi)index.css，快速的查找目標(biāo)樣式，也同樣可以快速?gòu)?fù)制到正在編寫(xiě)的HTML文件中，操作如圖8-59所示。文件預(yù)覽后，我們發(fā)現(xiàn)由于導(dǎo)航欄容器的底色一直是白色，這也首頁(yè)不同。正確的情況下，logo對(duì)應(yīng)圖片默認(rèn)應(yīng)該是藍(lán)色logo圖。 在news-2004-0001.html修正圖片路徑，如圖8-60所示。不斷修改樣式，不斷瀏覽測(cè)試觀察效果。8.6.3內(nèi)容區(qū)容器的布局我們將內(nèi)容區(qū)的容器id命名為"content-detail"，搭建基本的結(jié)構(gòu)，代碼如圖8-62所示。8.6.4往內(nèi)容區(qū)添加圖文混排內(nèi)容該詳情頁(yè)的元素還算很簡(jiǎn)單，沒(méi)有像門(mén)戶網(wǎng)站的文章詳情頁(yè)包含了大量的外部鏈接、各種分享圖標(biāo)、大堆的友情鏈接，只需要完成文章標(biāo)題，發(fā)布日期、小節(jié)標(biāo)題、圖片、圖片標(biāo)注這些元素的樣式定義。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10代碼