2021網(wǎng)站搭建與管理04網(wǎng)頁設(shè)計(jì)開發(fā)環(huán)境03導(dǎo)入項(xiàng)目站點(diǎn)02新建web項(xiàng)目站點(diǎn)01站點(diǎn)規(guī)劃目錄CONTENT05運(yùn)用HBuilderX創(chuàng)建簡(jiǎn)單web網(wǎng)站站點(diǎn)規(guī)劃01【任務(wù)目標(biāo)】

能根據(jù)網(wǎng)站的使用范圍和用途，進(jìn)行分析，準(zhǔn)備和收集相關(guān)素材，包括文字、圖片、動(dòng)畫以及其他多媒體素材等，再對(duì)所收集的相關(guān)資源進(jìn)行分類，通過建立文件夾的方式管理不同類型素材，并合理規(guī)劃站點(diǎn)結(jié)構(gòu)?！局R(shí)解析】1、站點(diǎn)概念

網(wǎng)站是由多個(gè)相互關(guān)聯(lián)的文件組成的，為了合理管理這些文件和資源，可通過構(gòu)建“站點(diǎn)”的形式進(jìn)行分類管理和維護(hù)，同時(shí)，一個(gè)站點(diǎn)里的文件可以相互引用，從而給網(wǎng)站設(shè)計(jì)與制作者帶來便捷。2、站點(diǎn)規(guī)劃

如果將網(wǎng)站所需的全部資源都存放在一個(gè)目錄下，當(dāng)網(wǎng)站的資源越來越多時(shí)，就會(huì)增加管理的難度，為了提升站點(diǎn)管理工作的時(shí)效性，就必須要對(duì)站點(diǎn)進(jìn)行有效的規(guī)劃。（1）站點(diǎn)目錄規(guī)劃

設(shè)置站點(diǎn)一般的做法是在本地磁盤創(chuàng)建一個(gè)站點(diǎn)文件夾，然后在這個(gè)站點(diǎn)文件夾中創(chuàng)建多個(gè)分類子文件夾，將所有收集使用的資源分類存儲(chǔ)在相應(yīng)的子文件夾中，或者根據(jù)實(shí)際開發(fā)的需求創(chuàng)建多級(jí)文件夾，建立站點(diǎn)常規(guī)的文件夾結(jié)構(gòu)，如圖所示。（2）站點(diǎn)欄目規(guī)劃

根據(jù)制作網(wǎng)站的使用范圍和用途，設(shè)計(jì)站點(diǎn)欄目菜單的結(jié)構(gòu)，如圖1-2所示。電商站點(diǎn)主頁面index.html家用電器數(shù)碼產(chǎn)品生活服飾戶外運(yùn)動(dòng)圖書文具美食特產(chǎn)辦公用品新建web項(xiàng)目站點(diǎn)022.2.1開發(fā)工具——HBuilder1.安裝HBuilderX訪問HBuilder官方網(wǎng)站（http：//www.dcloud.io）,下載最新版的HBuilderX?？梢钥吹紿BuilderX的當(dāng)前版本、歷史版本以及各平臺(tái)的不同版本，App開發(fā)版，包含大部分App開發(fā)插件。App開發(fā)，指的是手機(jī)應(yīng)用開發(fā)。如果您是初學(xué)者或開發(fā)前端，建議下載標(biāo)準(zhǔn)版。后期如果學(xué)習(xí)App開發(fā)，可以到【插件安裝】中，安裝相關(guān)插件。讀者再下載是根據(jù)自己的設(shè)備選擇合適的版本即可。HBuilderX下載完成，解壓到指定的路徑后，雙擊啟動(dòng)文件HBuilderX.exe2.初識(shí)HBuilderXHBuilderX首次啟動(dòng)后，打開了一個(gè)HBuilder

X自述文件.md,HBuilderX自述文件。md：是一個(gè)markdown文件，就是個(gè)文本語言。點(diǎn)擊右上角的x，可以關(guān)閉此文件。

關(guān)閉后的頁面右側(cè)窗口，如圖，提供【新建項(xiàng)目】、【主題切換】、【新建空白文件】、【快捷鍵方案切換】、【打開目錄】、【入門教程】快捷菜單。單擊【入門教程】，瀏覽器打開一個(gè)新窗口，該窗口顯示HBuilderX官方的使用教程，提供了HBuilderX的詳細(xì)使用方法。2.2.2創(chuàng)建web站點(diǎn)1.新建項(xiàng)目首先，點(diǎn)擊右側(cè)窗口【新建項(xiàng)目】快捷菜單、或點(diǎn)擊工具欄上第一個(gè)圖標(biāo)（就是帶有紅色+號(hào)）、或直接Ctrl+N，調(diào)出創(chuàng)建項(xiàng)目窗口，如下圖所示。在圖中，選擇“普通項(xiàng)目”，在A處填寫新建項(xiàng)目的名稱，B處填寫（或選擇）項(xiàng)目保存路徑(更改此路徑HBuilder

X會(huì)記錄，下次默認(rèn)使用更改后的路徑)，C處可選擇使用的模板，選擇“基本HTML項(xiàng)目”模板，單擊“創(chuàng)建”按鈕新建web項(xiàng)目。新建項(xiàng)目后，如圖所示。最后，編寫項(xiàng)目中默認(rèn)的文件index.html，利用HBuilderX提供的工具完成文件的運(yùn)行。2.代碼助手

HBuilderX擁有強(qiáng)大的代碼助手提示，可以按“alt+數(shù)字”選擇直接選擇某個(gè)項(xiàng)目，類似中文輸入法數(shù)字選詞，可以幫您少敲很多代碼，如圖所示。3..查看代碼效果

如圖所示，點(diǎn)擊【預(yù)覽】可以查看代碼效果。如果您首次點(diǎn)擊【預(yù)覽】，又沒有安裝【內(nèi)置瀏覽器】，點(diǎn)擊預(yù)覽的時(shí)候，會(huì)提示您安裝插件，點(diǎn)擊確定即可。4.安裝插件點(diǎn)擊菜單“工具”→“插件安裝”，選擇需要的插件點(diǎn)擊安裝，如圖所示。2.2.2調(diào)試工具——Chrome開發(fā)者工具【知識(shí)解析】前端開發(fā)中，經(jīng)常需要調(diào)試代碼，所以各種調(diào)試工具及瀏覽器控制臺(tái)的使用會(huì)對(duì)開發(fā)起到很大的作用。下面對(duì)目前很受喜歡的Chrome開發(fā)者工具進(jìn)行介紹。Chrome開發(fā)者工具是一套內(nèi)嵌到Chrome瀏覽器的Web開發(fā)工具和調(diào)試工具，只要安裝了Chrome瀏覽器，就可以使用。在Chrome瀏覽器中，開發(fā)者工具的打開方式主要有以下幾種。p按F12鍵；pCtrl+Shift+I快捷鍵；p右擊頁面的任意位置，選擇快捷菜單的“檢查”命令。單擊Chrome瀏覽器右上角的自定義圖標(biāo)，展開菜單，選擇“更多工具”→“開發(fā)者工具”命令，如圖2-16所示。1.Element面板Elements面板即元素面板，使用該面板可以直接操作DOM元素和樣式、包括查看元素屬性或者修改元素屬性、修改樣式等，非常方便開發(fā)者調(diào)試HTML結(jié)構(gòu)和CSS樣式，頁面效果如圖所示。Elements面板在圖中，選擇Element面板，左側(cè)欄會(huì)顯示頁面的DOM結(jié)構(gòu)，右側(cè)欄顯示對(duì)應(yīng)的選中節(jié)點(diǎn)樣式以及標(biāo)準(zhǔn)盒模型，可以方便查看頁面任意內(nèi)容的寬、高等屬性。在Element面板中無論修改HTML結(jié)構(gòu)還是CSS代碼，修改以后的效果都會(huì)實(shí)時(shí)同步到頁面中。例如，修改當(dāng)前選中的<div>標(biāo)簽的width屬性為500px，頁面中的div寬度就會(huì)發(fā)生變化，同時(shí)右側(cè)欄中該元素的盒模型值也會(huì)更新。2.Console面板

Console面板即控制臺(tái)面板，使用該面板不僅可以輸出開發(fā)過程中的日志信息，而且可以直接編寫代碼，作為與JavaScript進(jìn)行交互的Shell命令行，頁面效果如圖所示。在Console面板可以直接定義函數(shù)并調(diào)用。另外，除了在Console面板中直接定義代碼，使用JavaScript中注入的Console對(duì)象中的常用方法，也可以快速顯示頁面中元素的信息。值得一提的是，在Console面板中編寫代碼時(shí)，按“Shift+Enter”組合鍵可以實(shí)現(xiàn)代碼的換行。3.Sources面板Sources面板即源代碼面板，如果在工作區(qū)打開本地文件，可以實(shí)時(shí)編輯代碼，并支持?jǐn)帱c(diǎn)調(diào)試，如圖所示。Sources面板在圖中，打開JavaScript文件，單擊代碼前面的編號(hào)就可以設(shè)置斷點(diǎn)進(jìn)行調(diào)試，例如單擊代碼序號(hào)137和141，設(shè)置的所有斷點(diǎn)都會(huì)顯示在右側(cè)的BreakPoints斷點(diǎn)區(qū)。然后重新刷新頁面，即可看到設(shè)置斷點(diǎn)的代碼運(yùn)行情況。4.Network面板Network面板即網(wǎng)絡(luò)面板，用于記錄頁面上網(wǎng)絡(luò)請(qǐng)求的詳情信息，根據(jù)它可進(jìn)行網(wǎng)絡(luò)性能優(yōu)化，如圖所示。在圖中，點(diǎn)亮左上角攝像機(jī)形狀的小圖標(biāo)，會(huì)打開擴(kuò)展的network面板，查看所有請(qǐng)求的運(yùn)行狀況，頁面效果如圖所示。導(dǎo)入項(xiàng)目站點(diǎn)031.導(dǎo)入項(xiàng)目

打開HBuilderX軟件，點(diǎn)擊【文件】在彈出的選項(xiàng)中點(diǎn)擊文件，在彈出的選項(xiàng)中選擇【導(dǎo)入】選項(xiàng)，選擇您要從哪里導(dǎo)入文件【SVN】或者【Git】或者【從本地目錄導(dǎo)入】，您更具您的實(shí)際情況選項(xiàng)。網(wǎng)頁設(shè)計(jì)開發(fā)環(huán)境042.4.1網(wǎng)頁開發(fā)工具1.VSCode

Microsoft在2015年4月30日Build開發(fā)者大會(huì)上正式宣布了VisualStudioCode項(xiàng)目：一個(gè)運(yùn)行于MacOSX、Windows和Linux之上的，針對(duì)于編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器。該編輯器也集成了所有一款現(xiàn)代編輯器所應(yīng)該具備的特性，包括語法高亮（syntaxhighlighting），可定制的熱鍵綁定（customizablekeyboardbindings），括號(hào)匹配（bracketmatching）以及代碼片段收集（snippets）。Somasegar也告訴筆者這款編輯器也擁有對(duì)Git的開箱即用的支持。VisualStudioCode提供了豐富的快捷鍵[3]。用戶可通過快捷鍵[Ctrl]+[K]+[S]（按住Ctrl鍵不放，再按字母K鍵和S鍵）調(diào)出快捷鍵面板，查看全部的快捷鍵定義。也可在面板中雙擊任一快捷鍵，為某項(xiàng)功能指定新的快捷鍵。一些預(yù)定義的常用快捷鍵包括：格式化文檔（整理當(dāng)前視圖中的全部代碼），[Shift]+[Alt]+[F]；格式化選定內(nèi)容（整理當(dāng)前視圖中被選定部分代碼），[Ctrl]+[K]+[F]；放大視圖，[Ctrl]+[Shift]+[=]；縮小視圖，[Ctrl]+[Shift]+[-]；打開新的外部終端（打開新的命令行提示符）：[Ctrl]+[Shift]+[C]。

2.SublimeTextSublimeText是一個(gè)文本編輯器（收費(fèi)軟件，可以無限期試用，但是會(huì)有激活提示彈窗），同時(shí)也是一個(gè)先進(jìn)的代碼編輯器。SublimeText是由程序員JonSkinner于2008年1月份所開發(fā)出來，它最初被設(shè)計(jì)為一個(gè)具有豐富擴(kuò)展功能的Vim。SublimeText具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。SublimeText的主要功能包括：拼寫檢查，書簽，完整的PythonAPI，Goto功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。SublimeText是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、MacOSX等操作系統(tǒng)。

SublimeText支持多種編程語言的語法高亮、擁有優(yōu)秀的代碼自動(dòng)完成功能，還擁有代碼片段（Snippet）的功能，可以將常用的代碼片段保存起來，在需要時(shí)隨時(shí)調(diào)用。支持VIM模式，可以使用Vim模式下的多數(shù)命令。支持宏，簡(jiǎn)單地說就是把操作錄制下來或者自己編寫命令，然后播放剛才錄制的操作或者命令。3.EditplusEditPlus是一款由韓國SangilKim（ES-Computing）出品的小巧但是功能強(qiáng)大的可處理文本、HTML和程序語言的Windows編輯器，你甚至可以通過設(shè)置用戶工具將其作為C,Java,Php等等語言的一個(gè)簡(jiǎn)單的IDE。EditPlus（文字編輯器）漢化版是一套功能強(qiáng)大，可取代記事本的文字編輯器，擁有無限制的撤消與重做、英文拼字檢查、自動(dòng)換行、列數(shù)標(biāo)記、搜尋取代、同時(shí)編輯多文件、全屏幕瀏覽功能。而它還有一個(gè)好用的功能，就是它有監(jiān)視剪貼板的功能，同步于剪貼板可自動(dòng)粘貼進(jìn)EditPlus的窗口中省去粘貼的步驟。另外它也是一個(gè)非常好用的HTML編輯器，它除了支持顏色標(biāo)記、HTML標(biāo)記，同時(shí)支持C、C++、Perl、Java，另外，它還內(nèi)建完整的HTML&CSS1指令功能，對(duì)于習(xí)慣用記事本編輯網(wǎng)頁的朋友，它可幫你節(jié)省一半以上的網(wǎng)頁制作時(shí)間，若你有安裝IE3.0以上版本，它還會(huì)結(jié)合IE瀏覽器于EditPlus窗口中，讓你可以直接預(yù)覽編輯好的網(wǎng)頁（若沒安裝IE，也可指定瀏覽器路徑）。因此，它是一個(gè)相當(dāng)棒又多用途多狀態(tài)的編輯軟件。4.Notepad++Notepad++是Windows操作系統(tǒng)下的一套文本編輯器(軟件版權(quán)許可證:GPL)，有完整的中文化接口及支持多國語言編寫的功能(UTF8技術(shù))。Notepad++功能比Windows中的Notepad(記事本)強(qiáng)大，除了可以用來制作一般的純文字說明文件，也十分適合編寫計(jì)算機(jī)程序代碼。Notepad++不僅有語法高亮度顯示，也有語法折疊功能，并且支持宏以及擴(kuò)充基本功能的外掛模組。5.DreamweaverCSDreamweaverCS這樣的集成開發(fā)軟件會(huì)提供很多快捷功能，如代碼提示、縮進(jìn)等在制作復(fù)雜頁面時(shí)，能夠提高編碼開發(fā)效率，效果比較明顯。在CSS和JavaScript代碼調(diào)試階段，可以使用瀏覽器幫助進(jìn)行跟蹤調(diào)試，更加直觀高效。2.4.2圖像圖形處理工具1.PhotoshopCS6AdobePhotoshop，簡(jiǎn)稱“PS”，是由AdobeSystems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。2.FireworksCS6由Macromedia（在2005年被Adobe收購）推出的一款網(wǎng)頁作圖軟件，軟件可以加速Web設(shè)計(jì)與開發(fā)，是一款創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性，

還提供了一個(gè)預(yù)先構(gòu)建資源的公用庫，

并可與

AdobePhotoshop、AdobeIllustrator、AdobeDreamweaver和

AdobeFlash軟件省時(shí)集成。

在Fireworks中將設(shè)計(jì)迅速轉(zhuǎn)變?yōu)槟Ｐ?，或利用來自Illustrator、Photoshop和Flash的其它資源。然后直接置入Dreamweaver中輕松地進(jìn)行開發(fā)與部署。

創(chuàng)建web網(wǎng)站05【案例引入】1.page1頁面效果分析觀察效果圖可以看出,page1頁面中既有文字又有圖片。文字由標(biāo)題和段落文本組成,并且水平線將標(biāo)題與段落隔開,它們的字體和字號(hào)不同。同時(shí),標(biāo)題居中對(duì)齊,段落文本中的某些文字加粗顯示，并在段落文本前都有一個(gè)標(biāo)記符號(hào)。所以,可以使用<h2>標(biāo)記設(shè)置標(biāo)題,<p>標(biāo)記設(shè)置段落，<strong>標(biāo)記加粗文本，<font>