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)效果。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）鞏固布局能力。（2）制作模擬“選項(xiàng)卡”功能的布局練習(xí)。能力目標(biāo)：（1）具備制作“選項(xiàng)卡”功能布局及模擬交互行為的能力。素養(yǎng)目標(biāo)：（1）在編程學(xué)科中關(guān)注時(shí)事新聞，還可以促進(jìn)思政教育與專業(yè)教育的融合。引導(dǎo)學(xué)生思考如何將技術(shù)應(yīng)用于解決實(shí)際問(wèn)題，同時(shí)培養(yǎng)他們的社會(huì)責(zé)任感和道德觀念。（2）提高學(xué)生的學(xué)習(xí)興趣和積極性，使他們?cè)谡莆占夹g(shù)知識(shí)的同時(shí)，樹立正確的世界觀、人生觀和價(jià)值觀。布局之基礎(chǔ)練習(xí)?！斑x項(xiàng)卡”布局優(yōu)勢(shì)，“選項(xiàng)卡”容器結(jié)構(gòu)關(guān)系。通過(guò)演示一些門戶網(wǎng)站的選項(xiàng)卡效果布局來(lái)引入相關(guān)知識(shí)?！斑x項(xiàng)卡”的代碼實(shí)現(xiàn)。通過(guò)具體案例的思路分析及師生同步操作來(lái)化解難點(diǎn)。運(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í)點(diǎn)評(píng)上次作業(yè)，回顧在布局中容易忽略的問(wèn)題所在，以及對(duì)應(yīng)的解決思路?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入在HTML中，“選項(xiàng)卡”布局是一種常見的用戶界面元素，其優(yōu)勢(shì)主要體現(xiàn)在以下幾個(gè)方面：（1）提高用戶體驗(yàn)選項(xiàng)卡布局通過(guò)將多個(gè)內(nèi)容區(qū)域整合在一起，用戶只需點(diǎn)擊相應(yīng)的選項(xiàng)卡即可查看所需內(nèi)容，無(wú)需加載新頁(yè)面，使得界面更加簡(jiǎn)潔明了。能夠在有限的空間內(nèi)展示多個(gè)內(nèi)容面板，避免了頁(yè)面滾動(dòng)和跳轉(zhuǎn)，提高了空間利用率。（2）增強(qiáng)交互性選項(xiàng)卡布局通常會(huì)在用戶點(diǎn)擊時(shí)立即顯示相應(yīng)的內(nèi)容面板，提供即時(shí)反饋，增強(qiáng)了用戶的交互體驗(yàn)。通過(guò)CSS和JavaScript，可以為選項(xiàng)卡添加動(dòng)畫效果，如漸變、滑動(dòng)等，進(jìn)一步提升交互性。（3）適應(yīng)性強(qiáng)選項(xiàng)卡布局可以很好地適應(yīng)不同的屏幕尺寸和設(shè)備，如手機(jī)、平板和桌面電腦等，提供一致的用戶體驗(yàn)。（4）提升頁(yè)面性能通過(guò)合并選項(xiàng)卡按鈕的圖標(biāo)和樣式，可以減少HTTP請(qǐng)求次數(shù)，提高頁(yè)面加載速度。只加載當(dāng)前選項(xiàng)卡的內(nèi)容，延遲加載其他選項(xiàng)卡的內(nèi)容，可以減少頁(yè)面初次加載時(shí)間，提升頁(yè)面性能。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授選項(xiàng)卡涉及的問(wèn)題：每張選項(xiàng)卡的內(nèi)容，解析成容器關(guān)系。每張選項(xiàng)卡容器如何進(jìn)行重疊。選項(xiàng)卡之間如何切換，涉及的交互效果?！揪毩?xí)2】以下兩個(gè)大容器的位置重疊，構(gòu)成選項(xiàng)卡。實(shí)現(xiàn)如圖5-63所示的選項(xiàng)卡切換效果?！钏颊v解：關(guān)注本地新聞意義重大。它能讓我們及時(shí)了解身邊發(fā)生的各類事件，包括政策變動(dòng)、社區(qū)活動(dòng)、公共安全信息等，有助于我們更好地適應(yīng)和融入本地社會(huì)。通過(guò)關(guān)注本地新聞，我們能更直觀地感受到社區(qū)的發(fā)展變化，增強(qiáng)歸屬感和責(zé)任感。此外，本地新聞也是監(jiān)督地方政府和公共服務(wù)機(jī)構(gòu)工作的重要途徑，能促進(jìn)其更好地履行職責(zé)，為民眾服務(wù)?！窘鉀Q策略】“要聞”、“廣州新聞”分別用兩個(gè)面積相同的容器裝內(nèi)容，兩個(gè)容器采用絕對(duì)定位方式重疊。其中一個(gè)容器設(shè)置顯示的時(shí)候，另外一個(gè)容器隱藏，或者是更改兩個(gè)容器的z-index屬性，從而完全覆蓋。聽講教師提出若干問(wèn)題，并分析設(shè)計(jì)思路。演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【練習(xí)2】以下兩個(gè)大容器的位置重疊，構(gòu)成選項(xiàng)卡。（1）編寫對(duì)應(yīng)的HTML代碼，如圖5-64所示。（2）初步的CSS代碼設(shè)計(jì)如圖5-65所示。（3）保存文件，預(yù)覽的效果如圖5-66所示。（4）微調(diào)css樣式，使之與原圖接近，如圖5-67所示。（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)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)站點(diǎn)目錄正確，文件名規(guī)范。10兩個(gè)選項(xiàng)卡html結(jié)構(gòu)代碼正確，縮進(jìn)正確，容器名稱合理。30選項(xiàng)卡切換的Css樣式選擇器合理，屬性值合理。30其他css樣式選擇器聲明正確，屬性值合理。20整體頁(yè)面效果運(yùn)行效果與預(yù)期一致。10總分說(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ò)本課的學(xué)習(xí)：（1）鞏固布局能力。（2）制作模擬“選項(xiàng)