HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。26.1將網(wǎng)頁截圖進(jìn)行切片該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識(shí)目標(biāo)：（1） 掌握切片工具的使用及快速復(fù)制切片的操作。（2） 明確必須輸出或者不必輸出的元素。（3） 對圖標(biāo)元素進(jìn)行必要整合，形成精靈圖。能力目標(biāo)：（1） 具備使用Photoshop完成效果圖切片并輸出的能力。（2） 具備明辨所需的用戶切片對象的能力。素養(yǎng)目標(biāo)：（1） 養(yǎng)成精確進(jìn)行切片的職業(yè)素養(yǎng)。（2） 鞏固對用戶切片規(guī)范英文命名的習(xí)慣。6.1將網(wǎng)頁截圖進(jìn)行切片，6.2網(wǎng)站目錄、文件整理切片工具的使用，明確所需的輸出元素，整合圖標(biāo)成精靈圖。通過討論、教師引導(dǎo)等手段讓學(xué)生對切片目標(biāo)有所認(rèn)識(shí)。整合圖標(biāo)成精靈圖的過程中，保證圖標(biāo)的間距方便計(jì)算偏移量。通過課堂提問、小組分工等方式了解學(xué)生對重難點(diǎn)的掌握情況，及時(shí)調(diào)整教學(xué)策略。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評價(jià)或小組評價(jià)完成任務(wù)的檢測，教師最終進(jìn)行點(diǎn)評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價(jià)或小組評價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)用知識(shí)導(dǎo)圖串聯(lián)上一章節(jié)的知識(shí)點(diǎn)?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入作為半學(xué)期的知識(shí)總結(jié)回顧，我們將完成一個(gè)簡單的單頁面?zhèn)€人網(wǎng)站，這個(gè)專題練習(xí)，可以看成是互聯(lián)網(wǎng)上的一份個(gè)人簡歷表。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授6.1將網(wǎng)頁截圖進(jìn)行切片將如圖6-1所示的效果圖進(jìn)行切片，要求圖片盡可能少的空白區(qū)域以減少圖片文件大??；圖片尺寸盡可能湊個(gè)整數(shù)或偶數(shù)以方便計(jì)算盒子的相關(guān)間距；生活照片類圖片采用jpg格式，圖標(biāo)類圖片盡可能采用支持透明底的png格式。圖6-1單頁面網(wǎng)站效果☆思政講解：切圖時(shí)要貫徹嚴(yán)謹(jǐn)細(xì)致的工作作風(fēng)，精確到1個(gè)像素的設(shè)計(jì)要求，避免在設(shè)置css樣式時(shí)增加工作負(fù)擔(dān)。在學(xué)習(xí)和生活中，都要保持高度的責(zé)任心和敬業(yè)精神，對待每一項(xiàng)任務(wù)都要認(rèn)真負(fù)責(zé)，不放過任何一個(gè)細(xì)節(jié)。這種作風(fēng)的養(yǎng)成，不僅有助于提高工作效率和質(zhì)量，還有助于培養(yǎng)我們的責(zé)任感和擔(dān)當(dāng)精神。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施（1）在photoshop軟件中打開素材圖，在“視圖”菜單中激活“標(biāo)尺”選項(xiàng)。（2）觀察圖片，明確哪些內(nèi)容是需要輸出為圖片格式。一句話表述“可以用簡單的css樣式實(shí)現(xiàn)的內(nèi)容原則上就不要輸出圖片”。（3）建立第一根參考線，要求參考線盡可能貼近圖像內(nèi)容，減少圖像文件大小。（4）使用框選工具，建立選區(qū)后，用上下光標(biāo)鍵調(diào)整圖標(biāo)在選區(qū)中間。（5）使用切片工具給各個(gè)分割好的區(qū)域進(jìn)行切片，并且命名切片。圖標(biāo)類命名一般為icon+序號(hào)或者icon+英文關(guān)鍵字。（6）選擇“文件”-“輸出為web所用格式”，檢查一下輸出的格式，點(diǎn)擊“存儲(chǔ)”。（7）文字內(nèi)容可以采用自己手機(jī)app自帶的“文字提取”功能來獲取。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分參考線創(chuàng)建參考線位置精確，力求包裹元素的同時(shí)，尺寸較小。30切片工具使用切片準(zhǔn)確到位，無較大的空白區(qū)。30文件輸出文件名符合常用英文命名規(guī)矩。40總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評作業(yè)抽樣點(diǎn)評分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課的學(xué)習(xí)：（1） 掌握切片工具的使用及快速復(fù)制切片的操作。（2） 明確必須輸出或者不必輸出的元素。（3） 對圖標(biāo)元素進(jìn)行必要整