模塊一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)目錄任務(wù)一任務(wù)二任務(wù)三

HBuilderX的安裝網(wǎng)站的建立網(wǎng)頁(yè)的基本知識(shí)1.1HBuilderX的新增功能1．全新的代碼編輯器2．開(kāi)發(fā)人員工作區(qū)3．CSS預(yù)處理器支持4．實(shí)時(shí)瀏覽器預(yù)覽5．HTML文檔中的快速CSS編輯任務(wù)1

HBuilderX的安裝1.1HBuilderX的新增功能6．無(wú)鼠標(biāo)操作7．用于重復(fù)任務(wù)的多個(gè)光標(biāo)8．新式UI（UserInterface，用戶界面）9．UI顏色主題任務(wù)1HBuilderX的安裝任務(wù)實(shí)現(xiàn)（1）進(jìn)入官網(wǎng)：https://dcloud.io/，單擊“HBuilderX極客開(kāi)發(fā)工具”圖標(biāo)，進(jìn)入下載界面。根據(jù)自己的計(jì)算機(jī)系統(tǒng)選擇合適的版本，單擊“Download”下載，如圖所示。（2）HBuilderX安裝好后，解壓安裝包，雙擊HBuilderX.exe文件，如圖所示。任務(wù)1HBuilderX的安裝任務(wù)實(shí)現(xiàn)（3）HBuilderX啟動(dòng)成功，如圖所示。任務(wù)1HBuilderX的安裝任務(wù)實(shí)現(xiàn)任務(wù)1HBuilderX的安裝（4）雙擊打開(kāi)HBuilderX.exe文件或者桌面上HBuilderX快捷方式，從菜單欄中選擇“文件”|“新建”|“項(xiàng)目”|選項(xiàng)，出現(xiàn)“新建項(xiàng)目”對(duì)話框，輸入項(xiàng)目名稱(chēng)chapter01，項(xiàng)目存放位置為“D:/Web前端源碼”，如圖所示。在“選擇模板”中選擇“基本HTML項(xiàng)目”，單擊“創(chuàng)建”按鈕。任務(wù)實(shí)現(xiàn)任務(wù)1HBuilderX的安裝（5）此時(shí)，在選擇的路徑中創(chuàng)建了一個(gè)項(xiàng)目名稱(chēng)命名的文件夾chapter01,并在該文件夾中自動(dòng)創(chuàng)建了css、img、js文件夾和index.html文件。這就建立了一個(gè)完整的靜態(tài)網(wǎng)站所必需的文件結(jié)構(gòu)。在HBuilderX左側(cè)的項(xiàng)目管理器中，單擊chapter01項(xiàng)目，可以看到該項(xiàng)目中的所有文件，如圖所示。css文件夾用于存放網(wǎng)站中的樣式文件；img文件夾用于存放網(wǎng)站中的圖片文件等；js文件夾用于存放網(wǎng)站中的腳本文件；index.html文件為網(wǎng)站的首頁(yè)文件。引入知識(shí)點(diǎn)任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)1.4IP地址、域名和URL任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)1．網(wǎng)頁(yè)網(wǎng)頁(yè)（WebPage）是一種網(wǎng)絡(luò)信息傳遞的載體，是構(gòu)成網(wǎng)站的基本元素，同時(shí)是承載各種網(wǎng)站應(yīng)用的平臺(tái)，可以簡(jiǎn)單地認(rèn)為：網(wǎng)站就是由網(wǎng)頁(yè)組成的。用戶需要通過(guò)瀏覽器來(lái)瀏覽網(wǎng)頁(yè)，從網(wǎng)頁(yè)中獲得相關(guān)信息。網(wǎng)頁(yè)本身就是一個(gè)文件，網(wǎng)頁(yè)中可以有文字、圖像、音頻及視頻等信息，它存放在世界某個(gè)角落的某臺(tái)計(jì)算機(jī)中，如果想訪問(wèn)或者瀏覽它，這臺(tái)計(jì)算機(jī)必須與互聯(lián)網(wǎng)相連。任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)2．網(wǎng)站網(wǎng)站（WebSite）由網(wǎng)頁(yè)組成，因此，網(wǎng)站就是一個(gè)存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它是由單個(gè)或者多個(gè)網(wǎng)頁(yè)組成的集合，如Google、新浪，以及一些政府機(jī)關(guān)、企事業(yè)單位和個(gè)人網(wǎng)站等。任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)3．首頁(yè)首頁(yè)（HomePage）是一個(gè)特殊的網(wǎng)頁(yè)，它作為一個(gè)單獨(dú)的網(wǎng)頁(yè)時(shí)，和一般網(wǎng)頁(yè)一樣，可以存放一些相關(guān)信息，同時(shí)，它也可以作為整個(gè)網(wǎng)站的起始點(diǎn)和匯總點(diǎn)。首頁(yè)和主頁(yè)的區(qū)別在于：在建立網(wǎng)站時(shí)，通常會(huì)將信息分類(lèi)并建立一個(gè)網(wǎng)頁(yè)，放置網(wǎng)站相關(guān)信息的目錄，也就是主頁(yè)。但是，不是所有的網(wǎng)站都會(huì)將主頁(yè)設(shè)置為首頁(yè)，一些網(wǎng)站還會(huì)將動(dòng)畫(huà)放在首頁(yè)上，并將主頁(yè)鏈接放在首頁(yè)上，用戶需要單擊鏈接進(jìn)而進(jìn)入主頁(yè)。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)1．靜態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)也稱(chēng)平面頁(yè)，其文件名通常以.htm、.html、.shtml、.xml（可擴(kuò)展標(biāo)記語(yǔ)言）等為后綴。用戶只能被動(dòng)地瀏覽網(wǎng)頁(yè)設(shè)計(jì)者提供的網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)內(nèi)容不會(huì)發(fā)生變化（除非網(wǎng)頁(yè)設(shè)計(jì)者修改了網(wǎng)頁(yè)的內(nèi)容）。靜態(tài)網(wǎng)頁(yè)不能實(shí)現(xiàn)和瀏覽網(wǎng)頁(yè)的用戶之間的交互，其信息流向是單向的。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)的特點(diǎn)如下：（1）靜態(tài)網(wǎng)頁(yè)的每個(gè)頁(yè)面都有一個(gè)固定的URL（UniformResourceLocator，統(tǒng)一資源定位符），且網(wǎng)頁(yè)的URL以.htm、.html、.shtml等常見(jiàn)的形式為后綴；（2）靜態(tài)網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問(wèn)，都是保存在網(wǎng)站服務(wù)器上的，也就是說(shuō)，靜態(tài)網(wǎng)頁(yè)是保存在服務(wù)器上的文件，每個(gè)靜態(tài)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件；（3）靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索；任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)（4）靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站維護(hù)方面比較麻煩，因此當(dāng)網(wǎng)站信息量很大時(shí)，完全依靠靜態(tài)網(wǎng)頁(yè)的網(wǎng)站制作方式比較困難；（5）靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有很大的限制；（6）靜態(tài)網(wǎng)頁(yè)頁(yè)面瀏覽速度很快，整個(gè)過(guò)程無(wú)須鏈接數(shù)據(jù)庫(kù)，開(kāi)啟頁(yè)面的速度快于動(dòng)態(tài)頁(yè)面；（7）靜態(tài)網(wǎng)頁(yè)減輕了服務(wù)器的負(fù)擔(dān)，工作量較少，降低了數(shù)據(jù)庫(kù)的成本。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)2．動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)，是指與靜態(tài)網(wǎng)頁(yè)相對(duì)應(yīng)的一種網(wǎng)頁(yè)編程技術(shù)。動(dòng)態(tài)網(wǎng)頁(yè)顯示的內(nèi)容是可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫(kù)操作的結(jié)果而發(fā)生改變的。從某種意義上來(lái)講，凡是結(jié)合了HTML以外的高級(jí)程序設(shè)計(jì)語(yǔ)言和數(shù)據(jù)庫(kù)技術(shù)進(jìn)行的網(wǎng)頁(yè)編程生成的網(wǎng)頁(yè)都是動(dòng)態(tài)網(wǎng)頁(yè)。動(dòng)態(tài)網(wǎng)頁(yè)能與后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行交互和數(shù)據(jù)傳遞，動(dòng)態(tài)網(wǎng)頁(yè)的URL的后綴不是.htm、.html、.shtml、.xml等靜態(tài)網(wǎng)頁(yè)的常見(jiàn)格式，而是.aspx、.asp、.jsp、.php、.perl、.cgi等形式。在動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)址中有一個(gè)標(biāo)志性的符號(hào)——“?”。動(dòng)態(tài)網(wǎng)頁(yè)一般由服務(wù)器端和客戶端實(shí)現(xiàn)交互。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)服務(wù)器端是一個(gè)在Web服務(wù)器上運(yùn)行的程序（服務(wù)器端腳本），用來(lái)改變不同網(wǎng)頁(yè)上的網(wǎng)頁(yè)內(nèi)容，或調(diào)節(jié)序列，或重新加載網(wǎng)頁(yè)。服務(wù)器端的響應(yīng)用來(lái)確定各種情況，例如，超文本標(biāo)記語(yǔ)言表單里面的數(shù)據(jù)，URL中的參數(shù)，所使用的瀏覽器類(lèi)型，數(shù)據(jù)庫(kù)、服務(wù)器的狀態(tài)等?？蛻舳司褪菫g覽器端，客戶端腳本完全在瀏覽器中運(yùn)行，并控制著用戶與瀏覽器之間的交互，同時(shí)，客戶端的源代碼一般都可以看到，其對(duì)最終訪問(wèn)用戶相對(duì)公開(kāi)。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)的特點(diǎn)如下：（1）動(dòng)態(tài)網(wǎng)頁(yè)一般以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大降低維護(hù)網(wǎng)站的工作量；（2）采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理等；（3）動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)，服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)；（4）動(dòng)態(tài)網(wǎng)頁(yè)中的“?”，在搜索引擎檢索時(shí)存在一定問(wèn)題。搜索引擎一般不可能從一個(gè)網(wǎng)站的數(shù)據(jù)庫(kù)中訪問(wèn)全部網(wǎng)頁(yè)，出于技術(shù)方面的考慮，搜索時(shí)其不會(huì)抓取網(wǎng)址中“?”后面的內(nèi)容，因此采用動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)站在進(jìn)行搜索引擎推廣時(shí)，需要進(jìn)行一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。任務(wù)2網(wǎng)站的建立1.4IP地址、域名和URL1．IP地址每個(gè)連接到互聯(lián)網(wǎng)上的主機(jī)都會(huì)被分配一個(gè)IP地址，IP地址是用來(lái)唯一標(biāo)識(shí)互聯(lián)網(wǎng)上計(jì)算機(jī)的邏輯地址，機(jī)器之間的訪問(wèn)就是通過(guò)IP地址來(lái)進(jìn)行的。目前IPv4版本的IP地址采用32位二進(jìn)制數(shù)的形式表示。為了便于使用，IP地址經(jīng)常被寫(xiě)成十進(jìn)制數(shù)的形式，每8位二進(jìn)制數(shù)用“.”分開(kāi)，稱(chēng)為“點(diǎn)分十進(jìn)制表示法”，如。任務(wù)2網(wǎng)站的建立1.4IP地址、域名和URL2．域名IP地址畢竟是數(shù)字標(biāo)識(shí)，使用時(shí)不好記憶和書(shū)寫(xiě)，因此在IP地址的基礎(chǔ)上又發(fā)展出一種符號(hào)化的地址方案，來(lái)代替數(shù)字型的IP地址。域名是由一串用點(diǎn)分隔的名字組成的互聯(lián)網(wǎng)上某一臺(tái)計(jì)算機(jī)或計(jì)算機(jī)組的名稱(chēng)，用于在數(shù)據(jù)傳輸時(shí)標(biāo)識(shí)計(jì)算機(jī)的電子方位（有時(shí)也指地理位置）。網(wǎng)域名稱(chēng)系統(tǒng)（DomainNameSystem，DNS）簡(jiǎn)稱(chēng)域名系統(tǒng)，是互聯(lián)網(wǎng)中的一項(xiàng)核心服務(wù)，它作為可以將域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)，能夠使用戶更方便地訪問(wèn)互聯(lián)網(wǎng)，而不用去記住能夠被機(jī)器直接讀取的IP地址數(shù)串，如。任務(wù)2網(wǎng)站的建立1.4IP地址、域名和URL3．URL統(tǒng)一資源定位符（URL），俗稱(chēng)網(wǎng)址。網(wǎng)址格式為：<協(xié)議>://<域名或IP>:<端口>/<路徑>。其中，<協(xié)議>://<域名或IP>是必需的，<端口>/<路徑>有時(shí)可省略。如/。任務(wù)2網(wǎng)站的建立1.5HTTP和FTP1．HTTPHTTP（HyperTextTransferProtocol）即超文本傳輸協(xié)議，它是Web的核心。HTTP是一種為了將位于全球各個(gè)地方的Web服務(wù)器中的內(nèi)容發(fā)送給不特定的多數(shù)用戶而制定的協(xié)議。HTTP用于從服務(wù)器端讀取Web頁(yè)面內(nèi)容，從Web瀏覽器下載Web服務(wù)器中的HTML文檔及圖像文件等，并臨時(shí)保存在個(gè)人計(jì)算機(jī)硬盤(pán)及內(nèi)存中以供顯示。2．FTPFTP（FileTransferProtocol）即文件傳輸協(xié)議，它是互聯(lián)網(wǎng)上使用非常廣泛的一種通信協(xié)議，是為了互聯(lián)網(wǎng)上的用戶進(jìn)行文件傳輸（包括文件的上傳和下載）而制定的。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（1）打開(kāi)HBuilderX，執(zhí)行“文件”>“新建”>“項(xiàng)目”命令，如圖所示。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（2）在彈出的“新建項(xiàng)目”對(duì)話框中，根據(jù)個(gè)人喜好設(shè)置項(xiàng)目名稱(chēng)和本項(xiàng)目的路徑，然后單擊“新建”按鈕，新建項(xiàng)目文件夾，如圖所示。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（3）新建站點(diǎn)后，若沒(méi)有顯示項(xiàng)目，可以執(zhí)行“視圖”→“顯示項(xiàng)目管理器等左側(cè)視圖”命令，如圖所示。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（4）成功創(chuàng)建一個(gè)站點(diǎn)，效果如圖所示。1.6網(wǎng)頁(yè)的基本結(jié)構(gòu)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)1．導(dǎo)航欄導(dǎo)航欄是構(gòu)成網(wǎng)頁(yè)的重要元素之一，是網(wǎng)站頻道入口的集合區(qū)域，相當(dāng)于網(wǎng)站的菜單。導(dǎo)航欄設(shè)計(jì)的目的是將站點(diǎn)內(nèi)的信息分類(lèi)處理，然后放在網(wǎng)頁(yè)中以幫助用戶快速查找站內(nèi)信息。同時(shí)，導(dǎo)航欄的形式多種多樣，包括文本導(dǎo)航欄、圖像導(dǎo)航欄及動(dòng)畫(huà)導(dǎo)航欄等。2．欄目欄目是指網(wǎng)頁(yè)中存放相同性質(zhì)內(nèi)容的區(qū)域。在對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行布局時(shí)，把性質(zhì)相同的內(nèi)容安排在網(wǎng)頁(yè)的相同區(qū)域，可以幫助用戶快速獲取所需信息，對(duì)網(wǎng)站內(nèi)容起到非常好的導(dǎo)航作用。3．正文內(nèi)容正文內(nèi)容是指網(wǎng)頁(yè)中的主體內(nèi)容。例如，對(duì)于文章類(lèi)的網(wǎng)頁(yè)，正文內(nèi)容就是文章本身；而對(duì)于展示產(chǎn)品的網(wǎng)頁(yè)，正文內(nèi)容就是產(chǎn)品信息。1.7網(wǎng)頁(yè)的基本內(nèi)容任務(wù)3網(wǎng)頁(yè)的基本知識(shí)1．網(wǎng)站logo2．Banner3．內(nèi)容模塊4．版尾或版權(quán)模塊5．文本6．圖片7．超鏈接8．動(dòng)畫(huà)9．聲音10．表格11．表單1.8網(wǎng)頁(yè)的表現(xiàn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)網(wǎng)頁(yè)的表現(xiàn)是指網(wǎng)頁(yè)對(duì)信息在顯示上的控制，如版式、顏色、大小等樣式上的控制。好的表現(xiàn)會(huì)使用戶在瀏覽頁(yè)面時(shí)更加舒適。1.9網(wǎng)頁(yè)的行為任務(wù)3網(wǎng)頁(yè)的基本知識(shí)網(wǎng)頁(yè)的行為也就是網(wǎng)頁(yè)的交互操作，既可以從網(wǎng)頁(yè)上獲得所需的信息，也可以把自己的一些觀念信息、見(jiàn)解和意見(jiàn)傳遞出去與其他人交流。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。Web標(biāo)準(zhǔn)由萬(wàn)維網(wǎng)聯(lián)盟（W3C）制定，分為結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)、行為標(biāo)準(zhǔn)和代碼標(biāo)準(zhǔn)。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)1．結(jié)構(gòu)標(biāo)準(zhǔn)（1）可擴(kuò)展標(biāo)記語(yǔ)言（ExtensibleMarkupLanguage，XML）和HTML一樣，XML同樣來(lái)源于標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，可擴(kuò)展標(biāo)記語(yǔ)言和標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言都是能定義其他語(yǔ)言的語(yǔ)言。XML設(shè)計(jì)的最初目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。（2）可擴(kuò)展超文本標(biāo)記語(yǔ)言（ExtensibleHyperTextMarkupLanguage，XHTML）雖然XML的數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，大多數(shù)情況下完全可以替代HTML，但面對(duì)成千上萬(wàn)已有的站點(diǎn)，直接采用XML還為時(shí)過(guò)早。因此，在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。簡(jiǎn)單地說(shuō)，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過(guò)渡。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)2．表現(xiàn)標(biāo)準(zhǔn)層疊樣式表（CSS）：W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)語(yǔ)言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助網(wǎng)頁(yè)設(shè)計(jì)者分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問(wèn)及維護(hù)更加容易。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)