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)效果。25.2浮動(dò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）浮動(dòng)流布局的應(yīng)用場(chǎng)景。（2）掌握浮動(dòng)屬性的設(shè)置。（3）完成左右浮動(dòng)布局的頁(yè)面效果。能力目標(biāo)：（1）具備應(yīng)用浮動(dòng)屬性對(duì)容器進(jìn)行左右浮動(dòng)，或者全部左浮動(dòng)排版的能力。（2）具備設(shè)置浮動(dòng)屬性后異常情況的解決能力。素養(yǎng)目標(biāo)：（1）了解成語(yǔ)“天馬行空”的出處，學(xué)習(xí)知識(shí)時(shí)要具備發(fā)散思維，多角度、不受約束地思考問(wèn)題，往往能打開(kāi)更多的知識(shí)之窗。浮動(dòng)流布局浮動(dòng)流應(yīng)用場(chǎng)景，浮動(dòng)屬性的設(shè)置。通過(guò)案例講解及提供容器結(jié)構(gòu)圖來(lái)講解知識(shí)點(diǎn)。浮動(dòng)屬性的設(shè)置，浮動(dòng)后產(chǎn)生異常的解決思路。通過(guò)屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。運(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í)標(biāo)準(zhǔn)流布局主要完成塊級(jí)容器在垂直方向上自上而下的布局。舉例：在本校校園網(wǎng)首頁(yè)中，應(yīng)用標(biāo)準(zhǔn)流布局的容器及子容器有哪些?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入HTML中的浮動(dòng)流布局是一種經(jīng)典的網(wǎng)頁(yè)布局方式，它主要通過(guò)CSS的float屬性來(lái)實(shí)現(xiàn)。以下是浮動(dòng)流布局的主要應(yīng)用場(chǎng)景：并排布局——通過(guò)給多個(gè)元素設(shè)置浮動(dòng)，可以讓它們并排排列，而不是默認(rèn)的堆疊方式。這在創(chuàng)建導(dǎo)航欄、圖片畫(huà)廊、卡片式布局或任何需要元素水平排列的布局時(shí)非常有用。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授5.2浮動(dòng)流布局浮動(dòng)布局是通過(guò)設(shè)置元素的float屬性，使其脫離正常布局流，并根據(jù)浮動(dòng)方向排列在頁(yè)面中。浮動(dòng)布局常用于構(gòu)建多列布局、圖文混排等場(chǎng)景。需要注意的是，浮動(dòng)布局會(huì)影響元素的高度計(jì)算和文本環(huán)繞等特性，需要謹(jǐn)慎使用。知識(shí)點(diǎn)：浮動(dòng)流布局特點(diǎn)記憶關(guān)鍵詞：天馬行空關(guān)鍵詞解析：浮動(dòng)元素會(huì)脫離正常的文檔流，浮動(dòng)在其他內(nèi)容之上。地面如同文檔流，浮動(dòng)流元素浮在上空，可謂強(qiáng)調(diào)一個(gè)“浮”字。浮動(dòng)流十分靈活，不受標(biāo)準(zhǔn)流約束?！景咐?】完成下圖所示的某個(gè)欄目的頁(yè)面布局，如圖5-16所示。該版塊的容器結(jié)構(gòu)圖如圖所示：內(nèi)容區(qū)內(nèi)容區(qū)導(dǎo)航（左浮動(dòng)）內(nèi)容（右浮動(dòng)）聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例4】完成下圖所示的某個(gè)欄目的頁(yè)面布局。（1）初步完成框架對(duì)應(yīng)的HTML代碼及CSS代碼，如圖5-18所示。這里對(duì)每個(gè)容器都設(shè)置了準(zhǔn)確的寬高屬性，此外我們還給一些重要容器設(shè)置了1個(gè)像素的邊框查看定位情況。（2）文件保存后，預(yù)覽的初步效果如圖5-19所示。（3）把各容器邊框去掉，用背景色填充。（4）繼續(xù)補(bǔ)充HTML元素。（5）編寫(xiě)對(duì)應(yīng)的CSS代碼。（6）保存文件，預(yù)覽后的最終效果?！景咐?】局部使用浮動(dòng)流布局完成橫向?qū)Ш綏l效果，如圖5-25所示。（1）編寫(xiě)大體結(jié)構(gòu)的HTML代碼，如圖5-26所示。（2）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖5-27所示。（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)站點(diǎn)目錄正確，文件名規(guī)范。10容器html結(jié)構(gòu)代碼正確，縮進(jìn)正確，有必要的注釋語(yǔ)句，容器名稱合理。30Css樣式浮動(dòng)屬性設(shè)置正確，選擇器類型合理，屬性值合理。40整體頁(yè)面效果運(yù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）理解浮動(dòng)流布局的應(yīng)用場(chǎng)景。