第6章 模板和庫在網(wǎng)頁中的應(yīng)用

第6章模板和庫在網(wǎng)頁中的應(yīng)用主要內(nèi)容模板和庫的概念及作用。模板的創(chuàng)建、編輯及管理使用模板進(jìn)行頁面設(shè)計和管理庫項目的創(chuàng)建、編輯及管理使用庫項目進(jìn)行頁面設(shè)計和管理6.1模板和庫概述

6.1.1模板模板是一種特殊的頁面文檔，當(dāng)需要制作某種帶有共同格式和特征的文檔時，可以首先設(shè)計一個模板文檔，然后利用模板文檔設(shè)計制作其他的網(wǎng)頁。例如：對于商業(yè)站點，大多數(shù)文檔上通常會出現(xiàn)相同的內(nèi)容，如公司的徽標(biāo)和公司的名稱等。在編輯網(wǎng)頁時，如果在每個文檔中都重復(fù)添加這些內(nèi)容，則顯得既麻煩，又容易出錯。如果將這些格式存儲為模板，再通過該模板創(chuàng)建新文檔，所生成的新文檔中會自動出現(xiàn)這些共有內(nèi)容，這樣，在設(shè)計制作網(wǎng)頁時，只需編輯文檔中不同的內(nèi)容就行了。6.1模板和庫概述

6.1.2庫庫是通過Dreamweaver庫技術(shù)生成的一類特殊資源，構(gòu)成庫的資源稱為庫項目。每一個庫項目都是Web站點的頁面元素。當(dāng)把站點頁面的某個元素設(shè)置為庫的一個項目后，通過庫技術(shù)改變該項目內(nèi)容后，所有使用該項目的頁面都可以自動更新。對于Web站點中需要重復(fù)使用或頻繁更新的某些頁面元素，通常使用庫技術(shù)進(jìn)行設(shè)計和管理。6.1模板和庫概述

6.1.3模板與庫的功能比較模板和庫都是批量制作和管理網(wǎng)頁的技術(shù)。模板主要針對網(wǎng)頁的版式進(jìn)行設(shè)計，利用模板可以快速設(shè)計出版式相同或相近的頁面。庫主要針對頁面的某些元素設(shè)計，利用庫項目可以對不同頁面的相同網(wǎng)頁元素進(jìn)行管理。模板規(guī)定了網(wǎng)頁中不可編輯的頁面內(nèi)容，這些頁面內(nèi)容將呈現(xiàn)在關(guān)聯(lián)頁面的相同的位置，如利用圖6-5的模板生成的所有網(wǎng)頁，其鎖定的區(qū)域在所有網(wǎng)頁中均出現(xiàn)的位置是不變的。對于庫項目，在網(wǎng)頁中沒有固定的位置，一個庫項目在頁面中使用時，可以出現(xiàn)在任何位置上；也可以在一個頁面中多次使用同一個庫項目。如果將模板中的頁面元素設(shè)為庫項目，則更改該庫項目后，使用該模板的所有頁面都可能更新。6.2.1模板的創(chuàng)建與編輯1．創(chuàng)建模板⑴打開要創(chuàng)建為模板的文檔。若要利用已有文檔創(chuàng)建模板，則打開要創(chuàng)建模板的文檔；若要從新建的空文檔創(chuàng)建模板，則使用“文件/新建”菜單，打開一個新的空文檔。⑵將當(dāng)前文檔另存為模板。使用“文件/另存為模板”菜單，打開“另存為模板”對話框，從“站點”彈出式菜單中選擇一個用來保存模板的站點，并在“另存為”文本框中為模板輸入新建模板名稱。⑶保存模板。6.2.1模板的創(chuàng)建與編輯說明：⑴Dreamweaver

將模板文件保存在站點的本地根文件夾中的Templates文件夾中，使用文件擴(kuò)展名.dwt。⑵當(dāng)另存為模板的文檔含有超鏈接時，將更新已有的鏈接。⑶使用Dreamweaver的資源面板也可以創(chuàng)建模板。單擊“資源”面板底部的“新建模板”按鈕，一個新的、無標(biāo)題模板即空模板將被添加到“資源”面板的模板列表中。6.2.1模板的創(chuàng)建與編輯2．打開模板⑴按照打開普通文檔的方法打開模板。站點中所有的模板存儲在Templates文件夾中，它們帶有.dwt的擴(kuò)展名。只要從站點窗口中選中要編輯的模板項，雙擊其圖標(biāo)，即可啟動Templates的文檔窗口，載入模板文件。⑵在模板面板中打開模板。打開模板面后，當(dāng)前站點中所有的模板都將顯示在模板文檔列表中。選中要編輯的模板，雙擊模板項，或是單擊模板面板右下角的編輯鈕，即可啟動Dreamweaver的文檔窗口，載入模板文件。6.2.1模板的創(chuàng)建與編輯3．設(shè)置模板的可編輯區(qū)域⑴在模板文檔中插入新的可編輯區(qū)域①打開模板文件，然后將插入點放置在要標(biāo)記為可編輯區(qū)域的位置。②選擇“插入/模板對象/可編輯區(qū)域”或使用插入工具欄的模板按鈕，顯示“新建可編輯區(qū)域”對話框。③在“名稱”文本框中輸入可編輯區(qū)域的名稱，“確定”后即可創(chuàng)建可編輯區(qū)域。⑵將現(xiàn)有內(nèi)容標(biāo)記為可編輯區(qū)域。選中模板中文檔的文字、圖像或?qū)拥葍?nèi)容后，施行如上所述的建立可編輯區(qū)域操作，即可將選中對象標(biāo)記為可編輯區(qū)域6.2.1模板的創(chuàng)建與編輯4.取消對可編輯區(qū)域的標(biāo)記按照如下方法，取消對某個可編輯區(qū)域的標(biāo)記：⑴在文檔或標(biāo)簽選擇器中，選擇想要更改的可編輯區(qū)域。⑵選擇“修改/模板/刪除模板標(biāo)記”菜單。經(jīng)過上述操作的可編輯區(qū)域，即被重新設(shè)置為鎖定區(qū)域。6.2.2模板的管理1.在站點窗口中查找模板文件⑴在模板面板中的模板列表中，選擇要查找的模板。⑵單擊模板面板右上角的三角形按鈕，打開面板菜單，選擇“在站點定位”命令后，則自動切換到站點窗口中，同時打開相應(yīng)的文件夾，并選中該模板對應(yīng)的文件。6.2.2模板的管理2.重命名模板要重命名模板，一般采用如下的方法：⑴在模板面板中的模板列表中，單擊要重新命名的模板項名稱，即可激活其文本編輯狀態(tài)；也可以單擊面板右上角的三角形按鈕，打開面板菜單，然后選擇“重命名”命令，同樣會激活其文本編輯狀態(tài)。⑵輸入需要的新名稱。⑶單擊模板名稱區(qū)域外任意位置，或是按下回車鍵，即可重新命名模板。6.2.2模板的管理3.刪除模板⑴在模板面板的模板列表中，選中要刪除的模板項。⑵單擊面板右上角的三角形按鈕，打開面板菜單，然后選擇“刪除”命令，或直接單擊模板面板右下角的刪除按鈕。6.2.3應(yīng)用模板1．創(chuàng)建基于模板的文檔⑴選擇“文件/新建”菜單，打開“新建文檔”對話框，然后單擊“模板”選項卡，顯示“從模板新建”對話框。⑵在“模板用于”列表中，選擇包含要使用的模板的Dreamweaver站點，然后從右側(cè)的列表中選擇一個模板。⑶單擊“創(chuàng)建”按鈕后，即可啟動一個新的Dreamweaver文檔窗口，并根據(jù)模板創(chuàng)建新的文檔。6.2.3應(yīng)用模板也可以通過資源面板，建立基于模板的文檔。一般過程如下：⑴打開資源面板，打開模板窗口。⑵在模板列表中選擇模板后打開命令菜單，使用“從模板新建”命令。此時即打開如圖6-18所示基于模板建立文檔的窗口。⑶施行編輯操作，建立新文檔。6.2.3應(yīng)用模板2.在現(xiàn)有文檔上應(yīng)用模板在現(xiàn)有文檔上應(yīng)用模板的一般方法如下：⑴打開要應(yīng)用模板的現(xiàn)有文檔。⑵在模板面板上的模板列表中，選中要應(yīng)用的模板。⑶執(zhí)行如下操作之一完成操作：①單擊“應(yīng)用”按鈕；②打開面板菜單，選擇“應(yīng)用”命令；③直接從模板面板上，將需要的模板拖動到文檔窗口中。說明：當(dāng)對現(xiàn)有的文檔應(yīng)用模板時，文檔和模板在區(qū)域上應(yīng)有一定的對應(yīng)關(guān)系，否則，模板在文檔中將不能正常應(yīng)用。6.2.3應(yīng)用模板3．從模板分離文檔若要更改基于模板的文檔的鎖定區(qū)域，必須將該文檔從模板分離。將文檔分離之后，整個文檔都將變?yōu)榭删庉嫷?。從模板分離文檔的一般操作如下：⑴打開想要分離的基于模板的文檔。⑵選擇“修改/模板/從模板中分離”菜單。6.2.3應(yīng)用模板4．修改模板和更新站點⑴打開文檔的附加模板①打開附著模板的文檔。②使用“修改/模板/打開附加模板”菜單。③這時會啟動Dreamweaver的文檔窗口，并載入相應(yīng)的模板。此時可對模板進(jìn)行編輯。6.2.3應(yīng)用模板4．修改模板和更新站點⑵更新當(dāng)前頁如果希望對某個文檔進(jìn)行更新，可以采用如下的方法：①打開文檔附著的模板，按照需要進(jìn)行修改，并保存。②打開要更新的文檔。③使用“修改/模板/更新當(dāng)前頁”菜單。這時當(dāng)前文檔的風(fēng)格就被更新了，也即重新應(yīng)用了修改后的模板。6.2.3應(yīng)用模板4．修改模板和更新站點⑶更新整個站點如果希望將整個站點中應(yīng)用同一模板的文檔進(jìn)行批量更新，可以按照如下方法進(jìn)行操作：①打開相應(yīng)的模板，按照需要進(jìn)行修改，并保存。②在文檔窗口中，打開“修改/模板/更新頁面”菜單。這時會出現(xiàn)“更新頁面”對話框，提示選擇更新方式。③在“查看”下拉列表框中，設(shè)置更新的范圍。當(dāng)選用“整個站點”選項時，則對整個站點中所有的文檔進(jìn)行更新。6.2.3應(yīng)用模板5．導(dǎo)入和導(dǎo)出XML內(nèi)容XML是可擴(kuò)展標(biāo)記語言（ExtensibleMarkupLanguage），它是一種結(jié)構(gòu)化文檔的標(biāo)記語言,它允許根據(jù)需要按照某種規(guī)范自行定義語言標(biāo)記。⑴導(dǎo)出XML檔①打開通過模板建立的文檔，在其中包含相應(yīng)的可編輯區(qū)域。②使用“文件/導(dǎo)出/作為XML的數(shù)據(jù)模板”菜單，打開對話框，選擇導(dǎo)出可編輯區(qū)域時使用的標(biāo)記方式，然后按“確定”按鈕。③在出現(xiàn)的Windows標(biāo)準(zhǔn)文件操作對話框中，選擇要保存的文件文件夾，輸入要生成的XML文件名稱，保存后，即將現(xiàn)有文檔導(dǎo)出為XML文檔。6.2.3應(yīng)用模板⑵導(dǎo)入XML文檔導(dǎo)入XML文檔的一般操作過程如下：①在Dreamweaver環(huán)境中選擇“文件/導(dǎo)入/XML到模板”菜單，打開圖6-23所示對話框。②選中要導(dǎo)入的XML文件，單擊“打開”按鈕，即可導(dǎo)入XML文檔。在導(dǎo)入XML文檔時，Dreamweaver會將XML文檔內(nèi)容同XML中指定的模板相融合，并在一個新的Dreamweaver窗口中顯示它。6.2.4模板應(yīng)用示例示例：應(yīng)用模板技術(shù)完成如下設(shè)計。⑴設(shè)計如前所述“五岳攬勝”的一組頁面。⑵將所有網(wǎng)頁中右上部區(qū)域的“五岳覽勝”更換為“會當(dāng)凌絕頂，一覽眾山小”6.2.4模板應(yīng)用示例設(shè)計過程如下：1．利用模板設(shè)計頁面⑴制作模板。⑵設(shè)定可編輯區(qū)域。⑶對page_1.html文檔應(yīng)用模板page.dwt。⑷利用模板設(shè)計“五岳覽勝”的系列頁面。2．利用模板批量更新頁面⑴修改page.dwt模板。利用資源面板打開page.dwt模板，將右上部區(qū)域的“五岳覽勝”更換為“會當(dāng)凌絕頂，一覽眾山小”，按保存按鈕。⑵更新頁面。保存page.dwt模板文檔后，選擇“更新”基于該模板的所有文件模式，更新“五岳覽勝”的所有頁面。6.3庫的應(yīng)用

6.3.1創(chuàng)建庫項目1．基于文檔內(nèi)容創(chuàng)建項目可以將單獨的文檔對象創(chuàng)建為庫項目，也可以將多個文檔對象的組合創(chuàng)建為庫項目。⑴打開要創(chuàng)建項目的文檔，打開資源面板，選擇庫類別。⑵在文檔窗口中，選擇要保存為庫項目的內(nèi)容，然后將選中的內(nèi)容拖動到庫面板的庫項目列表區(qū)中。⑶拖動內(nèi)容到項目區(qū)后松開鼠標(biāo)。⑷修改默認(rèn)項目文件名稱，命名庫項目文件，完成項目的創(chuàng)建。6.3.1創(chuàng)建庫項目建立庫項目的其他方法以下任何一種方法都可創(chuàng)建庫項目：①在文檔窗口中選擇內(nèi)容后，單擊庫面板的新建庫項目按鈕；②在文檔窗口中選擇內(nèi)容后，單擊庫面板右上角的三角形按鈕，打開面板菜單，使用庫面板的“新建庫項”命令；③在文檔窗口中選擇內(nèi)容后，使用Dreamweaver的“修改/庫/增加對象到庫”菜單。6.3.1創(chuàng)建庫項目2．創(chuàng)建空白庫項目基于文檔內(nèi)容創(chuàng)建項目時需要在文檔中選定內(nèi)容，而創(chuàng)建空白庫項目時則不能選定任何內(nèi)容。一般過程如下：⑴確保沒有在“文檔”窗口中選擇任何內(nèi)容。如果選擇了內(nèi)容，則該內(nèi)容將被放入新的庫項目中。⑵在庫面板中，單擊新建庫項目按鈕。此時一個新的、無標(biāo)題的庫項目將被添加到庫項目列表中。⑶在項目仍然處于選定狀態(tài)時，為該項目輸入一個名稱，然后按Enter鍵。空白庫項目創(chuàng)建后，即可打開庫項目文檔的編輯窗口，對該庫項目進(jìn)行編輯。6.3.2管理庫項目1.在站點窗口中查找?guī)祉椖课募覀冎溃军c中的庫項目文件都存儲在站點目錄中的“Library”文件夾中，利用如下的方法，可以從站點窗口中快速查找相應(yīng)的庫項目文件：⑴在庫項目面板中選中要查找的庫項目。⑵單擊面板右上角的三角形按鈕，打開面板菜單。⑶選擇“在站點中定位”命令，這時會自動切換到站點窗口中，同時打開相應(yīng)的文件夾，并選中該庫項目對應(yīng)的文件。6.3.2管理庫項目2.重命名庫項目要對庫項目重新命名，可以按照如下方法進(jìn)行操作：⑴從庫面板的庫項目列表中選中要重新命名的庫項目。⑵在要重新命名的庫項目項名稱上單擊一次鼠標(biāo)，即可激活其文本編輯狀態(tài)；也可以打開面板菜單，再選擇“重命名”命令，同樣會激活其文本編輯狀態(tài)。⑶輸入新名稱。⑷設(shè)置完畢，單擊庫項目文字編輯區(qū)之外任意位置，或是按下回車鍵，即可完成對庫項目的重命名。6.3.2管理庫項目3.刪除庫項目要刪除庫項目，可以采用如下方法：⑴從庫面板中的庫項目列表中，選中要刪除的庫項目項。⑵單擊面板右上角的三角形按鈕，打開面板菜單，然后選擇“刪除”命令，或是直接單擊面板右下角的刪除庫項目按鈕。這時Dreamweaver會打開一個刪除確認(rèn)對話框，確認(rèn)后，庫項目將被刪除。6.3.3應(yīng)用庫項目1．在文檔中插入庫項目在文檔中插入庫項目的一般過程如下：⑴在文檔窗口中，將插入點放置到要插入庫項目的位置。⑵從庫項目面板上的庫項目列表中選擇要插入的庫項目。⑶單擊庫項目面板上的“插入”按鈕，或?qū)祉椖繌膸烀姘逯型蟿拥轿臋n窗口中。6.3.3應(yīng)用庫項目2．編輯庫項目⑴在庫面板中選擇要編輯的庫項目。⑵單擊面板底部的編輯按鈕或雙擊庫項目。⑶Dreamweaver將打開一個用于編輯該庫項目的新窗口，并載入相應(yīng)的庫項目內(nèi)容。此時，在文檔窗口的標(biāo)題欄上，會顯示“<<庫項目>>”字樣，同時窗口的背景以灰色顯示。⑷按照正常的文檔編輯方法，對庫項目內(nèi)容之進(jìn)行編輯。編輯完畢，需要將庫項目文檔保存。此時將出現(xiàn)圖6-32所示“更新庫項目”對話框。選擇“更新”將更新本地站點中所有包含編輯過的庫項目的文檔；選擇“不更新”將不更改任何文檔，直到使用“修改/庫/更新當(dāng)前頁”或“更新頁面”才進(jìn)行更改6.3.3應(yīng)用庫項目3.更新頁面更新整個站點或所有使用特定庫項目的文檔⑴選擇“修改/庫/更新頁面”菜單，打開“更新頁面”對話框。⑵在“查看”彈出式菜單中執(zhí)行下列操作之一：①選擇“整個站點”，然后選擇站點名稱。則更新所選站點中的所有頁面。②選擇“文件使用”，然后選擇庫項目名稱。則更新當(dāng)前站點中所有使用所選庫項目的頁面。③確保在“更新”選項中選擇了“庫項目”，然后單擊“開始”按鈕。只更改當(dāng)前文檔，以使用所有庫項目的當(dāng)前版本選擇“修改/庫/更新當(dāng)前頁”即可。6.3.3應(yīng)用庫項目4．將文檔中的庫項目內(nèi)容同庫項目分開在文檔窗口中插入的庫項目內(nèi)容是作為一個整體存