網(wǎng)頁(yè)制作項(xiàng)目11

項(xiàng)目11使用模板和庫(kù)制作網(wǎng)頁(yè)項(xiàng)目描述

知識(shí)儲(chǔ)備

實(shí)踐向?qū)?/p>

能力拓展

退出項(xiàng)目小結(jié)

項(xiàng)目描述在Dreamweaver中可以利用模板和庫(kù)創(chuàng)建出具有統(tǒng)一風(fēng)格的網(wǎng)頁(yè)，在開(kāi)發(fā)網(wǎng)站時(shí)不但可以提高開(kāi)發(fā)效率，而且方便網(wǎng)站的后續(xù)維護(hù)。本項(xiàng)目運(yùn)用所學(xué)知識(shí)創(chuàng)建企業(yè)模板，效果如圖11-1所示，利用模板創(chuàng)建公司簡(jiǎn)介網(wǎng)頁(yè)，效果如圖11-2所示。項(xiàng)目描述圖11-1創(chuàng)建企業(yè)網(wǎng)頁(yè)模板項(xiàng)目描述圖11-2利用模板創(chuàng)建公司簡(jiǎn)介網(wǎng)頁(yè)

返回11.2知識(shí)儲(chǔ)備11.2.1模板和庫(kù)概述11.2.2建立網(wǎng)頁(yè)模板11.2.3庫(kù)11.2知識(shí)儲(chǔ)備

DreamweaverCS5中的資源除了包括圖像、影片、顏色、腳本和鏈接之外，還有兩種比較特殊的類型，即模板和庫(kù)。模板是一種特殊類型的文檔，文件擴(kuò)展名為“.dwt”，可用于設(shè)計(jì)固定的頁(yè)面布局，用戶可基于該模板創(chuàng)建文檔，創(chuàng)建的文檔會(huì)自動(dòng)繼承模板的頁(yè)面布局。庫(kù)是一種特殊的Dreamweaver文件，其后綴名為“.lbi”。11.2知識(shí)儲(chǔ)備模板和庫(kù)的區(qū)別是：模板可以用來(lái)制作整體網(wǎng)頁(yè)的重復(fù)部分，而庫(kù)是面向網(wǎng)頁(yè)局部重復(fù)部分。模板主要用于保持頁(yè)面統(tǒng)一，而庫(kù)文件更主要的是為了滿足經(jīng)常修改的需要，庫(kù)項(xiàng)目比模板更加靈活，庫(kù)項(xiàng)目只是頁(yè)面中的一小部分，可以放置在頁(yè)面的任何位置。11.2知識(shí)儲(chǔ)備11.2.2建立網(wǎng)頁(yè)模板

1.模板區(qū)域的類型模板區(qū)域共有四種類型：（1）可編輯區(qū)域。（2）重復(fù)區(qū)域。（3）可選區(qū)域。

（4）可編輯標(biāo)簽屬性。11.2知識(shí)儲(chǔ)備2.創(chuàng)建模板模板的制作與普通網(wǎng)頁(yè)的制作相同，是用來(lái)制作網(wǎng)頁(yè)的公共部分。設(shè)計(jì)者可以根據(jù)需要，直接創(chuàng)建空白的模板，也可以將已有文檔轉(zhuǎn)換為模板。要使模板生效，其中至少還要?jiǎng)?chuàng)建一個(gè)可編輯區(qū)域，否則基于該模板的頁(yè)面是不可編輯的。為了便于管理，最好將創(chuàng)建的模板存放在站點(diǎn)根目錄下的“Templates”文件夾中，使用文件擴(kuò)展名為“.dwt”。若該文件夾不存在，則當(dāng)存儲(chǔ)一個(gè)新模板時(shí)，DreamweaverCS5會(huì)自動(dòng)生成此文件夾。11.2知識(shí)儲(chǔ)備創(chuàng)建模板有以下三種方法：（1）通過(guò)“資源”面板，創(chuàng)建空模板在“資源”面板中單擊左側(cè)“模板”按鈕，進(jìn)入“模板”子面板，如圖11-3所示。然后單擊下方的“新建模板”按鈕，創(chuàng)建空模板。此時(shí)新的模板添加“模板”子面板的列表中，為該模板輸入名稱，如圖11-4所示。圖11-3資源面板

圖11-4新建空模板

11.2知識(shí)儲(chǔ)備（2）通過(guò)“插入”面板，創(chuàng)建模板在打開(kāi)的文檔窗口中，單擊“插入”面板的“常用”模式中的“創(chuàng)建模板”按鈕，將當(dāng)前文檔轉(zhuǎn)換為模板文檔。（3）使用“新建文檔”對(duì)話框創(chuàng)建空模板在DreamweaverCS5中可以直接創(chuàng)建模板網(wǎng)頁(yè)，具體步驟如下：11.2知識(shí)儲(chǔ)備①單擊菜單“文件”→“新建”命令，彈出“新建文檔”對(duì)話框，在對(duì)話框中選擇“空模板”中的“HTML模板”選項(xiàng)，如圖11-5所示。圖11-5“新建文檔”對(duì)話框11.2知識(shí)儲(chǔ)備②單擊“創(chuàng)建”按鈕，創(chuàng)建模板文檔。③單擊菜單“文件”→“保存”命令，彈出DreamweaverCS5提示對(duì)話框，如圖11-6所示。圖11-6提示對(duì)話框11.2知識(shí)儲(chǔ)備④單擊“確定”按鈕，彈出“另存模板”對(duì)話框，在對(duì)話框中的“站點(diǎn)”下拉表中選擇站點(diǎn)，在“另存為”文本框中輸入名稱。如圖11-7所示。

⑤單擊“保存”按鈕，保存模板。圖11-7“另存模板”對(duì)話框

11.2知識(shí)儲(chǔ)備3.創(chuàng)建可編輯區(qū)域、重復(fù)區(qū)域、可選區(qū)域

(1)創(chuàng)建可編輯區(qū)域在默認(rèn)情況下，新創(chuàng)建的模板所有區(qū)域都處于鎖定狀態(tài)，用戶要根據(jù)具體要求定義和修改模板的可編輯區(qū)域。創(chuàng)建可編輯區(qū)域的具體操作步驟如下：①將光標(biāo)置于要定義的可編輯區(qū)域。11.2知識(shí)儲(chǔ)備②單擊菜單“插入”→“模板對(duì)象”→“可編輯區(qū)域”命令，打開(kāi)“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸入名稱，如圖11-8所示。③單擊“確定”按鈕，插入可編輯區(qū)域。圖11-8“新建可編輯區(qū)域”對(duì)話框11.2知識(shí)儲(chǔ)備(2)創(chuàng)建重復(fù)區(qū)域重復(fù)區(qū)域指的是在文檔中可能會(huì)重復(fù)出現(xiàn)的區(qū)域，定義重復(fù)區(qū)域的具體步驟如下：①單擊菜單“插入”→“模板對(duì)象”→“重復(fù)區(qū)域”命令，打開(kāi)“新建重復(fù)區(qū)域”對(duì)話框，如圖11-9所示。

②在對(duì)話框的“名稱”文本框中輸入名稱，單擊“確定”按鈕，即可創(chuàng)建重復(fù)區(qū)域。圖11-9“新建重復(fù)區(qū)域”對(duì)話框11.2知識(shí)儲(chǔ)備(3)創(chuàng)建可選區(qū)域

可選區(qū)域是模板中的區(qū)域，可將其設(shè)置為在基于模板的文件中顯示或隱藏。創(chuàng)建可選區(qū)域的具體操作步驟如下：①單擊菜單“插入”→“模板對(duì)象”→“可選區(qū)域”命令，打開(kāi)“新建可選區(qū)域”對(duì)話框，如圖11-10所示。圖11-10“新建可選區(qū)域”對(duì)話框11.2知識(shí)儲(chǔ)備②在“新建可選區(qū)域”對(duì)話框的“名稱”文本框中輸入這個(gè)可選區(qū)域的名稱。③如果要設(shè)置可選區(qū)域的值，切換至“高級(jí)”選項(xiàng)卡，在其中進(jìn)行設(shè)置。如圖11-11所示。圖11-11高級(jí)選項(xiàng)卡11.2知識(shí)儲(chǔ)備4.編輯模版

(1)重命名模板文件對(duì)于功能不明確的模板，可以通過(guò)重命名方法，使用戶看到模板名稱就知道其功能。重名模板的操作步驟如下：①單擊菜單“窗口”→“資源”命令，打開(kāi)“資源”面板。11.2知識(shí)儲(chǔ)備②單擊“模板”按鈕，然后用鼠標(biāo)右鍵單擊需要重命名的模板，在彈出的快捷菜單中選擇，“重命名”命令。如圖11-12所示。

③為模板輸入一個(gè)新名稱按下回車鍵重命名生效。圖11-12模板子面板11.2知識(shí)儲(chǔ)備(2)修改模板文件修改模板的具體方法：打開(kāi)“資源”面板，單擊面板左側(cè)的“模板”按鈕，在面板右側(cè)的模板列表中，雙擊要修改的模板文件將其打開(kāi)，根據(jù)需要修改模板內(nèi)容。因?yàn)槟０搴蛻?yīng)用了模板的文檔之間保持著鏈接的關(guān)系，所以，將修改后的模板進(jìn)行保存時(shí)，DreamweaverCS5會(huì)提示是否更新所有應(yīng)用了該模板的頁(yè)面，這就是DreamweaverCS5網(wǎng)站批量更新功能。11.2知識(shí)儲(chǔ)備(3)刪除模板文件單擊“資源”面板左側(cè)的“模板”按鈕，在面板右側(cè)本站點(diǎn)的模板列表中選中要?jiǎng)h除的模板，單擊面板下方的“刪除”按鈕，并確認(rèn)要?jiǎng)h除該模板，此時(shí)該模板文件從站點(diǎn)中刪除。11.2知識(shí)儲(chǔ)備5.模板的應(yīng)用

(1)使用新建命令創(chuàng)建基于模板的新文檔①單擊菜單“文件”→“新建”命令，打開(kāi)“新建文檔”對(duì)話框，單擊“模板中的頁(yè)”標(biāo)簽，在“站點(diǎn)”列表中選擇站點(diǎn)，再?gòu)挠覀?cè)“模板”的列表中選擇一個(gè)模板文件，單擊“創(chuàng)建”按鈕，創(chuàng)建基于模板的新文檔，如圖11-13所示。11.2知識(shí)儲(chǔ)備圖11-13“新建文檔”對(duì)話框11.2知識(shí)儲(chǔ)備②在文檔窗口中按照模板中的設(shè)置建立一個(gè)新頁(yè)面，并可向編輯區(qū)域內(nèi)添加信息，如圖11-14所示。圖11-14基于模板的新文檔11.2知識(shí)儲(chǔ)備

(2)應(yīng)用“資源”面板中的模板創(chuàng)建基于模板的網(wǎng)頁(yè)①新建HTML文檔，單擊菜單“窗口”→“資源”命令，打開(kāi)“資源”面板。②在“資源”面板中，單擊左側(cè)的“模板”按鈕，再?gòu)哪０辶斜碇羞x擇相應(yīng)的模板，如圖11-15所示。最后單擊面板下方的“應(yīng)用”按鈕，在文檔中應(yīng)用該模板。圖11-15資源模板子面板11.2知識(shí)儲(chǔ)備(3)將模板應(yīng)用于現(xiàn)有文檔當(dāng)將模板應(yīng)用到包含現(xiàn)有內(nèi)容的文檔時(shí)，DreamweaverCS5會(huì)嘗試將現(xiàn)有內(nèi)容與模板中的區(qū)域進(jìn)行匹配。具體操作步驟如下：①打開(kāi)要應(yīng)用的模板的文檔。②單擊菜單“修改”→“模板”→“應(yīng)用模板到頁(yè)”命令，打開(kāi)“選擇模板”對(duì)話框。11.2知識(shí)儲(chǔ)備③在“選擇模板”對(duì)話框中的“模板”列表中，選擇要套用的模板，并單擊“選定”按鈕，如圖11-16所示。

④為對(duì)話框中顯示的每一項(xiàng)未解析內(nèi)容選擇好新區(qū)域后，單擊“確定”按鈕，將套用模板，得到一個(gè)新文檔；或單擊“取消”按鈕，取消將模板應(yīng)用到文檔的操作。圖11-16“選擇模板”對(duì)話框11.2知識(shí)儲(chǔ)備（4）把頁(yè)面從模板中分離出來(lái)如果要對(duì)應(yīng)用了模板的頁(yè)面的鎖定區(qū)域進(jìn)行修改，必須先把頁(yè)面從模板中分離出來(lái)。一旦頁(yè)面被分離出來(lái)，就可以象沒(méi)有應(yīng)用模板時(shí)一樣編輯頁(yè)面。但當(dāng)模板被更新時(shí)，該頁(yè)面將不能被更新。從模板中分離頁(yè)面的步驟如下：①打開(kāi)要分離的頁(yè)面文檔。②單擊菜單“修改”→“模板”→“從模板中分離”命令，即可把頁(yè)面從模板中分離出來(lái)。11.2知識(shí)儲(chǔ)備（5）更新模板及其他網(wǎng)頁(yè)當(dāng)已經(jīng)利用模板創(chuàng)建了多個(gè)網(wǎng)頁(yè)時(shí)，若想更改模板中的某些網(wǎng)頁(yè)元素，可以直接在模板中更改，更改保存時(shí)，會(huì)彈出“更新模板文件”對(duì)話框，如圖11-17所示，只需單擊“更新”按鈕命令。圖11-17“更新模板文件”對(duì)話框11.2知識(shí)儲(chǔ)備如果在保存模板時(shí)沒(méi)有更新基于該模板的文檔，也可以在之后手動(dòng)更新基于模板的文檔。具體方法：打開(kāi)該文檔，單擊菜單“修改”→“模板”→“更新當(dāng)前頁(yè)”命令。如果要更新整個(gè)站點(diǎn)或所有使用指定模板的文檔，可以單擊菜單“修改”→“模板”→“更新頁(yè)面”命令，出現(xiàn)“更新頁(yè)面”對(duì)話框，如圖11-18所示，單擊“開(kāi)始”按鈕即可。圖11-18“更新頁(yè)面”對(duì)話框11.2知識(shí)儲(chǔ)備若要按相應(yīng)模板更新所選站點(diǎn)中的所有文件，可選擇“整個(gè)站點(diǎn)”，然后從相鄰的菜單中選擇站點(diǎn)名稱。若要針對(duì)特定模板更新文件，請(qǐng)選擇“文件使用”，然后從相鄰的菜單中選擇模板名稱。11.2知識(shí)儲(chǔ)備11.2.3庫(kù)庫(kù)是一種特殊的Dreamweaver文件，其中包含可放置到web頁(yè)中的一組資源或資源副本。庫(kù)中的這些資源稱為庫(kù)項(xiàng)目。庫(kù)項(xiàng)目可包括圖像、表格、聲音、Flash文件、表單、構(gòu)件等各類元素，能夠在網(wǎng)頁(yè)中重復(fù)使用，當(dāng)用戶更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，系統(tǒng)會(huì)更新所有使用該庫(kù)項(xiàng)目的頁(yè)面。

1．創(chuàng)建庫(kù)項(xiàng)目創(chuàng)建項(xiàng)目的方法有兩種：一種是基于選定的內(nèi)容創(chuàng)建庫(kù)項(xiàng)目；另一種是新建空白庫(kù)項(xiàng)目并向其中添加內(nèi)容。11.2知識(shí)儲(chǔ)備若要基于選定內(nèi)容創(chuàng)建庫(kù)項(xiàng)目，應(yīng)選擇“文檔”窗口中要作為庫(kù)項(xiàng)目的內(nèi)容或?qū)ο?，然后?zhí)行以下任一操作。將選擇的內(nèi)容拖動(dòng)到“資源”面板的“庫(kù)”類別中，如圖11-19所示。圖11-19庫(kù)面板11.2知識(shí)儲(chǔ)備（2）單擊“資源”面板的“庫(kù)”類別下的“新建庫(kù)項(xiàng)目”按鈕。（3）單擊“資源”面板右上角圖標(biāo)，從打開(kāi)的菜單中選擇“新建項(xiàng)目”命令。（4）單擊菜單“修改”→“庫(kù)”→“增加對(duì)象到庫(kù)”命令。11.2知識(shí)儲(chǔ)備2．在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目在頁(yè)面中插入庫(kù)項(xiàng)目的具體操作步驟如下：①將插入點(diǎn)放在文檔窗口中的合適位置。②單擊菜單“窗口”→“資源”命令，啟用“資源”面板，單擊“庫(kù)”按鈕，進(jìn)入“庫(kù)”子面板，將庫(kù)項(xiàng)目插入到網(wǎng)頁(yè)中。11.2知識(shí)儲(chǔ)備將庫(kù)項(xiàng)目插入到網(wǎng)頁(yè)有以下兩種方法：方法一：將一個(gè)庫(kù)項(xiàng)目從“庫(kù)”子面板拖曳到文檔窗口中。方法二：在“庫(kù)”子面板中選擇一個(gè)庫(kù)項(xiàng)目，然后單擊面板底部的“插入”按鈕。11.2知識(shí)儲(chǔ)備3．編輯庫(kù)項(xiàng)目對(duì)庫(kù)項(xiàng)目的編輯更改包括：重命名庫(kù)項(xiàng)目、刪除庫(kù)項(xiàng)目、重新創(chuàng)建已刪除的庫(kù)項(xiàng)目、修改庫(kù)項(xiàng)目、更新庫(kù)項(xiàng)目。

（1）重命名庫(kù)項(xiàng)目重命名庫(kù)項(xiàng)目可以斷開(kāi)其與文檔或模板的連接。重命名庫(kù)項(xiàng)目的具體操作步驟：在“資源”面板的“庫(kù)”列表中，在要重命名的庫(kù)項(xiàng)目上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“重命名”命令，當(dāng)名稱變?yōu)榭删庉嫊r(shí)，輸入新名稱即可。11.2知識(shí)儲(chǔ)備（2）刪除庫(kù)項(xiàng)目在“庫(kù)”列表中選擇要?jiǎng)h除的庫(kù)項(xiàng)目，單擊庫(kù)子面板底部的“刪除”按鈕，并確認(rèn)要?jiǎng)h除的庫(kù)項(xiàng)目，或者按鍵盤上【Delete】鍵，確認(rèn)要?jiǎng)h除的庫(kù)項(xiàng)目。DreamweaverCS5將從庫(kù)中刪除該庫(kù)項(xiàng)目，但是不會(huì)更改任何使用該項(xiàng)目的文檔的內(nèi)容。（3）重新創(chuàng)建已經(jīng)刪除的庫(kù)項(xiàng)目若網(wǎng)頁(yè)中已經(jīng)插入了庫(kù)項(xiàng)目，但該庫(kù)項(xiàng)目被誤刪，此時(shí)可以重新創(chuàng)建庫(kù)項(xiàng)目。重新創(chuàng)建已刪除庫(kù)項(xiàng)目的具體操作步驟如下：11.2知識(shí)儲(chǔ)備①在網(wǎng)頁(yè)中選擇被刪除的庫(kù)項(xiàng)目的一個(gè)實(shí)例。②單擊菜單“窗口”→“屬性”命令，啟用“屬性”面板，單擊“重新創(chuàng)建”按鈕，如圖11-20所示。此時(shí)，“庫(kù)”子面板中顯示該庫(kù)項(xiàng)目。圖11-20庫(kù)屬性面板11.2知識(shí)儲(chǔ)備（4）修改庫(kù)項(xiàng)目①單擊菜單“窗口”→“資源”命令，啟用“資源”面板，單擊左側(cè)的“庫(kù)”按鈕，面板右側(cè)顯示本站點(diǎn)的庫(kù)列表。②在庫(kù)列表中，雙擊要修改的庫(kù)項(xiàng)目或是單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇“編輯”命令，打開(kāi)庫(kù)項(xiàng)目。11.2知識(shí)儲(chǔ)備（5）更新庫(kù)項(xiàng)目用庫(kù)項(xiàng)目的最新版本更新整個(gè)站點(diǎn)，或更新使用該庫(kù)項(xiàng)目的所有網(wǎng)頁(yè)。具體操作步驟如下：①單擊菜單“修改”→“庫(kù)”→“更新頁(yè)面”命令。②打開(kāi)“更新頁(yè)面”對(duì)話框，如圖11-21示，然后單擊“開(kāi)始”按鈕。圖11-21“更新頁(yè)面”對(duì)話框返回11.3實(shí)踐向?qū)蝿?wù)11-1創(chuàng)建企業(yè)網(wǎng)頁(yè)模板，效果如圖11-22所示。圖11-22企業(yè)網(wǎng)頁(yè)模板11.3實(shí)踐向?qū)Ь唧w操作步驟如下：1.創(chuàng)建企業(yè)網(wǎng)站模板（1）啟動(dòng)DreamweaverCS5,單擊菜單“文件”→“新建”命令，打開(kāi)“新建文檔”對(duì)話框，選擇“空白頁(yè)”→“HTML”→“<無(wú)>”選項(xiàng)。

（2）單擊“確定”按鈕，創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔。（3）單擊菜單“文件”→“保存”命名，打開(kāi)“另存為”對(duì)話框，在“文件名”文本框中輸入“moban.dwt”，“保存類型”選擇“Template*.dwt”。11.3實(shí)踐向?qū)В?）單擊“保存”按鈕，即可創(chuàng)建模板網(wǎng)頁(yè)文檔。（5）單擊菜單“插入”→“表格”，打開(kāi)“表格”對(duì)話框，“表格寬度”設(shè)置887像素，“行數(shù)”設(shè)置為4，列設(shè)置為1，邊距為0，單擊“確定”按鈕，插入表格，此表格記為1,表格1設(shè)置為居中對(duì)齊。（6）將光標(biāo)置于表格1的第一行單元格中，單擊菜單“插入”→“圖像”，單擊“確定”命令。

（7）在表格1的第2行的背景顏色設(shè)為“#FF9999”，且在此行中插入一個(gè)1行8列的表格，此表格記為表格2，在表格2中的每個(gè)單元格中輸入文本。11.3實(shí)踐向?qū)В?）將光標(biāo)置于表格1的第3行單元格中，選擇“插入”→“表格”命令，插入1行2列的表格，此表格記為表格3。（9）將光標(biāo)置于表格3的第1列單元格中，背景顏色設(shè)為“#EBEBEB”，然后插入2行1列的表格4，在表格輸入文字。

（10）將光標(biāo)置于表格3的第2列單元格中，選擇“插入”→“模板對(duì)象”→“創(chuàng)建可編輯區(qū)域”命令，彈出“新建可編輯區(qū)域”對(duì)話框。（11）在“名稱”文本框中輸入可編輯區(qū)域的名稱，單擊“確定”按鈕，即可創(chuàng)建可編輯區(qū)域，11.3實(shí)踐向?qū)В?2）將光標(biāo)置于表格1的第4行單元格中，設(shè)