1、網(wǎng)頁制作案例教程第7章 模板和站點(diǎn)發(fā)布了解庫和模板的概念。掌握創(chuàng)建和應(yīng)用庫的方法。掌握創(chuàng)建和應(yīng)用模板的方法。掌握設(shè)置測試服務(wù)器的方法。掌握連接遠(yuǎn)程服務(wù)器的方法。掌握發(fā)布站點(diǎn)的方法。學(xué)習(xí)目標(biāo)7.1.1 認(rèn)識庫7.1 使用庫 庫是一種特殊類型的文檔，其中包含可放置到網(wǎng)頁中的一組單個資源或資源副本。庫中的這些資源稱為庫項(xiàng)目，也就是要在整個網(wǎng)站范圍內(nèi)反復(fù)使用或經(jīng)常更新的元素。在網(wǎng)頁制作實(shí)踐中，經(jīng)常遇到要將一些網(wǎng)頁元素在多個頁面內(nèi)應(yīng)用的情形。當(dāng)修改這些重復(fù)使用的頁面元素時如果逐頁修改會相當(dāng)費(fèi)時，這時便可以使用庫項(xiàng)目來解決這個問題。當(dāng)編輯某個庫項(xiàng)目時，可以自動更新所有使用該項(xiàng)目的頁面。使用庫項(xiàng)目時，Dre

2、amweaver將向文檔中插入該項(xiàng)目的HTML源代碼副本，并添加一個包含對原始外部項(xiàng)目引用的HTML注釋。自動更新過程就是通過這個外部引用來實(shí)現(xiàn)的。在Dreamweaver中，創(chuàng)建的庫項(xiàng)目保存在站點(diǎn)的“Library”文件夾內(nèi)，“Library”文件夾是自動生成的，不能對其名稱進(jìn)行修改。7.1.2 創(chuàng)建庫項(xiàng)目7.1 使用庫 (1)選擇菜單命令【窗口】/【資源】，打開【資源】面板，單擊 （庫）按鈕切換至【庫】分類。 (2)單擊【資源】面板右下角的 （新建庫項(xiàng)目）按鈕，新建一個庫項(xiàng)目，然后在列表框中“Untitled”處輸入庫項(xiàng)目的新名稱并按Enter鍵確認(rèn)。7.1.2 創(chuàng)建庫項(xiàng)目7.1 使用庫

3、(3)在選中庫項(xiàng)目的前提下，單擊面板底部的 （編輯）按鈕或在鼠標(biāo)右鍵快捷菜單中選擇【編輯】命令打開庫項(xiàng)目。 (4)在文檔窗口中插入一幅圖像并保存文檔。7.1.2 創(chuàng)建庫項(xiàng)目7.1 使用庫 用戶也可以將網(wǎng)頁文檔中現(xiàn)有的對象元素轉(zhuǎn)換為庫項(xiàng)目。方法是：在頁面中選擇要轉(zhuǎn)換的內(nèi)容，然后選擇菜單命令【工具】/【庫】/【增加對象到庫】，即可將選中的內(nèi)容轉(zhuǎn)換為庫項(xiàng)目，并顯示在【庫】列表中，最后輸入庫名稱并確認(rèn)即可。7.1.3 應(yīng)用庫項(xiàng)目7.1 使用庫 庫項(xiàng)目是可以在多個頁面中重復(fù)使用的頁面元素。在【資源】面板中選中庫項(xiàng)目，單擊底部的【插入】按鈕（或者在鼠標(biāo)右鍵快捷菜單中選擇【插入】命令），將庫項(xiàng)目插入到網(wǎng)頁文

4、檔中。在插入庫項(xiàng)目時，Dreamweaver不是向文檔中直接插入庫項(xiàng)目，而是插入一個庫項(xiàng)目鏈接，【屬性】面板中的“Src /Library/head.lbi”可以清楚地說明這一點(diǎn)。7.1.4 維護(hù)庫項(xiàng)目7.1 使用庫 (1)編輯庫項(xiàng)目。在引用庫項(xiàng)目的當(dāng)前網(wǎng)頁中，選擇庫項(xiàng)目后，在【屬性】面板中單擊 （打開）按鈕，可打開庫項(xiàng)目的源文件進(jìn)行編輯，這等同于單擊【資源】面板【庫】類別底部的 （編輯）按鈕或在鼠標(biāo)右鍵快捷菜單中選擇【編輯】命令打開庫項(xiàng)目。 (2)重命名庫項(xiàng)目。在【資源】面板的【庫】類別中，當(dāng)庫項(xiàng)目數(shù)量超過一個時，需要先選中要重命名的庫項(xiàng)目，然后再單擊庫項(xiàng)目的名稱或在鼠標(biāo)右鍵快捷菜單中選擇【

5、重命名】命令，使庫項(xiàng)目名稱處于編輯狀態(tài)，接著輸入一個新名稱并按Enter鍵使更改生效。此時，需要在彈出的【更新文件】對話框中選擇是否更新使用該項(xiàng)目的文檔。7.1.4 維護(hù)庫項(xiàng)目7.1 使用庫 (3)更新庫項(xiàng)目。在庫項(xiàng)目被修改保存后，引用該庫項(xiàng)目的網(wǎng)頁文檔會進(jìn)行自動更新。如果沒有進(jìn)行自動更新，可以選擇菜單命令【工具】/【庫】/【更新當(dāng)前頁】，對應(yīng)用庫項(xiàng)目的當(dāng)前文檔進(jìn)行更新。也可選擇菜單命令【工具】/【庫】/【更新頁面】，打開【更新頁面】對話框更新相關(guān)頁面。如果在【更新頁面】對話框的【查看】下拉列表中選擇【整個站點(diǎn)】選項(xiàng)，然后從其右側(cè)的下拉列表中選擇站點(diǎn)的名稱，將會使用當(dāng)前庫項(xiàng)目更新所選站點(diǎn)中的所

6、有頁面，如圖7-6所示。如果選擇【文件使用】選項(xiàng)，然后從其右側(cè)的下拉列表中選擇庫項(xiàng)目名稱，將會更新當(dāng)前站點(diǎn)中所有應(yīng)用了該庫項(xiàng)目的文檔，如圖7-7所示。7.1.4 維護(hù)庫項(xiàng)目7.1 使用庫 (4)分離庫項(xiàng)目。一旦在網(wǎng)頁文檔中應(yīng)用了庫項(xiàng)目，如果希望其成為網(wǎng)頁文檔的一部分，這就需要將庫項(xiàng)目從源文件中分離出來。方法是：在當(dāng)前網(wǎng)頁中選中庫項(xiàng)目，然后在【屬性】面板中單擊（從源文件中分離）按鈕，在彈出的信息提示框中單擊（分離）按鈕，將庫項(xiàng)目的內(nèi)容與庫文件分離，如圖7-8所示。分離后，就可以對這部分內(nèi)容進(jìn)行編輯了，因?yàn)樗呀?jīng)是網(wǎng)頁的一部分，與庫項(xiàng)目再沒有聯(lián)系。7.1.4 維護(hù)庫項(xiàng)目7.1 使用庫 (5)刪除庫

7、項(xiàng)目。打開【資源】面板并切換至【庫】分類，在庫項(xiàng)目列表中選中要刪除的庫項(xiàng)目，單擊【資源】面板右下角的（刪除）按鈕或直接在鍵盤上按Delete鍵即可。一旦刪除了一個庫項(xiàng)目，將無法進(jìn)行恢復(fù)，因此應(yīng)特別小心。7.2.1 認(rèn)識模板7.2 使用模板 模板是一種特殊類型的文檔，用于設(shè)計(jì)固定的并可重復(fù)使用的頁面布局結(jié)構(gòu)。基于模板創(chuàng)建的網(wǎng)頁文檔會繼承模板的布局結(jié)構(gòu)，在批量制作具有相同版式和風(fēng)格的網(wǎng)頁時使用模板是一個不錯的選擇，而且模板變化時可以同時更新基于該模板創(chuàng)建的網(wǎng)頁文檔，從而提高站點(diǎn)管理和維護(hù)的效率。在設(shè)計(jì)模板時，設(shè)計(jì)者需要在模板中插入模板對象，從而指定在基于模板創(chuàng)建的網(wǎng)頁文檔中哪些區(qū)域是可以編輯的。在

8、Dreamweaver CC 2017中，常用的模板對象有可編輯區(qū)域、重復(fù)區(qū)域、重復(fù)表格等。可編輯區(qū)域是指可以進(jìn)行添加、修改和刪除網(wǎng)頁元素等操作的區(qū)域。重復(fù)區(qū)域是指可以復(fù)制任意次數(shù)的指定區(qū)域。重復(fù)區(qū)域不是可編輯區(qū)域，若要使重復(fù)區(qū)域中的內(nèi)容可編輯，必須在重復(fù)區(qū)域內(nèi)插入可編輯區(qū)域或重復(fù)表格。重復(fù)表格是指包含重復(fù)行的表格格式的可編輯區(qū)域，用戶可以定義表格的屬性并設(shè)置哪些單元格可編輯。重復(fù)表格可以被包含在重復(fù)區(qū)域內(nèi)，但不能被包含在可編輯區(qū)域內(nèi)。 模板操作必須在Dreamweaver站點(diǎn)中進(jìn)行，如果沒有站點(diǎn)，在保存模板時系統(tǒng)會提示創(chuàng)建Dreamweaver站點(diǎn)。在Dreamweaver中，創(chuàng)建的模板文件

9、保存在站點(diǎn)的“Templates”文件夾內(nèi)，“Templates”文件夾是自動生成的，不能對其名稱進(jìn)行修改。7.2.2 創(chuàng)建模板7.2 使用模板 (1)選擇菜單命令【窗口】/【資源】，打開【資源】面板，單擊（模板）按鈕，切換至【模板】分類。 (2)單擊【資源】面板右下角的（添加）按鈕，創(chuàng)建一個模板文件，然后在列表框中“Untitled”處輸入模板的新名稱并按Enter鍵確認(rèn)，如圖7-9所示。7.2.2 創(chuàng)建模板7.2 使用模板 (3)在選中模板的前提下，單擊面板底部的 （編輯）按鈕或在鼠標(biāo)右鍵快捷菜單中選擇【編輯】命令打開模板文檔。 (4)選擇菜單命令【插入】/【Table】插入一個4行1列的

10、表格，表格寬度為“800像素”，對齊方式為“居中對齊”，邊框粗細(xì)、間距和填充均為“0”，如圖7-10所示。7.2.2 創(chuàng)建模板7.2 使用模板 (5)將鼠標(biāo)光標(biāo)置于表格第1行單元格內(nèi)，然后選擇菜單命令【插入】/【模板】/【可編輯區(qū)域】，打開【新建可編輯區(qū)域】對話框，在【名稱】文本框中輸入可編輯區(qū)域名稱，單擊（確定）按鈕插入可編輯區(qū)域，如圖7-11所示。7.2.2 創(chuàng)建模板7.2 使用模板 (6)可編輯區(qū)域左上角顯示可編輯區(qū)域的名稱，單擊模板對象的名稱將其選中，在【屬性】面板的【名稱】文本框中可以修改模板對象名稱，如圖7-12所示。7.2.2 創(chuàng)建模板7.2 使用模板 (7)將鼠標(biāo)光標(biāo)置于表格第

11、2行單元格內(nèi)，選擇菜單命令【插入】/【模板】/【重復(fù)區(qū)域】，打開【新建重復(fù)區(qū)域】對話框，在【名稱】文本框中輸入重復(fù)區(qū)域名稱并單擊（確定）按鈕插入重復(fù)區(qū)域，如圖7-13所示。7.2.2 創(chuàng)建模板7.2 使用模板 (8)將文本“內(nèi)容1”刪除，然后插入一個2行1列的表格，表格寬度為“100%”，邊框粗細(xì)、間距均為“0”，填充為“5”，然后依次在兩個單元格中分別插入可編輯區(qū)域，名稱分別為“標(biāo)題”和“具體內(nèi)容”，如圖7-14所示。7.2.2 創(chuàng)建模板7.2 使用模板 (9)將鼠標(biāo)光標(biāo)置于倒數(shù)第2行單元格內(nèi)，然后選擇菜單命令【插入】/【模板】/【重復(fù)表格】，打開【插入重復(fù)表格】對話框，進(jìn)行參數(shù)設(shè)置后單擊（

12、確定）按鈕插入重復(fù)表格，如圖7-15所示。7.2.2 創(chuàng)建模板7.2 使用模板 (10)將所插入重復(fù)表格的第1行所有單元格的寬度均設(shè)置為“25%”，將第1行和第2行所有單元格的對齊方式均設(shè)置為“居中對齊”。 (11)將最外層表格最后一行的單元格對齊方式設(shè)置為“居中對齊”，然后在其中插入一個可編輯區(qū)域，如圖7-16所示。7.2.2 創(chuàng)建模板7.2 使用模板 除了通過【資源】面板來創(chuàng)建模板文件，也可以選擇菜單命令【文件】/【新建】，打開【新建文檔】對話框，在【新建文檔】類別中選擇【HTML模板】，單擊（創(chuàng)建）按鈕來創(chuàng)建空白模板文檔，如圖7-17所示，然后根據(jù)實(shí)際需要設(shè)計(jì)頁面并添加模板對象。7.2.

13、2 創(chuàng)建模板7.2 使用模板 也可以將現(xiàn)有網(wǎng)頁保存為模板。首先打開一個網(wǎng)頁文檔，刪除其中不需要的內(nèi)容，保留頁面布局結(jié)構(gòu)，然后根據(jù)需要添加模板對象，最后選擇菜單命令【文件】/【另存為模板】，打開【另存模板】對話框，設(shè)置好保存的位置和名稱，然后保存即可，如圖7-18所示。7.2.2 創(chuàng)建模板7.2 使用模板 創(chuàng)建模板的目的在于通過模板批量生成網(wǎng)頁。在Dreamweaver CC 2017中，應(yīng)用模板的方法是： (1)選擇菜單命令【文件】/【新建】，打開【新建文檔】對話框。 (2)選擇【網(wǎng)站模板】選項(xiàng)，在【站點(diǎn)】列表框中選擇相應(yīng)的站點(diǎn)，在模板列表框中選擇需要的模板，并勾選【當(dāng)模板改變時更新頁面】復(fù)選

14、框，如圖7-19所示。 7.2.2 創(chuàng)建模板7.2 使用模板 (3)單擊（創(chuàng)建）按鈕創(chuàng)建基于模板的網(wǎng)頁文檔，如圖7-20所示。 7.2.2 創(chuàng)建模板7.2 使用模板 (4)“頁眉”和“頁腳”兩處是可編輯區(qū)域，可以根據(jù)需要直接添加內(nèi)容。 (5)在“重復(fù)：內(nèi)容1”中的“標(biāo)題”和“具體內(nèi)容”中可以輸入相應(yīng)的標(biāo)題和內(nèi)容，如果還有更多類似的內(nèi)容，可以單擊+按鈕添加重復(fù)區(qū)域，按照同樣的方法可以在“重復(fù)：內(nèi)容2”中添加相應(yīng)的內(nèi)容并根據(jù)需要添加重復(fù)區(qū)域，如圖7-21所示。 7.2.2 創(chuàng)建模板7.2 使用模板 (6)根據(jù)實(shí)際可以設(shè)置文本格式，最后保存網(wǎng)頁文檔。 另外，也可以將現(xiàn)有頁面應(yīng)用模板。方法是，首先打開

15、要應(yīng)用模板的網(wǎng)頁文檔，然后選擇菜單命令【工具】/【模板】/【應(yīng)用模板到頁】，或在【資源】面板的模板列表框中選中要應(yīng)用的模板，再單擊面板底部的（應(yīng)用）按鈕即可應(yīng)用模板。如果已打開的文檔是一個空白文檔，文檔將直接應(yīng)用模板；如果打開的文檔是一個有內(nèi)容的文檔，這時通常會打開一個【不一致的區(qū)域名稱】對話框，該對話框會提示用戶將文檔中的已有內(nèi)容移到模板的相應(yīng)區(qū)域。 7.2.4 維護(hù)模板7.2 使用模板 (1)打開附加模板。在一個網(wǎng)站中，如果模板很多，使用模板的網(wǎng)頁也很多，該如何快速地打開當(dāng)前網(wǎng)頁文檔所使用的模板呢？首先打開使用模板的網(wǎng)頁文檔，然后選擇菜單命令【工具】/【模板】/【打開附加模板離】，這樣就可

16、快速打開模板了。 (2)重命名模板。在【資源】面板的【模板】類別中，當(dāng)模板數(shù)量超過一個時，需要先選中要重命名的模板，然后再單擊模板的名稱或在鼠標(biāo)右鍵快捷菜單中選擇【重命名】命令，使模板名稱處于編輯狀態(tài)，接著輸入一個新名稱并按Enter鍵使更改生效。 (3)刪除模板。在【資源】面板的【模板】類別中選擇要刪除的模板，單擊面板底部的 按鈕或按Delete鍵，然后確認(rèn)要刪除該模板。刪除模板后，該模板文件將被從站點(diǎn)中刪除。基于已刪除模板的文檔不會與此模板分離，它們?nèi)员Ａ粼撃０逦募诒粍h除前所具有的結(jié)構(gòu)和可編輯區(qū)域。可以將這樣的文檔轉(zhuǎn)換為沒有可編輯區(qū)域或鎖定區(qū)域的網(wǎng)頁文檔。 7.2.4 維護(hù)模板7.2 使

17、用模板 (4)更新應(yīng)用了模板的文檔。 7.2.4 維護(hù)模板7.2 使用模板 (5)將網(wǎng)頁從模板中分離。打開想要分離的基于模板的文檔，然后選擇菜單命令【工具】/【模板】/【從模板中分離】。網(wǎng)頁文檔脫離模板后，模板中的內(nèi)容將自動變成網(wǎng)頁中的內(nèi)容，網(wǎng)頁與模板不再有關(guān)聯(lián)，用戶可以在文檔中的任意區(qū)域進(jìn)行編輯。 7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 1.在Windows 7中打開【控制面板】，在【查看方式】中選擇【小圖標(biāo)】選項(xiàng)，如圖7-23所示。 7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 2.單擊【管理工具】選項(xiàng)，進(jìn)入【管理工具】窗口，如圖7-24所示。 7.3.1 應(yīng)

18、用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 3.雙擊【Internet信息服務(wù)（IIS）管理器】選項(xiàng)，打開【Internet信息服務(wù)（IIS）管理器】窗口，并在左側(cè)列表中展開網(wǎng)站的相關(guān)選項(xiàng)，如圖7-25所示。 7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 4.保證Web服務(wù)器已經(jīng)啟動，如果沒有啟動，選擇【Default Web Site】選項(xiàng)，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【管理網(wǎng)站】/【啟動】命令啟動Web服務(wù)器，如圖7-26所示。 7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 5.選擇【Default Web Site】選項(xiàng)，然后在右側(cè)列表中單擊【操作】中

19、的【基本設(shè)置】選項(xiàng)，打開【編輯網(wǎng)站】對話框修改【物理路徑】選項(xiàng)為本地網(wǎng)站的實(shí)際保存位置即可，如圖7-27所示。 7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 6.單擊（確定）按鈕關(guān)閉對話框，雙擊【默認(rèn)文檔】選項(xiàng)打開如圖7-28所示窗口。7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 7.在右側(cè)列表中單擊【添加】，打開【添加默認(rèn)文檔】對話框，根據(jù)需要添加默認(rèn)文檔名稱（如果已存在不需要再添加），如圖7-29所示。 7.3.1 應(yīng)用實(shí)例配置本地Web服務(wù)器7.3 發(fā)布站點(diǎn) 8.單擊（確定）按鈕添加默認(rèn)文檔。這樣Windows 7中Web服務(wù)器的基本設(shè)置就完成了，可以運(yùn)行HTML

20、網(wǎng)頁了。 9.如果要運(yùn)行ASP網(wǎng)頁，還需要雙擊【ASP】選項(xiàng)，將【啟用父路徑】的值設(shè)置為“True”，如圖7-30所示。 7.3.2 應(yīng)用實(shí)例設(shè)置測試服務(wù)器7.3 發(fā)布站點(diǎn) 1.在菜單欄中選擇【站點(diǎn)】/【管理站點(diǎn)】命令打開【管理站點(diǎn)】對話框，選中相應(yīng)站點(diǎn)（也可新建），然后單擊（編輯）按鈕打開站點(diǎn)設(shè)置窗口，如圖7-31所示。 7.3.2 應(yīng)用實(shí)例設(shè)置測試服務(wù)器7.3 發(fā)布站點(diǎn) 2.在左側(cè)列表中選擇【服務(wù)器】類別，如圖7-32所示。【服務(wù)器】類別允許用戶指定遠(yuǎn)程服務(wù)器和測試服務(wù)器，單擊+按鈕將添加一個新服務(wù)器，單擊-按鈕將刪除選中的服務(wù)器，單擊（編輯）按鈕將編輯選中的服務(wù)器，單擊（復(fù)制）按鈕將編輯選中的服務(wù)器。 7.3.2 應(yīng)用實(shí)例設(shè)置測試服務(wù)器7.3 發(fā)布站點(diǎn) 3.單擊+按鈕添加一個本地測試服務(wù)器，在【基本】選項(xiàng)卡的【服務(wù)器名稱】文本框中設(shè)置新服務(wù)器的名稱，在【連接方法】下拉列表框中選擇與服務(wù)器的連接方法，在【W(wǎng)eb URL】文本框中設(shè)置Web URL，要求與Web服務(wù)器中的設(shè)置一樣，如圖7-33所示。 7.3.2 應(yīng)用實(shí)例設(shè)置測試服務(wù)器7.3 發(fā)布站點(diǎn) 4.切換到【高級】選項(xiàng)卡，設(shè)置測試服務(wù)器要用于Web應(yīng)用程序的服務(wù)器模型，如圖7-34所示。 7.3.2 應(yīng)用實(shí)例設(shè)置測試服務(wù)器7.3 發(fā)布站點(diǎn) 5.單擊（保存）按鈕關(guān)閉選項(xiàng)卡，然后在【服務(wù)器】類別中