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)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。2本章擴(kuò)展練習(xí)該班人數(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）強(qiáng)化本章知識(shí)點(diǎn)的訓(xùn)練。（2）加強(qiáng)較復(fù)雜布局案例的練習(xí)。能力目標(biāo)：（1）具備分析容器關(guān)系，采用標(biāo)簽的能力。（2）具備根據(jù)效果及html結(jié)構(gòu)編寫準(zhǔn)確的css樣式的能力。素養(yǎng)目標(biāo)：（1）通過無代碼參考方式，鼓勵(lì)學(xué)生敢于嘗試，培養(yǎng)他們的創(chuàng)新意識(shí)和創(chuàng)造力，為解決實(shí)際問題提供獨(dú)特的視角和解決方案。（2）通過解決編程難題和挑戰(zhàn)性任務(wù)，增強(qiáng)學(xué)生的自信心和毅力，培養(yǎng)其面對(duì)困難不退縮的精神。（3）引導(dǎo)學(xué)生學(xué)會(huì)質(zhì)疑、分析和評(píng)價(jià)問題，培養(yǎng)其批判性思維能力。布局之?dāng)U展練習(xí)絕對(duì)定位，標(biāo)準(zhǔn)流布局結(jié)構(gòu)，浮動(dòng)流布局結(jié)構(gòu)。通過綜合運(yùn)用相對(duì)定位、浮動(dòng)設(shè)置等知識(shí)，讓學(xué)生得以鞏固技能。利用綜合知識(shí)完成實(shí)際頁(yè)面效果。通過介紹主要步驟，引導(dǎo)學(xué)生完成相關(guān)練習(xí)。運(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í)點(diǎn)評(píng)上次課學(xué)生作業(yè)，對(duì)于“選項(xiàng)卡”交互樣式、z-index屬性進(jìn)行重點(diǎn)檢查?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入在大部分網(wǎng)頁(yè)的設(shè)計(jì)中，新聞公告功能的容器會(huì)放置在海報(bào)欄下方的主內(nèi)容區(qū)中，但亦有少數(shù)派走出另外一條布局思路，比如本次課介紹的布局效果。網(wǎng)頁(yè)設(shè)計(jì)強(qiáng)調(diào)“設(shè)計(jì)”兩字，只要是合理的布局，有重復(fù)理由支撐的布局想法，都可以大膽去嘗試。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授【練習(xí)1】完成如圖5-69所示的“最新要聞”區(qū)域浮在海報(bào)上的效果?！窘處熖崾窘鉀Q步驟】（1）容器結(jié)構(gòu)設(shè)置為：海報(bào)區(qū)為大容器，包含新聞公告區(qū)。（2）如果采用海報(bào)圖為背景圖方式，新聞公告容器采用標(biāo)準(zhǔn)流布局。如果將海報(bào)圖直接插入到容器內(nèi)，新聞公告容器采用定位流布局。（3）繼續(xù)將新聞公告容器拆分成若干子容器。（4）編寫對(duì)應(yīng)的html結(jié)構(gòu)。（5）編寫對(duì)應(yīng)的css代碼。注意不透明度屬性的應(yīng)用?！揪毩?xí)2】運(yùn)用標(biāo)準(zhǔn)流、浮動(dòng)流、定位流布局知識(shí)，完成如圖5-70所示效果。

【教師提示解決步驟】容器結(jié)構(gòu)設(shè)置為：整體為大容器?？梢圆捎米笥腋?dòng)兩個(gè)容器方式，也可以采用所有子項(xiàng)左浮動(dòng)方式進(jìn)行布局。采用的標(biāo)簽。每個(gè)標(biāo)簽里面又繼續(xù)劃分子標(biāo)簽結(jié)構(gòu)。采用絕對(duì)定位方式解決左側(cè)圖片上方日期文字的疊加。寫樣式時(shí)重點(diǎn)關(guān)注各容器之間的間距，不同層次的灰色過渡。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施教師與學(xué)生討論案例，對(duì)頁(yè)面的靜態(tài)效果進(jìn)行分析，明確哪些內(nèi)容時(shí)重點(diǎn)關(guān)注的。討論或提示案例采用的標(biāo)簽及其容器結(jié)構(gòu)關(guān)系。教師提示案例樣式中，要重點(diǎn)留意的屬性。學(xué)生根據(jù)提示或討論結(jié)果，上機(jī)進(jìn)行html結(jié)構(gòu)代碼的輸入。若干分鐘后，檢查學(xué)生書寫的html結(jié)構(gòu)是否正確。簡(jiǎn)單指出錯(cuò)誤后，繼續(xù)讓學(xué)生敲入css樣式代碼。學(xué)生運(yùn)行頁(yè)面，不斷調(diào)試代碼。上機(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)站點(diǎn)目錄正確，文件名規(guī)范。10html結(jié)構(gòu)代碼正確，縮進(jìn)正確，有必要的注釋語(yǔ)句，容器名稱合理。30Css樣式選擇器合理，屬性值合理。40整體頁(yè)面效果運(yùn)行效果與原圖一致。20總分說明：評(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é)通過本課的學(xué)習(xí)：（1）完成指定的較復(fù)雜的案例布局效果。（2）鞏固容器關(guān)系分析，標(biāo)簽定義的能力。（3）加強(qiáng)html結(jié)構(gòu)、css樣式的編寫能力。（4）通過無代碼參考方式，鼓勵(lì)學(xué)生敢于嘗試編程難題和挑戰(zhàn)性任務(wù)，增強(qiáng)學(xué)生的自