HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。28.5設(shè)計一級欄目頁面該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計算機基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標(biāo)：（1）完成內(nèi)容區(qū)底部上下文章的鏈接。（2）對頁面代碼進行整理。能力目標(biāo)：（1）具備獨立完成內(nèi)容區(qū)底部上下文章的鏈接的能力。素養(yǎng)目標(biāo)：（1）引導(dǎo)學(xué)生關(guān)注能源消耗和資源利用問題，培養(yǎng)其環(huán)保意識和社會責(zé)任感。制作詳情頁的內(nèi)容區(qū)底部上下文章的鏈接代碼的整理。通過相關(guān)案例的屬性設(shè)置前后對比，讓學(xué)生加強理解與認(rèn)識。無運用實例演示法，通過實際案例或操作演示，讓學(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í)詳情頁中，大量的圖文排版注意的css樣式屬性?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識結(jié)構(gòu)。引入上節(jié)課還有部分區(qū)域未完成，比如內(nèi)容區(qū)底部添加上下文章的鏈接。完成后我們依然需要對該頁面的代碼進行整理。聽講講授，演示。任務(wù)驅(qū)動法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識講授在網(wǎng)頁設(shè)計中，上下文章的鏈接（通常指的是頁面內(nèi)導(dǎo)航鏈接，包括“上一篇”、“下一篇”、“返回頂部”、“返回列表”等鏈接）具有多重意義和作用。（1）改善用戶體驗：用戶可以通過這些鏈接輕松地在文章之間跳轉(zhuǎn)，無需通過搜索框或瀏覽整個網(wǎng)站來找到相關(guān)內(nèi)容。對于系列文章或連續(xù)故事，這些鏈接幫助用戶保持閱讀的連續(xù)性，提高用戶滿意度和參與度。（2）增強網(wǎng)站粘性：增加頁面瀏覽量：通過提供方便的導(dǎo)航路徑，這些鏈接鼓勵用戶瀏覽更多頁面，從而增加網(wǎng)站的總體頁面瀏覽量。提升搜索引擎優(yōu)化（SEO）：上下文章的鏈接有助于構(gòu)建強大的內(nèi)部鏈接結(jié)構(gòu)，這有助于搜索引擎爬蟲更有效地索引網(wǎng)站內(nèi)容。內(nèi)部鏈接還可以在一定程度上傳遞頁面權(quán)重，這有助于提升相關(guān)頁面的搜索引擎排名。（3）促進內(nèi)容營銷：通過鏈接相關(guān)文章，可以增加這些文章的曝光機會，從而提高內(nèi)容的可見度和影響力。對于包含購買鏈接或廣告的文章，通過上下文章的鏈接引導(dǎo)用戶瀏覽更多相關(guān)內(nèi)容，可能有助于提高轉(zhuǎn)化率。聽講演示任務(wù)達到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。任務(wù)實施8.6.5給內(nèi)容區(qū)底部添加上下文章的鏈接對應(yīng)的HTML代碼如圖8-67所示。對應(yīng)的CSS代碼如圖8-68所示。8.6.6代碼的整理去除輔助用的邊框、背景色后，預(yù)覽效果是否達成預(yù)期。然后考慮有哪些樣式可以定義為公共樣式。上機操作巡堂指導(dǎo)，提醒易出錯的事項實踐法旨在培養(yǎng)學(xué)生項目開發(fā)能力。任務(wù)擴展任務(wù)檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10上下文鏈接采用的標(biāo)簽合理，樣式與效果一致。50代碼整理查漏補缺，預(yù)覽結(jié)果無異常。40總分說明：評分項目為任務(wù)實施中要求學(xué)生掌握的技能點。互相點評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能力。總結(jié)通過本課的學(xué)習(xí)：（1）完成內(nèi)容區(qū)底部上下文章的鏈接。（2）對頁面代碼進行整理。（