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)效果。22.2圖像文件規(guī)范化 該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計算機基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標(biāo)：（1） 掌握不同格式圖像的使用場景。（2） 了解網(wǎng)頁中不同區(qū)域的圖像尺寸范圍。能力目標(biāo)：（1）具備能從網(wǎng)絡(luò)上下載的素材圖標(biāo)輸出為透明度的ps處理能力。素養(yǎng)目標(biāo)：（1） 了解本章成語的出處，理解成語含義與知識點理解的結(jié)合。（2） Photoshop處理圖片的強大，引導(dǎo)學(xué)生切勿使用技術(shù)給社會帶來負(fù)面影響。圖像格式、尺寸、命名圖像文件的類型及特點，圖像文件合理的命名規(guī)則。通過觀察企業(yè)網(wǎng)頁圖像文件，加強相關(guān)知識的認(rèn)識。Photoshop輸出透明底圖片的操作步驟。通過上機練習(xí)，加強學(xué)生的ps操作能力。運用實例演示法，通過實際案例或操作演示，讓學(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í)簡述一下HTML文件命名習(xí)慣？對于大量的圖片文件，如何進行合理的命名?回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識結(jié)構(gòu)。引入在生活中，我們有時候需要從網(wǎng)頁下載圖片，有些圖片無法直接下載，有些圖片并不是需要的透明底的圖片，有些圖片尺寸不符合要求，如何在網(wǎng)站中，定義圖片的相關(guān)屬性，為瀏覽器提供相關(guān)的素材，這就需要我們了解相關(guān)的知識點。聽講講授，演示。任務(wù)驅(qū)動法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識講授2.2.1圖像格式 jpg壓縮比高，適合人像類色彩豐富的圖片。 gif通常用于少量色彩的小圖標(biāo)、圖片，支持透明但邊緣的效果通常有殘留的雜色痕跡，還支持小動畫。png適合色彩豐富與否圖片，支持透明，對圖像邊緣幾乎沒有如gif的弊端。知識點：圖片格式類型記憶關(guān)鍵詞：各有千秋關(guān)鍵詞解析：不同格式的圖像，適用場合不同，各種瀏覽器及版本支持程度不同。圖標(biāo)類圖片考慮到透明底色原因，一般采用png格式，有部分網(wǎng)站采用svg技術(shù)繪制圖標(biāo)，可以認(rèn)為svg圖片是一段純粹的代碼，可以借助一些svg繪圖工具來生成代碼。☆思政講解1：每個人都有自身的優(yōu)點，盡量揚長避短。☆思政講解2：每位同學(xué)在不同學(xué)科領(lǐng)域的優(yōu)勢，個體作戰(zhàn)不如整合小組優(yōu)勢，團隊作戰(zhàn)。【提問】如果在設(shè)計時缺少圖標(biāo)圖片，我們應(yīng)該如何利用網(wǎng)絡(luò)找到想要的素材？采用什么搜索關(guān)鍵字？倘若在網(wǎng)絡(luò)上找到的jpg類型的圖標(biāo)圖片，我們需要重新修改一下顏色，一般情況下能否用魔術(shù)棒或快速選擇工具去進行摳取、換色后輸出？如果這種方法有弊端，應(yīng)該如何改進？聽講，回答問題。講授知識。提問。演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。2.2.2圖像尺寸建議使用1366x768分辨率作為基準(zhǔn)，并考慮更高的分辨率。知識點：圖像尺寸應(yīng)該按100%比例輸出以免失真記憶關(guān)鍵詞：削足適履關(guān)鍵詞解析：在Photoshop中處理成效果圖的實際大小尺寸，不建議通過CSS控制大小而造成寬高比失真、模糊等。尤其是圖標(biāo)圖片，若原意在網(wǎng)頁中圖標(biāo)的線條寬度為2像素粗細(xì)，但設(shè)計時將圖標(biāo)尺寸擴大來處理，在網(wǎng)頁中強行把尺寸壓縮，相當(dāng)于把“腳”塞到“童時的鞋”，那線條的寬度很大幾率就不再是2像素粗細(xì)，偏離了設(shè)計師的意圖。☆思政講解1：強調(diào)每個人有各自的學(xué)習(xí)技巧，不考慮自身特點而生搬硬套的話，容易陷入窘境?！钏颊v解2：對于精密儀器來說，一絲一毫的誤差經(jīng)常會被無限放大。在網(wǎng)頁中的圖片要求做到精美，尤其是一些線框形態(tài)的圖標(biāo)，哪怕差1個像素，效果也可能天差地別。聽講講授知識。2.2.3圖像命名圖像文件的名稱分為頭尾兩部分，用下劃線或中橫線隔開，頭部分表示此圖片的大類性質(zhì)。范例：banner-sohu.jpgmenu_job.gif聽講講授知識。任務(wù)實施【案例3】在Photoshop中打開“輸出透明底色.psd”文件。將圖標(biāo)輸出為透明底色，分別用gif、png格式進行保存。然后將這兩個圖片插入到黑色背景色的網(wǎng)頁中，并預(yù)覽效果觀察區(qū)別之處。可以看到左側(cè)的GIF格式，在圖形邊緣會帶上斑駁的白色，而右側(cè)的PNG格式則完美表現(xiàn)效果。☆思政講解：從上面圖可以看到，左邊圖標(biāo)周圍只是殘留了1個像素的白色雜色，但是在一些暗色的場景下特別明顯。強調(diào)細(xì)節(jié)的把握，規(guī)矩的養(yǎng)成。上機操作巡堂指導(dǎo)，提醒易出錯的事項實踐法旨在培養(yǎng)學(xué)生項目開發(fā)能力。任務(wù)擴展任務(wù)檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分圖像處理能進行準(zhǔn)確的摳圖或繪圖，圖標(biāo)邊緣不殘留雜色50插入不同格式圖像正確輸入對應(yīng)的圖像元素的代碼30網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20總分說明：評分項目為任務(wù)實施中要求學(xué)生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能力?？偨Y(jié)通過本課的學(xué)習(xí)：（1）掌握不同格式圖像的使用