第八章使用模板和庫項目

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

2、過模板創(chuàng)建，因此能夠為模板，這樣相同布局的頁面可以通過模板創(chuàng)建，因此能夠極大提高工作效率。而且使用模板和庫維護修改網(wǎng)站也十分極大提高工作效率。而且使用模板和庫維護修改網(wǎng)站也十分容易，可以在短時間內(nèi)重新設計網(wǎng)站并對大量的網(wǎng)頁進行修容易，可以在短時間內(nèi)重新設計網(wǎng)站并對大量的網(wǎng)頁進行修改。改。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)建模板模板其實就是一個模板其實就是一個HTML文檔，只是在文檔，只是在HTML文檔中增加了文檔中增加了模板標記。有兩種方法可以創(chuàng)建模板：一種是直接新建模板標記。有兩種方法可以創(chuàng)建模板：一種是直接新建一個空白模板，再在其中插入需要顯示的文檔內(nèi)容；另一個空白模板，再在其中插入需要顯示的文檔內(nèi)容；另一種是將現(xiàn)有的網(wǎng)頁文件另存為模板，然后再根據(jù)需要一種是將現(xiàn)有的網(wǎng)頁文件另存為模板，然后再根據(jù)需要進行修改。進行修改。1直接創(chuàng)建模板直接創(chuàng)建模板2從現(xiàn)有文檔創(chuàng)建模板從現(xiàn)有文檔創(chuàng)建模板8.1.2 8.1.2 管理模板管理模板創(chuàng)建好模板后，模板

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

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

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

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

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

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

10、模板中分離，模板中的鎖定區(qū)域?qū)縿h除，如圖12.31所示。所示。8.2.3 8.2.3 更新模板頁面更新模板頁面應用模板創(chuàng)建其他網(wǎng)頁可保持整個網(wǎng)站的一致風格，又可節(jié)應用模板創(chuàng)建其他網(wǎng)頁可保持整個網(wǎng)站的一致風格，又可節(jié)省時間。模板的最大作用就是能一次更新多個頁面，做省時間。模板的最大作用就是能一次更新多個頁面，做到一改全改。對模板進行修改時，到一改全改。對模板進行修改時，Dreamweaver會提示會提示是否更新基于該模板的頁面，也可使用更新命令來手動是否更新基于該模板的頁面，也可使用更新命令來手動更新當前頁面或整個站點。更新當前頁面或整個站點。1更新基于模板的文檔更新基于模板的文檔2更新站

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

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

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

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

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

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

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