教學(xué)單元第2章創(chuàng)建網(wǎng)站項(xiàng)目教學(xué)內(nèi)容站點(diǎn)相關(guān)命名規(guī)范學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：掌握Hbuilder軟件創(chuàng)建項(xiàng)目，并能將素材及HTML文件正確放置在相應(yīng)的文件夾中。深刻理解HTML文件、圖像文件命名規(guī)范化的背景。文件名中的短橫線“-”和下劃線“_”的區(qū)別。能力目標(biāo)：具備準(zhǔn)確預(yù)計(jì)網(wǎng)站文件規(guī)模的能力。具備對(duì)文件進(jìn)行正確有效英文命名的能力。素養(yǎng)目標(biāo)：了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)膶W(xué)術(shù)態(tài)度，鍛煉其分析問(wèn)題、設(shè)計(jì)解決方案并逐步實(shí)施的能力。學(xué)習(xí)重點(diǎn)英文命名文件學(xué)習(xí)難點(diǎn)部分英文單詞的記憶技巧。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)列舉網(wǎng)頁(yè)中能使用<ul>列表標(biāo)簽的場(chǎng)景。3引入大部分網(wǎng)頁(yè)服務(wù)器只支持英文網(wǎng)頁(yè)路徑，網(wǎng)頁(yè)路徑區(qū)分大小寫(xiě)，最好統(tǒng)一使用小寫(xiě)英文，因此html文件、圖像名、文件夾名都需要用合理的英文命名。5任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授2.1站點(diǎn)相關(guān)命名規(guī)范文件名可使用a～z、A～Z、0～9、減號(hào)（-）和下劃線（_）等字符；禁止使用特殊字符，如：@、#、$、%、&、*。文件名長(zhǎng)度以簡(jiǎn)單短小為原則。建議盡量使用一些簡(jiǎn)單易懂的縮寫(xiě)，如集團(tuán)介紹（groupprofile），可以將這個(gè)網(wǎng)頁(yè)命名為group_pro.htm。常見(jiàn)英文單詞如表2-1所示。中文英文中文英文公司簡(jiǎn)介Profile或Company產(chǎn)品銷售Sales返回首頁(yè)Homepage行業(yè)新聞TradeNews企業(yè)文化Culture聯(lián)系我們ContactUs版權(quán)所有CopyRight友情鏈接HotLink產(chǎn)品Product組織機(jī)構(gòu)Organization網(wǎng)站地圖SiteMap客戶服務(wù)CustomerService常見(jiàn)問(wèn)題FAQ地址ADD電話TEL傳真FAX注冊(cè)Login合作加盟JoinIn二維碼QRcode價(jià)格Price產(chǎn)品描述Description尺寸Size品牌Brand型號(hào)Model信息Information論壇Forum產(chǎn)品定購(gòu)Order下載中心Download行業(yè)Industry意見(jiàn)反饋Feedback會(huì)員登陸MemberEntrance公司榮譽(yù)Glories工程案例EngineeringProjects社區(qū)Community技術(shù)力量Technology表2-1常見(jiàn)英文單詞【思政元素】知識(shí)點(diǎn)：文件命名規(guī)范知識(shí)點(diǎn)：文件命名規(guī)范記憶關(guān)鍵詞：蹈矩循規(guī)關(guān)鍵詞解析：文件命名有規(guī)則，便于管理、查找。我們經(jīng)常要使用一大組的<li>標(biāo)簽收納大量的圖片，我們的圖片文件是按數(shù)字遞增規(guī)律來(lái)命名的，那就不需要不斷地去查看圖片信息，如：<li><imgsrc=”img/news-00034.jpg”></li>我們可以在hbuilder內(nèi)快速的復(fù)制這一行若干遍，然后把“34”對(duì)應(yīng)換成35、36、37……正如我們所在的社會(huì)，無(wú)規(guī)矩不成方圓，懂規(guī)矩才能如魚(yú)得水。成語(yǔ)出處：《三元記·格天》：“積善存仁，蹈矩循規(guī)太古民?！钡妇匮?guī)——指遵守規(guī)矩，不敢違反。☆思政講解1：隨著全球化的深入發(fā)展，提高跨文化交流能力，尤其是英文的聽(tīng)說(shuō)、閱讀能力，對(duì)于今后在工作中有莫大幫助。☆思政講解2：無(wú)規(guī)矩不成方圓，文件的命名規(guī)則，可以從中觀察到以下信息：創(chuàng)建時(shí)間、用途、版本等等，結(jié)合個(gè)人生活作息時(shí)間的管理，宿舍物品擺放?！钏颊v解3：“三流企業(yè)賣(mài)產(chǎn)品,二流企業(yè)賣(mài)技術(shù),一流企業(yè)賣(mài)標(biāo)準(zhǔn)”，比如華為的“5G”通信標(biāo)準(zhǔn)，類比文件的命名規(guī)則（標(biāo)準(zhǔn)）?！景咐?】某個(gè)企業(yè)要建立公司網(wǎng)站，擬定網(wǎng)站主要欄目包括最新資訊、企業(yè)介紹、產(chǎn)品目錄、企業(yè)文化、商務(wù)聯(lián)系。請(qǐng)用英文命名對(duì)應(yīng)的文件夾，并將結(jié)果截圖下來(lái)?！咎釂?wèn)】請(qǐng)幾位同學(xué)闡述一下文件夾應(yīng)該如何命名？【教師解釋】?jī)?yōu)先采用英文單詞表述，可以百度對(duì)應(yīng)英文單詞。如最新資訊，采用“資訊”英文單詞，百度“資訊英文單詞”，給出的“information”，單詞偏長(zhǎng)且不容易記憶，此時(shí)可以采用it行業(yè)常用的縮寫(xiě)info，（縮寫(xiě)有時(shí)并不是正式的英語(yǔ)詞匯，只是能一眼看得懂意思的約定，正如看到txt，我們會(huì)聯(lián)想到文本文檔一樣）。或者找“資訊”的中文近義詞，如新聞，對(duì)應(yīng)的單詞為news，這大部分初學(xué)者都能拼出。企業(yè)介紹不宜采用“企業(yè)”英文單詞，因?yàn)楹竺孢€有企業(yè)文化，會(huì)有歧義，所以采用“介紹”英文單詞。百度后得知對(duì)應(yīng)的英文單詞為introduce，縮寫(xiě)為intro。但更正式的去百度“公司介紹”，得到的英文詞語(yǔ)為“CompanyProfile”，介紹對(duì)應(yīng)的英文單詞為profile。記憶單詞可以采用pro+file，再聯(lián)想pro這字眼是不是很熟悉？Xiaomi12pro，iPhone7pro，英文file是文件的意思。對(duì)于音標(biāo)掌握不牢的同學(xué)來(lái)說(shuō)，課堂提問(wèn)時(shí)經(jīng)常用字母來(lái)念出整個(gè)單詞。其實(shí)碰到不熟悉的單詞，我們完全可以采用“分開(kāi)猜讀”的方式，就是把完整單詞拆解成你知道讀的幾部分，比如剛才的pro，file，連著讀就對(duì)了，起碼很大幾率能撞對(duì)正確讀音。切記，千萬(wàn)不要用漢語(yǔ)拼音來(lái)命名，更不能采用拼音首字母縮寫(xiě)來(lái)命名文件/文件夾，因?yàn)橥魸h字太多，容易產(chǎn)生誤解?！景咐?】上述公司隨著業(yè)務(wù)蓬勃發(fā)展，預(yù)計(jì)未來(lái)5年，產(chǎn)品將形成化妝，服飾，生活用品三大類目，服飾類下包括兒童、青少年、成年、老年人系列。嘗試規(guī)劃“產(chǎn)品”目錄下的文件夾結(jié)構(gòu)和網(wǎng)頁(yè)文件命名規(guī)則?！咎釂?wèn)】思考公司的規(guī)模，產(chǎn)品的種類，數(shù)量等因素，應(yīng)該如何定義文件的命名規(guī)則，尤其是圖片類文件的命名規(guī)則？【教師解釋】子文件夾命名規(guī)則：兒童、青少年、成年、老年人對(duì)應(yīng)的盡可能熟悉且短小的英文可采用Child,teen,adult,elder。產(chǎn)品目錄下的網(wǎng)頁(yè)文件命名規(guī)則嘗試從兩種思路來(lái)考慮。思路一：比如青少年對(duì)應(yīng)teen文件夾下的文件命名規(guī)則，采用teen+年份+月份+日+序號(hào)，如果考慮一天能制作了上百個(gè)文件，則可以寫(xiě)為teen20240507001~teen20240507999。思路二：如果覺(jué)得一大串?dāng)?shù)字不好觀察，管理，也可以寫(xiě)出teen2024-05-07_001。注意細(xì)節(jié)，這里出現(xiàn)了短橫線“-”和下劃線“_”，“雙兔傍地走，安能辨我是雌雄”。在業(yè)界有這么一種說(shuō)法，短橫線“-”代表前后單詞有強(qiáng)聯(lián)系（較強(qiáng)的關(guān)聯(lián)性），下劃線“_”則只是表示分開(kāi)前后兩個(gè)單詞，為什么我們常見(jiàn)的日期表示書(shū)寫(xiě)采用2024-05-07，而不采用2024_05_07呢？teen2024-05-07_001的下劃線為什么說(shuō)是沒(méi)什么聯(lián)系性？有同學(xué)可能會(huì)說(shuō)那是2024年5月7日的第一個(gè)文檔。試問(wèn)，如果將它標(biāo)記成2024-05-07_002對(duì)網(wǎng)站資料的整理、歸檔有沒(méi)有實(shí)質(zhì)影響？30任務(wù)實(shí)施實(shí)施流程：進(jìn)行站點(diǎn)文件夾的建構(gòu)。新建一記事本文檔，將本站點(diǎn)的文件、文件夾命名規(guī)則表述在文檔中，將文檔存盤(pán)為“命名規(guī)則說(shuō)明.txt”，放置在站點(diǎn)根目錄位置。將整個(gè)站點(diǎn)根目錄提交作業(yè)到教師機(jī)?！景咐?】某個(gè)企業(yè)要建立公司網(wǎng)站，擬定網(wǎng)站主要欄目包括最新資訊、企業(yè)介紹、產(chǎn)品目錄、企業(yè)文化、商務(wù)聯(lián)系。請(qǐng)用英文命名對(duì)應(yīng)的文件夾，并將結(jié)果截圖下來(lái)?！景咐?】上述公司隨著業(yè)務(wù)蓬勃發(fā)展，預(yù)計(jì)未來(lái)5年，產(chǎn)品將形成化妝，服飾，生活用品三大類目，服飾類下包括兒童、青少年、成年、老年人系列。嘗試規(guī)劃“產(chǎn)品”目錄下的文件夾結(jié)構(gòu)和網(wǎng)頁(yè)文件命名規(guī)則。35知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1）要求掌握HTML文件、圖像文件命名的業(yè)界習(xí)慣，具備對(duì)文件進(jìn)行正確有效英文命名的能力。（2）要求能根據(jù)情況估算網(wǎng)站文件規(guī)模，為文件命名留有一定的余地。（3）了解文件名中的短橫線“-”和下劃線“_”的區(qū)別。5課后作業(yè)

任務(wù)單教學(xué)單元第2章創(chuàng)建網(wǎng)站項(xiàng)目教學(xué)內(nèi)容站點(diǎn)相關(guān)命名規(guī)范實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述【案例1】某個(gè)企業(yè)要建立公司網(wǎng)站，擬定網(wǎng)站主要欄目包括最新資訊、企業(yè)介紹、產(chǎn)品目錄、企業(yè)文化、商務(wù)聯(lián)系。請(qǐng)用英文命名對(duì)應(yīng)的文件夾，并將結(jié)果截圖下來(lái)。【案例2】上述公司隨著業(yè)務(wù)蓬勃發(fā)展，預(yù)計(jì)未來(lái)5年，產(chǎn)品將形成化妝，服飾，生活用品三大類目，服飾類下包括兒童、青少年、成年、老年人系列。嘗試規(guī)劃“產(chǎn)品”目錄下的文件夾結(jié)構(gòu)和網(wǎng)頁(yè)文件命名規(guī)則。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施1. 進(jìn)行站點(diǎn)文件夾的建構(gòu)。2. 新建一記事本文檔，將本站點(diǎn)的文件、文件夾命名規(guī)則表述在文檔中，將文檔存盤(pán)為“命名規(guī)則說(shuō)明.txt”，放置在站點(diǎn)根目錄位置。3. 將整個(gè)站點(diǎn)根目錄提交作業(yè)到教師機(jī)。任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。30文件命名規(guī)則說(shuō)明文檔文檔語(yǔ)言表述清晰。40命名規(guī)則命名規(guī)則合理且有預(yù)留空間。40總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元2.2圖像文件規(guī)范化教學(xué)內(nèi)容圖像格式、尺寸、命名學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：掌握不同格式圖像的使用場(chǎng)景。了解網(wǎng)頁(yè)中不同區(qū)域的圖像尺寸范圍。能力目標(biāo)：（1）具備能從網(wǎng)絡(luò)上下載的素材圖標(biāo)輸出為透明度的ps處理能力。素養(yǎng)目標(biāo)：了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。Photoshop處理圖片的強(qiáng)大，引導(dǎo)學(xué)生切勿使用技術(shù)給社會(huì)帶來(lái)負(fù)面影響。學(xué)習(xí)重點(diǎn)圖像文件的類型及特點(diǎn)，圖像文件合理的命名規(guī)則。學(xué)習(xí)難點(diǎn)Photoshop輸出透明底圖片的操作步驟教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)簡(jiǎn)述一下HTML文件命名習(xí)慣？對(duì)于大量的圖片文件，如何進(jìn)行合理的命名?5引入在生活中，我們有時(shí)候需要從網(wǎng)頁(yè)下載圖片，有些圖片無(wú)法直接下載，有些圖片并不是需要的透明底的圖片，有些圖片尺寸不符合要求，如何在網(wǎng)站中，定義圖片的相關(guān)屬性，為瀏覽器提供相關(guān)的素材，這就需要我們了解相關(guān)的知識(shí)點(diǎn)。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授2.2.1圖像格式 網(wǎng)頁(yè)中圖片的格式有g(shù)if、png、jpg、svg、webp等，但我們只需了解最常見(jiàn)的三種即可。jpg壓縮比高，適合人像類色彩豐富的圖片。gif通常用于少量色彩的小圖標(biāo)、圖片，支持透明但邊緣的效果通常有殘留的雜色痕跡，還支持小動(dòng)畫(huà)。png適合色彩豐富與否圖片，支持透明，對(duì)圖像邊緣幾乎沒(méi)有如gif的弊端。知識(shí)點(diǎn)：圖片格式類型知識(shí)點(diǎn)：圖片格式類型記憶關(guān)鍵詞：各有千秋關(guān)鍵詞解析：不同格式的圖像，適用場(chǎng)合不同，各種瀏覽器及版本支持程度不同。圖標(biāo)類圖片考慮到透明底色原因，一般采用png格式，有部分網(wǎng)站采用svg技術(shù)繪制圖標(biāo)，可以認(rèn)為svg圖片是一段純粹的代碼，可以借助一些svg繪圖工具來(lái)生成代碼。成語(yǔ)出處：漢?李陵《與蘇武三首》：“嘉會(huì)難再遇，三載為千秋?！备饔星铩馑际歉饔懈鞯拇嬖诘膬r(jià)值。比喻在同一層次內(nèi)各人有各人的長(zhǎng)處，各人有各人的特色?！钏颊v解1：每個(gè)人都有自身的優(yōu)點(diǎn)，盡量揚(yáng)長(zhǎng)避短?！钏颊v解2：每位同學(xué)在不同學(xué)科領(lǐng)域的優(yōu)勢(shì)，個(gè)體作戰(zhàn)不如整合小組優(yōu)勢(shì)，團(tuán)隊(duì)作戰(zhàn)。練習(xí)【案例3】，觀察效果后提問(wèn):【提問(wèn)】如果在設(shè)計(jì)時(shí)缺少圖標(biāo)圖片，我們應(yīng)該如何利用網(wǎng)絡(luò)找到想要的素材？采用什么搜索關(guān)鍵字？倘若在網(wǎng)絡(luò)上找到的jpg類型的圖標(biāo)圖片，我們需要重新修改一下顏色，一般情況下能否用魔術(shù)棒或快速選擇工具去進(jìn)行摳取、換色后輸出？如果這種方法有弊端，應(yīng)該如何改進(jìn)？2.2.2圖像尺寸在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，應(yīng)考慮不同的屏幕分辨率，以確保在不同設(shè)備上都能獲得良好的視覺(jué)體驗(yàn)，一般來(lái)說(shuō)，建議使用1366x768分辨率作為基準(zhǔn)，并考慮更高的分辨率。因此，圖片尺寸要考慮不同的分辨率下保證大小適中，避免過(guò)小導(dǎo)致模糊或過(guò)大占用過(guò)多空間。一般來(lái)說(shuō)，建議使用100KB-500KB大小的圖片。從圖片的寬高數(shù)值來(lái)看，不同的應(yīng)用場(chǎng)景的圖片尺寸要求各不一致，標(biāo)志、海報(bào)、標(biāo)題圖片、圖標(biāo)位置的尺寸，通常沒(méi)有固定的規(guī)定，但個(gè)別網(wǎng)站的管理后臺(tái)、移動(dòng)端開(kāi)發(fā)規(guī)定等對(duì)圖片的尺寸有特定要求，只需在工作場(chǎng)景中調(diào)整即可，在學(xué)習(xí)過(guò)程中無(wú)需關(guān)注。知識(shí)點(diǎn)：圖像尺寸應(yīng)該按100%比例輸出以免失真知識(shí)點(diǎn)：圖像尺寸應(yīng)該按100%比例輸出以免失真記憶關(guān)鍵詞：削足適履關(guān)鍵詞解析：在Photoshop中處理成效果圖的實(shí)際大小尺寸，不建議通過(guò)CSS控制大小而造成寬高比失真、模糊等。尤其是圖標(biāo)圖片，若原意在網(wǎng)頁(yè)中圖標(biāo)的線條寬度為2像素粗細(xì)，但設(shè)計(jì)時(shí)將圖標(biāo)尺寸擴(kuò)大來(lái)處理，在網(wǎng)頁(yè)中強(qiáng)行把尺寸壓縮，相當(dāng)于把“腳”塞到“童時(shí)的鞋”，那線條的寬度很大幾率就不再是2像素粗細(xì)，偏離了設(shè)計(jì)師的意圖。成語(yǔ)出處：西漢·劉安《淮南子·說(shuō)林訓(xùn)》：“夫所以養(yǎng)而害所養(yǎng)，譬猶削足而適履，殺頭而便冠。”削足適履——指把腳削去一塊來(lái)湊合鞋的大?。槐扔鞑缓侠淼剡w就湊合或不顧具體條件，生搬硬套?！钏颊v解1：強(qiáng)調(diào)每個(gè)人有各自的學(xué)習(xí)技巧，不考慮自身特點(diǎn)而生搬硬套的話，容易陷入窘境。☆思政講解2：對(duì)于精密儀器來(lái)說(shuō)，一絲一毫的誤差經(jīng)常會(huì)被無(wú)限放大。在網(wǎng)頁(yè)中的圖片要求做到精美，尤其是一些線框形態(tài)的圖標(biāo)，哪怕差1個(gè)像素，效果也可能天差地別。2.2.3圖像命名最基本的要求也還是望文生義，但一個(gè)頁(yè)面中同類型作用的圖片有可能很多，所以這里介紹一種通用的圖像文件命名方法。圖像文件的名稱分為頭尾兩部分，用下劃線或中橫線隔開(kāi)，頭部分表示此圖片的大類性質(zhì)，如類別為廣告的采用banner、標(biāo)志采用logo、菜單采用menu、按鈕采用btn、照片采用pic、標(biāo)題圖片采用title。尾部分表示圖片的關(guān)聯(lián)內(nèi)容，也可以是圖片的當(dāng)前某種狀態(tài)，如被按下press,關(guān)閉用off，獲得焦點(diǎn)用focus。范例：banner-sohu.jpgmenu_job.giftitle_news.gifpic_people.jpgbtn-press.pngmenu_focus.gif特別說(shuō)明一下，因時(shí)間關(guān)系，本書(shū)案例大部分并沒(méi)有嚴(yán)謹(jǐn)?shù)匕凑找陨厦绞浇o圖片命名，敬請(qǐng)諒解。知識(shí)點(diǎn)：圖像文件命名規(guī)矩知識(shí)點(diǎn)：圖像文件命名規(guī)矩記憶關(guān)鍵詞：言人人殊關(guān)鍵詞解析：圖像文件規(guī)范的命名有助于個(gè)人在眾多的圖像文件中快速定位所需文件，提高工作效率。規(guī)范的命名方式不僅能讓文件整理顯得更加有序，還能體現(xiàn)個(gè)人或團(tuán)隊(duì)的專業(yè)素養(yǎng)，這對(duì)于提升個(gè)人職業(yè)形象、增強(qiáng)客戶信任度等方面都有積極作用。網(wǎng)頁(yè)設(shè)計(jì)者在遵循一定的命名規(guī)則的基礎(chǔ)上，也有自己所定義的命名規(guī)則，只要命名能讓工作提高效率，我們就可以認(rèn)為這規(guī)矩是合理的。但作為團(tuán)隊(duì)項(xiàng)目，言人人殊，必須要制定一套大家都遵循的規(guī)則。成語(yǔ)出處：西漢?司馬遷《史記?曹相國(guó)世家》：“參盡召長(zhǎng)老諸生，問(wèn)所以安集百姓，如齊故諸儒以百數(shù)，言人人殊。參未知所定?！毖匀巳耸狻该總€(gè)人的說(shuō)法都不相同，各有各的看法?！钏颊v解1：看待事情人人都有各自想法觀點(diǎn)，重要事情未經(jīng)驗(yàn)證前不輕信別人的說(shuō)法，不信謠，不傳謠。許多網(wǎng)頁(yè)設(shè)計(jì)師在文件命名時(shí)都有自己的喜好，但原則上，命名要符合行規(guī)的基礎(chǔ)上才去調(diào)整?！钏颊v解2：為何幾乎所有的軟件的保存命令快捷鍵是CTRL+S，全選CTRL+A？統(tǒng)一標(biāo)準(zhǔn)，有利用團(tuán)隊(duì)協(xié)作，降低管理難度，提升效率。30任務(wù)實(shí)施【案例3】在Photoshop中打開(kāi)“輸出透明底色.psd”文件。將圖標(biāo)輸出為透明底色，分別用gif、png格式進(jìn)行保存。然后將這兩個(gè)圖片插入到黑色背景色的網(wǎng)頁(yè)中，并預(yù)覽效果觀察區(qū)別之處。（1）打開(kāi)“輸出透明底色.psd”文件，該psd文件已做分層處理，如圖2-1所示。圖2-1分層處理（2）隱藏背景圖層，如圖2-2所示。圖2-2隱藏背景圖層（3）選擇“文件”菜單的“存儲(chǔ)為web所用格式”命令，在彈出對(duì)話框中，選擇GIF格式，如圖2-3所示，點(diǎn)擊“存儲(chǔ)”后把文件保存到本地某一位置。圖2-3存儲(chǔ)為web格式對(duì)話框在彈出的警告框中點(diǎn)擊“確定”，如圖2-4所示。圖2-4警告框（4）重復(fù)步驟三，選擇“PNG-24”格式輸出。（5）新建一個(gè)html文檔，輸入以下代碼，如圖2-5所示。圖2-5插入不同格式圖片（6）“運(yùn)行”菜單選擇“運(yùn)行到瀏覽器”，指定某瀏覽器后，網(wǎng)頁(yè)效果如圖2-6所示。圖2-6png格式優(yōu)于gif格式可以看到左側(cè)的GIF格式，在圖形邊緣會(huì)帶上斑駁的白色，而右側(cè)的PNG格式則完美表現(xiàn)效果?！钏颊v解：從上面圖可以看到，左邊圖標(biāo)周圍只是殘留了1個(gè)像素的白色雜色，但是在一些暗色的場(chǎng)景下特別明顯。強(qiáng)調(diào)細(xì)節(jié)的把握，規(guī)矩的養(yǎng)成。35知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1）掌握不同格式圖像的使用場(chǎng)景。（2）了解網(wǎng)頁(yè)中不同區(qū)域的圖像尺寸范圍。（3）具備能從網(wǎng)絡(luò)上下載的素材圖標(biāo)輸出為透明度的ps處理能力。（4）理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。5課后作業(yè)

任務(wù)單教學(xué)單元2.2圖像文件規(guī)范化教學(xué)內(nèi)容圖像格式、尺寸、命名實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述在生活中，我們有時(shí)候需要從網(wǎng)頁(yè)下載圖片，有些圖片無(wú)法直接下載，有些圖片并不是需要的透明底的圖片，有些圖片尺寸不符合要求，需要掌握一定的圖像處理技法。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【案例3】在Photoshop中打開(kāi)“輸出透明底色.psd”文件。將圖標(biāo)輸出為透明底色，分別用gif、png格式進(jìn)行保存。然后將這兩個(gè)圖片插入到黑色背景色的網(wǎng)頁(yè)中，并預(yù)覽效果觀察區(qū)別之處。（1）打開(kāi)“輸出透明底色.psd”文件，該psd文件已做分層處理，如圖2-1所示。圖2-1分層處理（2）隱藏背景圖層，如圖2-2所示。圖2-2隱藏背景圖層（3）選擇“文件”菜單的“存儲(chǔ)為web所用格式”命令，在彈出對(duì)話框中，選擇GIF格式，如圖2-3所示，點(diǎn)擊“存儲(chǔ)”后把文件保存到本地某一位置。圖2-3存儲(chǔ)為web格式對(duì)話框在彈出的警告框中點(diǎn)擊“確定”，如圖2-4所示。圖2-4警告框（4）重復(fù)步驟三，選擇“PNG-24”格式輸出。（5）新建一個(gè)html文檔，輸入以下代碼，如圖2-5所示。圖2-5插入不同格式圖片（6）“運(yùn)行”菜單選擇“運(yùn)行到瀏覽器”，指定某瀏覽器后，網(wǎng)頁(yè)效果如圖2-6所示。圖2-6png格式優(yōu)于gif格式可以看到左側(cè)的GIF格式，在圖形邊緣會(huì)帶上斑駁的白色，而右側(cè)的PNG格式則完美表現(xiàn)效果。任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分圖像處理能進(jìn)行準(zhǔn)確的摳圖或繪圖，圖標(biāo)邊緣不殘留雜色50插入不同格式圖像正確輸入對(duì)應(yīng)的圖像元素的代碼30網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。教學(xué)單元2.3書(shū)寫(xiě)HTML代碼的習(xí)慣教學(xué)內(nèi)容書(shū)寫(xiě)HTML代碼的相關(guān)要求學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：代碼縮進(jìn)的意義。添加注釋語(yǔ)句。標(biāo)簽語(yǔ)義化的意義。能力目標(biāo)：培養(yǎng)快速、準(zhǔn)確輸入代碼的能力。具備根據(jù)語(yǔ)義場(chǎng)景對(duì)標(biāo)簽進(jìn)行選擇的能力。素養(yǎng)目標(biāo)：了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。強(qiáng)化代碼規(guī)范意識(shí)：教育學(xué)生遵守編程規(guī)范，編寫(xiě)清晰、可讀的代碼，提高代碼質(zhì)量和可維護(hù)性。學(xué)習(xí)重點(diǎn)代碼縮進(jìn)，html及css注釋語(yǔ)句的添加，認(rèn)識(shí)標(biāo)簽的語(yǔ)義學(xué)習(xí)難點(diǎn)認(rèn)識(shí)標(biāo)簽的語(yǔ)義教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)（1）作業(yè)點(diǎn)評(píng)環(huán)節(jié)。（2）常見(jiàn)的圖像格式包括哪些？各有什么特點(diǎn)？10引入在HTML和CSS代碼的編寫(xiě)中，推薦代碼使用小寫(xiě)，這是CSS的官方推薦做法，也符合大多數(shù)編碼規(guī)范和命名約定。在少則幾百行、多則上千行的代碼下，要規(guī)范書(shū)寫(xiě)代碼。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授2.3.1保持正確的縮進(jìn)何為縮進(jìn)，類似我們寫(xiě)作文時(shí)，每段前面總是空兩個(gè)格子一樣。對(duì)于編寫(xiě)HTML代碼來(lái)說(shuō)，可以這么理解“每給一個(gè)元素添加子元素的時(shí)候，子元素代碼就應(yīng)該往右移動(dòng)一些位置”，如圖2-7所示。圖2-7正確的縮進(jìn)雖然HTML代碼有無(wú)縮進(jìn)并不會(huì)產(chǎn)生錯(cuò)誤，但對(duì)于任何新老手來(lái)說(shuō)，良好的代碼縮進(jìn)可以讓編寫(xiě)、調(diào)試階段快速無(wú)誤進(jìn)行。在Hbuilder軟件中，按一次<tab>鍵代表往后縮進(jìn)一個(gè)單位，按<Shift>+<tab>鍵或者是<Backspace>回退鍵可以往前回退一個(gè)單位。千萬(wàn)別拼命按空格鍵來(lái)產(chǎn)生縮進(jìn)，費(fèi)時(shí)且縮進(jìn)不均勻。知識(shí)點(diǎn)：縮進(jìn)式書(shū)寫(xiě)代碼知識(shí)點(diǎn)：縮進(jìn)式書(shū)寫(xiě)代碼記憶關(guān)鍵詞：長(zhǎng)幼有序關(guān)鍵詞解析：元素（容器）從代碼分辨包含關(guān)系，如同看家族族譜。父元素有若干子元素，父元素如首領(lǐng)站在隊(duì)伍前面，所有子元素是平級(jí)關(guān)系，站在首領(lǐng)后方，依次類推形成層次遞進(jìn)的關(guān)系。成語(yǔ)出處：《荀子·君子篇》：“故尚賢使能，則主尊下安；貴賤有等，則令行而不流；親疏有分，則施行而不悖；長(zhǎng)幼有序，則事業(yè)捷成而有所休?！遍L(zhǎng)幼有序——指年長(zhǎng)的和年少的、是有順序的。☆思政解說(shuō)1：弘揚(yáng)中國(guó)傳統(tǒng)道德價(jià)值觀的核心理念。強(qiáng)調(diào)家庭與社會(huì)中的輩分與秩序，倡導(dǎo)尊重長(zhǎng)輩、愛(ài)護(hù)幼輩，有助于構(gòu)建和諧的人際關(guān)系和社會(huì)氛圍，是社會(huì)主義核心價(jià)值觀的重要體現(xiàn)。☆思政解說(shuō)2：清晰的代碼縮進(jìn)，可以為團(tuán)隊(duì)開(kāi)發(fā)、維護(hù)工作難度大大降低?！拔覟槿巳耍巳藶槲摇?。我們也不希望見(jiàn)到交到手頭的代碼一團(tuán)亂麻的情況。當(dāng)我們看到代碼量比較大，頁(yè)面效果出現(xiàn)異常的時(shí)候，我們通常都要檢查html結(jié)構(gòu)是否書(shū)寫(xiě)正確。初學(xué)者作品中往往經(jīng)常因?yàn)榭s進(jìn)書(shū)寫(xiě)不規(guī)范，導(dǎo)致經(jīng)常忘記寫(xiě)結(jié)束標(biāo)簽。在Hbuilder軟件中，應(yīng)該從<body>標(biāo)簽開(kāi)始，逐級(jí)檢查相關(guān)標(biāo)簽是否成對(duì)出現(xiàn)。可以在標(biāo)簽前面雙擊左鍵用以快速選中該標(biāo)簽包含的代碼塊。檢查首尾標(biāo)簽成對(duì)后，利用代碼折疊功能可以“清屏”，節(jié)省滾動(dòng)屏幕的時(shí)間，如圖2-8所示。圖2-8選擇標(biāo)簽逐個(gè)檢查<body>標(biāo)簽及它的“兒子”容器，從外層往內(nèi)層檢查各“兒子”的“兒子”，對(duì)代碼進(jìn)行縮進(jìn)的修正、頭尾標(biāo)簽的補(bǔ)全，確認(rèn)代碼無(wú)誤后將其折疊，如圖2-9所示。圖2-9逐層檢查2.3.2充分的注釋注釋，實(shí)際就是“工作記錄”、“看書(shū)筆記”，注釋對(duì)程序的運(yùn)行毫無(wú)影響。編程中使用注釋的主要作用是增強(qiáng)代碼的可讀性、便于維護(hù)和調(diào)試、以及幫助團(tuán)隊(duì)成員理解代碼邏輯。在這些作用中，增強(qiáng)代碼可讀性尤為重要。編寫(xiě)清晰、易懂的注釋可以讓其他開(kāi)發(fā)者（包括未來(lái)的自己）快速理解代碼的目的和邏輯，這對(duì)于維護(hù)大型項(xiàng)目和團(tuán)隊(duì)協(xié)作尤其關(guān)鍵。HTML的注釋語(yǔ)句在瀏覽器中并不會(huì)運(yùn)行，格式為<!--注釋內(nèi)容-->，如圖2-10所示。圖2-10html注釋格式CSS對(duì)應(yīng)的注釋語(yǔ)句格式為//注釋文字或者/*注釋文字*/，如圖2-11所示。知識(shí)點(diǎn)：編程時(shí)注釋的重要性知識(shí)點(diǎn)：編程時(shí)注釋的重要性記憶關(guān)鍵詞：事必躬親關(guān)鍵詞解析：代碼注釋，必須由代碼編寫(xiě)者親自標(biāo)注，帶個(gè)好頭！一個(gè)稱職的碼農(nóng)，應(yīng)該在代碼適當(dāng)位置標(biāo)注上清晰、有效的提示信息，便于日后維護(hù)及團(tuán)隊(duì)協(xié)作需要。成百上千行的代碼并不是設(shè)計(jì)者當(dāng)天就能完成，與其幾天后忘卻重新審視代碼意思，不如先做好注釋，更不能指望別人理解你代碼時(shí)幫你寫(xiě)注釋。成語(yǔ)出處： 《詩(shī)?小雅?節(jié)南山》：“弗躬弗親，庶民弗信?！笔卤毓H——意思是不論什么事一定要親自去做，親自過(guò)問(wèn)。☆思政解說(shuō)1：事必躬親這個(gè)成語(yǔ)告訴我們，在接觸一門(mén)新知識(shí)、新技能、新工作的時(shí)候，必須要親自完整地去體驗(yàn)每個(gè)環(huán)節(jié)，事必躬親強(qiáng)調(diào)“有調(diào)查才有發(fā)言權(quán)。”☆思政解說(shuō)2：編程時(shí)注釋，告知代碼的意思、目的，以便于其他開(kāi)發(fā)人員或自己更好地理解代碼，讀懂你要實(shí)現(xiàn)的目標(biāo)。2.3.3標(biāo)簽盡可能語(yǔ)義化HTML語(yǔ)義化是指使用合適的標(biāo)簽來(lái)展示內(nèi)容的結(jié)構(gòu)和意義，而不是僅僅為了樣式表現(xiàn)。這樣做的好處有：有利于搜索引擎優(yōu)化（SEO），因?yàn)樗阉饕婵梢愿鶕?jù)標(biāo)簽來(lái)確定上下文和權(quán)重。方便開(kāi)發(fā)者閱讀和理解。方便維護(hù)，更改代碼時(shí)容易定位。方便設(shè)備（如屏幕閱讀器、盲人閱讀器等）解析。方便團(tuán)隊(duì)合作，因?yàn)檎Z(yǔ)義化使得項(xiàng)目更加標(biāo)準(zhǔn)化和規(guī)范化。知識(shí)點(diǎn)：知識(shí)點(diǎn)：標(biāo)簽語(yǔ)義化記憶關(guān)鍵詞：顧名思義關(guān)鍵詞解析：一個(gè)好名字，讓人讀懂其父母的殷殷期待；一個(gè)語(yǔ)義化的標(biāo)簽，讓機(jī)器與人都能讀懂網(wǎng)頁(yè)的內(nèi)容深意。它不僅僅是代碼的堆砌，而是賦予每個(gè)元素以靈魂，讓搜索引擎輕松捕捉頁(yè)面主旨，優(yōu)化排名；讓視障人士通過(guò)屏幕閱讀器感知世界；更讓開(kāi)發(fā)者維護(hù)代碼如行云流水，結(jié)構(gòu)清晰。成語(yǔ)出處： 西晉·陳壽《三國(guó)志·魏書(shū)·王昶傳》：“欲使汝曹立身行己，遵儒者之教,履道家之言,故以玄默沖虛為名,欲使汝曹顧名思義,不敢違越也?！?顧名思義——指看到名稱就想到它的含義?！钏颊庹f(shuō)1：強(qiáng)調(diào)編程中要培養(yǎng)認(rèn)真專注態(tài)度，切勿圖一時(shí)方便，給對(duì)象亂起名字?！钏颊庹f(shuō)2：養(yǎng)成嚴(yán)謹(jǐn)認(rèn)真的態(tài)度，選擇標(biāo)簽如起名字，講究一個(gè)“意境”?！钏颊庹f(shuō)3：正確合理的標(biāo)簽如同流行語(yǔ)所說(shuō)的正面“人設(shè)”，鼓勵(lì)學(xué)生樹(shù)立正面“人設(shè)”，這既是對(duì)他們個(gè)人品德的塑造，也是對(duì)社會(huì)風(fēng)氣的引領(lǐng)。通過(guò)塑造良好的“人設(shè)”，個(gè)體能夠更加注重自我修養(yǎng)，提升道德水平，進(jìn)而在日常生活和工作中展現(xiàn)出積極向上的精神風(fēng)貌。比如：文章詳情頁(yè)的標(biāo)簽選擇，參考標(biāo)簽有h1~h6標(biāo)題、p段落、section版塊/區(qū)塊、artist文章、em強(qiáng)調(diào)（斜體外觀）、strong強(qiáng)調(diào)（粗體）、time時(shí)間，如圖2-12所示。圖2-12標(biāo)簽語(yǔ)義化35任務(wù)實(shí)施【練習(xí)1】打開(kāi)資源包“第2章-代碼修正練習(xí)”文件夾下的“修改縮進(jìn)1”、“修改縮進(jìn)2”、“修改縮進(jìn)3”這三個(gè)文件夾，如圖2-13所示，修改文件夾中的若干個(gè)書(shū)寫(xiě)不標(biāo)準(zhǔn)的HTML代碼。圖2-13修改縮進(jìn)練習(xí)25知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1） 代碼縮進(jìn)的意義。培養(yǎng)快速、準(zhǔn)確輸入代碼的能力。（2） 添加注釋語(yǔ)句。服務(wù)團(tuán)隊(duì)，也方便自己。（3） 標(biāo)簽語(yǔ)義化的意義。具備根據(jù)語(yǔ)義場(chǎng)景對(duì)標(biāo)簽進(jìn)行選擇的能力。5課后作業(yè)

任務(wù)單教學(xué)單元2.3書(shū)寫(xiě)HTML代碼的習(xí)慣教學(xué)內(nèi)容書(shū)寫(xiě)HTML代碼的相關(guān)要求實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述【練習(xí)1】打開(kāi)資源包“第2章-代碼修正練習(xí)”文件夾下的“修改縮進(jìn)1”、“修改縮進(jìn)2”、“修改縮進(jìn)3”這三個(gè)文件夾，如圖2-13所示，修改文件夾中的若干個(gè)書(shū)寫(xiě)不標(biāo)準(zhǔn)的HTML代碼。通過(guò)對(duì)以往學(xué)生作業(yè)中的不良書(shū)寫(xiě)習(xí)慣的糾錯(cuò)，培養(yǎng)規(guī)范編寫(xiě)代碼的意識(shí)。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施在軟件中“打開(kāi)目錄”，打開(kāi)對(duì)應(yīng)html文件。通過(guò)代碼折疊功能，檢查標(biāo)簽是否完整。對(duì)于縮進(jìn)不準(zhǔn)確的代碼，調(diào)整其縮減，體現(xiàn)容器嵌套關(guān)系。給大容器添加上合理的注釋語(yǔ)句。任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)標(biāo)簽是否完整20容器嵌套關(guān)系代碼縮減合理、準(zhǔn)確。30CSS代碼的編寫(xiě)能以正確縮進(jìn)形式輸入正確代碼。30注釋語(yǔ)句正確到位的注釋。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元2.4基礎(chǔ)練習(xí)教學(xué)內(nèi)容基礎(chǔ)練習(xí)學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：企業(yè)網(wǎng)站不同區(qū)域的圖片的名稱。了解企業(yè)網(wǎng)頁(yè)框架大體結(jié)構(gòu)。能力目標(biāo)：（1）具備能獨(dú)立觀察、模仿企業(yè)網(wǎng)站框架容器的設(shè)計(jì)。素養(yǎng)目標(biāo)：了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。通過(guò)對(duì)中國(guó)企業(yè)官網(wǎng)的訪問(wèn)，了解企業(yè)，了解國(guó)情。學(xué)習(xí)重點(diǎn)企業(yè)網(wǎng)頁(yè)的圖像命名規(guī)則，企業(yè)網(wǎng)頁(yè)的框架容器結(jié)構(gòu)。學(xué)習(xí)難點(diǎn)模仿企業(yè)網(wǎng)站框架容器的設(shè)計(jì)教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)Html及css注釋語(yǔ)句的格式？一般在什么情況下添加注釋語(yǔ)句？5引入在HTML和CSS代碼的編寫(xiě)中，推薦代碼使用小寫(xiě)，這是CSS的官方推薦做法，也符合大多數(shù)編碼規(guī)范和命名約定。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授從企業(yè)網(wǎng)站中獲取不同圖片的相關(guān)信息，如尺寸、類型、文件命名。了解“開(kāi)發(fā)者工具”觀察網(wǎng)頁(yè)框架結(jié)構(gòu)的操作步驟。15任務(wù)實(shí)施【教師演示】演示“練習(xí)2”的操作步驟?！揪毩?xí)2】挑選幾個(gè)公司或新聞門(mén)戶網(wǎng)站，仔細(xì)觀察不同區(qū)域的圖片的名稱。門(mén)戶網(wǎng)站圖片的名稱比較長(zhǎng)，看上去不限于包含年月日等信息，也還有部分公司內(nèi)部的文件編碼格式，是比較正常的，企業(yè)網(wǎng)站圖片多，采用英文命名方式過(guò)于復(fù)雜也不好歸類，還容易產(chǎn)生歧義。聯(lián)想一下我們身份證號(hào)碼，也不能采用拼音來(lái)表示。例如：網(wǎng)易網(wǎng)站某科技欄目中的某頁(yè)面，在圖片上右擊鼠標(biāo)，查看“屬性”。如圖2-14所示。圖2-14查看圖片屬性發(fā)現(xiàn)圖片的url地址包含了眾多的%+=符號(hào)，看不出連貫的圖像文件名，這是基于URL編碼的需要。但我們?cè)跒g覽器菜單中選擇將該頁(yè)面保存到本地，如圖2-15所示。圖2-15保存頁(yè)面圖片打開(kāi)對(duì)應(yīng)的本地文件夾后，如圖2-16所示，觀察圖片命名規(guī)則。圖2-16觀察圖片命名規(guī)則【提問(wèn)】根據(jù)該網(wǎng)站圖片命名規(guī)律，猜測(cè)一下圖片中數(shù)字代表的含義？【教師演示】演示“練習(xí)3”的操作步驟。【練習(xí)3】用“開(kāi)發(fā)者工具”觀察幾個(gè)企業(yè)（不宜選門(mén)戶網(wǎng)站）的主頁(yè)、一級(jí)頁(yè)面或詳情頁(yè)，用箭頭選擇工具觀察網(wǎng)頁(yè)的結(jié)構(gòu)。在Hbuilder新建一個(gè)空白HTML文件，將網(wǎng)頁(yè)框架大體結(jié)構(gòu)表述出來(lái)。例如：分析“華為”的首頁(yè)/cn/的主體框架容器。☆思政講解：提問(wèn)：你對(duì)華為企業(yè)最深刻印象體現(xiàn)在什么地方？提示：手機(jī)產(chǎn)品、網(wǎng)絡(luò)產(chǎn)品、5G標(biāo)準(zhǔn)專利、孟晚舟事件……孟晚舟事件啟示我們，個(gè)人的命運(yùn)與國(guó)家的命運(yùn)緊密相連。只有國(guó)家強(qiáng)大，才能保護(hù)好每一位公民。只有團(tuán)結(jié)一心，才能共同抵御風(fēng)險(xiǎn)和挑戰(zhàn)，實(shí)現(xiàn)中華民族的偉大復(fù)興。（1）使用谷歌瀏覽器打開(kāi)網(wǎng)頁(yè)，點(diǎn)擊設(shè)置按鈕，進(jìn)入“開(kāi)發(fā)者模式”（360瀏覽器則是“開(kāi)發(fā)人員工具”），如圖2-17所示。圖2-17開(kāi)發(fā)者模式進(jìn)入“開(kāi)發(fā)者模式”后，如圖2-18所示。圖2-18折疊標(biāo)簽以觀察結(jié)構(gòu)（2）我們想要參考其框架結(jié)構(gòu)，如何判斷哪些容器才是我們所需要記錄下來(lái)的？當(dāng)光標(biāo)落在標(biāo)簽元素上面的時(shí)候，左側(cè)窗口出現(xiàn)有淡藍(lán)色的“薄膜”覆蓋與之對(duì)應(yīng)的頁(yè)面元素，這就是我們所需要研究的容器結(jié)構(gòu)。剔除掉一些不必要研究的容器對(duì)象（比如一些非主體容器），如圖2-19所示。圖2-19忽略非研究的容器重點(diǎn)觀察我們要研究的容器對(duì)象，如圖2-20所示。圖2-20頁(yè)面容器大體結(jié)構(gòu)由于商業(yè)網(wǎng)站的內(nèi)容區(qū)容器結(jié)構(gòu)較復(fù)雜，我們重點(diǎn)觀察<divclass=”main”>…</div>這一大塊的代碼結(jié)構(gòu)，如圖2-21所示。點(diǎn)擊前方的三角形按鈕，將結(jié)構(gòu)展開(kāi)。圖2-21main容器結(jié)構(gòu)我們可以從這個(gè)操作中得知，該代碼塊是實(shí)現(xiàn)左側(cè)的頁(yè)面效果。如果繼續(xù)想分析的細(xì)致些，繼續(xù)展開(kāi)，如圖2-22所示。圖2-22main容器結(jié)構(gòu)（3）不斷重復(fù)這些步驟，觀察每個(gè)容器里面包含了什么頁(yè)面元素，但注意，作為本章練習(xí)，我們不必將整個(gè)頁(yè)面的容器結(jié)構(gòu)刨根問(wèn)底，畢竟有些網(wǎng)站的容器嵌套關(guān)系對(duì)于初學(xué)者來(lái)說(shuō)，十分復(fù)雜，建議對(duì)一些頁(yè)面元素較少、源代碼量較少的企業(yè)網(wǎng)站進(jìn)行剖析。（4）最后，我們可以整理出該網(wǎng)頁(yè)對(duì)應(yīng)的html容器結(jié)構(gòu)，如圖2-23所示。圖2-23整理后的容器結(jié)構(gòu)【提問(wèn)】class屬性標(biāo)記著對(duì)應(yīng)采用的樣式，有些代碼行class的屬性值很短，有些卻很長(zhǎng)，什么原因？50知識(shí)或技能拓展無(wú)0任務(wù)總結(jié)通過(guò)本課的學(xué)習(xí)：（1）了解企業(yè)網(wǎng)站不同區(qū)域的圖片的名稱。（2）能正確解讀、分析企業(yè)網(wǎng)頁(yè)框架大體結(jié)構(gòu)。（3）訪問(wèn)華為官網(wǎng)，了解華為在行業(yè)的地位與榮耀，增加民族自豪感。5課后作業(yè)

任務(wù)單教學(xué)單元2.5擴(kuò)展練習(xí)教學(xué)內(nèi)容擴(kuò)展練習(xí)實(shí)施環(huán)境機(jī)房學(xué)時(shí)2任務(wù)描述【練習(xí)2】挑選幾個(gè)公司或新聞門(mén)戶網(wǎng)站，仔細(xì)觀察不同區(qū)域的圖片的名稱?！揪毩?xí)3】用“開(kāi)發(fā)者工具”觀察幾個(gè)企業(yè)（不宜選門(mén)戶網(wǎng)站）的主頁(yè)、一級(jí)頁(yè)面或詳情頁(yè)，用箭頭選擇工具觀察網(wǎng)頁(yè)的結(jié)構(gòu)。在Hbuilder新建一個(gè)空白HTML文件，將網(wǎng)頁(yè)框架大體結(jié)構(gòu)表述出來(lái)。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【練習(xí)2】挑選幾個(gè)公司或新聞門(mén)戶網(wǎng)站，仔細(xì)觀察不同區(qū)域的圖片的名稱。門(mén)戶網(wǎng)站圖片的名稱比較長(zhǎng)，看上去不限于包含年月日等信息，也還有部分公司內(nèi)部的文件編碼格式，是比較正常的，企業(yè)網(wǎng)站圖片多，采用英文命名方式過(guò)于復(fù)雜也不好歸類，還容易產(chǎn)生歧義。聯(lián)想一下我們身份證號(hào)碼，也不能采用拼音來(lái)表示。例如：網(wǎng)易網(wǎng)站某科技欄目中的某頁(yè)面，在圖片上右擊鼠標(biāo)，查看“屬性”。如圖2-14所示。圖2-14查看圖片屬性發(fā)現(xiàn)圖片的url地址包含了眾多的%+=符號(hào)，看不出連貫的圖像文件名，這是基于URL編碼的需要。但我們?cè)跒g覽器菜單中選擇將該頁(yè)面保存到本地，如圖2-15所示。圖2-15保存頁(yè)面圖片打開(kāi)對(duì)應(yīng)的本地文件夾后，如圖2-16所示，觀察圖片命名規(guī)則。圖2-16觀察圖片命名規(guī)則【練習(xí)3】用“開(kāi)發(fā)者工具”觀察幾個(gè)企業(yè)（不宜選門(mén)戶網(wǎng)站）的主頁(yè)、一級(jí)頁(yè)面或詳情頁(yè)，用箭頭選擇工具觀察網(wǎng)頁(yè)的結(jié)構(gòu)。在Hbuilder新建一個(gè)空白HTML文件，將網(wǎng)頁(yè)框架大體結(jié)構(gòu)表述出來(lái)。例如：分析“華為”的首頁(yè)/cn/的主體框架容器。（1）使用谷歌瀏覽器打開(kāi)網(wǎng)頁(yè)，點(diǎn)擊設(shè)置按鈕，進(jìn)入“開(kāi)發(fā)者模式”（360瀏覽器則是“開(kāi)發(fā)人員工具”），如圖2-17所示。圖2-17開(kāi)發(fā)者模式進(jìn)入“開(kāi)發(fā)者模式”后，如圖2-18所示。圖2-18折疊標(biāo)簽以觀察結(jié)構(gòu)（2）我們想要參考其框架結(jié)構(gòu)，如何判斷哪些容器才是我們所需要記錄下來(lái)的？當(dāng)光標(biāo)落在標(biāo)簽元素上面的時(shí)候，左側(cè)窗口出現(xiàn)有淡藍(lán)色的“薄膜”覆蓋與之對(duì)應(yīng)的頁(yè)面元素，這就是我們所需要研究的容器結(jié)構(gòu)。剔除掉一些不必要研究的容器對(duì)象（比如一些非主體容器），如圖2-19所示。圖2-19忽略非研究的容器重點(diǎn)觀察我們要研究的容器對(duì)象，如圖2-20所示。圖2-20頁(yè)面容器大體結(jié)構(gòu)由于商業(yè)網(wǎng)站的內(nèi)容區(qū)容器結(jié)構(gòu)較復(fù)雜，我們重點(diǎn)觀察<divclass=”main”>…</div>這一大塊的代碼結(jié)構(gòu)，如圖2-21所示。點(diǎn)擊前方的三角形按鈕，將結(jié)構(gòu)展開(kāi)。圖2-21main容器結(jié)構(gòu)我們可以從這個(gè)操作中得知，該代碼塊是實(shí)現(xiàn)左側(cè)的頁(yè)面效果。如果繼續(xù)想分析的細(xì)致些，繼續(xù)展開(kāi)，如圖2-22所示。圖2-22main容器結(jié)構(gòu)（3）不斷重復(fù)這些步驟，觀察每個(gè)容器里面包含了什么頁(yè)面元素，但注意，作為本章練習(xí)，我們不必將整個(gè)頁(yè)面的容器結(jié)構(gòu)刨根問(wèn)底，畢竟有些網(wǎng)站的容器嵌套關(guān)系對(duì)于初學(xué)者來(lái)說(shuō)，十分復(fù)雜，建議對(duì)一些頁(yè)面元素較少、源代碼量較少的企業(yè)網(wǎng)站進(jìn)行剖析。（4）最后，我們可以整理出該網(wǎng)頁(yè)對(duì)應(yīng)的html容器結(jié)構(gòu)，如圖2-23所示。圖2-23整理后的容器結(jié)構(gòu)任務(wù)檢測(cè)學(xué)習(xí)效果評(píng)價(jià)表被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分觀察網(wǎng)站圖片命名將圖片文件保存到本地，并用文本說(shuō)明命名規(guī)則。40開(kāi)發(fā)者工具：審查元素準(zhǔn)確定位主體容器20容器代碼能正確輸入或復(fù)制對(duì)應(yīng)的容器代碼20代碼整理縮進(jìn)正確、標(biāo)簽完整。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元2.5擴(kuò)展練習(xí)教學(xué)內(nèi)容擴(kuò)展練習(xí)學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時(shí)2學(xué)時(shí)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：鞏固本章知識(shí)點(diǎn)。觀察企業(yè)網(wǎng)站網(wǎng)站結(jié)構(gòu)、圖片命名。能力目標(biāo)：能根據(jù)企業(yè)網(wǎng)頁(yè)現(xiàn)有特點(diǎn)，挑選適合風(fēng)格的圖標(biāo)。具備“溯源”能力，根據(jù)網(wǎng)址判定站點(diǎn)結(jié)構(gòu)。素養(yǎng)目標(biāo)：了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。企業(yè)網(wǎng)頁(yè)改版情境，鼓勵(lì)學(xué)生敢于嘗試新方法，培養(yǎng)他們的創(chuàng)新意識(shí)和創(chuàng)造力，為解決實(shí)際問(wèn)題提供獨(dú)特的視角和解決方案。學(xué)習(xí)重點(diǎn)企業(yè)網(wǎng)站網(wǎng)頁(yè)結(jié)構(gòu)分析學(xué)習(xí)難點(diǎn)編寫(xiě)企業(yè)網(wǎng)站某網(wǎng)頁(yè)的html結(jié)構(gòu)。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動(dòng)法教學(xué)過(guò)程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時(shí)間（分鐘）復(fù)習(xí)企業(yè)網(wǎng)頁(yè)框架大體結(jié)構(gòu)主要包括：頁(yè)頭、內(nèi)容、頁(yè)腳三部分。2引入鞏固基礎(chǔ)練習(xí)學(xué)習(xí)成果，觀察企業(yè)網(wǎng)站網(wǎng)站結(jié)構(gòu)、圖片命名，以及網(wǎng)頁(yè)圖標(biāo)的風(fēng)格，思考如何在改版情況下，查找出可以使用的圖標(biāo)。1任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測(cè)試本機(jī)的網(wǎng)頁(yè)瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識(shí)講授如何找到2023中國(guó)百?gòu)?qiáng)企業(yè)官網(wǎng)。根據(jù)網(wǎng)址路徑分析其站點(diǎn)文件夾結(jié)構(gòu)。介紹某一中國(guó)百?gòu)?qiáng)企業(yè)官網(wǎng)頁(yè)面（最好是首頁(yè)、欄目頁(yè)）出現(xiàn)的小圖標(biāo)，總結(jié)公司文化、產(chǎn)品特點(diǎn)或者圖標(biāo)風(fēng)格。15任務(wù)實(shí)施【練習(xí)1】搜索2023中國(guó)百?gòu)?qiáng)企業(yè)，按個(gè)人學(xué)號(hào)對(duì)應(yīng)的