教學(xué)單元第六章個(gè)人網(wǎng)頁(yè)布局實(shí)戰(zhàn)教學(xué)內(nèi)容將網(wǎng)頁(yè)截圖進(jìn)行切片學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：掌握切片工具的使用及快速?gòu)?fù)制切片的操作。明確必須輸出或者不必輸出的元素。對(duì)圖標(biāo)元素進(jìn)行必要整合，形成精靈圖。能力目標(biāo)：具備使用Photoshop完成效果圖切片并輸出的能力。具備明辨所需的用戶切片對(duì)象的能力。素養(yǎng)目標(biāo)：養(yǎng)成精確進(jìn)行切片的職業(yè)素養(yǎng)。鞏固對(duì)用戶切片規(guī)范英文命名的習(xí)慣。學(xué)習(xí)重點(diǎn)切片工具的使用，明確所需的輸出元素，整合圖標(biāo)成精靈圖。學(xué)習(xí)難點(diǎn)整合圖標(biāo)成精靈圖的過(guò)程中，保證圖標(biāo)的間距方便計(jì)算偏移量。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)無(wú)0引入作為半學(xué)期的知識(shí)總結(jié)回顧，我們將完成一個(gè)簡(jiǎn)單的單頁(yè)面?zhèn)€人網(wǎng)站，這個(gè)專題練習(xí)，可以看成是互聯(lián)網(wǎng)上的一份個(gè)人簡(jiǎn)歷表。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授6.1將網(wǎng)頁(yè)截圖進(jìn)行切片將如圖6-1所示的效果圖進(jìn)行切片，要求圖片盡可能少的空白區(qū)域以減少圖片文件大??；圖片尺寸盡可能湊個(gè)整數(shù)或偶數(shù)以方便計(jì)算盒子的相關(guān)間距；生活照片類圖片采用jpg格式，圖標(biāo)類圖片盡可能采用支持透明底的png格式。圖6-1單頁(yè)面網(wǎng)站效果☆思政講解：切圖時(shí)要貫徹嚴(yán)謹(jǐn)細(xì)致的工作作風(fēng)，精確到1個(gè)像素的設(shè)計(jì)要求，避免在設(shè)置css樣式時(shí)增加工作負(fù)擔(dān)。在學(xué)習(xí)和生活中，都要保持高度的責(zé)任心和敬業(yè)精神，對(duì)待每一項(xiàng)任務(wù)都要認(rèn)真負(fù)責(zé)，不放過(guò)任何一個(gè)細(xì)節(jié)。這種作風(fēng)的養(yǎng)成，不僅有助于提高工作效率和質(zhì)量，還有助于培養(yǎng)我們的責(zé)任感和擔(dān)當(dāng)精神。5任務(wù)實(shí)施（1）在photoshop軟件中打開(kāi)“unit6-img\教材插圖\圖6-1單頁(yè)面網(wǎng)站效果.png”，在“視圖”菜單中激活“標(biāo)尺”選項(xiàng)。（2）觀察圖片，明確哪些內(nèi)容是需要輸出為圖片格式。一句話表述“可以用簡(jiǎn)單的css樣式實(shí)現(xiàn)的內(nèi)容原則上就不要輸出圖片”。（3）建立第一根參考線，要求參考線盡可能貼近圖像內(nèi)容，減少圖像文件大小，如圖6-2所示。圖6-2建立參考線注意，先不要把其余的參考線一口氣建立，因?yàn)閰⒖季€包圍的圖標(biāo)尺寸難以取整數(shù)，在寫(xiě)CSS代碼時(shí)難以記憶和計(jì)算。（4）使用框選工具，建立選區(qū)后，用上下光標(biāo)鍵調(diào)整圖標(biāo)在選區(qū)中間，如圖6-3所示。圖6-3框選工具選擇目標(biāo)有了這個(gè)選區(qū)作為定位，Photoshop默認(rèn)對(duì)象之間有磁吸（吸附）功能，我們可以建立另外上、下、右三根參考線了，如圖6-4所示。圖6-4創(chuàng)建參考線注意這時(shí)候最好不要“取消選區(qū)”，我們還可以繼續(xù)壓榨它，把選區(qū)移動(dòng)到其他圖標(biāo)上，用上述方式把對(duì)應(yīng)的參考線建立，如圖6-5所示。圖6-5移動(dòng)選區(qū)并創(chuàng)建參考線參考線建立好之后的效果如圖6-6所示。圖6-6參考線全貌（5）使用切片工具給各個(gè)分割好的區(qū)域進(jìn)行切片，并且命名切片，如圖6-7所示。圖標(biāo)類命名一般為icon+序號(hào)或者icon+英文關(guān)鍵字。圖6-7切片命名（6）選擇“文件”-“輸出為web所用格式”，在如圖6-8所示的對(duì)話框中，檢查一下輸出的格式，點(diǎn)擊“存儲(chǔ)”。圖6-8輸出web所用格式的圖片在彈出的文件存儲(chǔ)對(duì)話框中，切片切記選中為“所有用戶切片”，如圖6-9所示。圖6-9所有用戶切片在目標(biāo)文件夾中查看對(duì)應(yīng)的圖片，如圖6-10所示。圖6-10查看輸出結(jié)果（7）到這一步，我們就做好素材的準(zhǔn)備了，文字內(nèi)容的話，我們可以采用自己手機(jī)app自帶的“文字提取”功能來(lái)獲取。65知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1） 掌握切片工具的使用及快速?gòu)?fù)制切片的操作。（2） 明確必須輸出或者不必輸出的元素。（3） 對(duì)圖標(biāo)元素進(jìn)行必要整合，形成精靈圖。（4） 養(yǎng)成精確進(jìn)行切片的職業(yè)素養(yǎng)。（5） 鞏固對(duì)用戶切片規(guī)范英文命名的習(xí)慣。5課后作業(yè)

任務(wù)單教學(xué)單元第六章個(gè)人網(wǎng)頁(yè)布局實(shí)戰(zhàn)教學(xué)內(nèi)容將網(wǎng)頁(yè)截圖進(jìn)行切片實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述將提供的頁(yè)面效果圖進(jìn)行切片，并輸出對(duì)應(yīng)規(guī)范的英文名稱的圖片文件。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施（1）在photoshop軟件中打開(kāi)“unit6-img\教材插圖\圖6-1單頁(yè)面網(wǎng)站效果.png”，在“視圖”菜單中激活“標(biāo)尺”選項(xiàng)。（2）觀察圖片，明確哪些內(nèi)容是需要輸出為圖片格式。一句話表述“可以用簡(jiǎn)單的css樣式實(shí)現(xiàn)的內(nèi)容原則上就不要輸出圖片”。（3）建立第一根參考線，要求參考線盡可能貼近圖像內(nèi)容，減少圖像文件大小，如圖6-2所示。圖6-2建立參考線注意，先不要把其余的參考線一口氣建立，因?yàn)閰⒖季€包圍的圖標(biāo)尺寸難以取整數(shù)，在寫(xiě)CSS代碼時(shí)難以記憶和計(jì)算。（4）使用框選工具，建立選區(qū)后，用上下光標(biāo)鍵調(diào)整圖標(biāo)在選區(qū)中間，如圖6-3所示。圖6-3框選工具選擇目標(biāo)有了這個(gè)選區(qū)作為定位，Photoshop默認(rèn)對(duì)象之間有磁吸（吸附）功能，我們可以建立另外上、下、右三根參考線了，如圖6-4所示。圖6-4創(chuàng)建參考線注意這時(shí)候最好不要“取消選區(qū)”，我們還可以繼續(xù)壓榨它，把選區(qū)移動(dòng)到其他圖標(biāo)上，用上述方式把對(duì)應(yīng)的參考線建立，如圖6-5所示。圖6-5移動(dòng)選區(qū)并創(chuàng)建參考線參考線建立好之后的效果如圖6-6所示。圖6-6參考線全貌（5）使用切片工具給各個(gè)分割好的區(qū)域進(jìn)行切片，并且命名切片，如圖6-7所示。圖標(biāo)類命名一般為icon+序號(hào)或者icon+英文關(guān)鍵字。圖6-7切片命名（6）選擇“文件”-“輸出為web所用格式”，在如圖6-8所示的對(duì)話框中，檢查一下輸出的格式，點(diǎn)擊“存儲(chǔ)”。圖6-8輸出web所用格式的圖片在彈出的文件存儲(chǔ)對(duì)話框中，切片切記選中為“所有用戶切片”，如圖6-9所示。圖6-9所有用戶切片在目標(biāo)文件夾中查看對(duì)應(yīng)的圖片，如圖6-10所示。圖6-10查看輸出結(jié)果（7）到這一步，我們就做好素材的準(zhǔn)備了，文字內(nèi)容的話，我們可以采用自己手機(jī)app自帶的“文字提取”功能來(lái)獲取。任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分參考線創(chuàng)建參考線位置精確，力求包裹元素的同時(shí)，尺寸較小。30切片工具使用切片準(zhǔn)確到位，無(wú)較大的空白區(qū)。30文件輸出文件名符合常用英文命名規(guī)矩。40總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元6.3搭建項(xiàng)目并進(jìn)行頁(yè)面布局教學(xué)內(nèi)容頁(yè)面結(jié)構(gòu)布局學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：（1）<section>區(qū)塊標(biāo)簽搭建主體框架（2）制作頁(yè)面時(shí)要嚴(yán)格做到的標(biāo)準(zhǔn)要求。（3）完成第一、二<section>區(qū)塊對(duì)應(yīng)的代碼和樣式。能力目標(biāo)：具備一定的準(zhǔn)職業(yè)人的項(xiàng)目開(kāi)發(fā)能力。具備用語(yǔ)義化角度思考所選用標(biāo)簽的思維定勢(shì)。素養(yǎng)目標(biāo)：（1）通過(guò)實(shí)際案例、項(xiàng)目實(shí)踐等方式，讓學(xué)生將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，培養(yǎng)其實(shí)踐能力和創(chuàng)新精神。學(xué)習(xí)重點(diǎn)頁(yè)面布局工作標(biāo)準(zhǔn)及要求。學(xué)習(xí)難點(diǎn)盡可能多角度、語(yǔ)義化地思考所選用的標(biāo)簽。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)切片工作要注意的任務(wù)要求：建立參考線，力求包裹目標(biāo)對(duì)象的同時(shí)，面積較小。切片貼附參考線，運(yùn)用快捷鍵快速?gòu)?fù)制，光標(biāo)鍵精確移動(dòng)。給切片命名，名稱符合英文要求。3引入接下來(lái)利用獲取的素材來(lái)構(gòu)建網(wǎng)頁(yè)。站點(diǎn)根目錄文件夾命名為“site”或者“website”，里面包含如圖6-11所示的“css”、“images”兩個(gè)文件夾，將切圖得到的圖片放入在images文件夾中。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授在hbuilder中“文件”-“打開(kāi)目錄”，選擇site文件夾，然后新建一個(gè)index.html頁(yè)面，開(kāi)始搭建頁(yè)面。整體觀察一下，該頁(yè)面屬于單頁(yè)面網(wǎng)頁(yè)，意思是這個(gè)網(wǎng)站基本就是這一個(gè)網(wǎng)頁(yè)，通常用于信息量較小、且經(jīng)常不會(huì)更新的場(chǎng)景，比如個(gè)人求職類頁(yè)面。這個(gè)頁(yè)面從效果圖來(lái)看，基本上屬于文字類頁(yè)面，且頁(yè)頭劃分的不是很明確，有點(diǎn)類似長(zhǎng)篇文章結(jié)構(gòu)，所以我們將用<section>區(qū)塊標(biāo)簽設(shè)計(jì)，當(dāng)然也可以采用傳統(tǒng)的<div>標(biāo)簽搭建主要框架。注意：在制作完整的一個(gè)頁(yè)面時(shí)，要嚴(yán)格做到以下幾點(diǎn)要求：用注釋標(biāo)注各大容器的結(jié)構(gòu)和css樣式范圍。盡可能的簡(jiǎn)化HTML結(jié)構(gòu)，不添加非必須的父容器。定義通用樣式，可以省去許多代碼量。寫(xiě)css選擇器時(shí)，盡量在每個(gè)選擇器前面加上統(tǒng)一的父級(jí)id或class，看起來(lái)會(huì)非常整齊，便于維護(hù)。每個(gè)容器應(yīng)該填寫(xiě)height屬性，以免出現(xiàn)坍塌。給大的容器添加顏色各異的底色，這會(huì)有助于及時(shí)判定異常所在。寫(xiě)完大的容器對(duì)應(yīng)的HTML代碼后，及時(shí)調(diào)試看結(jié)果，結(jié)果無(wú)誤后在hbuilder中將這完成的部分代碼進(jìn)行折疊，將會(huì)省去許多滾屏?xí)r間?！钏颊v解：以上都可以視為崗位工作的規(guī)矩，這些規(guī)矩看上去約束性很強(qiáng)，但從維護(hù)、返工的角度考慮，這些規(guī)矩實(shí)際上是對(duì)從業(yè)人員的一種幫助、保護(hù)。10任務(wù)實(shí)施（1）搭建第一個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-12所示。圖6-12第一個(gè)版塊的HTML代碼（2）編寫(xiě)對(duì)應(yīng)css樣式代碼，如圖6-13所示。圖6-13第一個(gè)版塊的CSS代碼（3）搭建第二個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-14所示。圖6-14第二個(gè)版塊的HTML代碼（4）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-15所示。圖6-15第二個(gè)版塊的CSS代碼60知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1）<section>區(qū)塊標(biāo)簽搭建主體框架（2）制作頁(yè)面時(shí)要嚴(yán)格做到的標(biāo)準(zhǔn)要求。（3）完成第一、二<section>區(qū)塊對(duì)應(yīng)的代碼和樣式。（4）具備一定的準(zhǔn)職業(yè)人的項(xiàng)目開(kāi)發(fā)能力，用語(yǔ)義化角度思考所選用標(biāo)簽。3課后作業(yè)

任務(wù)單教學(xué)單元6.3搭建項(xiàng)目并進(jìn)行頁(yè)面布局教學(xué)內(nèi)容頁(yè)面結(jié)構(gòu)布局實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述完成效果圖中第一、二版塊對(duì)應(yīng)的代碼和樣式。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施（1）搭建第一個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-12所示。圖6-12第一個(gè)版塊的HTML代碼（2）編寫(xiě)對(duì)應(yīng)css樣式代碼，如圖6-13所示。圖6-13第一個(gè)版塊的CSS代碼（3）搭建第二個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-14所示。圖6-14第二個(gè)版塊的HTML代碼（4）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-15所示。圖6-15第二個(gè)版塊的CSS代碼任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20版塊一容器結(jié)構(gòu)合理，代碼書(shū)寫(xiě)規(guī)范20Css樣式屬性值合理，效果接近效果圖20版塊二容器結(jié)構(gòu)合理，代碼書(shū)寫(xiě)規(guī)范20Css樣式屬性值合理，效果接近效果圖20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元6.3搭建項(xiàng)目并進(jìn)行頁(yè)面布局教學(xué)內(nèi)容頁(yè)面結(jié)構(gòu)布局學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：利用ul標(biāo)簽完成第三個(gè)版塊的結(jié)構(gòu)。使用nth-of-type完成版塊三的樣式。利用dl標(biāo)簽完成第四個(gè)版塊的結(jié)構(gòu)。鞏固后代選擇器、偽類選擇器的應(yīng)用。能力目標(biāo)：（1）具備使用快捷鍵快速完成相同結(jié)構(gòu)的html、css代碼的能力。素養(yǎng)目標(biāo)：（1）鼓勵(lì)學(xué)生將所學(xué)知識(shí)應(yīng)用于創(chuàng)業(yè)實(shí)踐中，培養(yǎng)其創(chuàng)業(yè)精神和創(chuàng)新能力。學(xué)習(xí)重點(diǎn)Ul和dl標(biāo)簽的使用，后代選擇器和偽類選擇器。學(xué)習(xí)難點(diǎn)偽類選擇器的使用，background屬性值的設(shè)定。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)第一個(gè)版塊中，最重要的元素是哪個(gè)？從標(biāo)簽選擇，屬性定義等方面，應(yīng)該如何體現(xiàn)出它的價(jià)值？3引入接下來(lái)，完成第三、四版塊的制作。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授第三個(gè)版塊結(jié)構(gòu)采用的標(biāo)簽，所需要設(shè)置的主要css屬性。第四個(gè)版塊結(jié)構(gòu)采用的標(biāo)簽，所需要設(shè)置的主要css屬性。強(qiáng)調(diào)hbuilder軟件的快捷鍵操作?！钏颊v解：分區(qū)域布局設(shè)計(jì)，做到按部就班，條理井然。如同武學(xué)上的起手式，一招一式皆有章法，并非王八拳一樣亂揮亂打。想要學(xué)好一門科目，學(xué)習(xí)的招式應(yīng)該為“課前預(yù)習(xí)——認(rèn)真聽(tīng)課——課堂練習(xí)——課后練習(xí)——學(xué)習(xí)反思”。10任務(wù)實(shí)施（5）搭建第三個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-16所示。圖6-16第三個(gè)版塊的HTML代碼（6）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-17所示。圖6-17第三個(gè)版塊的CSS代碼（7）搭建第四個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-18所示。圖6-18第四個(gè)版塊的HTML代碼（8）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-19所示。圖6-19第四個(gè)版塊的CSS代碼60知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1） 利用ul標(biāo)簽完成第三個(gè)版塊的結(jié)構(gòu)。（2） 使用nth-of-type完成版塊三的樣式。（3） 利用dl標(biāo)簽完成第四個(gè)版塊的結(jié)構(gòu)。（4） 鞏固后代選擇器、偽類選擇器的應(yīng)用。（5）使用快捷鍵快速完成相同結(jié)構(gòu)的html、css代碼。3課后作業(yè)

任務(wù)單教學(xué)單元6.3搭建項(xiàng)目并進(jìn)行頁(yè)面布局教學(xué)內(nèi)容頁(yè)面結(jié)構(gòu)布局實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述完成第三、四個(gè)版塊的布局及樣式設(shè)置。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施（5）搭建第三個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-16所示。圖6-16第三個(gè)版塊的HTML代碼（6）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-17所示。（7）搭建第四個(gè)版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-18所示。圖6-18第四個(gè)版塊的HTML代碼（8）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-19所示。圖6-19第四個(gè)版塊的CSS代碼任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10版塊三Ul容器結(jié)構(gòu)正確。20Background等樣式值準(zhǔn)確，與效果一致。30版塊四dl容器結(jié)構(gòu)正確。20樣式屬性值合理，預(yù)覽效果一致。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元6.3搭建項(xiàng)目并進(jìn)行頁(yè)面布局教學(xué)內(nèi)容頁(yè)腳部分的制作學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：（1）完成頁(yè)腳區(qū)對(duì)應(yīng)的布局和樣式。能力目標(biāo)：具備獨(dú)立完成頁(yè)腳區(qū)域版面的代碼編寫(xiě)能力。具備樣式?jīng)_突時(shí)，給選擇器賦予權(quán)重的解決能力。素養(yǎng)目標(biāo)：（1）樣式?jīng)_突的解決，增強(qiáng)學(xué)生的自信心和毅力，培養(yǎng)其面對(duì)困難不退縮的精神。學(xué)習(xí)重點(diǎn)英文命名文件學(xué)習(xí)難點(diǎn)解決頁(yè)腳區(qū)樣式引發(fā)與版塊四樣式?jīng)_突的做法。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)Ul標(biāo)簽與dl標(biāo)簽的區(qū)別。2引入本次練習(xí)主要完成頁(yè)腳部分的布局。1任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授分析頁(yè)腳部分的容器關(guān)系。分析可以采用的標(biāo)簽。分析容器主要設(shè)置的樣式屬性。10任務(wù)實(shí)施（9）制作頁(yè)腳部分，HTML結(jié)構(gòu)代碼如圖6-20所示。圖6-20頁(yè)腳的HTML代碼（10）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-21所示。圖6-21頁(yè)腳的CSS代碼我們回滾屏幕到“版塊四”的CSS樣式中，修改代碼如圖6-22所示。圖6-22修改版塊四的CSS代碼針對(duì)箭頭變大的情況，修改個(gè)別屬性，代碼如圖6-23所示。圖6-23覆蓋之前定義的屬性（11）保存文件，預(yù)覽檢查箭頭樣式無(wú)誤后，繼續(xù)完成右側(cè)部分對(duì)應(yīng)CSS代碼，如圖6-24所示。圖6-24右側(cè)部分的CSS代碼60知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1）完成頁(yè)腳區(qū)對(duì)應(yīng)的布局和樣式。（2）具備獨(dú)立完成頁(yè)腳區(qū)域版面的代碼編寫(xiě)能力。（3）具備樣式?jīng)_突時(shí)，給選擇器賦予權(quán)重的解決能力。（4）樣式?jīng)_突的解決，增強(qiáng)學(xué)生的自信心和毅力，培養(yǎng)其面對(duì)困難不退縮的精神。5課后作業(yè)

任務(wù)單教學(xué)單元6.3搭建項(xiàng)目并進(jìn)行頁(yè)面布局教學(xué)內(nèi)容頁(yè)腳區(qū)域的制作實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述完成頁(yè)腳區(qū)域的html結(jié)構(gòu)和對(duì)應(yīng)的css樣式。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施（9）制作頁(yè)腳部分，HTML結(jié)構(gòu)代碼如圖6-20所示。圖6-20頁(yè)腳的HTML代碼（10）編寫(xiě)對(duì)應(yīng)的CSS代碼，如圖6-21所示。圖6-21頁(yè)腳的CSS代碼我們回滾屏幕到“版塊四”的CSS樣式中，修改代碼如圖6-22所示。圖6-22修改版塊四的CSS代碼針對(duì)箭頭變大的情況，修改個(gè)別屬性，代碼如圖6-23所示。圖6-23覆蓋之前定義的屬性（11）保存文件，預(yù)覽檢查箭頭樣式無(wú)誤后，繼續(xù)完成右側(cè)部分對(duì)應(yīng)CSS代碼，如圖6-24所示。圖6-24右側(cè)部分的CSS代碼任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10頁(yè)腳Html結(jié)構(gòu)容器關(guān)系正確40頁(yè)腳樣式屬性值合理，預(yù)覽效果接近原圖。50總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元6.4代碼整理教學(xué)內(nèi)容代碼整理學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：完成代碼的查漏補(bǔ)缺工作。將樣式寫(xiě)入外部樣式表文件。能力目標(biāo)：（1）培養(yǎng)代碼的糾錯(cuò)能力。素養(yǎng)目標(biāo)：（1）通過(guò)代碼整理步驟，加強(qiáng)嚴(yán)密的邏輯思維和精確的問(wèn)題分析能力，培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)膶W(xué)術(shù)態(tài)度。學(xué)習(xí)重點(diǎn)代碼的查漏補(bǔ)缺，樣式寫(xiě)入外部文件，進(jìn)而修改圖片路徑。學(xué)習(xí)難點(diǎn)樣式寫(xiě)入外部文件時(shí)修改圖片路徑。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)頁(yè)腳部分常用的標(biāo)簽。個(gè)人網(wǎng)頁(yè)與企業(yè)網(wǎng)頁(yè)的頁(yè)腳部分，有哪些差異？3引入整個(gè)項(xiàng)目的進(jìn)展步入尾聲，剩下一些收尾工作，這些工作在代碼整理階段進(jìn)行，主要完成一些微小瑕疵的糾正，同時(shí)也對(duì)樣式進(jìn)行外置。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授6.4代碼整理接近布局的最終效果的時(shí)候，將輔助用的邊框、背景色等屬性進(jìn)行刪除，并再次預(yù)覽頁(yè)面效果。接下來(lái)要將內(nèi)置樣式表修改為外部樣式表。最大的好處，是可以將這些樣式分享給這個(gè)網(wǎng)站的其他頁(yè)面使用，盡管這個(gè)網(wǎng)站只有一個(gè)頁(yè)面。注意，改為外部樣式表后，圖片的src屬性大概率因路徑調(diào)整而要修改?！钏颊v解：代碼整理工作要求程序員對(duì)每一行代碼進(jìn)行審視與優(yōu)化，確保代碼的可讀性、可維護(hù)性和高效性。這種對(duì)細(xì)節(jié)的關(guān)注與打磨，體現(xiàn)了對(duì)工作的嚴(yán)謹(jǐn)態(tài)度和對(duì)職業(yè)的尊重。在學(xué)習(xí)和工作中保持高度的責(zé)任心和敬業(yè)精神，對(duì)待每一項(xiàng)任務(wù)都要認(rèn)真負(fù)責(zé)，不放過(guò)任何一個(gè)可以改進(jìn)的細(xì)節(jié)。5任務(wù)實(shí)施（1）在hbuilder的項(xiàng)目管理器中，css文件夾下新建一個(gè)名字為“style”的css文件，如圖6-25所示。圖6-25新建外部樣式表（2）打開(kāi)“style.css”文件，將index.html的<style>標(biāo)簽內(nèi)所有代碼復(fù)制到里面，如圖6-26所示。圖6-26外部樣式表的代碼（3）修改圖片路徑。由于圖像文件有點(diǎn)多，我們盡可能采用軟件的“替換”功能快速完成，點(diǎn)擊“查找”菜單的“替換”命令，在窗體右上角錄入以下信息后，記得將文件存盤(pán)，如圖6-27所示。圖6-27替換功能快速修改代碼（4）在index.html中增加<link>標(biāo)簽鏈接外部樣式表，代碼如