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)用，理解盒子模型和常見(jiàn)布局流技術(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）了解常見(jiàn)外部樣式表的命名習(xí)慣。（2）將需要復(fù)用的css樣式保存到外部樣式表能力目標(biāo)：（1）具備合理拆分內(nèi)部樣式到外部樣式表的思維與技能。素養(yǎng)目標(biāo)：（1）在軟件開(kāi)發(fā)過(guò)程中，引導(dǎo)學(xué)生關(guān)注用戶(hù)需求和使用體驗(yàn)，培養(yǎng)其用戶(hù)導(dǎo)向的思維方式。CSS代碼的整理及樣式表外聯(lián)常見(jiàn)外部樣式表的命名。通過(guò)介紹常見(jiàn)樣式表命名，引導(dǎo)學(xué)生自行應(yīng)用到相關(guān)練習(xí)。將頁(yè)面部分需要復(fù)用的css樣式保存到外部樣式表。將全部樣式進(jìn)行分解，通過(guò)提問(wèn)、討論等方式引導(dǎo)學(xué)生找出所需的樣式。運(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í)路徑，滿(mǎn)足不同水平學(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í)回憶翻頁(yè)按鈕中采用的標(biāo)簽。倘若為每個(gè)按鈕增加交互效果，可以采用哪些特效？分別可以使用什么樣式來(lái)達(dá)成預(yù)期？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入我們反復(fù)強(qiáng)調(diào)，代碼的整理，有利于發(fā)現(xiàn)細(xì)節(jié)紕漏，同時(shí)對(duì)知識(shí)點(diǎn)的鞏固，也有一定的幫助。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授8.5.5CSS代碼的整理及樣式表外聯(lián)（1）去除css中的輔助邊框、背景底色，body容器調(diào)整背景色為白色。代碼如圖8-51所示。圖8-51CSS代碼（2）將部分樣式轉(zhuǎn)到外部的樣式表文件中，考慮到有些布局樣式，在其他頁(yè)面中也可以派上用場(chǎng)。比如新聞列表項(xiàng)的樣式，可能極少機(jī)會(huì)在其他欄目中用的上。但頁(yè)碼區(qū)樣式，只要存在需要翻頁(yè)的情況，比如“解決方案”、“品牌”這些頁(yè)面量較多的欄目，就極大幾率也采用同樣的頁(yè)碼樣式。這樣理解下來(lái)，我們的頁(yè)碼區(qū)樣式就可以成為“公共”樣式，在許多網(wǎng)站中，會(huì)采用common.css來(lái)存儲(chǔ)公共樣式，另外也可以采用如表8-1所示的分類(lèi)，拆開(kāi)來(lái)存儲(chǔ)到不同的樣式文件中。強(qiáng)調(diào)一個(gè)“拆”字，拆成不同規(guī)格的“積木”組件，方便以后反復(fù)拼成各種“布局作品”。用途文件名稱(chēng)用途文件名稱(chēng)主要的樣式表master.css布局，版面layout.css專(zhuān)欄columns.css文字font.css打印樣式print.css主題themes.css聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）在站點(diǎn)根目錄下css文件夾中，創(chuàng)建common.css，如圖8-52所示。（2）把頁(yè)碼區(qū)樣式復(fù)制到common.css，并更新圖片路徑，如圖8-53所示。（3）在news.html文件中追加一條鏈接指向common.css，如圖8-54所示。（4）將所有文件保存，預(yù)覽效果是否達(dá)到預(yù)期。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分代碼整理編碼習(xí)慣良好。20查漏補(bǔ)缺預(yù)覽效果達(dá)成預(yù)期。40樣式外置合理挑選能復(fù)用的css樣式添加到外部樣式表。40總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課的學(xué)習(xí)：（1）了解常見(jiàn)外部樣式表的命名習(xí)慣。（2）將需要復(fù)