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)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。28.5設(shè)計(jì)一級(jí)欄目頁(yè)面該班人數(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）主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。（2）翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置。能力目標(biāo)：（1）具備多種思路完成每個(gè)新聞項(xiàng)容器的交互效果的能力。（2）具備完成翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置的能力。素養(yǎng)目標(biāo)：（1）通過實(shí)際案例、項(xiàng)目實(shí)踐等方式，讓學(xué)生將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。完成一級(jí)頁(yè)面中內(nèi)容區(qū)的制作。主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置，翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置。采用深加工法將復(fù)雜的知識(shí)點(diǎn)或難點(diǎn)進(jìn)行分解，找出其中的技術(shù)難點(diǎn)，分別進(jìn)行分析。每個(gè)新聞項(xiàng)容器的交互效果的制作。教學(xué)中引導(dǎo)學(xué)生自主探究、主動(dòng)思考，通過自己的思考和探究來(lái)理解和掌握難點(diǎn)。運(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ù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)外部樣式的導(dǎo)入語(yǔ)句。回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入上節(jié)課已經(jīng)完成頁(yè)頭部分，緊接著開始完成內(nèi)容區(qū)的設(shè)計(jì)。與首頁(yè)版式有點(diǎn)類似，內(nèi)容區(qū)主要是一些圖文元素，增加了一個(gè)翻頁(yè)功能。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授內(nèi)容區(qū)的效果分析，容器結(jié)構(gòu)采用的標(biāo)簽。翻頁(yè)功能區(qū)采用的標(biāo)簽，主要采用的樣式屬性。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施8.5.4內(nèi)容區(qū)的設(shè)計(jì)（1）完成容器大體布局，對(duì)應(yīng)的HTML代碼如圖8-37所示。對(duì)應(yīng)的CSS代碼如圖8-38所示。（2）先給第一個(gè)li容器添加元素，完成效果后給其他li也添加相同內(nèi)容，期間采用復(fù)制完整的第一個(gè)容器對(duì)應(yīng)的代碼，再修改圖片及文字內(nèi)容，提高編寫效率。對(duì)應(yīng)的CSS代碼如圖8-40所示。（3）制作圖片區(qū)域的交互效果。思路三：用并列的兩個(gè)1px高的空白容器，一個(gè)灰色背景色，一個(gè)藍(lán)色背景色，它倆采用絕對(duì)定位方式實(shí)現(xiàn)位置的重疊，hover狀態(tài)時(shí)把藍(lán)色容器顯示出來(lái)，并將width屬性做一個(gè)過渡效果。對(duì)應(yīng)的CSS代碼如圖8-42所示。（4）滾屏?xí)r，下方的圖片內(nèi)容卻覆蓋到導(dǎo)航欄上的異常，在樣式中申明頂部導(dǎo)航容器的z-index為一個(gè)足夠大的數(shù)值。（5）制作“頁(yè)碼”部分。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10新聞子項(xiàng)布局結(jié)構(gòu)正確30交互效果準(zhǔn)確，與效果一致。30翻頁(yè)按鈕容器對(duì)應(yīng)代碼正確10樣式呈現(xià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é)作能力。總結(jié)通過本課的學(xué)習(xí)：（1）主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。（2）翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置。（3）具備多種思路完成每個(gè)新聞項(xiàng)容器的交互效果的能力。（4）具備完成翻頁(yè)按鈕的ul結(jié)構(gòu)及樣式設(shè)置的能力。（5）通過實(shí)際案例、項(xiàng)