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)效果。2本章基礎(chǔ)練習(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） 了解瀑布流布局技術(shù)。（2） 掌握簡(jiǎn)單模擬瀑布流布局的技術(shù)手段。能力目標(biāo)：具備使用規(guī)格不一的圖片完成瀑布流布局的能力。素養(yǎng)目標(biāo)：（1） 關(guān)注全球程序設(shè)計(jì)領(lǐng)域的趨勢(shì)，培養(yǎng)學(xué)生的全球化視野。（2） 引用大量圖片時(shí)，強(qiáng)調(diào)職業(yè)道德規(guī)范，培養(yǎng)學(xué)生的法律意識(shí)，確保他們?cè)谖磥?lái)的職業(yè)生涯中能夠遵守行業(yè)規(guī)范，尊重知識(shí)產(chǎn)權(quán)，不從事非法或有害社會(huì)的活動(dòng)。瀑布流布局練習(xí)瀑布流布局的主要容器的設(shè)計(jì)。通過(guò)逐個(gè)容器講解、放緩講解時(shí)間的方式，確保容器框架的正確性。各元素相關(guān)屬性值的精確設(shè)置，尤其是border-radius值。采用提問(wèn)、引導(dǎo)的方式加強(qiáng)對(duì)屬性值的計(jì)算能力。運(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í)列舉九宮格布局的思路。回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入瀑布流布局是一種流行的網(wǎng)站頁(yè)面布局方式，其視覺(jué)表現(xiàn)為參差不齊的多欄布局。隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。瀑布流布局的核心是基于一個(gè)網(wǎng)格的布局，每行包含的項(xiàng)目列表高度是隨機(jī)的，每個(gè)項(xiàng)目列表呈堆棧形式排列，彼此之間沒(méi)有多余的間距差存在。這種布局的特點(diǎn)是等寬不等高，使得頁(yè)面最后一行的容器高度差距最小，從而提供更好的用戶體驗(yàn)。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授瀑布流布局應(yīng)用特點(diǎn)瀑布流是一種寬度相同，高度不同的卡片布局方式。商業(yè)頁(yè)面的瀑布流布局是動(dòng)態(tài)刷新不同尺寸的圖片，而不是固定某幾張圖片，如圖3-72所示，這就需要結(jié)合javascript、彈性盒子等技術(shù)來(lái)實(shí)現(xiàn)的，這里采用這個(gè)作為布局練習(xí)，只是考察對(duì)盒子模型的掌握程度。【提問(wèn)】請(qǐng)問(wèn)在什么網(wǎng)站，或者是什么app頁(yè)面中看到瀑布流布局？聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【練習(xí)5】瀑布流布局思路一:常規(guī)思路，頁(yè)面分為均勻的3列，每列每列裝對(duì)應(yīng)圖片。（1）使用3個(gè)ul標(biāo)簽分別代表3列，每個(gè)li元素裝入不同圖片。（2）書寫對(duì)應(yīng)的CSS代碼。（3）在瀏覽器中效果中，我們看到圖片寬度與預(yù)期相差不大，可以通過(guò)CSS把各種尺寸的圖片強(qiáng)制統(tǒng)一尺寸。（4）調(diào)整CSS代碼，將img標(biāo)簽強(qiáng)制設(shè)置為250px。（5）給每張圖片添加圖片標(biāo)題，這里可以采用h3、h4、p、div標(biāo)簽作為塊級(jí)容器，從語(yǔ)義角度來(lái)說(shuō)，雖然說(shuō)標(biāo)題用h類標(biāo)簽比較適合，但是作為大量的圖片，每張圖片標(biāo)題都強(qiáng)調(diào)，等于毫無(wú)重點(diǎn)，所以用普通p標(biāo)簽即可。思路二：利用float屬性，試試不同大小的容器能否自動(dòng)見(jiàn)縫插針，自行利用空間？（1）書寫對(duì)應(yīng)的HTML代碼及樣式。（2）預(yù)覽后發(fā)現(xiàn)頁(yè)面效果有點(diǎn)亂，試驗(yàn)過(guò)我們才能深刻理解容器在浮動(dòng)屬性下的布局表現(xiàn)，頁(yè)面效果解析如圖3-81所示。上機(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)系正確30快捷鍵應(yīng)用快速完成li標(biāo)簽對(duì)應(yīng)代碼。10Css代碼樣式最終效果一致50總分說(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）了解瀑布流布局技術(shù)。（2）掌握簡(jiǎn)單模擬瀑布流布局的技術(shù)手段，能使用規(guī)格不一的圖片完成瀑布流布局。（3）引用大量圖片時(shí)，強(qiáng)調(diào)職業(yè)道德規(guī)范，培養(yǎng)學(xué)