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)效果。24.7圖像、視音頻類標(biāo)簽該班人數(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）掌握?qǐng)D像路徑中的相對(duì)、絕對(duì)路徑。（2）掌握?qǐng)D像常用的樣式外觀設(shè)置。能力目標(biāo)：（1）具備設(shè)計(jì)常見形狀圖片的能力。（2）具備精確計(jì)算圖片在容器內(nèi)部采用的尺寸的能力。素養(yǎng)目標(biāo)：（1）在編程過(guò)程中，強(qiáng)調(diào)細(xì)節(jié)管理、質(zhì)量意識(shí)，培養(yǎng)學(xué)生追求卓越的工匠精神。圖像類標(biāo)簽相對(duì)、絕對(duì)路徑，img標(biāo)簽的類別。通過(guò)展示以往學(xué)生作業(yè)中圖片無(wú)法顯示的問(wèn)題來(lái)講述路徑的設(shè)置。完成一組圖片外觀的樣式定義。通過(guò)案例講解及實(shí)踐，讓學(xué)生掌握?qǐng)D片標(biāo)簽的用法。運(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í)a鏈接的四種偽類，以及四種偽類的定義順序。頁(yè)面實(shí)際操作中，通常定義哪些a標(biāo)簽偽類即可？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入隨著網(wǎng)絡(luò)帶寬的增加，越來(lái)越多的網(wǎng)頁(yè)頻繁使用各種尺寸的圖片，相對(duì)于文字簡(jiǎn)單外觀效果而言，圖片具備更多的操作空間，如何定義美觀、獨(dú)特的圖片外觀，我們要了解img標(biāo)簽的相關(guān)屬性。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.7圖像、視音頻類標(biāo)簽談到些標(biāo)簽，初學(xué)者容器出錯(cuò)的地方在于“src屬性”設(shè)置錯(cuò)誤，不明白相對(duì)路徑與絕對(duì)路徑的區(qū)別，經(jīng)常導(dǎo)致圖片刷不出。相對(duì)路徑：就是相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中一般表示路徑使用這個(gè)方法。相對(duì)路徑所常用的兩個(gè)特殊符號(hào)，"./"代表目前所在的目錄，"../"代表上一層目錄。絕對(duì)路徑：就是該文件在硬盤（主機(jī)）上真正的路徑，絕對(duì)路徑在網(wǎng)頁(yè)中實(shí)際很少用到，可以這么理解，在網(wǎng)頁(yè)中使用http://開頭的地址便是絕對(duì)路徑。4.7.1img標(biāo)簽<img>標(biāo)簽從視覺上常理感覺方方正正、大塊的圖像標(biāo)簽應(yīng)該是塊級(jí)元素，但與感覺相反，img是內(nèi)聯(lián)塊級(jí)標(biāo)簽。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例13】嘗試給如圖4-63所示的圖片增加不一樣的樣式效果，比如邊框、內(nèi)邊距的設(shè)計(jì)。（1）書寫HTML代碼。（2）編寫對(duì)應(yīng)的CSS代碼。【案例14】制作圖片在hover狀態(tài)下，圖片緩慢放大的效果。（1）編寫HTML代碼。（2）編寫對(duì)應(yīng)的CSS代碼。上機(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)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10練習(xí)1能完成正確的靜態(tài)頁(yè)面效果，html及css代碼正確。50練習(xí)2能完成hover狀態(tài)下的交互，屬性值合理。40總分說(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ò)本課，要求我們：（1）掌握?qǐng)D像路徑中的相對(duì)、絕對(duì)路徑。（2）掌握?qǐng)D像常用的樣式外觀設(shè)置。（3）具備精確計(jì)算圖片在容器內(nèi)部采用的尺寸的能力