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)效果。23.1~2盒子模型特點(diǎn)和標(biāo)準(zhǔn)盒模型該班人數(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)：具備將因坍塌原因?qū)е虏季只靵y的網(wǎng)頁(yè)進(jìn)行修復(fù)的能力。素養(yǎng)目標(biāo)：通過(guò)嚴(yán)格對(duì)容器高度進(jìn)行定義，強(qiáng)調(diào)編程的嚴(yán)謹(jǐn)性。盒子模型相關(guān)案例練習(xí)浮動(dòng)對(duì)頁(yè)面元素的影響。通過(guò)相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。解決容器塌陷的異常布局。通過(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í)圖片尺寸大于容器尺寸時(shí)，可以考慮哪些方式來(lái)處理？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入同學(xué)們?cè)诰毩?xí)過(guò)程中，經(jīng)常碰到這種情況：明明看上去一樣的做法，html結(jié)構(gòu)正確，css中主要屬性也寫(xiě)上去了，效果卻異?；靵y。這大部分的原因來(lái)自于容器的高度未申明，導(dǎo)致有些元素浮動(dòng)后，造成容器塌陷的情況。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授常見(jiàn)布局異常——容器塌陷問(wèn)題。【增加課堂趣味】熊貓是雜食性動(dòng)物還是素食性動(dòng)物？我國(guó)目前大約有多少只熊貓？熊貓一出生有多重？短距離情況下，人和熊貓哪個(gè)跑得快？1.分析問(wèn)題的起因。在標(biāo)準(zhǔn)流布局下容器不設(shè)置height屬性，可以由子元素?fù)伍_(kāi)高度，但如果子元素使用了浮動(dòng)或定位方式后，就會(huì)出現(xiàn)該父容器高度值被認(rèn)為是0px的情況，也就產(chǎn)生了高度塌陷問(wèn)題。把容器想象成一根老款的橡皮筋。橡皮筋沒(méi)綁東西前可以看出理解高度為0。2.討論解決思路。聽(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)準(zhǔn)流布局，布局無(wú)異常。2.以浮動(dòng)流布局，觀察異常的結(jié)果。上機(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)分值得分站點(diǎn)結(jié)構(gòu)目錄結(jié)構(gòu)正確，文件命名規(guī)范。10Html結(jié)構(gòu)容器關(guān)系正確30Css代碼容器高度設(shè)置正確，樣式最終效果一致60總分說(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ò)本課，要求我們掌握：（1）容器坍塌的起因和解決方式。（2）具備將因坍塌原因?qū)е虏季只靵y的網(wǎng)頁(yè)進(jìn)行修復(fù)的能力。