HTML5使用標簽創(chuàng)建網頁結構，設置CSS屬性完成網頁布局。120HTML5基礎語法與文檔結構，語義化標簽及多媒體元素的應用，理解盒子模型和常見布局流技術，綜合運用CSS知識，提升網頁布局能力和動態(tài)表現效果。25.2浮動流布局該班人數M人，年齡約N歲，中技階段，學習本課程之前已有一定的計算機基礎認知，均具備數年的網齡，對網頁相關概念及技術有一些簡單的了解。知識目標：（1） 了解容器坍塌現象的起因。（2） 掌握如何解決容器坍塌問題。（3） 強化浮動布局能力。（4） 完成“讓中國挺起脊梁的科學家”布局案例。能力目標：具備解決容器坍塌現象的能力。素養(yǎng)目標：案例“讓中國挺起脊梁的科學家”，緬懷老一輩科學家為中國的富強所貢獻的光輝事跡。浮動流布局的應用練習容器坍塌現象的起因、解決步驟。引導學生研究坍塌出現的原因，深刻了解解決的思路。完成圖文混排布局效果。以兩種思路進行布局，讓學生擴展思維。運用實例演示法，通過實際案例或操作演示，讓學生直觀理解抽象概念。實施項目驅動教學，鼓勵學生獨立或分組完成任務，培養(yǎng)團隊協作與問題解決能力。利用在線實訓平臺，提供個性化學習路徑，滿足不同水平學生的學習需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關知識點的背景知識，然后講授具體的知識要點及任務實現的注意事項，通過任務實施環(huán)節(jié)讓學生各自或分組進行練習。教師隨堂抽查部分作品，根據課堂表現情況予以適當的補充，根據學生接納情況選擇性講解任務擴展內容，最后以學生自我評價或小組評價完成任務的檢測，教師最終進行點評及總結。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務要求復習標準流與浮動流布局的區(qū)別?；卮饐栴}教師提問，演示。思維導圖法或問題導向法幫助學生整理知識結構。引入今天的練習將繼續(xù)強化對浮動流布局的認識。聽講講授，演示。任務驅動法，讓學生了解任務目標。思考教師引導、提示知識講授1.高度塌陷的解決方案（1）在塌陷的父元素的最后添加一個空白的div，使用<divstyle="clear:both"></div>來清除浮動。但這種方式會在頁面中添加多余的結構，導致代碼冗余。（2）使用after偽類向父元素后添加一個塊元素，并對其清除浮動。這種方式不會向頁面中添加多余的結構，且能很好地解決高度塌陷問題。（3）給父級元素添加高度，這種方法雖然簡單，但不能實現寬高自適應?！景咐?】使用ul標簽完成如圖5-36所示的圖文混排效果?！钏颊v解：效果圖中的各科學家所取得的成就、榮譽。思路（一）：使用2個ul標簽，分別對圖、文字進行組織，如圖5-37所示。從圖文配對關系、js腳本節(jié)點控制、樣式維護的角度來看，都不合理。圖圖1配圖的文字1圖2配圖的文字2圖3配圖的文字3圖4配圖的文字4圖5-37容器結構圖思路（二）：使用一個ul標簽，每張圖片和對應文字放入在li標簽內，如圖5-38所示。lilililili圖1配圖的文字1圖2配圖的文字2圖3配圖的文字3圖4配圖的文字4聽講演示任務達到的效果，講解代碼演示法讓學生明確分階段或最終的任務效果。講授法讓學生掌握完成本次任務需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。任務實施【案例7】解決容器坍塌現象。（1）敲入下面HTML和CSS代碼，如圖5-33所示。（2）保存文件后，預覽的效果。提問：預覽出現布局異常，導航條竄到上方，而且導航文字呈上下漂浮，原因在哪里？應該如何調整？（3）設置logo-box這個容器的高度，問題得以解決?！景咐?】使用ul標簽完成如圖5-36所示的圖文混排效果。上機操作巡堂指導，提醒易出錯的事項實踐法旨在培養(yǎng)學生項目開發(fā)能力。任務擴展在【案例7】練習中，如果我們采用新增一個空白容器消除浮動影響的話，可以這么寫代碼，如圖5-35所示。任務檢測被考評人（組）：考評人：日期：評分項目過程表現分值得分網站結構站點目錄正確，文件名規(guī)范。10練習1的容器坍塌現象能解決坍塌問題。30練習2的html結構結構正確，縮進正確。20練習2的css樣式選擇器合理，屬性值合理。30練習2的整體頁面效果運行效果與原圖一致。10總分說明：評分項目為任務實施中要求學生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協作能力?？偨Y通過本課的學習：（1）了解容器坍塌現象的起因。（2）掌握如何解決容器坍塌問題。（3）完