Dreamweaver-cs5中文版入門與提高實(shí)例教程課件第10章模板和庫

1、第10章 模板和庫 本章重點(diǎn) 本章將介紹模板和庫的基本知識及使用方法，內(nèi)容包括：創(chuàng)建模板；定義模板的可編輯區(qū)域、重復(fù)區(qū)域和可選區(qū)域；定義嵌套模板；應(yīng)用模板建立網(wǎng)頁；修改模板并更新站點(diǎn)；庫的創(chuàng)建及使用等。讀者應(yīng)該重點(diǎn)掌握模板的創(chuàng)建和使用；可編輯區(qū)域、重復(fù)區(qū)域和可選區(qū)域區(qū)別和使用方法；庫項目的建立和使用等內(nèi)容。 學(xué)習(xí)目的 通過本章的學(xué)習(xí)，您可以掌握：模板和庫的功能創(chuàng)建模板和嵌套模板應(yīng)用模板管理模板應(yīng)用庫項目管理庫項目模板與庫的應(yīng)用第10章 模板和庫 本章重點(diǎn)10.1 模板 模板是一種以.dwt為擴(kuò)展名的特殊文檔，用于設(shè)計固定的頁面布局。模板由兩種區(qū)域組成：鎖定區(qū)和可編輯區(qū)。鎖定區(qū)域包含了在所有頁面

2、中共有的元素，即構(gòu)成頁面的基本框架，比如導(dǎo)航條、標(biāo)題等。第一次創(chuàng)建模板時，所有的區(qū)域都是鎖定的。而可編輯區(qū)域是根據(jù)用戶需要而指定的用于設(shè)置頁面不同內(nèi)容的區(qū)域，通過編輯可編輯區(qū)的內(nèi)容，可以得到與模板風(fēng)格一致，但又有所不同的新的網(wǎng)頁。 10.1 模板 模板是一種以.dwt為擴(kuò)展名的特殊文檔， 執(zhí)行“窗口”/“資源”菜單命令，或按F8快捷鍵，打開如左圖所示的“資源”面板。單擊“資源”面板左側(cè)的模板圖標(biāo)按鈕，即可切換到“模板”面板，如右圖所示。面板上半部分顯示當(dāng)前選擇模板的縮略圖，下半部分則是當(dāng)前站點(diǎn)中所有模板的列表。 10.1.1 模板面板 執(zhí)行“窗口”/“資源”菜單命令，或按F8快捷鍵，Dream

3、weaver-cs5中文版入門與提高實(shí)例教程課件第10章模板和庫Dreamweaver-cs5中文版入門與提高實(shí)例教程課件第10章模板和庫將網(wǎng)頁保存為模板 將已編輯好的文檔存儲為模板，這樣生成的模板中會帶有現(xiàn)在文件中已編輯好的內(nèi)容，而且可以在該基礎(chǔ)上對模板進(jìn)行修改，使之滿足設(shè)計需要。 執(zhí)行“文件”/“另存為模板”菜單命令。 此時，文檔的標(biāo)題欄顯示為XXXX.dwt，如圖所示。表明該文檔已不是普通文檔，而是一個模板文件。 將該文件在瀏覽器中預(yù)覽，會發(fā)現(xiàn)該文檔中無法鍵入文本或插入圖像。這是因為還沒有為模板定義可編輯區(qū)域，所有的區(qū)域都是鎖定的。 將網(wǎng)頁保存為模板 將已編輯好的文檔存儲為模板，10.1

4、.4 定義可編輯區(qū)域 可編輯區(qū)域用于在基于模板創(chuàng)建的HTML網(wǎng)頁中改變頁面內(nèi)容，可以是文本、圖像或其他的媒體，如Flash動畫或Java小程序。編輯完成之后，可以將該文檔保存為獨(dú)立的HTML文件。 單擊“常用”面板上 圖標(biāo)中的下拉箭頭，在彈出菜單中單擊菜單項 ，彈出“新建可編輯區(qū)域”對話框。 插入的可編輯區(qū)在模板文件中默認(rèn)用藍(lán)綠色高亮顯示，并在頂端顯示指定的名稱，如圖所示。 10.1.4 定義可編輯區(qū)域 可編輯區(qū)域用于在10.1.5 定義重復(fù)區(qū)域 重復(fù)區(qū)域是可以在基于模板的頁面中拷貝任意次數(shù)的模板部分。重復(fù)區(qū)域通常用于表格，當(dāng)然，也可以為其他頁面元素定義重復(fù)區(qū)域。 重復(fù)區(qū)域不是可編輯區(qū)域。若要

5、使重復(fù)區(qū)域中的內(nèi)容可編輯，則必須在重復(fù)區(qū)域內(nèi)插入可編輯區(qū)域。 10.1.5 定義重復(fù)區(qū)域 重復(fù)區(qū)域是可以在基10.1.6 定義可選區(qū)域 “可選區(qū)域”是在模板中指定為可選的部分，用于保存有可能在基于模板的文檔中出現(xiàn)的內(nèi)容（如可選文本或圖像）。 可選區(qū)域是由條件語句控制的。用戶可以在“新建可選區(qū)域”對話框中創(chuàng)建模板參數(shù)和表達(dá)式，或通過在“代碼”視圖中鍵入?yún)?shù)和條件語句來控制可選區(qū)域。 如果選擇“使用參數(shù)”，則使用指定的參數(shù)控制可選區(qū)域。 如果選擇“輸入表達(dá)式”，則根據(jù)指定的表達(dá)式的值確定是否顯示可選區(qū)域。表達(dá)式值為真時，顯示可選區(qū)；表達(dá)式值為假，則隱藏可選區(qū)。Dreamweaver 自動在輸入的文

6、本兩側(cè)插入雙引號。 如果要編輯參數(shù)或表達(dá)式，單擊可選區(qū)域左上角的標(biāo)簽選中該可選區(qū)域，然后在屬性面板上單擊“編輯”按鈕，即可打開“新建可選區(qū)域”對話框，進(jìn)行重新設(shè)置。 技巧：插入可選區(qū)域的可編輯區(qū)域時，不能先選定內(nèi)容，再創(chuàng)建可編輯的可選區(qū)域。應(yīng)插入?yún)^(qū)域，然后在該區(qū)域內(nèi)插入內(nèi)容。10.1.6 定義可選區(qū)域 “可選區(qū)域”是在模10.1.8 定義嵌套模板 嵌套模板是指設(shè)計和制作是基于一個模板生成的模板。使用嵌套模板可以創(chuàng)建基模板的變體，通過嵌套多個模板可以定義精確的布局。 嵌套模板繼承基模板中的可編輯區(qū)域，除非在這些區(qū)域中插入了新的模板區(qū)域。在嵌套模板中，可以在基模板的可編輯區(qū)域中進(jìn)一步定義可編輯區(qū)域

7、。10.1.8 定義嵌套模板 嵌套模板是指設(shè)計和制作是基在文檔中應(yīng)用模板有兩種方式：基于模板創(chuàng)建新文檔和為現(xiàn)有文檔應(yīng)用模板。 基于模板創(chuàng)建文檔 1執(zhí)行“文件”/“新建”菜單命令，打開“新建文檔”對話框。 2單擊“新建文檔”對話框中“模板中的頁”標(biāo)簽，然后在對話框中的“站點(diǎn)”下拉列表中選擇要應(yīng)用的模板所在的站點(diǎn)。 3在“站點(diǎn)的模板”列表中選擇需要的模板文件，并單擊選中對話框右下角的“當(dāng)模板改變時更新頁面”復(fù)選框。 4單擊“創(chuàng)建”按鈕，即可基于指定的模板創(chuàng)建一個新文檔。 5按編輯普通HTML文檔的方法編輯新文檔的頁面內(nèi)容。10.1.9 應(yīng)用模板創(chuàng)建文檔 在文檔中應(yīng)用模板有兩種方式：基于模板創(chuàng)建新文

8、檔和為現(xiàn)有文檔應(yīng)為文檔應(yīng)用模板 為已有的文檔應(yīng)用模板之前，首先應(yīng)確保模板已定義了可編輯區(qū)域，否則在應(yīng)用模板時，Dreamweaver會彈出一個提示框，提示用戶所應(yīng)用的模板中沒有任何可編輯區(qū)域。 1打開一個普通文檔。 2執(zhí)行“修改”/“模板”/“應(yīng)用模板到頁”菜單命令，打開 “選擇模板”對話框。 3在“站點(diǎn)”列表中選擇要應(yīng)用的模板所在的站點(diǎn)，然后在“模板”列表中選擇需要的模板。本例選擇本章制作的模板navigator。 4單擊“選擇模板”對話框底部的“當(dāng)模板改變時更新頁面”復(fù)選框。 5單擊“確定”按鈕，彈出 “不一致的區(qū)域名稱”對話框。提示用戶此文檔中的某些區(qū)域在新模板中沒有相應(yīng)區(qū)域。為文檔應(yīng)用

9、模板 為已有的文檔應(yīng)用模板之前，首先應(yīng)確保模 6選中列表中不一致的區(qū)域名稱，此時“將內(nèi)容移到新區(qū)域”后面的下拉列表變?yōu)榭捎脿顟B(tài)。 7從下拉列表中選中navigator模板中定義的可編輯區(qū)域名稱text。此時，不一致的區(qū)域名稱列表中，選定的區(qū)域后面的“”變?yōu)橹付ǖ膮^(qū)域名稱text。如果選擇“不在任何地方”選項，則將該內(nèi)容從文檔中刪除。 8單擊“用于所有內(nèi)容”按鈕，將所有未解析的內(nèi)容移到選定的區(qū)域。 9單擊“確定”按鈕應(yīng)用模板。 應(yīng)用模板前后的頁面效果如圖12-21所示。 注意：將模板應(yīng)用于現(xiàn)有文檔時，該模板將用其標(biāo)準(zhǔn)化內(nèi)容替換文檔內(nèi)容。所以將模板應(yīng)用于頁面之前，最好備份頁面的內(nèi)容。 此外，用戶也

10、可以直接在“模板”面板中用鼠標(biāo)拖動模板到要應(yīng)用模板的文檔中，或單擊“模板”底部的“應(yīng)用”按鈕，將指定的模板應(yīng)用到已有的文檔。 6選中列表中不一致的區(qū)域名稱，此時“將內(nèi)容移10.1.10 修改模板并更新站點(diǎn) 1對模板進(jìn)行修改之后，執(zhí)行“修改”/“模板”/“更新頁面”命令，彈出如圖所示的“更新頁面”對話框。 2在對話框中的“查看”下拉列表框中，選擇頁面更新的范圍。 如果選擇“整個站點(diǎn)”選項，可以在后面的站點(diǎn)下拉列表框中指定要更新的站點(diǎn)，并對指定的站點(diǎn)中所有的文檔進(jìn)行更新。 如果選擇“文件使用”選項，可以在后面的下拉列表框中指定要更新的模板，并對站點(diǎn)中所有使用該模板的文檔進(jìn)行更新。不使用該模板的文檔

11、不會被更新。 3在“更新”后面的復(fù)選框中選擇“模板”，表明該操作更新的是站點(diǎn)中的模板及基于模板生成的頁面。 4單擊“開始”按鈕，即可將模板的更改應(yīng)用到站點(diǎn)中指定范圍內(nèi)的網(wǎng)頁，并在“狀態(tài)”欄顯示更新的成功、失敗等信息。10.1.10 修改模板并更新站點(diǎn) 1對模板進(jìn)行修改之10.2 應(yīng)用庫項目 在Dreamweaver中，可以將任何頁面元素創(chuàng)建為庫項目，如文本、表單、表格、圖像、導(dǎo)航條，甚至Java程序、ActiveX控件和插件。庫項目是一種擴(kuò)展名為.lbi的特殊文件，所有的庫項目都被保存在本地站點(diǎn)根目錄下一個名為Library的文件夾中。每個站點(diǎn)都有自己的庫。使用庫項目時，Dreamweaver

12、不是在網(wǎng)頁中插入庫項目，而是插入一個指向庫項目的鏈接。也就是說，Dreamweaver將向文檔中插入該項目的HTML源代碼副本，并添加一個包含對原始外部項目的引用的HTML注釋。 總而言之，利用庫可以實(shí)現(xiàn)對文檔風(fēng)格的維護(hù)?？梢詫⒛承┪臋n中的共有內(nèi)容定義為庫項目，然后放置在文檔中。用戶可以在任何時間修改庫項目，編輯完成后，可以立即更新或稍后更新站點(diǎn)中使用庫項目的頁面。 注意：Dreamweaver需要在網(wǎng)頁中建立來自每一個庫項目的相對鏈接。庫項目應(yīng)該始終放置在Library文件夾中，并且不應(yīng)向該文件夾中添加任何非.lbi的文件。10.2 應(yīng)用庫項目 在Dream10.2.2 庫面板的功能 選擇“

13、窗口”/“資源”命令，調(diào)出“資源”面板。單擊“資源”面板左側(cè)的庫圖標(biāo)按鈕，即可切換到“庫”面板，如圖所示。“庫”面板上半部分顯示當(dāng)前選擇的庫項目的預(yù)覽效果；下半部分則是當(dāng)前站點(diǎn)中所有庫項目的列表。 10.2.2 庫面板的功能 選擇“窗口”/“資10.2.3 創(chuàng)建庫項目 將選中的內(nèi)容拖動到“庫”面板的庫項目列表中。單擊鼠標(biāo)右鍵，從彈出菜單中執(zhí)行“增加對象到庫”命令。選擇“修改”/“庫”/“增加對象到庫”菜單命令。單擊“庫”面板底部的“新建庫項目”按鈕。10.2.3 創(chuàng)建庫項目 將選中的內(nèi)容拖動到“庫”面板的庫項使用庫項目 向頁面添加庫項目時，將把庫項目的實(shí)際內(nèi)容以及對該庫項目的引用一并插入到文檔中。 （1）將插入點(diǎn)定位在文檔窗口中要插入庫項目的位置。（2）打開“庫”面板，從庫項目列表中選擇要插入的庫項目。 （3）單擊“庫”面板左下角的 “插入”按鈕，或直接將庫項目從“庫”面板中拖到文檔窗口中。 此時，文檔中會出現(xiàn)庫項目所表示的文檔內(nèi)容，同時以淡