第八章使用模板和庫(kù)項(xiàng)目

1、第第8 8章章 使用模板和庫(kù)項(xiàng)目使用模板和庫(kù)項(xiàng)目通常在一個(gè)網(wǎng)站中會(huì)有大量風(fēng)格和內(nèi)容基本相似的頁(yè)面，如果通常在一個(gè)網(wǎng)站中會(huì)有大量風(fēng)格和內(nèi)容基本相似的頁(yè)面，如果逐頁(yè)建立、修改會(huì)浪費(fèi)大量的人力物力，并且效率不高，整逐頁(yè)建立、修改會(huì)浪費(fèi)大量的人力物力，并且效率不高，整個(gè)站點(diǎn)中的網(wǎng)頁(yè)也很難做到有統(tǒng)一的外觀及結(jié)構(gòu)。為此，我個(gè)站點(diǎn)中的網(wǎng)頁(yè)也很難做到有統(tǒng)一的外觀及結(jié)構(gòu)。為此，我們可以借助們可以借助Dreamweaver 的模板功能來(lái)簡(jiǎn)化操作。模板的的模板功能來(lái)簡(jiǎn)化操作。模板的功能就是把網(wǎng)頁(yè)布局和內(nèi)容相分離，在布局好之后將其存儲(chǔ)功能就是把網(wǎng)頁(yè)布局和內(nèi)容相分離，在布局好之后將其存儲(chǔ)為模板，這樣相同布局的頁(yè)面可以通

2、過(guò)模板創(chuàng)建，因此能夠?yàn)槟０澹@樣相同布局的頁(yè)面可以通過(guò)模板創(chuàng)建，因此能夠極大提高工作效率。而且使用模板和庫(kù)維護(hù)修改網(wǎng)站也十分極大提高工作效率。而且使用模板和庫(kù)維護(hù)修改網(wǎng)站也十分容易，可以在短時(shí)間內(nèi)重新設(shè)計(jì)網(wǎng)站并對(duì)大量的網(wǎng)頁(yè)進(jìn)行修容易，可以在短時(shí)間內(nèi)重新設(shè)計(jì)網(wǎng)站并對(duì)大量的網(wǎng)頁(yè)進(jìn)行修改。改。8.1 8.1 模板的使用模板的使用在在Dreamweaver CS5中有許多種創(chuàng)建模板的方法，可以創(chuàng)中有許多種創(chuàng)建模板的方法，可以創(chuàng)建空白模板，也可以基于現(xiàn)存文檔創(chuàng)建模板，除此之外建空白模板，也可以基于現(xiàn)存文檔創(chuàng)建模板，除此之外，還可以將現(xiàn)有的，還可以將現(xiàn)有的HTML文檔另存為模板，然后根據(jù)需要文檔另存為模板

3、，然后根據(jù)需要加以修改。加以修改。8.1.1 8.1.1 創(chuàng)建模板創(chuàng)建模板模板其實(shí)就是一個(gè)模板其實(shí)就是一個(gè)HTML文檔，只是在文檔，只是在HTML文檔中增加了文檔中增加了模板標(biāo)記。有兩種方法可以創(chuàng)建模板：一種是直接新建模板標(biāo)記。有兩種方法可以創(chuàng)建模板：一種是直接新建一個(gè)空白模板，再在其中插入需要顯示的文檔內(nèi)容；另一個(gè)空白模板，再在其中插入需要顯示的文檔內(nèi)容；另一種是將現(xiàn)有的網(wǎng)頁(yè)文件另存為模板，然后再根據(jù)需要一種是將現(xiàn)有的網(wǎng)頁(yè)文件另存為模板，然后再根據(jù)需要進(jìn)行修改。進(jìn)行修改。1直接創(chuàng)建模板直接創(chuàng)建模板2從現(xiàn)有文檔創(chuàng)建模板從現(xiàn)有文檔創(chuàng)建模板8.1.2 8.1.2 管理模板管理模板創(chuàng)建好模板后，模板

4、會(huì)在創(chuàng)建好模板后，模板會(huì)在“資源資源”面板中顯示?？梢栽诿姘逯酗@示?？梢栽凇百Y資源源”面板中隊(duì)模板進(jìn)行管理，主要包括修改、刪除和重面板中隊(duì)模板進(jìn)行管理，主要包括修改、刪除和重命名模板等。命名模板等。選擇選擇“窗口窗口”|“資源資源”命令，打開(kāi)命令，打開(kāi)“資源資源”面板，單擊面板面板，單擊面板上的上的“模板按鈕模板按鈕”，在模板列表上會(huì)顯示所有的模板，在模板列表上會(huì)顯示所有的模板，如圖如圖12.5所示。所示。1修改模板修改模板2刪除模板刪除模板3重命名模板重命名模板8.1.3 8.1.3 創(chuàng)建嵌套模板創(chuàng)建嵌套模板嵌套模板是指在模板中嵌套另一個(gè)模板。嵌套模板對(duì)于控制嵌套模板是指在模板中嵌套另一個(gè)模

5、板。嵌套模板對(duì)于控制共享許多設(shè)計(jì)元素的站點(diǎn)頁(yè)面中的內(nèi)容很有用，但在各共享許多設(shè)計(jì)元素的站點(diǎn)頁(yè)面中的內(nèi)容很有用，但在各頁(yè)之間有些差距。若要?jiǎng)?chuàng)建嵌套模板，必須首先保存原頁(yè)之間有些差距。若要?jiǎng)?chuàng)建嵌套模板，必須首先保存原始模板或基本模板，然后根據(jù)該模板創(chuàng)建新文檔，最后始模板或基本模板，然后根據(jù)該模板創(chuàng)建新文檔，最后將該文檔另存為模板。在新模板中，可以在原來(lái)的基本將該文檔另存為模板。在新模板中，可以在原來(lái)的基本模板中定義的可編輯區(qū)域中進(jìn)一步定義區(qū)域。基本模板模板中定義的可編輯區(qū)域中進(jìn)一步定義區(qū)域?；灸０逯械目删庉媴^(qū)域被傳遞到嵌套模板，并在根據(jù)嵌套模板中的可編輯區(qū)域被傳遞到嵌套模板，并在根據(jù)嵌套模板創(chuàng)建

6、的頁(yè)面中保持可編輯，除非在這些區(qū)域中又插入了創(chuàng)建的頁(yè)面中保持可編輯，除非在這些區(qū)域中又插入了新的模板區(qū)域。新的模板區(qū)域。8.1.4 8.1.4 定義模板區(qū)域定義模板區(qū)域在模板中定義了文檔的布局和大致框架。在使用模板之前，在模板中定義了文檔的布局和大致框架。在使用模板之前，首先要了解模板的兩個(gè)區(qū)域，即非編輯區(qū)域和編輯區(qū)域。首先要了解模板的兩個(gè)區(qū)域，即非編輯區(qū)域和編輯區(qū)域。模板中創(chuàng)建的元素在基于模板的頁(yè)面中通常是鎖定區(qū)域，或模板中創(chuàng)建的元素在基于模板的頁(yè)面中通常是鎖定區(qū)域，或稱之為非編輯區(qū)域，要編輯模板，必須在模板中定義可編稱之為非編輯區(qū)域，要編輯模板，必須在模板中定義可編輯區(qū)域。在使用模板創(chuàng)建文

7、檔時(shí)只能改變可編輯區(qū)域中的輯區(qū)域。在使用模板創(chuàng)建文檔時(shí)只能改變可編輯區(qū)域中的內(nèi)容，鎖定區(qū)域在文檔編輯過(guò)程中始終保持不變。內(nèi)容，鎖定區(qū)域在文檔編輯過(guò)程中始終保持不變。1模板區(qū)域的類型模板區(qū)域的類型2定義可編輯區(qū)域定義可編輯區(qū)域8.1.5 8.1.5 實(shí)例實(shí)例創(chuàng)建網(wǎng)站的模板頁(yè)面創(chuàng)建網(wǎng)站的模板頁(yè)面8.2 8.2 使用模板創(chuàng)建網(wǎng)頁(yè)文檔使用模板創(chuàng)建網(wǎng)頁(yè)文檔在在Dreamweaver中，可以以模板為基礎(chǔ)創(chuàng)建新的文檔，或中，可以以模板為基礎(chǔ)創(chuàng)建新的文檔，或?qū)⒁粋€(gè)模板應(yīng)用于已有的文檔。使用這樣的方法創(chuàng)建網(wǎng)將一個(gè)模板應(yīng)用于已有的文檔。使用這樣的方法創(chuàng)建網(wǎng)頁(yè)文檔，可以保持整個(gè)網(wǎng)站風(fēng)格的統(tǒng)一性，并能大大提頁(yè)文檔，可

8、以保持整個(gè)網(wǎng)站風(fēng)格的統(tǒng)一性，并能大大提高制作效率。高制作效率。8.2.1 8.2.1 創(chuàng)建基于模板的文檔創(chuàng)建基于模板的文檔創(chuàng)建基于模板的新文檔的操作步驟如下。創(chuàng)建基于模板的新文檔的操作步驟如下。（1）選擇）選擇“文件文件”|“新建新建”命令，在彈出的命令，在彈出的“新建文檔新建文檔”對(duì)話框中選擇對(duì)話框中選擇“模板中的頁(yè)模板中的頁(yè)”|“站點(diǎn)站點(diǎn)newweb”中的中的muban1，如圖，如圖12.29所示。所示。（2）單擊）單擊“創(chuàng)建創(chuàng)建”按鈕，即可創(chuàng)建一個(gè)基于模板的網(wǎng)頁(yè)文按鈕，即可創(chuàng)建一個(gè)基于模板的網(wǎng)頁(yè)文檔，如圖檔，如圖12.30所示所示（3）對(duì)新文檔進(jìn)行修改。）對(duì)新文檔進(jìn)行修改。8.2.2 8

9、.2.2 分離模板分離模板用模板設(shè)計(jì)網(wǎng)頁(yè)時(shí)，模板有很多的鎖定區(qū)域。這些區(qū)域是不用模板設(shè)計(jì)網(wǎng)頁(yè)時(shí)，模板有很多的鎖定區(qū)域。這些區(qū)域是不可編輯的。若要更改基于模板的文檔的鎖定區(qū)域，必須可編輯的。若要更改基于模板的文檔的鎖定區(qū)域，必須將文檔從模板中分離。當(dāng)文檔被分離后，它將成為一個(gè)將文檔從模板中分離。當(dāng)文檔被分離后，它將成為一個(gè)普通的文檔，不再具有可編輯區(qū)域或鎖定區(qū)域，也不再普通的文檔，不再具有可編輯區(qū)域或鎖定區(qū)域，也不再和任何模板相關(guān)聯(lián)。和任何模板相關(guān)聯(lián)。選擇選擇“修改修改”|“模板模板”|“從模板中分離從模板中分離”命令，即可將網(wǎng)頁(yè)命令，即可將網(wǎng)頁(yè)從模板中分離，模板中的鎖定區(qū)域?qū)?huì)全部刪除，如圖從

10、模板中分離，模板中的鎖定區(qū)域?qū)?huì)全部刪除，如圖12.31所示。所示。8.2.3 8.2.3 更新模板頁(yè)面更新模板頁(yè)面應(yīng)用模板創(chuàng)建其他網(wǎng)頁(yè)可保持整個(gè)網(wǎng)站的一致風(fēng)格，又可節(jié)應(yīng)用模板創(chuàng)建其他網(wǎng)頁(yè)可保持整個(gè)網(wǎng)站的一致風(fēng)格，又可節(jié)省時(shí)間。模板的最大作用就是能一次更新多個(gè)頁(yè)面，做省時(shí)間。模板的最大作用就是能一次更新多個(gè)頁(yè)面，做到一改全改。對(duì)模板進(jìn)行修改時(shí)，到一改全改。對(duì)模板進(jìn)行修改時(shí)，Dreamweaver會(huì)提示會(huì)提示是否更新基于該模板的頁(yè)面，也可使用更新命令來(lái)手動(dòng)是否更新基于該模板的頁(yè)面，也可使用更新命令來(lái)手動(dòng)更新當(dāng)前頁(yè)面或整個(gè)站點(diǎn)。更新當(dāng)前頁(yè)面或整個(gè)站點(diǎn)。1更新基于模板的文檔更新基于模板的文檔2更新站

11、點(diǎn)模板更新站點(diǎn)模板8.3 8.3 庫(kù)的使用庫(kù)的使用庫(kù)通常用來(lái)存放文檔中的頁(yè)面元素，如文本、圖像、庫(kù)通常用來(lái)存放文檔中的頁(yè)面元素，如文本、圖像、Flash動(dòng)畫(huà)等。這些頁(yè)面元素被廣泛應(yīng)用于整個(gè)站點(diǎn)，并且能動(dòng)畫(huà)等。這些頁(yè)面元素被廣泛應(yīng)用于整個(gè)站點(diǎn)，并且能夠被反復(fù)使用，因此它們被稱作庫(kù)項(xiàng)目。夠被反復(fù)使用，因此它們被稱作庫(kù)項(xiàng)目。8.3.1 8.3.1 庫(kù)項(xiàng)目的概念庫(kù)項(xiàng)目的概念庫(kù)是一種特殊的文件，它包含可添加到網(wǎng)頁(yè)文檔中的一組單庫(kù)是一種特殊的文件，它包含可添加到網(wǎng)頁(yè)文檔中的一組單個(gè)資源或資源副本。庫(kù)里面的這些資源被稱為庫(kù)項(xiàng)目。個(gè)資源或資源副本。庫(kù)里面的這些資源被稱為庫(kù)項(xiàng)目。庫(kù)項(xiàng)目可以使用圖像、表格或庫(kù)項(xiàng)目

12、可以使用圖像、表格或SWF文件等元素。當(dāng)編輯文件等元素。當(dāng)編輯某個(gè)庫(kù)項(xiàng)目時(shí)，可以自動(dòng)更新應(yīng)用該庫(kù)項(xiàng)目的所有網(wǎng)頁(yè)某個(gè)庫(kù)項(xiàng)目時(shí)，可以自動(dòng)更新應(yīng)用該庫(kù)項(xiàng)目的所有網(wǎng)頁(yè)文檔。文檔。8.3.2 8.3.2 創(chuàng)建庫(kù)項(xiàng)目創(chuàng)建庫(kù)項(xiàng)目在在Dreamweaver CS5文檔中，可以將網(wǎng)頁(yè)文檔中的任何元文檔中，可以將網(wǎng)頁(yè)文檔中的任何元素創(chuàng)建為庫(kù)項(xiàng)目，這些元素包括文本、圖像、表格、表素創(chuàng)建為庫(kù)項(xiàng)目，這些元素包括文本、圖像、表格、表單、插件、單、插件、ActiveX控件以及控件以及Java程序等。程序等。要使用庫(kù)，必須首先創(chuàng)建庫(kù)。創(chuàng)建庫(kù)有兩種方法：一是新建要使用庫(kù)，必須首先創(chuàng)建庫(kù)。創(chuàng)建庫(kù)有兩種方法：一是新建庫(kù)，二是將已經(jīng)

13、做好的網(wǎng)頁(yè)內(nèi)容轉(zhuǎn)換為庫(kù)。庫(kù)，二是將已經(jīng)做好的網(wǎng)頁(yè)內(nèi)容轉(zhuǎn)換為庫(kù)。在打開(kāi)的網(wǎng)頁(yè)中，由于一些內(nèi)容已經(jīng)做好了，因此只需將其在打開(kāi)的網(wǎng)頁(yè)中，由于一些內(nèi)容已經(jīng)做好了，因此只需將其轉(zhuǎn)換成庫(kù)對(duì)象即可。選擇轉(zhuǎn)換成庫(kù)對(duì)象即可。選擇“窗口窗口”|“資源資源”命令，打開(kāi)命令，打開(kāi)“資源資源”面板，在左側(cè)的按鈕中單擊面板，在左側(cè)的按鈕中單擊“庫(kù)庫(kù)”按鈕切換到按鈕切換到“庫(kù)庫(kù)”面板，如圖所示。面板，如圖所示。8.3.3 8.3.3 插入庫(kù)插入庫(kù)創(chuàng)建好庫(kù)對(duì)象后，就可以在新文檔中使用它了。創(chuàng)建好庫(kù)對(duì)象后，就可以在新文檔中使用它了。添加庫(kù)的具體操作步驟如下。添加庫(kù)的具體操作步驟如下。（1）新建文檔，在網(wǎng)頁(yè)中插入一個(gè)）新建文檔，

14、在網(wǎng)頁(yè)中插入一個(gè)3行行1列的表格，表格寬列的表格，表格寬度為度為800px，記為表格，記為表格1，如圖所示。，如圖所示。（2）將鼠標(biāo)置于表格第）將鼠標(biāo)置于表格第2行單元格中，插入一個(gè)行單元格中，插入一個(gè)1行行2列的列的表格，記為表格表格，記為表格2，如圖所示。，如圖所示。（3）將鼠標(biāo)置于表格）將鼠標(biāo)置于表格2第第1列單元格中，在列單元格中，在“庫(kù)庫(kù)”面板中選面板中選中要插入的庫(kù)中要插入的庫(kù)left，單擊面板下方的，單擊面板下方的“插入插入”按鈕，如圖按鈕，如圖所示。所示。（4）此時(shí)庫(kù)項(xiàng)目）此時(shí)庫(kù)項(xiàng)目left便被添加到新建的網(wǎng)頁(yè)文檔中，如圖所便被添加到新建的網(wǎng)頁(yè)文檔中，如圖所示。示。 8.3.4

15、 8.3.4 編輯和更新庫(kù)項(xiàng)目編輯和更新庫(kù)項(xiàng)目通過(guò)庫(kù)可以有效地管理和使用站點(diǎn)上的各種資源。當(dāng)編輯庫(kù)通過(guò)庫(kù)可以有效地管理和使用站點(diǎn)上的各種資源。當(dāng)編輯庫(kù)項(xiàng)目時(shí)，可以更新使用該項(xiàng)目的所有文檔。如果選擇不項(xiàng)目時(shí)，可以更新使用該項(xiàng)目的所有文檔。如果選擇不更新，那么文檔將保持與庫(kù)項(xiàng)目的關(guān)聯(lián)，可以在以后更更新，那么文檔將保持與庫(kù)項(xiàng)目的關(guān)聯(lián)，可以在以后更新它們，具體操作步驟如下。新它們，具體操作步驟如下。（1）打開(kāi)庫(kù)文件）打開(kāi)庫(kù)文件bottom，選中文字，在屬性面板中輸入鏈，選中文字，在屬性面板中輸入鏈接，如圖所示。接，如圖所示。（2）選擇）選擇“文件文件”|“保存保存”命令，保存對(duì)庫(kù)的修改。之后命令，保存

16、對(duì)庫(kù)的修改。之后選擇選擇“修改修改”|“庫(kù)庫(kù)”|“更新頁(yè)面更新頁(yè)面”命令，如圖所示。命令，如圖所示。（3）彈出）彈出“更新頁(yè)面更新頁(yè)面”對(duì)話框，設(shè)置對(duì)話框，設(shè)置“查看查看”為為“整個(gè)站整個(gè)站點(diǎn)點(diǎn)”，“更新更新”為為“庫(kù)文件庫(kù)文件”，單擊，單擊“開(kāi)始開(kāi)始”按鈕，按鈕，Dreamweaver將按照指示更新文件，如圖所示。將按照指示更新文件，如圖所示。（4）關(guān)閉對(duì)話框后可見(jiàn)應(yīng)用庫(kù)的文檔根據(jù)庫(kù)的修改頁(yè)面進(jìn)）關(guān)閉對(duì)話框后可見(jiàn)應(yīng)用庫(kù)的文檔根據(jù)庫(kù)的修改頁(yè)面進(jìn)行了修改。如果勾選了行了修改。如果勾選了“顯示記錄顯示記錄”復(fù)選框，復(fù)選框，Dreamweaver將提供關(guān)于它試圖更新的文件的信息，包將提供關(guān)于它試圖更

17、新的文件的信息，包括它們是否成功更新的信息。括它們是否成功更新的信息。8.3.5 8.3.5 使庫(kù)對(duì)象脫離源文件使庫(kù)對(duì)象脫離源文件有時(shí)候，用戶需要將網(wǎng)頁(yè)中的庫(kù)和源文件分離，進(jìn)而能夠在有時(shí)候，用戶需要將網(wǎng)頁(yè)中的庫(kù)和源文件分離，進(jìn)而能夠在網(wǎng)頁(yè)中直接編輯。這時(shí)可以選中頁(yè)面中的庫(kù)對(duì)象，網(wǎng)頁(yè)中直接編輯。這時(shí)可以選中頁(yè)面中的庫(kù)對(duì)象，“屬屬性性”面板變成如圖所示。面板變成如圖所示。8.4 8.4 本章小結(jié)本章小結(jié)Dreamweaver 提供了強(qiáng)大的模板，可以快速地創(chuàng)建大量風(fēng)提供了強(qiáng)大的模板，可以快速地創(chuàng)建大量風(fēng)格統(tǒng)一的網(wǎng)頁(yè)。庫(kù)項(xiàng)目是可以在多個(gè)頁(yè)面中重復(fù)使用的格統(tǒng)一的網(wǎng)頁(yè)。庫(kù)項(xiàng)目是可以在多個(gè)頁(yè)面中重復(fù)使用的存儲(chǔ)頁(yè)面元素，每當(dāng)更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，都可以存儲(chǔ)頁(yè)面元素，每當(dāng)更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，都可以更新所有使用該項(xiàng)目的頁(yè)面