HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。2本章擴(kuò)展練習(xí)該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識(shí)目標(biāo)：分析新聞列表版塊的容器構(gòu)成，以及對應(yīng)的樣式設(shè)置。能力目標(biāo)：具備制作常見新聞列表版塊布局的能力。素養(yǎng)目標(biāo)：（1） 引導(dǎo)學(xué)生關(guān)注社會(huì)熱點(diǎn)新聞，培養(yǎng)他們的社會(huì)責(zé)任感，鼓勵(lì)他們將所學(xué)技術(shù)用于服務(wù)社會(huì)、改善民生，成為有擔(dān)當(dāng)、有情懷的技術(shù)人才。（2） 通過課堂討論、小組分工等形式，培養(yǎng)學(xué)生的溝通能力、協(xié)作精神和集體榮譽(yù)感。主要使用ul標(biāo)簽、float屬性、border-radius屬性完成布局效果。ul標(biāo)簽搭建主要框架，膠囊型容器的樣式。通過提示ul標(biāo)簽結(jié)構(gòu)、教師演示方式加強(qiáng)相關(guān)知識(shí)的掌握。css定義“>”元素。通過提供邊框、旋轉(zhuǎn)屬性對應(yīng)代碼使得學(xué)生完成相關(guān)練習(xí)。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(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ù)的檢測，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)border-radius屬性中，按什么順序定義四個(gè)角的圓角度？回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入這節(jié)課我們探究一下網(wǎng)頁新聞列表版塊的布局，由于布局千變?nèi)f化，但萬變不離其宗，基本上采用ul標(biāo)簽作為主要的容器進(jìn)行設(shè)計(jì)。接下來我們看一下今天要完成的案例。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授1. 分析容器包含結(jié)構(gòu)。2. 容器對應(yīng)采用的標(biāo)簽。3. 確定裝飾性元素的樣式表現(xiàn)，探究采用的屬性。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【練習(xí)1】主要使用ul標(biāo)簽、float屬性、border-radius屬性完成如圖3-85所示的布局效果?！窘處煼职l(fā)文字素材】文字量偏多，建議將文字分發(fā)給學(xué)生?！拘〗M討論環(huán)節(jié)】分為若干組，每組對布局進(jìn)行探究，提出布局方案。【匯總小組討論結(jié)果】對每組方案進(jìn)行簡單點(diǎn)評(píng)，理順其設(shè)計(jì)思路。讓每組按自己隊(duì)伍思路完成對應(yīng)代碼?！緟⒖疾僮鞑呗浴繉⒄w結(jié)構(gòu)分解為3列，每列容器設(shè)置尺寸。將每列從上往下，分為“標(biāo)題”、“內(nèi)容區(qū)”兩部分?！耙痪€傳聲”、“國資動(dòng)態(tài)”列采用h2+ul，也可以采用dl進(jìn)行布局。欄目標(biāo)題的>元素，若想美觀采用小容器設(shè)置2個(gè)邊框，并旋轉(zhuǎn)容器。也可以采用圖標(biāo)方式?！耙曨l專區(qū)”中，視頻采用截圖即可。下方3個(gè)按鈕使用一組ul標(biāo)簽，對第一個(gè)li元素設(shè)置id選擇器完成特殊樣式。（6）新聞列表的項(xiàng)目列表圖標(biāo)變成圖中所示的桔色？思路1：圖標(biāo)采用小圖片形式。思路2：在li元素內(nèi)部加入一個(gè)無語義的標(biāo)簽，比如<span>、<i>等，設(shè)置該容器的圓角度。（7）強(qiáng)調(diào)圖標(biāo)元素處理上，務(wù)必反復(fù)實(shí)驗(yàn)線條粗細(xì)，達(dá)到最優(yōu)視覺效果。（8）強(qiáng)調(diào)在寫代碼時(shí)，由于有大量結(jié)構(gòu)相同的li容器，采用最優(yōu)的快捷鍵進(jìn)行復(fù)制——粘貼——修改文字。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分站點(diǎn)結(jié)構(gòu)目錄結(jié)構(gòu)正確，文件命名規(guī)范。10Html結(jié)構(gòu)容器關(guān)系正確，3列布局寬度正確。30欄目標(biāo)題右側(cè)的>元素借助元素的旋轉(zhuǎn)和邊框設(shè)置完成效果。或者采用圖標(biāo)。20視頻專區(qū)下方的翻頁按鈕定位準(zhǔn)確，外觀一致。20列表圖標(biāo)設(shè)計(jì)知識(shí)點(diǎn)合理，效果一致。20總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課學(xué)習(xí)，要求我們：（1）分析新聞列表版塊的容器構(gòu)成，以及對應(yīng)