HTML5使用標簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。24.8列表類標簽該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計算機基礎(chǔ)認知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標：（1） 強化ul標簽應(yīng)用。（2） 加深對浮動屬性的認識。能力目標：具備識別、處理局部元素尺寸大小不一的列表項集合的能力。素養(yǎng)目標：（1）通過兩種思路分析問題，增強學(xué)生的自信心和毅力，培養(yǎng)其面對困難不退縮的精神。ul標簽ul標簽的應(yīng)用。通過相關(guān)案例的練習(xí)，讓學(xué)生加強理解與認識。浮動屬性對后續(xù)元素的影響。通過提問來引導(dǎo)學(xué)生明白li容器可以特殊化。運用實例演示法，通過實際案例或操作演示，讓學(xué)生直觀理解抽象概念。實施項目驅(qū)動教學(xué)，鼓勵學(xué)生獨立或分組完成任務(wù)，培養(yǎng)團隊協(xié)作與問題解決能力。利用在線實訓(xùn)平臺，提供個性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關(guān)知識點的背景知識，然后講授具體的知識要點及任務(wù)實現(xiàn)的注意事項，通過任務(wù)實施環(huán)節(jié)讓學(xué)生各自或分組進行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴展內(nèi)容，最后以學(xué)生自我評價或小組評價完成任務(wù)的檢測，教師最終進行點評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務(wù)要求復(fù)習(xí)ul標簽經(jīng)常使用的樣式，比如margin、padding、list-style-type。回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識結(jié)構(gòu)。引入在門戶網(wǎng)站或者企業(yè)官網(wǎng)中，我們?？吹饺舾蓚€新聞，頭條新聞的圖片一定是最大的，甚至位置也跟其他新聞不在同一列上。如何設(shè)計這種布局？請看以下案例。聽講講授，演示。任務(wù)驅(qū)動法，讓學(xué)生了解任務(wù)目標。思考教師引導(dǎo)、提示知識講授頁面結(jié)構(gòu)分析，解析為什么尺寸不一的圖文可以采用ul標簽。強調(diào)快捷鍵操作。浮動屬性對后續(xù)元素的影響?！景咐?7】在案例16的基礎(chǔ)上，添加左側(cè)版面。思路一：可能有同學(xué)會將這個結(jié)構(gòu)拆解成左右部分，用2個大容器去裝，右邊部分我們在上一個練習(xí)已經(jīng)完成，剩下左側(cè)部分未做。思路二：左側(cè)版面由1張圖加上3行文字，內(nèi)容其實跟右側(cè)li容器的圖文內(nèi)容一樣，不過只是圖文排版不一樣而已。前面我們說過，CSS負責(zé)外觀表現(xiàn)，HTML負責(zé)內(nèi)容，既然內(nèi)容一樣，我們就可以把左側(cè)版面也當(dāng)成一個li容器。聽講演示任務(wù)達到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。任務(wù)實施（1）在練習(xí)1代碼的ul標簽下方，新增一個li元素，內(nèi)容結(jié)構(gòu)與其他li元素一致。（2）編寫對應(yīng)的CSS代碼。圖4-79CSS代碼（3）文件保存，預(yù)覽后初步效果。（4）接下來，我們就要驗證是否把li容器設(shè)置“浮動”后能達到預(yù)期布局，修改CSS代碼，如圖4-81所示。圖4-81設(shè)置浮動（5）文件保存后預(yù)覽的效果。到這一步，基本布局雛形已經(jīng)完成，剩下的就是不斷調(diào)整個別容器參數(shù)值，去除邊框?qū)傩?，達到對齊、美觀效果。（6）繼續(xù)調(diào)整CSS代碼。（7）細節(jié)問題有時間慢慢完善。左側(cè)版面的新聞發(fā)布時間，建議采用后續(xù)的絕對定位知識來解決，目前可忽視。上機操作巡堂指導(dǎo)，提醒易出錯的事項實踐法旨在培養(yǎng)學(xué)生項目開發(fā)能力。任務(wù)擴展任務(wù)檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分項目搭建站點結(jié)構(gòu)正確，文件命名合理。10Html結(jié)構(gòu)Ul標簽結(jié)構(gòu)正確。40Css代碼左側(cè)li項顯示效果達到預(yù)期。50總分說明：評分項目為任務(wù)實施中要求學(xué)生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能力。總結(jié)通過本課，要求我們：（1）強化ul標簽應(yīng)用。（2）加深對浮動屬性的認識。（3）對于網(wǎng)頁