第2章

創(chuàng)建網(wǎng)站項(xiàng)目01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識(shí)點(diǎn)04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)掌握Hbuilder軟件創(chuàng)建項(xiàng)目，并能將素材及HTML文件正確放置在相應(yīng)的文件夾中；深刻理解HTML文件、圖像文件命名規(guī)范化的背景；能逐漸記住網(wǎng)頁(yè)常見(jiàn)的英文單詞，課堂上敢于用“拆分法”去拼讀陌生的英文單詞；理解不同類型的圖像在網(wǎng)頁(yè)中對(duì)應(yīng)的使用場(chǎng)景；養(yǎng)成規(guī)范書(shū)寫(xiě)代碼的習(xí)慣，包括縮進(jìn)式書(shū)寫(xiě)、注釋、標(biāo)簽語(yǔ)義化。第2章

創(chuàng)建網(wǎng)站項(xiàng)目1通過(guò)本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)2通過(guò)訪問(wèn)華為企業(yè)，側(cè)面了解華為發(fā)展歷程，培養(yǎng)民族自豪感。了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合：“蹈矩循規(guī)”，借此聯(lián)想法律制度、校紀(jì)校規(guī)的重要性?！跋髯氵m履”，強(qiáng)調(diào)每個(gè)人有各自的學(xué)習(xí)技巧，不考慮自身特點(diǎn)而生搬硬套的話，容易陷入窘境?！案饔星铩?，每個(gè)人都有自身的優(yōu)點(diǎn)，盡量揚(yáng)長(zhǎng)避短。“言人人殊”，看待事情人人都有各自想法觀點(diǎn)，重要事情未經(jīng)驗(yàn)證前不輕信別人的說(shuō)法，不信謠，不傳謠。第2章

創(chuàng)建網(wǎng)站項(xiàng)目課程思政目標(biāo)2“長(zhǎng)幼有序”，弘揚(yáng)中國(guó)傳統(tǒng)道德價(jià)值觀的核心理念?！笆卤毓H”，在接觸一門(mén)新知識(shí)、新技能、新工作的時(shí)候，必須要親自完整地去體驗(yàn)每個(gè)環(huán)節(jié)，有調(diào)查才有發(fā)言權(quán)?！邦櫭剂x”，強(qiáng)調(diào)編程中要培養(yǎng)認(rèn)真專注態(tài)度，切勿圖一時(shí)方便，給對(duì)象亂起名字。第2章

創(chuàng)建網(wǎng)站項(xiàng)目3知識(shí)點(diǎn)2.1站點(diǎn)相關(guān)命名規(guī)范2.2圖像文件規(guī)范化圖像格式3.3書(shū)寫(xiě)HTML代碼的習(xí)慣保持正確的縮進(jìn)圖像尺寸圖像命名充分的注釋標(biāo)簽盡可能語(yǔ)義化第2章

創(chuàng)建網(wǎng)站項(xiàng)目2.1站點(diǎn)相關(guān)命名規(guī)范3知識(shí)點(diǎn)大部分網(wǎng)頁(yè)服務(wù)器只支持英文網(wǎng)頁(yè)路徑，網(wǎng)頁(yè)路徑區(qū)分大小寫(xiě)，最好統(tǒng)一使用小寫(xiě)英文，因此html文件、圖像名、文件夾名都需要用合理的英文命名。文件名可使用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。2.1站點(diǎn)相關(guān)命名規(guī)范3知識(shí)點(diǎn)常見(jiàn)英文單詞如表2-1所示。出現(xiàn)頻率中文英文中文英文高↓低公司簡(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

3知識(shí)點(diǎn)知識(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ú)得水?！度洝じ裉臁罚骸胺e善存仁，蹈矩循規(guī)太古民。”蹈矩循規(guī)——指遵守規(guī)矩，不敢違反。2.1站點(diǎn)相關(guān)命名規(guī)范3知識(shí)點(diǎn)【案例1】某個(gè)企業(yè)要建立公司網(wǎng)站，擬定網(wǎng)站主要欄目包括最新資訊、企業(yè)介紹、產(chǎn)品目錄、企業(yè)文化、商務(wù)聯(lián)系。請(qǐng)用英文命名對(duì)應(yīng)的文件夾，并將結(jié)果截圖下來(lái)。2.1站點(diǎn)相關(guān)命名規(guī)范【解決策略】?jī)?yōu)先采用英文單詞表述，可以百度對(duì)應(yīng)英文單詞。3知識(shí)點(diǎn)【案例2】上述公司隨著業(yè)務(wù)蓬勃發(fā)展，預(yù)計(jì)未來(lái)5年，產(chǎn)品將形成化妝，服飾，生活用品三大類目，服飾類下包括兒童、青少年、成年、老年人系列。嘗試規(guī)劃“產(chǎn)品”目錄下的文件夾結(jié)構(gòu)和網(wǎng)頁(yè)文件命名規(guī)則。2.1站點(diǎn)相關(guān)命名規(guī)范【解決策略】子文件夾命名規(guī)則：兒童、青少年、成年、老年人對(duì)應(yīng)的盡可能熟悉且短小的英文可采用Child,teen,adult,elder。思路1:比如青少年對(duì)應(yīng)teen文件夾下的文件命名規(guī)則，采用teen+年份+月份+日+序號(hào)，如果考慮一天能制作了上百個(gè)文件，則可以寫(xiě)為teen20240507001~teen20240507999。

思路2：如果覺(jué)得一大串?dāng)?shù)字不好觀察，管理，也可以寫(xiě)出teen2024-05-07_001。2.2圖像文件規(guī)范化3知識(shí)點(diǎn)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的弊端。2.2圖像文件規(guī)范化3知識(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)生成代碼。漢·李陵《與蘇武三首》：“嘉會(huì)難再遇，三載為千秋?！备饔星铩馑际歉饔懈鞯拇嬖诘膬r(jià)值。比喻在同一層次內(nèi)各人有各人的長(zhǎng)處，各人有各人的特色。2.2圖像文件規(guī)范化3知識(shí)點(diǎn)【案例3】在Photoshop中打開(kāi)“輸出透明底色.psd”文件。將圖標(biāo)輸出為透明底色，分別用gif、png格式進(jìn)行保存。然后將這兩個(gè)圖片插入到黑色背景色的網(wǎng)頁(yè)中，并預(yù)覽效果觀察區(qū)別之處。2.2圖像文件規(guī)范化3知識(shí)點(diǎ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ā)任務(wù)等對(duì)圖片的尺寸有特定要求。2.2圖像文件規(guī)范化3知識(shí)點(diǎn)知識(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ì)師的意圖。西漢·劉安《淮南子·說(shuō)林訓(xùn)》：“夫所以養(yǎng)而害所養(yǎng)，譬猶削足而適履，殺頭而便冠。”削足適履——指把腳削去一塊來(lái)湊合鞋的大小；比喻不合理地遷就湊合或不顧具體條件，生搬硬套。2.2圖像文件規(guī)范化3知識(shí)點(diǎn)2.2.3圖像命名圖像文件的名稱分為頭尾兩部分，用下劃線或中橫線隔開(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.gif2.2圖像文件規(guī)范化3知識(shí)點(diǎn)知識(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ī)則。西漢·司馬遷《史記·曹相國(guó)世家》：“參盡召長(zhǎng)老諸生，問(wèn)所以安集百姓，如齊故諸儒以百數(shù)，言人人殊。參未知所定?！毖匀巳耸狻该總€(gè)人的說(shuō)法都不相同，各有各的看法。2.3書(shū)寫(xiě)HTML代碼的習(xí)慣3知識(shí)點(diǎn)在HTML和CSS代碼的編寫(xiě)中，推薦代碼使用小寫(xiě)，這是CSS的官方推薦做法，也符合大多數(shù)編碼規(guī)范和命名約定。2.3.1保持正確的縮進(jìn)3知識(shí)點(diǎn)2.3.1保持正確的縮進(jìn)何為縮進(jìn)，類似我們寫(xiě)作文時(shí)，每段前面總是空兩個(gè)格子一樣。對(duì)于編寫(xiě)HTML代碼來(lái)說(shuō)，可以這么理解“每給一個(gè)元素添加子元素的時(shí)候，子元素代碼就應(yīng)該往右移動(dòng)一些位置”。2.3.1保持正確的縮進(jìn)3知識(shí)點(diǎ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)不均勻。2.3.1保持正確的縮進(jìn)3知識(shí)點(diǎn)知識(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)系。《荀子·君子篇》：“故尚賢使能，則主尊下安；貴賤有等，則令行而不流；親疏有分，則施行而不悖；長(zhǎng)幼有序，則事業(yè)捷成而有所休?！遍L(zhǎng)幼有序——指年長(zhǎng)的和年少的、是有順序的。2.3.1保持正確的縮進(jìn)3知識(shí)點(diǎn)【案例4】把學(xué)生寫(xiě)的錯(cuò)亂的HTML代碼，修正為正確整齊縮進(jìn)的代碼結(jié)構(gòu)?！窘鉀Q策略】在Hbuilder中，從<body>標(biāo)簽開(kāi)始，逐級(jí)檢查相關(guān)標(biāo)簽是否成對(duì)出現(xiàn)。2.3.2充分的注釋3知識(shí)點(diǎn)注釋，實(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ǔ)句格式為<!--注釋內(nèi)容-->。2.3.2充分的注釋3知識(shí)點(diǎn)CSS對(duì)應(yīng)的注釋語(yǔ)句格式為//注釋文字或者/*注釋文字*/。2.3.2充分的注釋3知識(shí)點(diǎn)知識(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ě)注釋?！对?shī)·小雅·節(jié)南山》：“弗躬弗親，庶民弗信?！笔卤毓H——意思是不論什么事一定要親自去做，親自過(guò)問(wèn)。2.3.3標(biāo)簽盡可能語(yǔ)義化3知識(shí)點(diǎn)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ī)范化。3知識(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è)的標(biāo)簽選擇，參考標(biāo)簽有h1~h6標(biāo)題、p段落、section版塊/區(qū)塊、artist文章、em強(qiáng)調(diào)（斜體外觀）、strong強(qiáng)調(diào)（粗體）、time時(shí)間，西晉·陳壽《三國(guó)志·魏書(shū)·王昶傳》：“欲使汝曹立身行己，遵儒者之教,履道家之言,故以玄默沖虛為名,欲使汝曹顧名思義,不敢違越也。”顧名思義——指看到名稱就想到它的含義。2.3.3標(biāo)簽盡可能語(yǔ)義化3知識(shí)點(diǎn)2.3.3標(biāo)簽盡可能語(yǔ)義化標(biāo)簽語(yǔ)義化2.4基礎(chǔ)練習(xí)4本章練習(xí)【練習(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.4基礎(chǔ)練習(xí)4本章練習(xí)【練習(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)表示。2.4基礎(chǔ)練習(xí)4本章練習(xí)【練習(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)。2.5擴(kuò)展練習(xí)4