教學(xué)單元第八章商業(yè)網(wǎng)站布局實(shí)戰(zhàn)教學(xué)內(nèi)容確定目標(biāo)、收集素材學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：掌握收集網(wǎng)站相關(guān)圖文素材的方法。合理規(guī)劃網(wǎng)站目錄結(jié)構(gòu)。了解原型法的特點(diǎn)。能力目標(biāo)：（1）具備收集相關(guān)圖文素材的能力。（2）具備合理定義網(wǎng)站目錄結(jié)構(gòu)的能力。素養(yǎng)目標(biāo)：通過項目驅(qū)動學(xué)習(xí)、自主學(xué)習(xí)任務(wù)等方式，提升學(xué)生的自主學(xué)習(xí)能力，使其能夠持續(xù)跟進(jìn)技術(shù)發(fā)展。學(xué)習(xí)重點(diǎn)收集網(wǎng)站相關(guān)圖文素材的方法，原型開發(fā)法的特點(diǎn)。學(xué)習(xí)難點(diǎn)合理定義網(wǎng)站目錄結(jié)構(gòu)。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)無0引入期末，我們要整體完成若干個企業(yè)頁面的布局專項練習(xí)。通過增加難度，整合整個學(xué)期的知識點(diǎn)，掌握企業(yè)網(wǎng)站開發(fā)的大致流程。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授8.1確定研究目標(biāo)作為初次完整地還原網(wǎng)站若干頁面的項目，我們搜索若干個公司官網(wǎng)做個比較，選擇頁面內(nèi)容量不太大，涉及的知識不太超過我們課程所學(xué)內(nèi)容的官網(wǎng)；從技術(shù)難度而言，要具備一定挑戰(zhàn)性，盡可能還原網(wǎng)頁布局、交互效果。最終要求完成企業(yè)網(wǎng)站首頁、某一欄目頁、詳情頁的布局。本章節(jié)將對“寧德時代”官網(wǎng)進(jìn)行一個頁面布局還原實(shí)踐。提醒一下，別拿自己的興趣挑戰(zhàn)別人的飯碗。掌握框架布局的思路，只需要把頁面靜態(tài)效果做到與原型基本接近就可以了?！钏颊v解：新能源車在市場占比越來越大，動力電池作為新能源車的核心技術(shù)，寧德時代是全球領(lǐng)先的新能源創(chuàng)新科技公司之一，專注于新能源汽車動力電池系統(tǒng)、儲能系統(tǒng)的研發(fā)、生產(chǎn)和銷售。公司的動力電池市占率曾達(dá)到全球第一的規(guī)模。使用清潔能源作為動力源，顯著減少了化石能源的消耗和溫室氣體的排放。這直接有助于實(shí)現(xiàn)碳中和目標(biāo)，即通過各種措施使溫室氣體凈排放為零。碳中和，也稱“凈零排放”，指人類經(jīng)濟(jì)社會活動所必需的碳排放，通過森林碳匯和其他人工技術(shù)或工程手段加以捕集利用或封存，而使排放到大氣中的溫室氣體凈增量為零。這通常涉及國家、企業(yè)、產(chǎn)品、活動或個人在一定時間內(nèi)直接或間接產(chǎn)生的二氧化碳或溫室氣體排放總量，通過植樹造林、節(jié)能減排等形式，以抵消自身產(chǎn)生的二氧化碳或溫室氣體排放量，實(shí)現(xiàn)正負(fù)抵消，達(dá)到相對“零排放”。8.2搜集相關(guān)圖文素材盡可能從“寧德時代”各目標(biāo)頁面中搜集對應(yīng)圖片、文字素材。圖片素材收集工作要求：圖片素材收集過程中，如發(fā)現(xiàn)圖片是svg，或者采用bootstrap引入圖標(biāo)的手法，在這里，我們都統(tǒng)一在Photoshop處理為透明底的png文件格式。如果網(wǎng)頁中包含大量尺寸一致的小圖標(biāo)圖片，我們也將所有圖標(biāo)在Photoshop中整合成一個透明底的png文件，目的是采用精靈圖手法來設(shè)計其表現(xiàn)。若交互效果設(shè)計圖標(biāo)變色的，也可以很方便講所有圖標(biāo)集中更改顏色。可以用瀏覽器中的“保存為網(wǎng)頁”命令，快速地下載大部分圖片素材，個別無法下載或另存的圖片需要選擇“審查元素”命令進(jìn)入“開發(fā)者模式”，在“元素”、“樣式”面板中找到對應(yīng)的圖片地址。文字素材收集工作要求：在網(wǎng)頁中直接拖曳光標(biāo)，選中所有圖文后進(jìn)行復(fù)制，然后粘貼在記事本文檔，這樣就得到純粹的文字信息，切記不要連圖一塊粘貼到word、wps文檔中。若網(wǎng)頁禁用復(fù)制命令，可以關(guān)閉瀏覽器的JavaScript腳本運(yùn)行功能。倘若依然解決不了，可以采用企業(yè)微信等工具進(jìn)行截屏，利用軟件內(nèi)置的文字識別功能來獲取文字。為節(jié)省搜集素材的時間，本書已經(jīng)將數(shù)十個國內(nèi)500強(qiáng)企業(yè)的若干頁面的圖文素材下載到資源包“寧德時代site”文件夾中，因時間倉促，可能欠缺個別圖片，且也沒調(diào)整為規(guī)范的圖像文件名稱。8.3網(wǎng)站目錄及文件的搭建、整理站點(diǎn)根目錄結(jié)構(gòu)如圖8-1所示。圖8-1站點(diǎn)根目錄新聞欄目對應(yīng)的目錄結(jié)構(gòu)如圖8-2所示。圖8-2新聞欄目文件夾首頁涉及的圖片集如圖8-3所示。圖8-3首頁對應(yīng)的圖片集8.4制作首頁布局我們從企業(yè)官網(wǎng)截圖的首頁效果圖，如圖8-4所示。圖8-4首頁效果圖無論看上去如何簡單的商業(yè)網(wǎng)站頁面，對于初學(xué)者來說還是具備一定難度。為了快速從大局把握布局的思路與步驟，在本章節(jié)中，我們采用軟件編程領(lǐng)域中的“原型法”開發(fā)策略。原型法的基本思想：首先由用戶與系統(tǒng)分析設(shè)計人員合作，在短期內(nèi)定義用戶的基本需求，開發(fā)出一個功能不十分完善、實(shí)驗(yàn)性的、簡易的應(yīng)用軟件系統(tǒng)的基本框架，稱之為原型。接著運(yùn)行這個原型，再不斷評價和改進(jìn)原型，使之逐步完善。其開發(fā)過程是多次重復(fù)、不斷演進(jìn)的過程。?20任務(wù)實(shí)施確定研究目標(biāo)，選擇要還原的網(wǎng)站頁面，并將頁面進(jìn)行截圖。收集這些頁面所需的圖片、文字素材。在本地創(chuàng)建項目，將圖片素材放置在對應(yīng)的文件夾中。50知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1） 掌握收集網(wǎng)站相關(guān)圖文素材的方法。（2） 合理規(guī)劃網(wǎng)站目錄結(jié)構(gòu)。（3） 了解原型法的特點(diǎn)。5課后作業(yè)

任務(wù)單教學(xué)單元第八章商業(yè)網(wǎng)站布局實(shí)戰(zhàn)教學(xué)內(nèi)容確定目標(biāo)、收集素材實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述以寧德時代官網(wǎng)為例，先大體瀏覽官網(wǎng)頁面，確定圖文素材的獲取方式，挑選首頁、新聞欄目頁，某一新聞詳情頁作為研究對象。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施1. 確定研究目標(biāo)，選擇要還原的網(wǎng)站頁面，并將頁面進(jìn)行截圖。2. 收集這些頁面所需的圖片、文字素材。3. 在本地創(chuàng)建項目，將圖片素材放置在對應(yīng)的文件夾中。任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分頁面截圖完成三個頁面的整體頁面截圖20項目創(chuàng)建文件及文件夾命名及位置正確。30素材收集完成三個頁面對應(yīng)的圖文素材收集。50總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)教學(xué)內(nèi)容首頁的設(shè)計學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：完成首頁頁頭區(qū)域容器結(jié)構(gòu)。頁頭區(qū)域容器對應(yīng)的css樣式。能力目標(biāo)：（1）具備制作首頁頁頭區(qū)域?qū)?yīng)的代碼編寫能力。素養(yǎng)目標(biāo)：（1）培養(yǎng)在復(fù)雜頁面布局工作中書寫代碼縮進(jìn)、充分注釋的習(xí)慣。學(xué)習(xí)重點(diǎn)頁頭區(qū)域容器的搭建、各容器的css樣式。學(xué)習(xí)難點(diǎn)各容器的css樣式。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)寧德時代官網(wǎng)的首頁，主要包含了哪些信息。3引入由于企業(yè)網(wǎng)站的結(jié)構(gòu)復(fù)雜，代碼量龐大，對于學(xué)習(xí)者而言，還原頁面并不是一件容易的事，我們可以以頁頭、主內(nèi)容區(qū)、頁腳三部分來“庖丁解?！?，一步步完成最終效果。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授頁頭區(qū)域包含的內(nèi)容。分析頁頭各部分采用的標(biāo)簽，推敲css樣式的主要屬性設(shè)置。5任務(wù)實(shí)施8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)1.制作頁頭區(qū)域內(nèi)容。（1）編寫頁頭區(qū)域?qū)?yīng)HTML代碼，如圖8-5所示?！窘處熝菔尽⒅v解】將寧德時代首頁截圖在Photoshop或者畫圖中打開，用線框講解，標(biāo)注容器包含關(guān)系，然后再讓學(xué)生敲入對應(yīng)html結(jié)構(gòu)代碼。學(xué)生基礎(chǔ)掌握較好的話，可以一次性將html結(jié)構(gòu)敲入；基礎(chǔ)不夠扎實(shí)的話，可先將下圖的header容器、nav-bar容器的結(jié)構(gòu)及樣式的效果調(diào)試出來，再逐步完成其余容器部分。圖8-5頁頭區(qū)域?qū)?yīng)HTML代碼2.編寫對應(yīng)的CSS代碼，如圖8-6所示。圖8-6頁頭區(qū)域?qū)?yīng)CSS代碼（3）保存文件，預(yù)覽的效果如圖8-7所示。圖8-7頁頭區(qū)域預(yù)覽效果65知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）完成首頁頁頭區(qū)域容器結(jié)構(gòu)。（2）頁頭區(qū)域容器對應(yīng)的css樣式。（3）采用原型法，因而過于細(xì)節(jié)的樣式，并不需要一步到位完成。3課后作業(yè)

任務(wù)單教學(xué)單元8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)教學(xué)內(nèi)容首頁的設(shè)計實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述制作頁頭區(qū)域，搭建對應(yīng)的容器結(jié)構(gòu)，并設(shè)置初步的css樣式，只要求對元素進(jìn)行定位，不要求細(xì)節(jié)的刻畫。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)1.制作頁頭區(qū)域內(nèi)容。（1）編寫頁頭區(qū)域?qū)?yīng)HTML代碼，如圖8-5所示。圖8-5頁頭區(qū)域?qū)?yīng)HTML代碼編寫對應(yīng)的CSS代碼，如圖8-6所示。【教師演示、講解】先設(shè)置最外層容器的樣式，預(yù)覽達(dá)成預(yù)期后，逐步補(bǔ)充內(nèi)部容器的樣式，重點(diǎn)講解容器的主要屬性，裝飾性的屬性可以逐步補(bǔ)全。圖8-6頁頭區(qū)域?qū)?yīng)CSS代碼（3）保存文件，預(yù)覽的效果如圖8-7所示。圖8-7頁頭區(qū)域預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10頁頭區(qū)域html結(jié)構(gòu)容器包含關(guān)系正確，代碼正確40頁頭區(qū)域css樣式元素尺寸、位置符合要求30注釋在重要代碼行中有簡要的注釋文字20總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)教學(xué)內(nèi)容制作主內(nèi)容區(qū)域布局學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：編寫內(nèi)容區(qū)對應(yīng)的容器結(jié)構(gòu)。編寫對應(yīng)的css樣式。能力目標(biāo)：（1）具備制作內(nèi)容區(qū)多行多列布局的能力。素養(yǎng)目標(biāo)：（1）通過解決編程難題和挑戰(zhàn)性任務(wù)，增強(qiáng)學(xué)生的自信心和毅力，培養(yǎng)其面對困難不退縮的精神。學(xué)習(xí)重點(diǎn)內(nèi)容區(qū)ul容器結(jié)構(gòu)的設(shè)計。學(xué)習(xí)難點(diǎn)li容器內(nèi)部的標(biāo)簽結(jié)構(gòu)。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)頁頭部分中導(dǎo)航條的設(shè)計，海報圖的定義。3引入今天完成主要內(nèi)容區(qū)的制作，相對一些新聞門戶網(wǎng)站，寧德時代頁面的內(nèi)容區(qū)相對簡單。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授分析內(nèi)容區(qū)對應(yīng)的容器結(jié)構(gòu)。分析各區(qū)域采用的標(biāo)簽。分析各容器的主要css屬性。10任務(wù)實(shí)施2.制作主內(nèi)容區(qū)域布局。（1）編寫主內(nèi)容區(qū)域?qū)?yīng)HTML代碼，如圖8-8所示。圖8-8主內(nèi)容區(qū)域?qū)?yīng)HTML代碼（2）編寫對應(yīng)的CSS代碼，如圖8-9所示。圖8-9主內(nèi)容區(qū)域?qū)?yīng)CSS代碼（3）保存文件，預(yù)覽的效果如圖8-10所示。圖8-10主內(nèi)容區(qū)域預(yù)覽效果60知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）編寫內(nèi)容區(qū)對應(yīng)的容器結(jié)構(gòu)。（2）編寫對應(yīng)的css樣式。（3）內(nèi)容區(qū)的完成，意味著學(xué)習(xí)又邁進(jìn)一步，增強(qiáng)我們的自信心和毅力，面對困難不退縮。3課后作業(yè)

任務(wù)單教學(xué)單元8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)教學(xué)內(nèi)容制作主內(nèi)容區(qū)域布局實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述制作寧德時代首頁對應(yīng)的主內(nèi)容區(qū)域，完成對應(yīng)的容器布局，編寫大體的css樣式。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施2.制作主內(nèi)容區(qū)域布局。（1）編寫主內(nèi)容區(qū)域?qū)?yīng)HTML代碼，如圖8-8所示。圖8-8主內(nèi)容區(qū)域?qū)?yīng)HTML代碼（2）編寫對應(yīng)的CSS代碼，如圖8-9所示。圖8-9主內(nèi)容區(qū)域?qū)?yīng)CSS代碼（3）保存文件，預(yù)覽的效果如圖8-10所示。圖8-10主內(nèi)容區(qū)域預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10內(nèi)容區(qū)的主體容器容器居中，標(biāo)題及三列容器位置準(zhǔn)確20每條新聞塊時間、標(biāo)題等元素完整，結(jié)構(gòu)正確20內(nèi)容區(qū)樣式布局采用的css樣式正確，有背景色或邊框輔助設(shè)計30細(xì)節(jié)設(shè)計時間元素前面的圖標(biāo)，膠囊圖形的設(shè)計20總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)教學(xué)內(nèi)容制作頁腳部分布局學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：頁腳區(qū)域的容器嵌套關(guān)系。編寫對應(yīng)初步的css樣式。能力目標(biāo)：（1）具備完成真實(shí)企業(yè)頁面頁腳的能力。素養(yǎng)目標(biāo)：（1）通過頁腳處的版權(quán)說明，教育學(xué)生了解知識產(chǎn)權(quán)的重要性，尊重他人的知識產(chǎn)權(quán)成果，避免侵權(quán)行為。學(xué)習(xí)重點(diǎn)Dl標(biāo)簽的應(yīng)用。特殊字符的輸入。設(shè)置背景色的輔助手段。學(xué)習(xí)難點(diǎn)Dl標(biāo)簽的應(yīng)用。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)列舉一些內(nèi)容區(qū)尚未完成的細(xì)節(jié)。3引入今天將進(jìn)行頁腳區(qū)域的練習(xí)。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授1. 分析頁腳區(qū)對應(yīng)的容器結(jié)構(gòu)。2. 分析各區(qū)域采用的標(biāo)簽。3. 分析各容器的主要css屬性。10任務(wù)實(shí)施3.制作頁腳部分布局。（1）編寫頁腳區(qū)域?qū)?yīng)HTML代碼，如圖8-11所示?！窘處熝菔?、講解】先完成footer、map、map-left、map-right容器，設(shè)置樣式邊框或底色，優(yōu)先推薦底色?！緦W(xué)生操作】完成對應(yīng)代碼?！窘處熝菔尽⒅v解】其次完成map-left、map-right內(nèi)部元素的代碼。Dd容器內(nèi)部的中文可以讓學(xué)生復(fù)制“資源包內(nèi)的文字素材文檔”的文字，節(jié)省時間。要求師生均充分利用快捷鍵操作加快編碼速度。圖8-11頁腳區(qū)域?qū)?yīng)HTML代碼（2）編寫對應(yīng)的CSS代碼，如圖8-12所示。【教師演示、講解】先設(shè)置最外層容器的樣式，預(yù)覽達(dá)成預(yù)期后，逐步補(bǔ)充內(nèi)部容器的樣式，重點(diǎn)講解容器的主要屬性，裝飾性的屬性可以逐步補(bǔ)全。圖8-12頁腳區(qū)域?qū)?yīng)CSS代碼（3）保存文件，預(yù)覽的效果如圖8-13所示。圖8-13頁腳區(qū)域預(yù)覽效果60知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1） 頁腳區(qū)域的容器嵌套關(guān)系。（2） 編寫對應(yīng)初步的css樣式。3課后作業(yè)

任務(wù)單教學(xué)單元8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)教學(xué)內(nèi)容制作頁腳部分布局實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述制作寧德時代首頁頁腳區(qū)域的布局及樣式效果。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施3.制作頁腳部分布局。（1）編寫頁腳區(qū)域?qū)?yīng)HTML代碼，如圖8-11所示。圖8-11頁腳區(qū)域?qū)?yīng)HTML代碼（2）編寫對應(yīng)的CSS代碼，如圖8-12所示。圖8-12頁腳區(qū)域?qū)?yīng)CSS代碼（3）保存文件，預(yù)覽的效果如圖8-13所示。圖8-13頁腳區(qū)域預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10主體容器左右布局，右側(cè)容器分5列布局20頁腳導(dǎo)航（站點(diǎn)地圖）采用dl標(biāo)簽設(shè)計，代碼正確20頁腳樣式布局采用的css樣式正確，有背景色或邊框輔助設(shè)計30細(xì)節(jié)設(shè)計時間元素前面的圖標(biāo)，膠囊圖形的設(shè)計20總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.4.2原型優(yōu)化階段教學(xué)內(nèi)容首頁效果優(yōu)化學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：完成頁頭、內(nèi)容區(qū)、頁腳區(qū)域的靜態(tài)CSS代碼的優(yōu)化。完成頁面中具備交互效果的代碼優(yōu)化，包括：盒子陰影特效、導(dǎo)航交互特效。能力目標(biāo)：（1）具備利用原型法，逐步優(yōu)化頁面效果的能力。素養(yǎng)目標(biāo)：（1）通過原型法，強(qiáng)調(diào)在編程細(xì)節(jié)上追求卓越和完美，引導(dǎo)學(xué)生樹立精益求精的工匠精神。學(xué)習(xí)重點(diǎn)靜態(tài)CSS代碼的優(yōu)化調(diào)整。學(xué)習(xí)難點(diǎn)盒子陰影特效、導(dǎo)航交互特效。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)頁腳區(qū)域的欄目導(dǎo)航通常也稱之為站點(diǎn)地圖，反映著整個網(wǎng)站的欄目結(jié)構(gòu)。為用戶提供了一個清晰、簡潔的網(wǎng)站結(jié)構(gòu)概覽，幫助他們快速找到所需的信息。站點(diǎn)地圖（Sitemap）在搜索引擎優(yōu)化（SEO）中具有多重重要意義。有助于確保所有頁面都能被用戶或搜索引擎爬蟲有效訪問，從而提高網(wǎng)站在搜索引擎中的可見性和排名。3引入從之前的頁頭、主內(nèi)容、頁腳部分的項目進(jìn)展來看，我們依然有許多樣式細(xì)節(jié)并沒有完成，頁面看上去甚至有點(diǎn)丑陋。當(dāng)我們完成框架布局后，接下來就要對細(xì)節(jié)進(jìn)行優(yōu)化設(shè)計。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授8.4.2原型優(yōu)化階段這一階段，我們分別從頁頭、主內(nèi)容、頁腳部分，一點(diǎn)點(diǎn)完善元素的外觀表現(xiàn)，但第一輪的優(yōu)化，我們還不打算涉及到動態(tài)交互效果。思政講解：設(shè)計師不僅要有敏銳的藝術(shù)觸覺，更要有對細(xì)節(jié)的極致追求。從色彩搭配到布局規(guī)劃，從字體選擇到交互設(shè)計，每一步都需精雕細(xì)琢，力求完美。設(shè)計師們需要像匠人一樣，耐心打磨每一個元素，不斷測試與優(yōu)化，確保網(wǎng)頁在視覺上既美觀大方，又能在功能上滿足用戶需求。他們深知，一個細(xì)微的改動，或許就能帶來用戶體驗(yàn)的顯著提升。正是這種對卓越的不懈追求，讓網(wǎng)頁設(shè)計作品煥發(fā)出獨(dú)特的魅力，成為連接用戶與信息的橋梁。精益求精的工匠精神，正是網(wǎng)頁設(shè)計師們不斷攀登藝術(shù)與技術(shù)高峰的動力源泉。10任務(wù)實(shí)施1.靜態(tài)CSS代碼的優(yōu)化CSS代碼盡可能把通用樣式、頁頭樣式、內(nèi)容區(qū)樣式、頁腳樣式對應(yīng)代碼集中放置。（1）頁頭區(qū)樣式的微調(diào)，代碼如圖8-14所示。圖8-14微調(diào)頁頭區(qū)樣式（2）內(nèi)容區(qū)樣式的微調(diào)，代碼如圖8-15所示。圖8-15微調(diào)內(nèi)容區(qū)樣式（3）頁腳區(qū)樣式的微調(diào)，代碼如圖8-16所示。圖8-16微調(diào)頁腳區(qū)樣式2.交互效果的優(yōu)化按照由簡入繁的過程，我們先把簡單的交互效果完成，剩下以下的三處交互需要我們留意的。（1）盒子陰影樣式box-shadow，能為元素添加投影效果，對應(yīng)的位置如圖8-17所示。圖8-17盒子陰影樣式對應(yīng)的代碼為：.newsli:hover{box-shadow:25px0px20px-10px#999;}/*box-shadow元素加陰影:x軸偏移量25pxy軸0模糊半徑20px擴(kuò)散半徑-10px（內(nèi)縮）陰影顏色*/注意反復(fù)調(diào)整box-shadow的前四個參數(shù)，可正值也可負(fù)值。（2）導(dǎo)航欄的級聯(lián)菜單效果，如圖8-18所示。圖8-18級聯(lián)菜單效果先完成光標(biāo)落在導(dǎo)航菜單時背景色、字體顏色改變的效果，對應(yīng)的CSS代碼如圖8-19所示。圖8-19級聯(lián)菜單的CSS代碼之前我們學(xué)習(xí)過如何將子菜單項縱向一個個放置在li元素下方。但在這個案例中，要將子菜單項橫向排列，無非就是控制左浮動。但難點(diǎn)是后面的背景白色，如果要將白色做出通欄（整個瀏覽器寬度）的話，顯然我們還要借助一個父容器來實(shí)現(xiàn)。修改HTML對應(yīng)代碼，先制作一個子菜單，做好效果后以此類推。對應(yīng)的HTML代碼如圖8-20所示。圖8-20一個子菜單的HTML代碼調(diào)整對應(yīng)的CSS代碼，如圖8-21所示。圖8-21子菜單的CSS代碼預(yù)覽效果如圖8-22所示，看看是否達(dá)到預(yù)期。圖8-22預(yù)覽效果解決一個li容器內(nèi)部結(jié)構(gòu)及樣式后，同樣方法，給“研發(fā)”、“品牌”、“關(guān)于我們”添加對應(yīng)的HTML代碼。50知識或技能拓展3.語言選擇區(qū)域的代碼優(yōu)化、搜索區(qū)域的設(shè)計思路。語言選擇區(qū)域，由于盒子面積跟前面導(dǎo)航子菜單面積樣式很多不一樣，加上代碼量現(xiàn)在有點(diǎn)多，我們建議不要采用復(fù)用樣式，還是另外再申明一個新樣式可能效率更高。修改后的HTML代碼如圖8-23所示。圖8-23語言選擇區(qū)域的HTML代碼對應(yīng)的CSS代碼如圖8-24所示。圖8-24語言選擇區(qū)域的CSS代碼這個首頁布局實(shí)踐，初學(xué)者能堅持到這個階段實(shí)屬不易，表示祝賀。這個搜索區(qū)域的實(shí)現(xiàn)，我們就停留在構(gòu)思就可以了，不要求完成對應(yīng)效果。這里大體說一下設(shè)計思路：第一個思路，按照前面子菜單項的做法。第二個思路,使用js腳本，通過點(diǎn)擊“搜索”的放大鏡圖標(biāo)，將原來隱藏的子菜單容器顯示出來。當(dāng)然這需要百度搜索一下相關(guān)知識，搜索關(guān)鍵詞可以為“javascript顯示指定元素”，也可以簡寫成“js顯示指定元素”。10任務(wù)總結(jié)通過本課的學(xué)習(xí)，要求我們：（1）完成頁頭、內(nèi)容區(qū)、頁腳區(qū)域的靜態(tài)CSS代碼的優(yōu)化。（2）完成頁面中具備交互效果的代碼優(yōu)化，包括：盒子陰影特效、導(dǎo)航交互特效。（3）應(yīng)用原型法，逐步優(yōu)化頁面效果，強(qiáng)調(diào)在編程細(xì)節(jié)上追求卓越和完美，樹立精益求精的工匠精神。3課后作業(yè)

任務(wù)單教學(xué)單元8.4.2原型優(yōu)化階段教學(xué)內(nèi)容首頁效果優(yōu)化實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述完成頁頭、內(nèi)容區(qū)、頁腳區(qū)域的靜態(tài)CSS代碼的優(yōu)化，以及盒子陰影特效、導(dǎo)航交互特效的代碼設(shè)計。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施1.靜態(tài)CSS代碼的優(yōu)化CSS代碼盡可能把通用樣式、頁頭樣式、內(nèi)容區(qū)樣式、頁腳樣式對應(yīng)代碼集中放置。（1）頁頭區(qū)樣式的微調(diào)，代碼如圖8-14所示。圖8-14微調(diào)頁頭區(qū)樣式（2）內(nèi)容區(qū)樣式的微調(diào)，代碼如圖8-15所示。圖8-15微調(diào)內(nèi)容區(qū)樣式（3）頁腳區(qū)樣式的微調(diào)，代碼如圖8-16所示。圖8-16微調(diào)頁腳區(qū)樣式2.交互效果的優(yōu)化按照由簡入繁的過程，我們先把簡單的交互效果完成，剩下以下的三處交互需要我們留意的。（1）盒子陰影樣式box-shadow，能為元素添加投影效果，對應(yīng)的位置如圖8-17所示。圖8-17盒子陰影樣式對應(yīng)的代碼為：.newsli:hover{box-shadow:25px0px20px-10px#999;}/*box-shadow元素加陰影:x軸偏移量25pxy軸0模糊半徑20px擴(kuò)散半徑-10px（內(nèi)縮）陰影顏色*/注意反復(fù)調(diào)整box-shadow的前四個參數(shù)，可正值也可負(fù)值。（2）導(dǎo)航欄的級聯(lián)菜單效果，如圖8-18所示。圖8-18級聯(lián)菜單效果先完成光標(biāo)落在導(dǎo)航菜單時背景色、字體顏色改變的效果，對應(yīng)的CSS代碼如圖8-19所示。圖8-19級聯(lián)菜單的CSS代碼之前我們學(xué)習(xí)過如何將子菜單項縱向一個個放置在li元素下方。但在這個案例中，要將子菜單項橫向排列，無非就是控制左浮動。但難點(diǎn)是后面的背景白色，如果要將白色做出通欄（整個瀏覽器寬度）的話，顯然我們還要借助一個父容器來實(shí)現(xiàn)。修改HTML對應(yīng)代碼，先制作一個子菜單，做好效果后以此類推。對應(yīng)的HTML代碼如圖8-20所示。圖8-20一個子菜單的HTML代碼調(diào)整對應(yīng)的CSS代碼，如圖8-21所示。圖8-21子菜單的CSS代碼預(yù)覽效果如圖8-22所示，看看是否達(dá)到預(yù)期。圖8-22預(yù)覽效果解決一個li容器內(nèi)部結(jié)構(gòu)及樣式后，同樣方法，給“研發(fā)”、“品牌”、“關(guān)于我們”添加對應(yīng)的HTML代碼。任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分頁頭區(qū)優(yōu)化元素定位準(zhǔn)確，外觀與原圖一致。20內(nèi)容區(qū)優(yōu)化元素定位準(zhǔn)確，外觀與原圖一致。10頁腳區(qū)優(yōu)化元素定位準(zhǔn)確，外觀與原圖一致。10盒子陰影特效交互效果符合要求，屬性值合理。30導(dǎo)航交互特效交互效果符合要求，屬性值合理。30總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.4.3代碼整理階段教學(xué)內(nèi)容代碼整理工作學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：完成最終代碼的整理工作，添加必要注釋。能力目標(biāo)：具備刪去無關(guān)代碼，刪除輔助用的線框和背景色的代碼整理能力。素養(yǎng)目標(biāo)：（1）在技術(shù)的細(xì)節(jié)上追求卓越和完美，培養(yǎng)學(xué)生的工匠精神和對技術(shù)的精益求精態(tài)度。學(xué)習(xí)重點(diǎn)刪除輔助用的線框、背景色學(xué)習(xí)難點(diǎn)刪除輔助用的線框時導(dǎo)致細(xì)微位置、尺寸的變化，要求在相關(guān)屬性進(jìn)行糾正。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)交互效果優(yōu)化過程中，我們也應(yīng)該了解網(wǎng)頁交互效果設(shè)計需要綜合考慮若干因素，比如用戶需求、簡潔性、一致性、可用性、響應(yīng)速度、視覺設(shè)計、人性化設(shè)計以及持續(xù)迭代與優(yōu)化等多個方面。2引入網(wǎng)頁代碼整理工作的意義在于提高代碼的可讀性、可維護(hù)性和性能，具體體現(xiàn)在以下幾個方面：提高可讀性：通過合理的縮進(jìn)、空行和注釋，代碼的結(jié)構(gòu)更加清晰，其他開發(fā)者（或未來的你）能夠更容易地理解代碼的邏輯和功能。減少錯誤：整潔的代碼更容易發(fā)現(xiàn)和修復(fù)錯誤，因?yàn)榇a的邏輯和結(jié)構(gòu)更加明確。便于調(diào)試：當(dāng)出現(xiàn)問題時，整潔的代碼可以更快地定位問題所在，減少調(diào)試時間。便于協(xié)作：團(tuán)隊開發(fā)時，整潔的代碼可以提高協(xié)作效率，減少因代碼風(fēng)格不一致導(dǎo)致的溝通成本。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授8.4.3代碼整理階段將輔助判定元素區(qū)域的背景色、邊框去除，檢查效果是否達(dá)成預(yù)期，最后將轉(zhuǎn)外聯(lián)樣式，更新圖片路徑。最終的HTML代碼如圖8-25所示。圖8-25最終完整的HTML代碼最終index.css文件對應(yīng)的樣式代碼如圖8-26所示。圖8-26最終完整的CSS代碼5任務(wù)實(shí)施按提供的代碼參考，仔細(xì)檢查代碼，并整理縮減、添加注釋。參考步驟：檢查錯誤點(diǎn)。增加背景色觀察錯誤原因。排除后刪除背景色。檢查個別屬性值是否合理。添加必要的注釋。65知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)，要求我們：了解代碼的整理工作，能正確刪去冗余代碼，刪除輔助用的線框和背景色。選擇必要的代碼行中添加注釋。在技術(shù)的細(xì)節(jié)上追求卓越和完美，培養(yǎng)工匠精神和對技術(shù)的精益求精態(tài)度。3課后作業(yè)

任務(wù)單教學(xué)單元8.4.3代碼整理階段教學(xué)內(nèi)容代碼整理工作實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述將代碼中輔助判定元素區(qū)域的背景色、邊框去除，檢查效果是否達(dá)成預(yù)期，最后將轉(zhuǎn)外聯(lián)樣式，更新圖片路徑。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施按提供的代碼參考，仔細(xì)檢查代碼，并整理縮減、添加注釋。參考步驟：（1）檢查錯誤點(diǎn)。（2）增加背景色觀察錯誤原因。排除后刪除背景色。（3）檢查個別屬性值是否合理。（4）添加必要的注釋。任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分錯誤排除手段能借助邊框、背景色觀察錯誤原因30圖片呈現(xiàn)正常顯示，無明顯縮放失真。10Css外聯(lián)能將css代碼剝離到單獨(dú)文件。30整體效果效果與原圖基本一致。30總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.5設(shè)計一級欄目頁面教學(xué)內(nèi)容一級欄目頁的制作學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：完成一級頁面的頁頭部分的制作。掌握代碼復(fù)用的操作步驟。修改海報區(qū)代碼。能力目標(biāo)：（1）強(qiáng)化代碼復(fù)用的意識，包括“快速復(fù)制、粘貼、插入技巧”、“樣式的復(fù)用”、“選擇器的并列申明”、“內(nèi)部樣式表轉(zhuǎn)外部樣式表”等。素養(yǎng)目標(biāo)：（1）在面對復(fù)雜問題時，引導(dǎo)學(xué)生學(xué)會分解問題、制定解決方案并實(shí)施驗(yàn)證的策略思維。學(xué)習(xí)重點(diǎn)復(fù)用首頁中有用的代碼及樣式學(xué)習(xí)難點(diǎn)更新海報區(qū)代碼教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)如何鏈接外置的Css文件？使用的標(biāo)簽的格式。外置樣式與內(nèi)置樣式相比，誰的優(yōu)先級別更高一些？5引入今天要完成“寧德時代”官網(wǎng)的“新聞”欄目頁，先登錄對應(yīng)頁面觀察頁面效果，搜集相關(guān)的圖文素材后開始設(shè)計。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授8.5設(shè)計一級欄目頁面完成首頁后，一級欄目頁就容易多了，畢竟頁面中工作量大的頁頭、頁腳保持與首頁相同代碼，只需要把內(nèi)容區(qū)完成即可。8.5.1準(zhǔn)備工作本節(jié)的目標(biāo)是完成“寧德時代”官網(wǎng)的“新聞”欄目頁，先登錄對應(yīng)頁面觀察頁面效果，如圖8-27所示。圖8-27“新聞”欄目頁效果將所需的圖片、圖標(biāo)保存到news的img文件夾中，如圖8-28所示。圖8-28“新聞”欄目頁所需圖片5任務(wù)實(shí)施8.5.2復(fù)用首頁中有用的代碼及樣式在Hbuilder中把index.html首頁的代碼全部復(fù)制到“news.html”，保留頁頭、頁腳區(qū)的代碼，刪除掉“內(nèi)容區(qū)”的HTML代碼。由于內(nèi)容區(qū)的布局版面完全不同，如果內(nèi)容區(qū)的容器依然叫“content”的話，通過外部樣式表勢必會把首頁的content樣式激活，所以我們需要將該頁面的內(nèi)容區(qū)容器class名稱修改成content-news。此外，還需要修改外部樣式表的路徑。修改后的HTML代碼（部分代碼已折疊）如圖8-29所示。圖8-29代碼復(fù)用文件保存后的預(yù)覽效果如圖8-30所示。圖8-30預(yù)覽效果8.5.3更新海報區(qū)代碼 由于index.css保留了海報區(qū)背景圖的設(shè)定，而一級頁面的海報區(qū)的元素、布局發(fā)生變化。所以我們可以采用在一級頁面news.html寫上同樣名稱的內(nèi)部樣式，覆蓋掉index.css的海報區(qū)樣式。1.在index.css中，找到包含海報圖的#header樣式，將這塊代碼復(fù)制到news.html的<style>標(biāo)簽內(nèi)部，如圖8-31所示。圖8-31復(fù)制header樣式2.修改背景圖路徑及背景圖的尺寸大小，如圖8-32所示，并預(yù)覽效果。圖8-32修改背景相關(guān)屬性3.在海報上添加上“新聞”標(biāo)題文字、“首頁>新聞”導(dǎo)航，這類型的導(dǎo)航我們俗稱“面包屑導(dǎo)航”，形容這導(dǎo)航內(nèi)容只有一小塊，比喻成小碎屑。先折疊主導(dǎo)航代碼，看清楚主導(dǎo)航的HTML代碼在什么位置終止，然后再它后方添加一個兄弟容器，如圖8-33、圖8-34所示。圖8-33折疊主導(dǎo)航代碼圖8-34添加容器對應(yīng)的CSS代碼如圖8-35所示。圖8-35CSS代碼文件保存后預(yù)覽的效果如圖8-36所示。圖8-36預(yù)覽效果60知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：掌握代碼復(fù)用的操作步驟。修改海報區(qū)代碼。在面對復(fù)雜問題時，學(xué)會分解問題、制定解決方案并實(shí)施驗(yàn)證。5課后作業(yè)任務(wù)單教學(xué)單元8.5設(shè)計一級欄目頁面教學(xué)內(nèi)容一級欄目頁的制作實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述完成“寧德時代”官網(wǎng)的“新聞”欄目頁。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施8.5.2復(fù)用首頁中有用的代碼及樣式在Hbuilder中把index.html首頁的代碼全部復(fù)制到“news.html”，保留頁頭、頁腳區(qū)的代碼，刪除掉“內(nèi)容區(qū)”的HTML代碼。由于內(nèi)容區(qū)的布局版面完全不同，如果內(nèi)容區(qū)的容器依然叫“content”的話，通過外部樣式表勢必會把首頁的content樣式激活，所以我們需要將該頁面的內(nèi)容區(qū)容器class名稱修改成content-news。此外，還需要修改外部樣式表的路徑。修改后的HTML代碼（部分代碼已折疊）如圖8-29所示。圖8-29代碼復(fù)用文件保存后的預(yù)覽效果如圖8-30所示。圖8-30預(yù)覽效果8.5.3更新海報區(qū)代碼 由于index.css保留了海報區(qū)背景圖的設(shè)定，而一級頁面的海報區(qū)的元素、布局發(fā)生變化。所以我們可以采用在一級頁面news.html寫上同樣名稱的內(nèi)部樣式，覆蓋掉index.css的海報區(qū)樣式。1.在index.css中，找到包含海報圖的#header樣式，將這塊代碼復(fù)制到news.html的<style>標(biāo)簽內(nèi)部，如圖8-31所示。圖8-31復(fù)制header樣式2.修改背景圖路徑及背景圖的尺寸大小，如圖8-32所示，并預(yù)覽效果。圖8-32修改背景相關(guān)屬性3.在海報上添加上“新聞”標(biāo)題文字、“首頁>新聞”導(dǎo)航，這類型的導(dǎo)航我們俗稱“面包屑導(dǎo)航”，形容這導(dǎo)航內(nèi)容只有一小塊，比喻成小碎屑。先折疊主導(dǎo)航代碼，看清楚主導(dǎo)航的HTML代碼在什么位置終止，然后再它后方添加一個兄弟容器，如圖8-33、圖8-34所示。圖8-33折疊主導(dǎo)航代碼圖8-34添加容器對應(yīng)的CSS代碼如圖8-35所示。圖8-35CSS代碼文件保存后預(yù)覽的效果如圖8-36所示。圖8-36預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10代碼復(fù)用能引用外部樣式。30代碼修改根據(jù)實(shí)際效果修改海報區(qū)代碼。40頁頭部分效果頁頭部分與效果基本一致。20總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.5.4內(nèi)容區(qū)的設(shè)計教學(xué)內(nèi)容完成一級頁面中內(nèi)容區(qū)的制作。學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。翻頁按鈕的ul結(jié)構(gòu)及樣式設(shè)置。能力目標(biāo)：具備多種思路完成每個新聞項容器的交互效果的能力。具備完成翻頁按鈕的ul結(jié)構(gòu)及樣式設(shè)置的能力。素養(yǎng)目標(biāo)：（1）通過實(shí)際案例、項目實(shí)踐等方式，讓學(xué)生將理論知識與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。學(xué)習(xí)重點(diǎn)主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置，翻頁按鈕的ul結(jié)構(gòu)及樣式設(shè)置。學(xué)習(xí)難點(diǎn)每個新聞項容器的交互效果的制作。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)外部樣式的導(dǎo)入語句。3引入上節(jié)課已經(jīng)完成頁頭部分，緊接著開始完成內(nèi)容區(qū)的設(shè)計。與首頁版式有點(diǎn)類似，內(nèi)容區(qū)主要是一些圖文元素，增加了一個翻頁功能。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授內(nèi)容區(qū)的效果分析，容器結(jié)構(gòu)采用的標(biāo)簽。翻頁功能區(qū)采用的標(biāo)簽，主要采用的樣式屬性。5任務(wù)實(shí)施8.5.4內(nèi)容區(qū)的設(shè)計（1）老規(guī)矩，先完成容器大體布局，對應(yīng)的HTML代碼如圖8-37所示。圖8-37內(nèi)容區(qū)對應(yīng)的HTML代碼對應(yīng)的CSS代碼如圖8-38所示。圖8-38內(nèi)容區(qū)對應(yīng)的CSS代碼（2）先給第一個li容器添加元素，完成效果后給其他li也添加相同內(nèi)容，期間采用復(fù)制完整的第一個容器對應(yīng)的代碼，再修改圖片及文字內(nèi)容，提高編寫效率。對應(yīng)的代碼如圖8-39所示。圖8-39第一個li容器的HTML結(jié)構(gòu)對應(yīng)的CSS代碼如圖8-40所示。圖8-40li容器的CSS代碼文件保存后，預(yù)覽的效果如圖8-41所示。圖8-41預(yù)覽效果（3）制作圖片區(qū)域的交互效果。li元素底部有一條灰色細(xì)線，光標(biāo)移動到li元素上方時，容器底部灰色細(xì)線上方出現(xiàn)一條位置重疊的藍(lán)色細(xì)線，藍(lán)色細(xì)線沿用load進(jìn)度條的效果，從寬度0到100%。實(shí)現(xiàn)的思路分析：思路一：如果采用li元素設(shè)置下邊框的方式，hover狀態(tài)時改變?yōu)樗{(lán)色。即便顏色能從灰色過渡到藍(lán)色，也無法做到藍(lán)色寬度一點(diǎn)點(diǎn)增加的動態(tài)效果。如果對設(shè)置下邊框的做法仍不死心，我們要搜索相關(guān)案例，明確一些邊框能否支持漸變，漸變色樣式是否支持transition過渡效果。思路二：給li添加一個父容器，父容器高度比li容器高度多1個像素，再考慮能否實(shí)現(xiàn)。但這做法無疑會破壞我們現(xiàn)階段的HTML結(jié)構(gòu)，即便可行也不劃算。思路三：用并列的兩個1px高的空白容器，一個灰色背景色，一個藍(lán)色背景色，它倆采用絕對定位方式實(shí)現(xiàn)位置的重疊，hover狀態(tài)時把藍(lán)色容器顯示出來，并將width屬性做一個過渡效果。思路四：在HTML結(jié)構(gòu)中，添加嵌套的1px高的父子容器，父容器采用灰色背景色，子容器藍(lán)色背景，子容器的width屬性做transition過渡。綜合考慮，我們采用思路三的方式最簡單有效。對應(yīng)的CSS代碼如圖8-42所示。圖8-42CSS代碼預(yù)覽效果后，新聞li元素的交互效果無誤，但發(fā)現(xiàn)頁頭頂部導(dǎo)航雖然固定定位在頂部，但是在滾屏?xí)r，下方的圖片內(nèi)容卻覆蓋到導(dǎo)航欄上的異常，估計主內(nèi)容區(qū)個別元素采用定位、浮動后被分配了一個較大的z-index值，或者設(shè)置了比z-index零的默認(rèn)值還大的數(shù)值導(dǎo)致。我們在樣式中申明頂部導(dǎo)航容器的z-index為一個足夠大的數(shù)值（估算比頁面元素數(shù)量多即可，通常采用999、9999），如圖8-43所示。圖8-43設(shè)置z-index（4）到此我們就完成新聞列表項的效果。接下來制作“頁碼”部分，效果如圖8-44所示。圖8-44頁碼區(qū)域效果對應(yīng)的HTML代碼如圖8-45所示。圖8-45頁碼區(qū)域?qū)?yīng)的HTML代碼初步寫了一下樣式，如圖8-46所示，預(yù)覽后發(fā)現(xiàn)出現(xiàn)異常，如圖8-47所示。圖8-46頁碼區(qū)域?qū)?yīng)的CSS代碼圖8-47預(yù)覽效果有異常提問：這是什么原因?qū)е马摯a區(qū)容器跑到提問：這是什么原因?qū)е马摯a區(qū)容器跑到content-news容器的頂部？☆思政講解：一句話“從錯誤中學(xué)到的遠(yuǎn)比從正確中學(xué)到的更有價值！”通常，當(dāng)我們做對事情時，我們可能會感到滿足和自信，但往往沒有深入思考為什么這樣做是對的，或者是否有更好的方法。然而，當(dāng)我們犯錯時，情況就完全不同了。錯誤迫使我們停下來反思，去分析問題的根源，思考如何避免再次犯錯。這個過程需要我們調(diào)動更多的認(rèn)知資源，進(jìn)行深入的思考和學(xué)習(xí)。它不僅幫助我們理解問題的本質(zhì)，還培養(yǎng)了我們的批判性思維、解決問題的能力，以及適應(yīng)變化的能力。這句話提醒我們不要害怕犯錯，而是要把錯誤視為成長和學(xué)習(xí)的寶貴機(jī)會。通過不斷反思和總結(jié)經(jīng)驗(yàn)教訓(xùn)，我們可以從錯誤中汲取更多的智慧和力量，推動自己不斷前進(jìn)。解決方式：在內(nèi)容區(qū)樣式中，增加一行代碼：#content-news.news-list{height:1700px;}，如圖8-48所示，這個小插曲告訴我們，給容器設(shè)置高度是非常有必要的。圖8-48設(shè)置容器高度對應(yīng)的CSS代碼如圖8-49所示。圖8-49CSS代碼將文件保存后，預(yù)覽效果如圖8-50所示。圖8-50預(yù)覽效果65知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1） 主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。（2） 翻頁按鈕的ul結(jié)構(gòu)及樣式設(shè)置。（3） 具備多種思路完成每個新聞項容器的交互效果的能力。（4） 具備完成翻頁按鈕的ul結(jié)構(gòu)及樣式設(shè)置的能力。（5）通過實(shí)際案例、項目實(shí)踐等方式，讓學(xué)生將理論知識與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。3課后作業(yè)

任務(wù)單教學(xué)單元8.5.4內(nèi)容區(qū)的設(shè)計教學(xué)內(nèi)容完成一級頁面中內(nèi)容區(qū)的制作。實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述完成寧德時代新聞欄目頁面中內(nèi)容區(qū)的制作。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施8.5.4內(nèi)容區(qū)的設(shè)計（1）老規(guī)矩，先完成容器大體布局，對應(yīng)的HTML代碼如圖8-37所示。圖8-37內(nèi)容區(qū)對應(yīng)的HTML代碼對應(yīng)的CSS代碼如圖8-38所示。圖8-38內(nèi)容區(qū)對應(yīng)的CSS代碼（2）先給第一個li容器添加元素，完成效果后給其他li也添加相同內(nèi)容，期間采用復(fù)制完整的第一個容器對應(yīng)的代碼，再修改圖片及文字內(nèi)容，提高編寫效率。對應(yīng)的代碼如圖8-39所示。圖8-39第一個li容器的HTML結(jié)構(gòu)對應(yīng)的CSS代碼如圖8-40所示。圖8-40li容器的CSS代碼文件保存后，預(yù)覽的效果如圖8-41所示。圖8-41預(yù)覽效果（3）制作圖片區(qū)域的交互效果。我們采用思路三的方式最簡單有效。（思路一、二參見課本）思路三：用并列的兩個1px高的空白容器，一個灰色背景色，一個藍(lán)色背景色，它倆采用絕對定位方式實(shí)現(xiàn)位置的重疊，hover狀態(tài)時把藍(lán)色容器顯示出來，并將width屬性做一個過渡效果。對應(yīng)的CSS代碼如圖8-42所示。圖8-42CSS代碼預(yù)覽效果后，新聞li元素的交互效果無誤，但發(fā)現(xiàn)頁頭頂部導(dǎo)航雖然固定定位在頂部，但是在滾屏?xí)r，下方的圖片內(nèi)容卻覆蓋到導(dǎo)航欄上的異常，估計主內(nèi)容區(qū)個別元素采用定位、浮動后被分配了一個較大的z-index值，或者設(shè)置了比z-index零的默認(rèn)值還大的數(shù)值導(dǎo)致。我們在樣式中申明頂部導(dǎo)航容器的z-index為一個足夠大的數(shù)值（估算比頁面元素數(shù)量多即可，通常采用999、9999），如圖8-43所示。圖8-43設(shè)置z-index（4）到此我們就完成新聞列表項的效果。接下來制作“頁碼”部分，效果如圖8-44所示。圖8-44頁碼區(qū)域效果對應(yīng)的HTML代碼如圖8-45所示。圖8-45頁碼區(qū)域?qū)?yīng)的HTML代碼初步寫了一下樣式，如圖8-46所示，預(yù)覽后發(fā)現(xiàn)出現(xiàn)異常，如圖8-47所示。圖8-46頁碼區(qū)域?qū)?yīng)的CSS代碼圖8-47預(yù)覽效果有異常在內(nèi)容區(qū)樣式中，增加一行代碼：#content-news.news-list{height:1700px;}，如圖8-48所示，這個小插曲告訴我們，給容器設(shè)置高度是非常有必要的。圖8-48設(shè)置容器高度對應(yīng)的CSS代碼如圖8-49所示。圖8-49CSS代碼將文件保存后，預(yù)覽效果如圖8-50所示。圖8-50預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10新聞子項布局結(jié)構(gòu)正確30交互效果準(zhǔn)確，與效果一致。30翻頁按鈕容器對應(yīng)代碼正確10樣式呈現(xiàn)效果一致。20總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.5.5CSS代碼的整理及樣式表外聯(lián)教學(xué)內(nèi)容整理代碼工作學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：了解常見外部樣式表的命名習(xí)慣。將需要復(fù)用的css樣式保存到外部樣式表能力目標(biāo)：（1）具備合理拆分內(nèi)部樣式到外部樣式表的思維與技能。素養(yǎng)目標(biāo)：（1）在軟件開發(fā)過程中，引導(dǎo)學(xué)生關(guān)注用戶需求和使用體驗(yàn)，培養(yǎng)其用戶導(dǎo)向的思維方式。學(xué)習(xí)重點(diǎn)常見外部樣式表的命名。學(xué)習(xí)難點(diǎn)將頁面部分需要復(fù)用的css樣式保存到外部樣式表。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)回憶翻頁按鈕中采用的標(biāo)簽。倘若為每個按鈕增加交互效果，可以采用哪些特效？分別可以使用什么樣式來達(dá)成預(yù)期？3引入我們反復(fù)強(qiáng)調(diào)，代碼的整理，有利于發(fā)現(xiàn)細(xì)節(jié)紕漏，同時對知識點(diǎn)的鞏固，也有一定的幫助。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授8.5.5CSS代碼的整理及樣式表外聯(lián)（1）去除css中的輔助邊框、背景底色，body容器調(diào)整背景色為白色。代碼如圖8-51所示。圖8-51CSS代碼（2）將部分樣式轉(zhuǎn)到外部的樣式表文件中，考慮到有些布局樣式，在其他頁面中也可以派上用場。比如新聞列表項的樣式，可能極少機(jī)會在其他欄目中用的上。但頁碼區(qū)樣式，只要存在需要翻頁的情況，比如“解決方案”、“品牌”這些頁面量較多的欄目，就極大幾率也采用同樣的頁碼樣式。這樣理解下來，我們的頁碼區(qū)樣式就可以成為“公共”樣式，在許多網(wǎng)站中，會采用common.css來存儲公共樣式，另外也可以采用如表8-1所示的分類，拆開來存儲到不同的樣式文件中。強(qiáng)調(diào)一個“拆”字，拆成不同規(guī)格的“積木”組件，方便以后反復(fù)拼成各種“布局作品”。用途文件名稱用途文件名稱主要的樣式表master.css布局，版面layout.css專欄columns.css文字font.css打印樣式print.css主題themes.css表8-1常見外部樣式表10任務(wù)實(shí)施（1）在站點(diǎn)根目錄下css文件夾中，創(chuàng)建common.css，如圖8-52所示。圖8-52外部樣式表（2）把頁碼區(qū)樣式復(fù)制到common.css，并更新圖片路徑，如圖8-53所示。圖8-53更新圖片路徑（3）在news.html文件中追加一條鏈接指向common.css，如圖8-54所示。圖8-54增加樣式表鏈接（4）將所有文件保存，預(yù)覽效果是否達(dá)到預(yù)期。最終news.html的內(nèi)部樣式如圖8-55所示。圖8-55內(nèi)部樣式common.css文件的代碼如圖8-56所示。圖8-56外部樣式60知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）了解常見外部樣式表的命名習(xí)慣。（2）將需要復(fù)用的css樣式保存到外部樣式表（3）具備合理拆分內(nèi)部樣式到外部樣式表的思維與技能。3課后作業(yè)

任務(wù)單教學(xué)單元8.5.5CSS代碼的整理及樣式表外聯(lián)教學(xué)內(nèi)容整理代碼工作實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述整理寧德時代新聞欄目頁的代碼，查漏補(bǔ)缺，并將部分樣式定義到外部樣式表。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施（1）在站點(diǎn)根目錄下css文件夾中，創(chuàng)建common.css，如圖8-52所示。圖8-52外部樣式表（2）把頁碼區(qū)樣式復(fù)制到common.css，并更新圖片路徑，如圖8-53所示。圖8-53更新圖片路徑（3）在news.html文件中追加一條鏈接指向common.css，如圖8-54所示。圖8-54增加樣式表鏈接（4）將所有文件保存，預(yù)覽效果是否達(dá)到預(yù)期。最終news.html的內(nèi)部樣式如圖8-55所示。圖8-55內(nèi)部樣式common.css文件的代碼如圖8-56所示。圖8-56外部樣式任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分代碼整理編碼習(xí)慣良好。20查漏補(bǔ)缺預(yù)覽效果達(dá)成預(yù)期。40樣式外置合理挑選能復(fù)用的css樣式添加到外部樣式表。40總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元8.6設(shè)計詳情頁布局教學(xué)內(nèi)容制作詳情頁學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：完成主要框架的代碼復(fù)用。頁頭區(qū)結(jié)構(gòu)和樣式的修改。定義內(nèi)容區(qū)容器結(jié)構(gòu)，并添加圖文元素。能力目標(biāo)：具備代碼復(fù)用的意識與操作能力。具備重定義頁頭區(qū)結(jié)構(gòu)及樣式的能力。具備新聞圖文排版的能力。素養(yǎng)目標(biāo)：（1）通過對新能源的認(rèn)識，引導(dǎo)學(xué)生關(guān)注能源消耗和資源利用問題，培養(yǎng)其環(huán)保意識和社會責(zé)任感。學(xué)習(xí)重點(diǎn)復(fù)用相關(guān)代碼，頁頭區(qū)的設(shè)計，內(nèi)容區(qū)的布局與內(nèi)容制作。學(xué)習(xí)難點(diǎn)頁頭區(qū)的設(shè)計，內(nèi)容區(qū)的布局與內(nèi)容制作。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)新聞欄目頁中，內(nèi)容區(qū)的設(shè)計主要采用的標(biāo)簽，主要的樣式。3引入當(dāng)完成新聞欄目頁后，瀏覽者點(diǎn)擊某條新聞，就可以瀏覽具體的新聞資訊，這個跳轉(zhuǎn)后的頁面就是我們本次課要完成的新聞詳情頁。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授8.6設(shè)計詳情頁布局本節(jié)的目標(biāo)是完成“寧德時代”官網(wǎng)的“新聞”欄目頁的其中一個頁面，如圖8-57所示。先登錄對應(yīng)頁面觀察頁面效果，同時將所需的圖片、圖標(biāo)保存到news的img文件夾中。圖8-57新聞詳情頁觀察到詳情頁的海報區(qū)沒有了圖片，反而是文章的標(biāo)題和日期放在原來海報區(qū)的位置上。從結(jié)構(gòu)的角度出發(fā)，我們不能認(rèn)為只是將背景圖取消，文章標(biāo)題和日期放在頁頭的容器中，這樣處理的話，在內(nèi)容區(qū)容器的文章豈不是沒有了標(biāo)題？10任務(wù)實(shí)施8.6.1復(fù)用首頁中的相關(guān)代碼在Hbuilder項目管理器中，在news文件夾下新建一個名為“news-2024-0001.html”的文件，把index.html代碼復(fù)制到該文件中，得到頁頭、頁腳區(qū)域的布局效果。修改一下<title>標(biāo)簽內(nèi)容，把css樣式表路徑更換一下，并刪除內(nèi)容區(qū)代碼，如圖8-58所示。圖8-58代碼復(fù)用8.6.2頁頭區(qū)的設(shè)計建議大家同時打開index.css，快速的查找目標(biāo)樣式，也同樣可以快速復(fù)制到正在編寫的HTML文件中，操作如圖8-59所示。圖8-59復(fù)用logo元素樣式文件預(yù)覽后，我們發(fā)現(xiàn)由于導(dǎo)航欄容器的底色一直是白色，這也首頁不同。正確的情況下，logo對應(yīng)圖片默認(rèn)應(yīng)該是藍(lán)色logo圖。 在news-2004-0001.html修正圖片路徑，如圖8-60所示。圖8-60修正背景圖不斷修改樣式，不斷瀏覽測試觀察效果，最終確定導(dǎo)航欄的CSS代碼，如圖8-61所示。圖8-61內(nèi)部CSS代碼8.6.3內(nèi)容區(qū)容器的布局我們將內(nèi)容區(qū)的容器id命名為"content-detail"，搭建基本的結(jié)構(gòu)，代碼如圖8-62所示。圖8-62內(nèi)容區(qū)結(jié)構(gòu)編寫初步的CSS代碼，如圖8-63所示。圖8-63框架對應(yīng)的CSS代碼預(yù)覽的效果如圖8-64所示。圖8-64預(yù)覽效果8.6.4往內(nèi)容區(qū)添加圖文混排內(nèi)容該詳情頁的元素還算很簡單，沒有像門戶網(wǎng)站的文章詳情頁包含了大量的外部鏈接、各種分享圖標(biāo)、大堆的友情鏈接，只需要完成文章標(biāo)題，發(fā)布日期、小節(jié)標(biāo)題、圖片、圖片標(biāo)注這些元素的樣式定義。先寫對應(yīng)的HTML結(jié)構(gòu)，如圖8-65所示?！窘處熝菔尽⒅v解】完成detail容器內(nèi)部元素的代碼。內(nèi)部的中文可以讓學(xué)生復(fù)制“資源包內(nèi)的文字素材文檔”的文字，節(jié)省時間。要求師生均充分利用快捷鍵操作加快編碼速度。圖8-65圖文區(qū)域容器結(jié)構(gòu)編寫對應(yīng)的CSS代碼，如圖8-66所示。圖8-66圖文區(qū)域的CSS代碼60知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）完成主要框架的代碼復(fù)用。（2）頁頭區(qū)結(jié)構(gòu)和樣式的修改。（3）定義內(nèi)容區(qū)容器結(jié)構(gòu)，并添加圖文元素。（4）通過對新能源的認(rèn)識，關(guān)注能源消耗和資源利用問題，培養(yǎng)其環(huán)保意識和社會責(zé)任感。3課后作業(yè)

任務(wù)單教學(xué)單元8.6設(shè)計詳情頁布局教學(xué)內(nèi)容制作詳情頁實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述完成寧德時代新聞欄目中的一個詳情頁的制作。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施8.6.1復(fù)用首頁中的相關(guān)代碼在Hbuilder項目管理器中，在news文件夾下新建一個名為“news-2024-0001.html”的文件，把index.html代碼復(fù)制到該文件中，得到頁頭、頁腳區(qū)域的布局效果。修改一下<title>標(biāo)簽內(nèi)容，把css樣式表路徑更換一下，并刪除內(nèi)容區(qū)代碼，如圖8-58所示。圖8-58代碼復(fù)用8.6.2頁頭區(qū)的設(shè)計建議大家同時打開index.css，快速的查找目標(biāo)樣式，也同樣可以快速復(fù)制到正在編寫的HTML文件中，操作如圖8-59所示。圖8-59復(fù)用logo元素樣式文件預(yù)覽后，我們發(fā)現(xiàn)由于導(dǎo)航欄容器的底色一直是白色，這也首頁不同。正確的情況下，logo對應(yīng)圖片默認(rèn)應(yīng)該是藍(lán)色logo圖。 在news-2004-0001.html修正圖片路徑，如圖8-60所示。圖8-60修正背景圖不斷修改樣式，不斷瀏覽測試觀察效果，最終確定導(dǎo)航欄的CSS代碼，如圖8-61所示。圖8-61內(nèi)部CSS代碼8.6.3內(nèi)容區(qū)容器的布局我們將內(nèi)容區(qū)的容器id命名為"content-detail"，搭建基本的結(jié)構(gòu)，代碼如圖8-62所示。圖8-62內(nèi)容區(qū)結(jié)構(gòu)編寫初步的CSS代碼，如圖8-63所示。圖8-63框架對應(yīng)的CSS代碼預(yù)覽的效果如圖8-64所示。圖8-64預(yù)覽效果8.6.4往內(nèi)容區(qū)添加圖文混排內(nèi)容該詳情頁的元素還算很簡單，沒有像門戶網(wǎng)站的文章詳情頁包含了大量的外部鏈接、各種分享圖標(biāo)、大堆的友情鏈接，只需要完成文章標(biāo)題，發(fā)布日期、小節(jié)標(biāo)題、圖片、圖片標(biāo)注這些元素的樣式定義。先寫對應(yīng)的HTML結(jié)構(gòu)，如圖8-65所示。圖8-65圖文區(qū)域容器結(jié)構(gòu)編寫對應(yīng)的CSS代碼，如圖8-66所示。圖8-66圖文區(qū)域的CSS代碼任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10代碼復(fù)用正確鏈接外部樣式。10內(nèi)容區(qū)容器結(jié)構(gòu)采用合理的標(biāo)簽，結(jié)構(gòu)關(guān)系正確。30內(nèi)容區(qū)圖文樣式預(yù)覽效果與原圖一致。50總分說明：評分項目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。教學(xué)單元8.6設(shè)計詳情頁布局教學(xué)內(nèi)容制作詳情頁學(xué)習(xí)