《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》第9章 模板、庫(kù)和資源管理

第9章模板、庫(kù)和資源管理9.1案例1創(chuàng)建基于模板的網(wǎng)頁(yè)9.2學(xué)習(xí)任務(wù)：使用庫(kù)項(xiàng)目9.3學(xué)習(xí)任務(wù)：資源管理9.4上機(jī)實(shí)訓(xùn)9.1案例1創(chuàng)建基于模板的網(wǎng)頁(yè)9.1.1模板簡(jiǎn)介9.1.2創(chuàng)建模板9.1.3定義模板的可編輯區(qū)域9.1.4創(chuàng)建基于模板的文檔9.1.5在現(xiàn)有文檔上應(yīng)用模板9.1.6編輯模板9.1.7從模板中分離文檔9.1.8更新基于模板的頁(yè)面9.1.1模板簡(jiǎn)介在制作一個(gè)站點(diǎn)時(shí)，往往需要建立外觀及部分內(nèi)容相同的大量網(wǎng)頁(yè)，使站點(diǎn)具有統(tǒng)一的風(fēng)格。如果逐一創(chuàng)建、修改，會(huì)很費(fèi)力，效率不高，而且整個(gè)站點(diǎn)很難做到有統(tǒng)一的外觀及結(jié)構(gòu)，借助Dreamweaver中的模板功能就可以輕松地解決這個(gè)問(wèn)題。模板的作用就如同現(xiàn)實(shí)生活中生產(chǎn)產(chǎn)品的樣本模子，通過(guò)模子可以生產(chǎn)大批量相同規(guī)格的產(chǎn)品。網(wǎng)頁(yè)模板的主要功能是把網(wǎng)頁(yè)布局和內(nèi)容分離，在布局設(shè)計(jì)好之后將其保存為模板，相同布局的頁(yè)面可以通過(guò)模板創(chuàng)建，然后對(duì)基于該模板的頁(yè)面進(jìn)行內(nèi)容的具體編輯，從而形成風(fēng)格一致而內(nèi)容不同的頁(yè)面。通過(guò)模板創(chuàng)建的網(wǎng)頁(yè)與該模板保持連接狀態(tài)（除非用戶(hù)對(duì)其分離），修改模板即可立即更新基于該模板的所有網(wǎng)頁(yè)文檔。模板由可編輯區(qū)域和不可編輯區(qū)域兩部分組成。不可編輯區(qū)域包含所有頁(yè)面的共同元素，即構(gòu)成頁(yè)面的基本框架，稱(chēng)為鎖定區(qū)域。鎖定區(qū)域主要用來(lái)鎖定體現(xiàn)網(wǎng)站風(fēng)格部分，包括網(wǎng)頁(yè)背景、導(dǎo)航菜單、網(wǎng)站標(biāo)志等內(nèi)容，鎖定區(qū)域的內(nèi)容只能在模板中編輯?？删庉媴^(qū)域就是該區(qū)域的相應(yīng)內(nèi)容在基于模板創(chuàng)建的頁(yè)面中是可以編輯的，常用來(lái)定義網(wǎng)頁(yè)的具體內(nèi)容，是區(qū)別網(wǎng)頁(yè)之間最明顯的標(biāo)志。提示：在默認(rèn)情況下，新創(chuàng)建的模板所有區(qū)域都處于被鎖定狀態(tài)，因此，要使模板創(chuàng)建的頁(yè)面能進(jìn)行修改，必須將模板中的某些區(qū)域設(shè)置為可編輯區(qū)域。圖9-1創(chuàng)建基于模板的網(wǎng)頁(yè)之一圖9-2創(chuàng)建基于模板的網(wǎng)頁(yè)之二9.1.2創(chuàng)建模板創(chuàng)建模板有兩種方式：可以直接創(chuàng)建空白模板，也可以把現(xiàn)有的HTML文檔存儲(chǔ)為模板，再通過(guò)適當(dāng)?shù)男薷氖怪弦蟆Ｓ捎谥谱骰谀０宓木W(wǎng)頁(yè)需要在站點(diǎn)中操作，所以，在創(chuàng)建模板之前先創(chuàng)建站點(diǎn)。Dreamweaver將模板文件保存在站點(diǎn)的本地根文件夾中的Templates文件夾中，模板文件的擴(kuò)展名.dwt。如果該Templates文件夾在站點(diǎn)中尚不存在，Dreamweaver將在保存新建模板時(shí)自動(dòng)創(chuàng)建一個(gè)Templates子文件夾。1．創(chuàng)建空模板方法一：通過(guò)“資源”面板創(chuàng)建空模板。在打開(kāi)的Dreamweaver文檔窗口中，選擇“窗口→資源”命令打開(kāi)“資源”面板，單擊面板左側(cè)的“模板”類(lèi)別，右側(cè)則顯示模板列表，如圖9-3所示。單擊面板最下方的【新建模板】按鈕，創(chuàng)建空模板。此時(shí)，新的模板添加到“資源”面板的“模板”列表中，然后為新建的模板命名，如圖9-4所示。方法二：在“資源”面板的“模板”列表中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建模板”命令，如圖9-5所示。圖9-3“資源”面板圖9-4新創(chuàng)建的空白模板圖9-5“新建模板”菜單方法三：使用菜單命令創(chuàng)建空模板。選擇“文件→新建”命令，彈出“新建文檔”對(duì)話框，如圖9-6所示，在“類(lèi)別”欄中選擇“空模板”，在“模板類(lèi)型”欄中選擇需要的模板類(lèi)型，如選擇“HTML模板”，在“布局”欄中選擇模板的頁(yè)面布局，在窗口最右端會(huì)顯示模板的預(yù)覽效果，單擊【創(chuàng)建】按鈕。布局好版面內(nèi)容后，選擇“文件→保存”命令，在打開(kāi)的“另存模板”對(duì)話框中，指定用于保存模板的站點(diǎn)、模板名，單擊【保存】按鈕即可創(chuàng)建一個(gè)空模板文件。圖9-6“新建文檔”對(duì)話框提示：對(duì)新建模板，最好立即將模板文件保存，以確保模板網(wǎng)頁(yè)在制作時(shí)對(duì)于插入圖像、制作鏈接等涉及文件路徑方面的操作正確。2．將現(xiàn)有文檔轉(zhuǎn)化為模板具體操作如下：1）首先在Dreamweaver中打開(kāi)已有的網(wǎng)頁(yè)文檔，本例打開(kāi)的是第5章中介紹過(guò)的“我的書(shū)屋”，如圖9-7所示的網(wǎng)頁(yè)。2）選擇“文件→另存為模板”命令，或者單擊“插入”面板“常用”標(biāo)簽中的“模板”下拉列表按鈕，在彈出的列表中選擇“創(chuàng)建模板”按鈕，打開(kāi)“另存模板”對(duì)話框，在該對(duì)話框中的“站點(diǎn)”下拉列表中選擇站點(diǎn)名稱(chēng)，在“另存為”文本框中輸入模板名稱(chēng)“bookroom”，單擊【保存】按鈕保存模板。新建的模板就會(huì)出現(xiàn)在“資源”面板中，如圖9-8所示。提示：不要將保存的模板移動(dòng)到Templates文件夾之外，或者將任何非模板文件放在Templates文件夾中，也不要將Templates文件夾移動(dòng)到本地根文件夾之外，否則會(huì)出現(xiàn)錯(cuò)誤。圖9-7打開(kāi)的網(wǎng)頁(yè)文件圖9-8新建的模板文件9.1.3定義模板的可編輯區(qū)域創(chuàng)建模板后，網(wǎng)站設(shè)計(jì)者需要根據(jù)用戶(hù)的需求對(duì)模板的內(nèi)容進(jìn)行編輯，指定哪些內(nèi)容是可以編輯的，哪些內(nèi)容是不可以編輯的。在默認(rèn)情況下，新創(chuàng)建的模板所有區(qū)域都處于被鎖定狀態(tài)。因此，要使用模板，必須將模板中的某些區(qū)域設(shè)置為可編輯區(qū)域。具體操作步驟：1）在“資源”面板的“模板”列表中選擇已有的“bookroom”模板，單擊控制面板右下方的“編輯”按鈕或雙擊模板名后，就可以在文檔窗口中編輯該模板了。2）在文檔窗口中選擇要設(shè)置為可編輯區(qū)域的文本或內(nèi)容，選擇以下方法之一啟用“新建可編輯區(qū)域”對(duì)話框，如圖9-9所示。選擇“插入→模板對(duì)象→可編輯區(qū)域”菜單命令。單擊“插入”面板“常用”標(biāo)簽中的“模板”下拉列表按鈕，在彈出的列表中選擇“可編輯區(qū)域”按鈕。在文檔窗口中單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“模板→新建可編輯區(qū)域”命令。3）在“新建可編輯區(qū)域”對(duì)話框的“名稱(chēng)”后面為可編輯區(qū)域命名，這里使用的名稱(chēng)是“EditRegion1”，單擊【確定】按鈕創(chuàng)建了可編輯區(qū)域。創(chuàng)建的可編輯區(qū)域在模板中用高亮顯示的矩形框圍繞，在矩形框左上角的標(biāo)簽中顯示出該區(qū)域的名稱(chēng)，如圖9-10所示。圖9-9“新建可編輯區(qū)域”對(duì)話框圖9-10定義的可編輯區(qū)域4）用同樣的方法，在模板中為右側(cè)的區(qū)域定義可編輯區(qū)域，如圖9-11所示。需要注意的是，同一網(wǎng)頁(yè)中，每個(gè)可編輯區(qū)域必須使用不同的名稱(chēng)，名稱(chēng)不能使用“”、單引號(hào)、小于號(hào)、大于號(hào)及“&”等特殊字符?？梢詫⒄麄€(gè)表格或單獨(dú)的表格單元格標(biāo)志為可編輯的，但不能將多個(gè)表格單元格標(biāo)志為單個(gè)可編輯區(qū)域。如果要使用APDiv，其本身與APDiv中的內(nèi)容是不同的元素，將APDiv定義為可編輯區(qū)域時(shí)，只能改變?cè)揂PDiv的位置，而不能修改APDiv中的內(nèi)容，只有將APDiv圖9-11定義的2個(gè)可編輯區(qū)域中的內(nèi)容定義為可編輯區(qū)域時(shí)，才可以修改APDiv中的內(nèi)容。如果重新鎖定已經(jīng)定義的某個(gè)可編輯區(qū)域，單擊可編輯區(qū)域左上角的標(biāo)簽將其選中，選擇“修改→模板→刪除模板標(biāo)記”命令可取消可編輯區(qū)域。9.1.4創(chuàng)建基于模板的文檔創(chuàng)建模板后，接下來(lái)就是基于模板創(chuàng)建新的網(wǎng)頁(yè)文檔。以模板為基礎(chǔ)創(chuàng)建新的網(wǎng)頁(yè)文檔有兩種方法：一種是使用“新建”命令創(chuàng)建基于模板的新文檔；另一種是應(yīng)用“資源”控制面板中的模板來(lái)創(chuàng)建基于模板的網(wǎng)頁(yè)。1．使用新建命令創(chuàng)建基于模板的新文檔1）選擇“文件→新建”命令，打開(kāi)“新建文檔”對(duì)話框，單擊“模板中的頁(yè)”標(biāo)簽，在“站點(diǎn)”選項(xiàng)框中選擇本網(wǎng)站的站點(diǎn)，從右側(cè)的選項(xiàng)欄中選擇一模板文件，如圖9-12所示。單擊【創(chuàng)建】按鈕創(chuàng)建基于模板的新文檔。2）在基于模板的新網(wǎng)頁(yè)文檔中，分別選中各個(gè)可編輯區(qū)域，然后向各個(gè)可編輯區(qū)域內(nèi)添加新的網(wǎng)頁(yè)內(nèi)容。圖9-12“新建文檔”對(duì)話框3）添加完畢，單擊“文件→保存”命令，保存創(chuàng)建的網(wǎng)頁(yè)文檔，按下〈F12〉鍵預(yù)覽網(wǎng)頁(yè)效果，基于模板的網(wǎng)頁(yè)效果如圖9-1所示。2．應(yīng)用“資源”控制面板中的模板創(chuàng)建基于模板的網(wǎng)頁(yè)1）新建一個(gè)HTML文檔。在“資源”面板中，單擊左側(cè)的“模板”類(lèi)別，從模板列表中選擇相應(yīng)的模板，然后單擊控制面板下面的【應(yīng)用】按鈕，即在文檔中應(yīng)用了選擇的模板。2）向各個(gè)可編輯區(qū)域內(nèi)添加新的網(wǎng)頁(yè)內(nèi)容。添加完畢，單擊“文件→保存”命令，保存新創(chuàng)建的文檔。3）按下〈F12〉鍵預(yù)覽網(wǎng)頁(yè)效果?；谀０宓木W(wǎng)頁(yè)效果如圖9-2所示。9.1.5在現(xiàn)有文檔上應(yīng)用模板在DreamweaverCS4中，可以在現(xiàn)有文檔上應(yīng)用已創(chuàng)建好的模板。具體方法：打開(kāi)現(xiàn)有的普通HTML文檔，單擊“修改→模板→應(yīng)用模板到頁(yè)”命令菜單，彈出“選擇模板”對(duì)話框，選中創(chuàng)建的模板，單擊【選定】按鈕，如圖9-13所示。此時(shí)，模板應(yīng)用到現(xiàn)有文檔中，替換了文檔中原有的內(nèi)容。需要注意的是，如果現(xiàn)有文檔是從某個(gè)模板中派生出來(lái)的，DreamweaverCS4會(huì)對(duì)兩個(gè)模板的可編輯區(qū)域進(jìn)行比較，然后在應(yīng)用新模板之后，將原文檔中的內(nèi)容放入到匹配的可編輯區(qū)域中。如果現(xiàn)有文檔是一個(gè)尚未應(yīng)用過(guò)模板的文檔，將沒(méi)有可編輯區(qū)域，同模板進(jìn)行比較，于是會(huì)出現(xiàn)不匹配情況，此時(shí)將打開(kāi)“不一致的區(qū)域名稱(chēng)”對(duì)話框，如圖9-14所示。這時(shí)可以選擇刪除或保留不匹配的內(nèi)容，決定是否將文檔應(yīng)用于新模板?？梢赃x擇未解析的內(nèi)容，然后在“將內(nèi)容移到新區(qū)域”下拉列表框中選擇要應(yīng)用到的區(qū)域內(nèi)容。另外，也可以在“資源”面板中，選擇左側(cè)的“模板”類(lèi)別，在模板列表中選中需要應(yīng)用的模板，單擊面板下方的【應(yīng)用】按鈕，即可在現(xiàn)有文檔上應(yīng)用模板。圖9-13“選擇模板”對(duì)話框圖9-14“不一致的區(qū)域名稱(chēng)”對(duì)話框9.1.6編輯模板1．重命名模板文件具體方法：選擇“窗口→資源”命令，打開(kāi)“資源”面板，單擊左側(cè)的“模板”類(lèi)別，面板右側(cè)顯示本站點(diǎn)的模板列表。在模板列表中，選中需要重命名的模板，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“重命名”命令，然后為模板輸入一個(gè)新名稱(chēng)。按下〈Enter〉鍵重命名生效，此時(shí)彈出“更新文件”對(duì)話框，如圖9-15所示。如果更新網(wǎng)站中所有基于此模板的網(wǎng)頁(yè)，單擊【更新】按鈕，否則選擇【不更新】按鈕。圖9-15“更新文件”對(duì)話框2．修改模板文件修改模板的具體方法：打開(kāi)“資源”面板，單擊面板左側(cè)的“模板”類(lèi)別，在面板右側(cè)的模板列表中，雙擊要修改的模板文件將其打開(kāi)，根據(jù)需要修改模板內(nèi)容。因?yàn)槟０搴蛻?yīng)用了模板的文檔之間保持著鏈接的關(guān)系，所以，將修改后的模板進(jìn)行保存時(shí)，Dreamweaver會(huì)提示是否更新所有應(yīng)用了該模板的頁(yè)面，這就是Dreamweaver網(wǎng)站批量更新功能。3．刪除模板文件單擊“資源”面板左側(cè)的“模板”類(lèi)別，在面板右側(cè)本站點(diǎn)的模板列表中選中要?jiǎng)h除的模板，單擊面板下方的【刪除】按鈕，并確認(rèn)要?jiǎng)h除該模板，此時(shí)該模板文件從站點(diǎn)中刪除。9.1.7從模板中分離文檔可以將文檔從模板中分離，分離后的網(wǎng)頁(yè)和模板就沒(méi)有關(guān)系了，文檔的不可編輯區(qū)域?qū)⒆兊每梢跃庉?，這給修改網(wǎng)頁(yè)內(nèi)容帶來(lái)了很大的方便，同時(shí)模板文件內(nèi)容結(jié)構(gòu)改動(dòng)時(shí)，當(dāng)前網(wǎng)頁(yè)文件就不能被重新變動(dòng)。具體方法：打開(kāi)應(yīng)用了模板的文件，然后選擇“修改→模板→從模板中分離”菜單命令，即可將網(wǎng)頁(yè)從模板中分離出來(lái)，最后保存文檔。9.1.8更新基于模板的頁(yè)面當(dāng)已經(jīng)利用模板創(chuàng)建了多個(gè)網(wǎng)頁(yè)時(shí)，若想更改模板中的某些網(wǎng)頁(yè)元素，可以直接在模板中更改，更改保存時(shí)，會(huì)彈出“更新模板文件”對(duì)話框，如圖9-16所示，只需單擊【更新】按鈕即可如果在保存模板時(shí)沒(méi)有更新基于該模板的文檔，也可以在之后手動(dòng)更新基于模板的文檔。具體方法：打開(kāi)該文檔，選擇“修改→模板→更新當(dāng)前頁(yè)”命令。如果要更新整個(gè)站點(diǎn)或所有使用指定模板的文檔，可以選擇“修改→模板→更新頁(yè)面”命令，出現(xiàn)“更新頁(yè)面”對(duì)話框，如圖9-17所示，單擊【開(kāi)始】按鈕即可?！案马?yè)面”對(duì)話框各項(xiàng)含義如下：查看：設(shè)置是用模板的最新版本更新整個(gè)站點(diǎn)，還是更新應(yīng)用特定模板的所有網(wǎng)頁(yè)。更新：設(shè)置更新的類(lèi)別，此時(shí)選擇“模板”復(fù)選框。顯示記錄：設(shè)置是否查看DreamweaverCS4更新文件的記錄。如果選擇“顯示記錄”復(fù)選框，則DreamweaverCS4將提供關(guān)于其試圖更新的文件信息，包括是否成功更新的信息。【開(kāi)始】按鈕：?jiǎn)螕舸税粹o，DreamweaverCS4按照指示更新文件?！娟P(guān)閉】按鈕：?jiǎn)螕舸税粹o，關(guān)閉“更新頁(yè)面”對(duì)話框。圖9-16“更新文件”對(duì)話框圖9-17“更新頁(yè)面”對(duì)話框9.2學(xué)習(xí)任務(wù)：使用庫(kù)項(xiàng)目9.2.1庫(kù)概述9.2.2創(chuàng)建庫(kù)項(xiàng)目9.2.3管理和編輯庫(kù)項(xiàng)目9.2.1庫(kù)概述庫(kù)是一種特殊的Dreamweaver文件，把網(wǎng)站中需要重復(fù)使用或經(jīng)常更新的頁(yè)面元素（如文本、圖像、表格、表單、插件、版權(quán)聲明、站點(diǎn)導(dǎo)航條等）存入庫(kù)中，存入庫(kù)中的元素被稱(chēng)為庫(kù)項(xiàng)目。需要時(shí)可以把庫(kù)項(xiàng)目拖動(dòng)到頁(yè)面中。當(dāng)更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，可以隨時(shí)更新所有使用了該項(xiàng)目的頁(yè)面。庫(kù)項(xiàng)目比模板更加靈活，庫(kù)項(xiàng)目只是頁(yè)面中的一小部分，可以放置在頁(yè)面的任何位置，而不是固定的同一個(gè)位置。Dreamweaver在本地站點(diǎn)根文件夾的Library文件夾中，將每個(gè)庫(kù)項(xiàng)目都保存為一個(gè)獨(dú)立的擴(kuò)展名為.lbi的文件。Dreamweaver需要在網(wǎng)頁(yè)中建立來(lái)自每一個(gè)庫(kù)項(xiàng)目的相對(duì)鏈接，以便確保原始庫(kù)項(xiàng)目的存儲(chǔ)位置。選擇“窗口→資源”命令，打開(kāi)“資源”面板，選擇左側(cè)的“庫(kù)”類(lèi)別，如圖9-18所示，面板右側(cè)顯示本站點(diǎn)的庫(kù)列表。在“庫(kù)”面板中，可以方便地進(jìn)行庫(kù)項(xiàng)目的創(chuàng)建、刪除、改名、更新站點(diǎn)等操作。9.2.2創(chuàng)建庫(kù)項(xiàng)目1）在Dreamweaver中打開(kāi)已有的模板文件，這里打開(kāi)上一節(jié)中創(chuàng)建的“roombook”模板文件，如圖9-19所示。圖9-18選擇“庫(kù)”類(lèi)別圖9-19打開(kāi)的模板文件2）選擇文檔中需要保存為庫(kù)項(xiàng)目的內(nèi)容，這里選擇了網(wǎng)頁(yè)的Logo。3）在“資源”面板中單擊“庫(kù)”類(lèi)別底部的【新建庫(kù)項(xiàng)目】按鈕。4）為該庫(kù)項(xiàng)目鍵入一個(gè)名稱(chēng)，如logo，然后按下<Enter>鍵即可。如圖9-20所示。提示：Dreamweaver保存的只是對(duì)被鏈接項(xiàng)目的引用，原始文件必須保留在指定的位置，這樣才能保證庫(kù)項(xiàng)目的正確引用。圖9-20新建的庫(kù)項(xiàng)目9.2.3管理和編輯庫(kù)項(xiàng)目1．應(yīng)用庫(kù)項(xiàng)目具體方法：打開(kāi)要應(yīng)用庫(kù)項(xiàng)目的網(wǎng)頁(yè)文件，將鼠標(biāo)定位在需要插入庫(kù)項(xiàng)目的位置，在“資源”面板單擊左側(cè)的“庫(kù)”類(lèi)別，在右側(cè)列表中選擇需要插入的庫(kù)項(xiàng)目，單擊【插入】按鈕即可，添加完畢，單擊“文件→保存”命令，按下〈F12〉鍵預(yù)覽網(wǎng)頁(yè)效果。在文檔中選定添加的庫(kù)項(xiàng)目，其“屬性”面板如圖9-21所示。圖9-21庫(kù)項(xiàng)目“屬性”面板庫(kù)項(xiàng)目“屬性”面板各選項(xiàng)含義：Src：顯示庫(kù)項(xiàng)目源文件的文件名和路徑。打開(kāi)：?jiǎn)螕粼摪粹o，可打開(kāi)庫(kù)項(xiàng)目的源文件進(jìn)行編輯，與在“資源”面板中選擇項(xiàng)目并單擊【編輯】按鈕的功能是相同的。【從源文件中分離】按鈕：?jiǎn)螕粼摪粹o，可斷開(kāi)所選庫(kù)項(xiàng)目和其源文件之間的鏈接。分離項(xiàng)目后，可以在文檔中對(duì)其進(jìn)行編輯，但它不再是庫(kù)項(xiàng)目，而且不能在更改原始庫(kù)項(xiàng)目時(shí)更新?！局匦聞?chuàng)建】按鈕：?jiǎn)螕舸税粹o，可用當(dāng)前選定的內(nèi)容改寫(xiě)原始庫(kù)項(xiàng)目，以在丟失或意外刪除原始庫(kù)項(xiàng)目時(shí)重新創(chuàng)建庫(kù)項(xiàng)目。2．更新庫(kù)項(xiàng)目修改庫(kù)項(xiàng)目時(shí)，Dreamweaver會(huì)更新使用該項(xiàng)目的所有文檔。具體方法：在“資源”面板“庫(kù)”列表中選中要編輯的庫(kù)項(xiàng)目，單擊【編輯】按鈕，或者直接雙擊該庫(kù)項(xiàng)目，打開(kāi)庫(kù)項(xiàng)目源文件，可以對(duì)庫(kù)項(xiàng)目進(jìn)行編輯。編輯完成后選擇“文件→保存”菜單命令，在彈出的“更新庫(kù)項(xiàng)目”對(duì)話框中單擊【更新】按鈕，將更新本地站點(diǎn)中使用該庫(kù)項(xiàng)目的文檔。打開(kāi)要更新使用庫(kù)項(xiàng)目的文檔，在“資源”面板中選擇庫(kù)項(xiàng)目，右擊鼠標(biāo)，彈出如圖9-22所示的快捷菜單。若選擇“更改當(dāng)前頁(yè)”菜單項(xiàng)，只更新當(dāng)前頁(yè)的庫(kù)項(xiàng)目，站點(diǎn)中的其它頁(yè)面用到該修改的庫(kù)項(xiàng)目不能更新；當(dāng)選擇“更新站點(diǎn)”菜單項(xiàng)時(shí)，彈出如圖9-23所示的“更新頁(yè)面”對(duì)話框，可以更新站點(diǎn)中所有使用該庫(kù)項(xiàng)目的文檔。3．重命名庫(kù)項(xiàng)目具體方法：在“資源”面板的“庫(kù)”列表中，在要重命名的庫(kù)項(xiàng)目上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“重命名”命令，當(dāng)名稱(chēng)變?yōu)榭删庉嫊r(shí)，輸入新名稱(chēng)即可。4．刪除庫(kù)項(xiàng)目在“庫(kù)”列表中選擇要?jiǎng)h除的庫(kù)項(xiàng)目，單擊面板底部的【刪除】按鈕，并確認(rèn)要?jiǎng)h除的庫(kù)項(xiàng)目，或者按〈Delete〉鍵，確認(rèn)要?jiǎng)h除的庫(kù)項(xiàng)目。Dreamweaver將從庫(kù)中刪除該庫(kù)項(xiàng)目，但是不會(huì)更改任何使用該項(xiàng)目的文檔的內(nèi)容。若要重新創(chuàng)建丟失或已刪除的庫(kù)項(xiàng)目，可以在某個(gè)文檔中選擇該項(xiàng)目的一個(gè)實(shí)例，然后在“屬性”面板中單擊【重新創(chuàng)建】按鈕即可。圖9-22庫(kù)項(xiàng)目操作快捷菜單圖9-23“更新頁(yè)面”對(duì)話框9.3學(xué)習(xí)任務(wù)：資源管理9.3.1資源面板9.3.2使用站點(diǎn)列表管理資源9.3.3使用收藏列表管理資源9.3.4在另外的站點(diǎn)中重新使用資源9.3.1資源面板“資源”面板顯示與文檔窗口中的活動(dòng)文檔相關(guān)的站點(diǎn)資源。但是，只有先定義一個(gè)本地站點(diǎn)，然后才能在“資源”面板中查看資源。在主菜單中選擇“窗口→資源”命令，即可打開(kāi)“資源”面板，如圖9-24所示。“資源”面板提供了兩種視圖方式。“站點(diǎn)”列表方式：顯示當(dāng)前站點(diǎn)的所有資源?！笆詹亍绷斜矸绞剑簝H顯示用戶(hù)喜好選擇的資源。選擇預(yù)覽區(qū)域上方的【站點(diǎn)】或【收藏】單選按鈕，可在兩種視圖之間進(jìn)行切換。在“資源”面板的左側(cè)提供了9類(lèi)資源，單擊相應(yīng)的類(lèi)別圖標(biāo)按鈕，即可切換到該類(lèi)資源的顯示方式，并在右側(cè)的資源列表框中顯示出包含的資源?！緢D像】：GIF、JPEG或PNG格式的圖像文件?！绢伾浚何臋n和樣式表中使用的顏色，包括文本顏色、背景顏色和鏈接顏色。【URLs】：當(dāng)前站點(diǎn)文檔中使用的外部鏈接，包括FTP、gopher、HTTP、HTTPS、JavaScript、電子郵件(mailto)以及本地文件(file://)鏈接?！維WF】：任何AdobeFlash版本的文件。“資源”面板僅顯示SWF文件，不顯示FLA（Flash源）文件?！維hockwave】：任何AdobeShockwave版本的文件?！居捌浚篞uickTime或MPEG文件?！灸_本】：JavaScript或VBScript文件。HTML文件中的腳本（而不是獨(dú)立的JavaScript或VBScript文件）不出現(xiàn)在“資源”面板中?！灸０濉浚赫军c(diǎn)中所包含的模板。模板用于在多個(gè)頁(yè)面上重復(fù)使用的同一個(gè)頁(yè)面布局。修改模板時(shí)會(huì)自動(dòng)修改附加到該模板的所有頁(yè)面。【庫(kù)】：站點(diǎn)中所包含的在多個(gè)頁(yè)面中使用的元素。當(dāng)修改一個(gè)庫(kù)項(xiàng)目時(shí)，會(huì)更新所有包含該項(xiàng)目的頁(yè)面。9.3.2使用站點(diǎn)列表管理資源1．選擇資源在“資源”面板中，單擊即可選擇一個(gè)資源；按住〈Shift〉鍵并單擊可以選擇一系列連續(xù)的資源。按住〈Ctrl〉鍵單擊可選擇不連續(xù)的多個(gè)資源，也可以取消已選定的資源。2．將資源添加到文檔具體方法：在“資源”面板中選擇資源，例如選擇一幅圖像，將圖像拖動(dòng)到文檔窗口中即可，或者單擊“資源”面板中的【插入】按鈕，也可將資源添加到文檔。3．把顏色應(yīng)用于文本上在“資源”面板中顯示已應(yīng)用的各種元素（如文本、表格邊框、背景等）的顏色。把顏色應(yīng)用到文本上的具體方法：在文檔中選擇文本，在“資源”面板左側(cè)的類(lèi)別列表中選擇“顏色”類(lèi)別，在右側(cè)的列表中選擇一種顏色，如圖9-25所示，單擊“應(yīng)用”按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框，從中設(shè)置選擇器的類(lèi)型和名稱(chēng)，單擊【確定】按鈕，將顏色應(yīng)用到選定的文本。4．把URL應(yīng)用于圖像或文本具體方法：選擇文本或圖像，在“資源”面板左側(cè)的類(lèi)別列表中選擇“URLs”類(lèi)別，根據(jù)URL存儲(chǔ)的位置，選擇“站點(diǎn)”或“收藏”單選按鈕，在右側(cè)的列表中選擇URL，如圖9-26所示，將URL拖動(dòng)到“設(shè)計(jì)”視圖中的選定內(nèi)容上，或者單擊【插入】按鈕即可。圖9-24“資源”面板圖9-25選擇顏色5．編輯資源如果所編輯的資源需要使用外部編輯器，必須進(jìn)行以下操作：選擇主菜單中的“編輯→首選參數(shù)”命令，彈出“首選參數(shù)”對(duì)話框，從中選擇“文件類(lèi)型/編輯器”類(lèi)別，為某資源定義外部編輯器。編輯資源的具體方法：在“資源”面板中選擇資源，單擊“編輯”按鈕，或者雙擊該資源，打開(kāi)該資源定義的外部編輯器，對(duì)選定的資源進(jìn)行編輯，然后在該編輯器中保存所做的更改，并關(guān)閉外部編輯器即可。9.3.3使用收藏列表管理資源對(duì)于某些大型站點(diǎn)來(lái)說(shuō)，資源較多，用戶(hù)可以把常用的資源添加到收藏列表，將相關(guān)的資源歸類(lèi)在一起，為資源指定別名以指明用途，以方便地在“資源”面板中查找資源。1．添加收藏資源在“資源”面板中向站點(diǎn)的收藏列表添加資源有以下幾種方法：在“資源”面板的站點(diǎn)列表中選擇一個(gè)或多個(gè)資源，單擊【添加到收藏夾】按鈕即可，或者單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“添加到收藏夾”命令。在“文件”面板中選擇一個(gè)或多個(gè)文件，例如選擇一個(gè)圖像文件，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“添加到圖像收藏”命令。在文檔窗口的“設(shè)計(jì)”視圖中選擇一個(gè)元素，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“添加到圖像收藏”命令。2．將URL添加到“收藏”列表具體方法：在“資源”面板中，選擇“URLs”類(lèi)別，在面板頂部選擇“收藏”按鈕，單擊“資源”面板底部的【新建URL】按鈕，彈出“添加URL”對(duì)話框，在對(duì)話框的“URL”文本框中輸入U(xiǎn)RL值，在“昵稱(chēng)”文本框中輸入U(xiǎn)RL的名稱(chēng)，如圖9-27所示，單擊【確定】按鈕完成設(shè)置。圖9-26選擇URL圖9-27“添加URL”對(duì)話框3．重命名收藏資源只能在“收藏”列表中為資源指定別名，而在“站點(diǎn)”列表保留其實(shí)際文件名。具體方法：在“資源”面板中選擇包含所需資源的類(lèi)別，在面板頂部選擇“收藏”按鈕，在資源的名稱(chēng)或圖標(biāo)上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“編輯別名”命令，輸入新的名稱(chēng)即可。4．將資源歸類(lèi)到收藏夾中具體方法：在“資源”面板的頂部選擇“收藏”單選按鈕，單擊“新建收藏夾”按鈕，創(chuàng)建一個(gè)新的收藏夾，如圖9-28所示。這里為文件夾命名為“導(dǎo)航條”，按回車(chē)鍵確認(rèn)。然后把收藏列表中導(dǎo)航條圖像都拖動(dòng)到新建的文件夾中。9.3.4在另外的站點(diǎn)中重新使用資源“資源”面板顯示當(dāng)前站點(diǎn)中屬于可識(shí)別類(lèi)型的所有資源。若要將當(dāng)前站點(diǎn)中的資源用于另一個(gè)站點(diǎn)，必須將該資源復(fù)制到另一個(gè)站點(diǎn)?？梢砸淮螐?fù)制一個(gè)單獨(dú)的資源、一組單獨(dú)的資源或復(fù)制整個(gè)“收藏”。1．在文件面板中定位資源文件在“文件”面板中定位資源文件的具體方法：在“資源”面板中選擇要查找的資源類(lèi)別，右擊鼠標(biāo)，從彈出的快捷菜單中選擇“在站點(diǎn)中定位”命令。這時(shí)“文件”面板將打開(kāi)，其中定位的資源文件處于選定狀態(tài)?！霸谡军c(diǎn)定位”命令定位與資源本身對(duì)應(yīng)的文件，不定位使用該資源的文件。2．復(fù)制資源到另一個(gè)站點(diǎn)具體方法：在“資源”面板中選擇要復(fù)制的資源的類(lèi)別，在“站點(diǎn)”列表或“收藏”列表中的一個(gè)或者多個(gè)資源上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“復(fù)制到站點(diǎn)”命令，然后從列出了所有已定義站點(diǎn)的子菜單中選擇目標(biāo)站點(diǎn)的名稱(chēng)，如圖9-29所示。資源會(huì)復(fù)制到它們?cè)谀繕?biāo)站點(diǎn)中的相應(yīng)位置，Dreamweaver根據(jù)需要在目標(biāo)站點(diǎn)的層次結(jié)構(gòu)中創(chuàng)建新文件夾。圖9-28新建的收藏夾圖9-29“復(fù)制到站點(diǎn)”快捷菜單9.4上機(jī)實(shí)訓(xùn)9.4.1設(shè)計(jì)網(wǎng)站模板9.4.2用新建模板創(chuàng)建網(wǎng)頁(yè)9.4.3用庫(kù)和資源更新網(wǎng)站9.4.1設(shè)計(jì)網(wǎng)站模板1．實(shí)訓(xùn)要求練習(xí)創(chuàng)建模板和編輯模板的方法練習(xí)設(shè)置模板可編輯區(qū)域的方法2．實(shí)訓(xùn)指導(dǎo)1）新建站點(diǎn)，站點(diǎn)根目錄為mysite，在mysite目錄下創(chuàng)建文件夾images、pages和flash，分別用來(lái)存放網(wǎng)站圖像、站點(diǎn)子頁(yè)