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知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。26.3搭建項(xiàng)目并進(jìn)行頁面布局該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識(shí)目標(biāo)：（1）<section>區(qū)塊標(biāo)簽搭建主體框架（2）制作頁面時(shí)要嚴(yán)格做到的標(biāo)準(zhǔn)要求。（3）完成第一、二<section>區(qū)塊對(duì)應(yīng)的代碼和樣式。能力目標(biāo)：（1）具備一定的準(zhǔn)職業(yè)人的項(xiàng)目開發(fā)能力。（2）具備用語義化角度思考所選用標(biāo)簽的思維定勢(shì)。素養(yǎng)目標(biāo)：（1）通過實(shí)際案例、項(xiàng)目實(shí)踐等方式，讓學(xué)生將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。搭建項(xiàng)目并進(jìn)行頁面布局——版塊一、二的設(shè)計(jì)頁面布局工作標(biāo)準(zhǔn)及要求。分步驟講解案例中圍繞重難點(diǎn)的容器布局知識(shí)，通過練習(xí)鞏固重點(diǎn)知識(shí)。盡可能多角度、語義化地思考所選用的標(biāo)簽。通過教師引導(dǎo)學(xué)生思考各標(biāo)簽語義來明確最適合的標(biāo)簽。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(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é)生自我評(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à)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)切片工作要注意的任務(wù)要求：（1）建立參考線，力求包裹目標(biāo)對(duì)象的同時(shí)，面積較小。（2）切片貼附參考線，運(yùn)用快捷鍵快速復(fù)制，光標(biāo)鍵精確移動(dòng)。（3）給切片命名，名稱符合英文要求。回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入接下來利用獲取的素材來構(gòu)建網(wǎng)頁。站點(diǎn)根目錄文件夾命名為“site”或者“website”，里面包含如圖6-11所示的“css”、“images”兩個(gè)文件夾，將切圖得到的圖片放入在images文件夾中。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授在hbuilder中“文件”-“打開目錄”，選擇site文件夾，然后新建一個(gè)index.html頁面，開始搭建頁面。整體觀察一下，該頁面屬于單頁面網(wǎng)頁，意思是這個(gè)網(wǎng)站基本就是這一個(gè)網(wǎng)頁，通常用于信息量較小、且經(jīng)常不會(huì)更新的場(chǎng)景，比如個(gè)人求職類頁面。這個(gè)頁面從效果圖來看，基本上屬于文字類頁面，且頁頭劃分的不是很明確，有點(diǎn)類似長篇文章結(jié)構(gòu)，所以我們將用<section>區(qū)塊標(biāo)簽設(shè)計(jì)，當(dāng)然也可以采用傳統(tǒng)的<div>標(biāo)簽搭建主要框架。注意：在制作完整的一個(gè)頁面時(shí)，要嚴(yán)格做到以下幾點(diǎn)要求：用注釋標(biāo)注各大容器的結(jié)構(gòu)和css樣式范圍。盡可能的簡化HTML結(jié)構(gòu)，不添加非必須的父容器。定義通用樣式，可以省去許多代碼量。寫css選擇器時(shí)，盡量在每個(gè)選擇器前面加上統(tǒng)一的父級(jí)id或class，看起來會(huì)非常整齊，便于維護(hù)。每個(gè)容器應(yīng)該填寫height屬性，以免出現(xiàn)坍塌。給大的容器添加顏色各異的底色，這會(huì)有助于及時(shí)判定異常所在。寫完大的容器對(duì)應(yīng)的HTML代碼后，及時(shí)調(diào)試看結(jié)果，結(jié)果無誤后在hbuilder中將這完成的部分代碼進(jìn)行折疊，將會(huì)省去許多滾屏?xí)r間。☆思政講解：以上都可以視為崗位工作的規(guī)矩，這些規(guī)矩看上去約束性很強(qiáng)，但從維護(hù)、返工的角度考慮，這些規(guī)矩實(shí)際上是對(duì)從業(yè)人員的一種幫助、保護(hù)。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）搭建第一個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-12所示。（2）編寫對(duì)應(yīng)css樣式代碼，如圖6-13所示。（3）搭建第二個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-14所示。（4）編寫對(duì)應(yīng)的CSS代碼，如圖6-15所示。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20版塊一容器結(jié)構(gòu)合理，代碼書寫規(guī)范20Css樣式屬性值合理，效果接近效果圖20版塊二容器結(jié)構(gòu)合理，代碼書寫規(guī)范20Css樣式屬性值合理，效果接近效果圖20總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過本課的學(xué)習(xí)：（1）<section>區(qū)塊標(biāo)簽搭建主體框架（2）制作頁面時(shí)要嚴(yán)格做到的標(biāo)準(zhǔn)要求。（3）完成第