1、第十二章 模板和庫(kù)當(dāng)用戶創(chuàng)建網(wǎng)站時(shí)，經(jīng)常會(huì)有大量的重復(fù)操作，如在每一個(gè)網(wǎng)頁(yè)上方插入同樣的圖片，在網(wǎng)頁(yè)下方輸入同樣的版權(quán)聲明等，從而浪費(fèi)了很多時(shí)間。在Dreamweaver中，使用模板和庫(kù)就可以解決這個(gè)問(wèn)題。模板是一種特殊類(lèi)型的文檔，利用它可以一次更新多個(gè)頁(yè)面，達(dá)到統(tǒng)一頁(yè)面的目的；庫(kù)是一種用來(lái)存儲(chǔ)在網(wǎng)站上經(jīng)常重復(fù)使用或更新的頁(yè)面元素的方法，這些元素通常被稱為庫(kù)項(xiàng)目。本章將介紹模板和庫(kù)的使用方法。本章內(nèi)容12.1模板12.2庫(kù)12.3上機(jī)實(shí)踐12.1 模板在創(chuàng)建網(wǎng)站時(shí)，為體現(xiàn)其專業(yè)性，要求創(chuàng)建的各網(wǎng)頁(yè)的風(fēng)格必須一致。例如，在某一特定位置顯示網(wǎng)站主題，在某一位置顯示網(wǎng)站圖標(biāo)等。這樣做可以使網(wǎng)頁(yè)的主題

2、更加明了，從而加深用戶對(duì)網(wǎng)頁(yè)的印象。但這個(gè)過(guò)程會(huì)包含大量的重復(fù)性操作，為解決之一問(wèn)題，Dreamweaver提供了模板功能，使用它能一次更新多個(gè)頁(yè)面，達(dá)到統(tǒng)一頁(yè)面格式的目的。模板是帶有固定特征和共同格式的文檔，是用戶批量產(chǎn)生文檔的起點(diǎn)。模板是一種比較特殊的文檔，擴(kuò)展名為.dwt。模板可以由專業(yè)設(shè)計(jì)人員設(shè)計(jì)生成，也可以自行定義。定義的模板中，相同部分為不可編輯狀態(tài)，而不同部分為可編輯狀態(tài)。12.1.1創(chuàng)建模板創(chuàng)建模板由兩種形式，一種是直接創(chuàng)建空白模板，另一種是將當(dāng)前網(wǎng)頁(yè)保存為模板文件。1.創(chuàng)建空白模板創(chuàng)建空白模板的操作步驟如下：1.選擇【窗口】-【資源】命令，打開(kāi)“資源”面板。單擊“資源”面板左

3、側(cè)的模板按鈕，打開(kāi)“模板”面板。3.“模板”面板的空白區(qū)域被分割為兩部分，上面的區(qū)域?yàn)槟０孱A(yù)覽區(qū)，用于預(yù)覽當(dāng)前所選擇的模板內(nèi)容；下面的區(qū)域?yàn)槟０辶斜韰^(qū)，顯示所有已經(jīng)創(chuàng)建的模板。4.單擊“模板”面板上右上角的下拉菜單，在彈出的下拉菜單中選擇“新建模板”命令，或單擊面板右下角的“新建模板”按鈕。5.此時(shí)，“模板”面板下方即創(chuàng)建了一個(gè)無(wú)標(biāo)題的空白模板。6.在“名稱”上單擊，使其處于可編輯狀態(tài)，輸入新模板名稱，按Enter鍵即可創(chuàng)建一個(gè)空白文檔。Tips:創(chuàng)建模板后，系統(tǒng)會(huì)自動(dòng)在本地站點(diǎn)目錄中添加一個(gè)名為T(mén)emplates的新目錄，然后將模板文件保存到此目錄中。注意不要將模板移動(dòng)到Templates文

4、件夾之外，或者將任何非模板文件放在Templates文件夾中；也不要將Templates文件夾移動(dòng)到本地根文件夾之外，否則會(huì)引起模板路徑錯(cuò)誤。2.將文件保存為模板將當(dāng)前文件保存為模板的操作步驟如下：1.打開(kāi)要保存為模板的網(wǎng)頁(yè)11-1.html素材見(jiàn)：光盤(pán)素材及效果web1111-1.html2.選擇【文件】-【另存為模板】命令，在彈出的“另存模板”對(duì)話框的“站點(diǎn)”下拉列表中選擇一個(gè)站點(diǎn)名稱；在“現(xiàn)存的模板”列表框中顯示的是當(dāng)前系統(tǒng)中存在的模板；在“另存為”文本框中輸入新建的模板名稱。3.單擊“保存”按鈕，即可創(chuàng)建一個(gè)模板，并且在窗口的左上角出現(xiàn)模板的名稱，如圖。11.1.2設(shè)計(jì)模板創(chuàng)建模板后，

5、還可對(duì)其進(jìn)行編輯操作或頁(yè)面設(shè)置。1.打開(kāi)資源面板，單擊其中的“模板”按鈕，打開(kāi)“模板”面板。在其中選擇要進(jìn)行編輯的空白模板。2.單擊右下角的“編輯”按鈕，打開(kāi)模板編輯窗口。3.此時(shí)即可在窗口中想設(shè)計(jì)網(wǎng)頁(yè)一樣設(shè)計(jì)模板，然后保存設(shè)計(jì)好的模板。設(shè)計(jì)好的模板修改后的效果2.設(shè)置模板文檔的頁(yè)面屬性創(chuàng)建了一個(gè)模板后，可以設(shè)置其頁(yè)面屬性，操作步驟如下：1.打開(kāi)模板文檔。選擇【修改】-【頁(yè)面屬性】命令，打開(kāi)“頁(yè)面屬性”對(duì)話框，如圖。2.設(shè)置模板文檔頁(yè)面屬性的方法與設(shè)置普通網(wǎng)頁(yè)文檔屬性的方法相同。3.設(shè)置完成后，單擊“確定”按鈕即可。12.1.3創(chuàng)建可編輯區(qū)域在Dreamweaver中，一開(kāi)始定義的模板是不可編

6、輯的，需要在制作模板時(shí)進(jìn)行設(shè)定才能進(jìn)行編輯。1.模板區(qū)域類(lèi)型在一個(gè)模板中，可定義的區(qū)域分為4種，即可編輯區(qū)域、可選區(qū)域、重復(fù)區(qū)域和可編輯標(biāo)記屬性。其中，后3種區(qū)域在實(shí)際工作中并不經(jīng)常使用。可編輯區(qū)域：指用戶可以進(jìn)行編輯的區(qū)域。在模板中，可以把圖像、文本、表格和層等任何元素設(shè)置為可編輯區(qū)域。要讓模板生效，它應(yīng)該至少包含一個(gè)可編輯區(qū)域，否則該模板的頁(yè)面將無(wú)法編輯?？蛇x區(qū)域：用來(lái)保存有可能在基于模板的文檔中出現(xiàn)的內(nèi)容，如文本或圖像。可選區(qū)域有設(shè)計(jì)者在模板中定義，應(yīng)用時(shí)則通常由內(nèi)容編輯器控制內(nèi)容是否顯示?？删庉媴^(qū)域重復(fù)區(qū)域：是可以根據(jù)需要在基于模板的頁(yè)面中復(fù)制多次的部分，通常應(yīng)用于表格，但也可以為其他

7、頁(yè)面元素定義重復(fù)區(qū)域?？删庉嫎?biāo)記屬性：使用戶可以在模板中解鎖標(biāo)記屬性。以該屬性可以在基于模板的頁(yè)面中編輯。2.定義可編輯區(qū)域可編輯區(qū)域是指在一個(gè)頁(yè)面中可以更改的部分。定義可編輯區(qū)的操作步驟如下：1.將光標(biāo)置于要插入可編輯區(qū)的位置。2.選擇【插入】-【模板對(duì)象】-【可編輯區(qū)域】命令，打開(kāi)“新建可編輯區(qū)域”對(duì)話框。3.在“名稱”文本框中輸入有關(guān)可編輯區(qū)域的說(shuō)明。4.設(shè)置完成后，單擊“確定”按鈕，即可將選擇的區(qū)域設(shè)為可編輯區(qū)域，如圖所示5.創(chuàng)建可編輯區(qū)域后，狀態(tài)欄上將出現(xiàn)標(biāo)簽項(xiàng)，如圖所示。在其上單擊可編輯區(qū)域按Delete鍵可以刪除可編輯區(qū)域。另外，選擇【修改】-【模板】-【刪除模板標(biāo)記】命令，也可

8、刪除可編輯區(qū)域。12.1.4應(yīng)用模板創(chuàng)建并設(shè)置了模板后，即可應(yīng)用模板。應(yīng)用模板有兩種方式，一種是從模板新建一個(gè)網(wǎng)頁(yè)，另一種是將模板應(yīng)用到有內(nèi)容的文檔中。1.從模板新建網(wǎng)頁(yè)通過(guò)模板新建網(wǎng)頁(yè)的具體操作步驟如下：（1）選擇【文件】-【新建】命令，打開(kāi)“新建文檔”對(duì)話框。（2）在左側(cè)的列表框中選擇“模板中的頁(yè)”選項(xiàng)，在“站點(diǎn)”列表框中選擇模板所在的站點(diǎn)，在“站點(diǎn)的模板”列表框中選擇用于創(chuàng)建文檔的模板，如圖所示。（3）單擊“創(chuàng)建”按鈕，即可創(chuàng)建一個(gè)應(yīng)用此模板的頁(yè)面。在模板中的可編輯區(qū)域輸入內(nèi)容后，保存網(wǎng)頁(yè)即可。如圖所示即為應(yīng)用模板得到的頁(yè)面效果。2.應(yīng)用到有內(nèi)容的文檔將模板直接應(yīng)用于已編輯了內(nèi)容的文檔的

9、操作步驟如下：（1）選擇【文件】-【新建】命令，打開(kāi)“新建文檔”對(duì)話框，新建一個(gè)HTML文檔，輸入文本或打開(kāi)一個(gè)含有文本的文檔（2）打開(kāi)“模板”面板，在其中選擇要應(yīng)用的模板文件，然后單擊左下角的“應(yīng)用”按鈕，彈出如圖所示的“不一致區(qū)域名稱”對(duì)話框。（3）在“將內(nèi)容移到新區(qū)域”下拉列表中選擇文檔所插入的位置，單擊“確定”按鈕。3.頁(yè)面與模板脫離使用了模板的文檔總會(huì)收到模板的限制，這樣對(duì)網(wǎng)頁(yè)的制作會(huì)產(chǎn)生一定的顯示。如果頁(yè)面與模板脫離，用戶可以任意修改可編輯區(qū)域和不可編輯區(qū)域的內(nèi)容。如果要讓使用了模板的文檔脫離模板的控制，可按以下方法操作。（1）打開(kāi)應(yīng)用了模板的文檔（2）選擇【修改】-【模板】-【從

10、模板沖分離】命令，則當(dāng)前文檔與模板分離。（3）此時(shí)文檔中的不可編輯區(qū)域?qū)⒆詣?dòng)變?yōu)榭删庉媴^(qū)域。文檔實(shí)際上已變?yōu)榱似胀ㄎ臋n，用戶可以對(duì)文檔的任何部分進(jìn)行編輯。11.1.5 管理模板在Dreamweaver中，可以對(duì)模板進(jìn)行重命名、刪除等操作。（1）重命名模板對(duì)模板文件進(jìn)行重命名操作的方法有：在模板列表框中，單擊要重新命名的模板項(xiàng)名稱，使其處于可編輯狀態(tài)，輸入文本即可單擊面板右上角的下拉按鈕，在彈出的下拉菜單中選擇【重命名】命令。選擇要重新命名的模板項(xiàng)名稱，單擊鼠標(biāo)右鍵，在彈出的快捷菜單選擇【重命名】命令。2.刪除模板刪除模板的方法有：在模板列表框中，單擊要?jiǎng)h除的模板項(xiàng)，單擊面板右下角的【刪除】按鈕

11、。單擊面板右上角的下拉按鈕，在彈出的下拉菜單中選擇【刪除】命令。選擇要?jiǎng)h除的模板項(xiàng)名稱，單擊鼠標(biāo)右鍵，在彈出的快捷菜單選擇【刪除】命令。12.2庫(kù)如果說(shuō)應(yīng)用模板是為了避免重復(fù)創(chuàng)建網(wǎng)頁(yè)的框架，那么應(yīng)用庫(kù)項(xiàng)目則是為了避免重復(fù)輸入網(wǎng)頁(yè)中的內(nèi)容。所謂庫(kù)項(xiàng)目，實(shí)際上就是文檔中的某些內(nèi)容的組合，如版權(quán)的聲明、郵箱、地址、電話等。在dreamweaver中，可以將文檔中的任意內(nèi)容存儲(chǔ)為庫(kù)項(xiàng)目，在網(wǎng)頁(yè)中定義了庫(kù)項(xiàng)目后，它就可以在其他網(wǎng)頁(yè)的任意位置被調(diào)用。12.2.1創(chuàng)建庫(kù)項(xiàng)目在Dreamweaver中，庫(kù)項(xiàng)目可以是文本、表格、表單等任意元素。創(chuàng)建庫(kù)項(xiàng)目的操作步驟：在網(wǎng)頁(yè)中選定要?jiǎng)?chuàng)建成庫(kù)項(xiàng)目的元素，如圖選擇【修

12、改】-【庫(kù)】-【增加對(duì)象到庫(kù)】命令，活在“資源”面板中單擊“庫(kù)”按鈕，打開(kāi)設(shè)置庫(kù)屬性的界面。單擊“新建庫(kù)項(xiàng)目”按鈕，即可在“庫(kù)”面板中辛苦庫(kù)項(xiàng)目，如圖。3.在“名稱”列下輸入庫(kù)項(xiàng)目的名稱，按enter鍵即可。12.2.2編輯庫(kù)項(xiàng)目創(chuàng)建庫(kù)項(xiàng)目后，還可以對(duì)庫(kù)項(xiàng)目進(jìn)行更新、重命名、刪除等操作。下面分別介紹。1.庫(kù)項(xiàng)目的更新（1）選擇【修改】-【庫(kù)】-【更新頁(yè)面】命令，打開(kāi)“更新頁(yè)面”對(duì)話框，如圖所示。（2）在“查看”下拉列表中選擇需要的選項(xiàng)。（3）選擇“庫(kù)項(xiàng)目”復(fù)選框，可以更新站點(diǎn)中的所有庫(kù)項(xiàng)目。（4）選擇“模板”復(fù)選框，可以更新站點(diǎn)中的所有模板。（5）設(shè)置完成后，單擊“開(kāi)始”按鈕即可更新庫(kù)項(xiàng)目2.重命名庫(kù)項(xiàng)目重命名庫(kù)項(xiàng)目重命名庫(kù)項(xiàng)目名稱的操作：（1）在“庫(kù)”面板上選擇要重命名的庫(kù)項(xiàng)目。（2）執(zhí)行下列操作之一，輸入新名稱即可單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【重命名】命令。單擊“庫(kù)”面板右上角的下拉按鈕，從中選擇【重命名】命令。單擊庫(kù)項(xiàng)目，庫(kù)項(xiàng)目可變成可編輯狀態(tài)。3.刪除庫(kù)項(xiàng)目刪除庫(kù)項(xiàng)目：在“庫(kù)”面板上選擇要?jiǎng)h除的庫(kù)項(xiàng)目單擊面板右下角的“刪除”按鈕。12.2.3應(yīng)用庫(kù)項(xiàng)目創(chuàng)建好庫(kù)項(xiàng)目后，即可在網(wǎng)頁(yè)制作過(guò)程中對(duì)其進(jìn)行應(yīng)用。（1）打開(kāi)一個(gè)網(wǎng)頁(yè)，在“資源”面板中選擇要應(yīng)用的庫(kù)項(xiàng)目，如圖。（2）單擊“庫(kù)”面板左下角的“插入”按鈕，即可