東北大學(xué),網(wǎng)站設(shè)計(jì),課件第6章 模板與庫(kù)

1、第6章 模板與庫(kù),馮國(guó)奇,網(wǎng)頁(yè)設(shè)計(jì)中模板的應(yīng)用,通常在一個(gè)網(wǎng)站中會(huì)有幾十甚至幾百個(gè)風(fēng)格基本相似的頁(yè)面，如果每次都重新設(shè)定網(wǎng)頁(yè)結(jié)構(gòu)以及相同欄目下的導(dǎo)航條、各類圖標(biāo)就顯得非常麻煩； 專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)，幾乎都要用到模板與庫(kù)，使用模板和庫(kù)，不僅可以快速創(chuàng)建網(wǎng)站，而且還能使各個(gè)網(wǎng)頁(yè)的風(fēng)格保持一致； 模板是一種特殊類型的文檔，用于設(shè)計(jì)“固定的”頁(yè)面布局，基于模板創(chuàng)建的文檔就是對(duì)這種頁(yè)面布局的繼承； 其實(shí)模板的功能就是把網(wǎng)頁(yè)布局和內(nèi)容分離，在布局設(shè)計(jì)好之后將其存儲(chǔ)為模板，這樣相同布局的頁(yè)面可以通過(guò)模板創(chuàng)建，因此能夠極大提高工作效率。,模板是網(wǎng)頁(yè)的一個(gè)樣板，是創(chuàng)建其它文檔的基礎(chǔ)，其文件擴(kuò)展名為“dw

2、t”。 創(chuàng)建模板后，系統(tǒng)會(huì)自動(dòng)在本地站點(diǎn)的根目錄下產(chǎn)生一個(gè)名為“templates”的文件夾，所有模板文件都會(huì)存儲(chǔ)在該文件夾中。 任何一個(gè)網(wǎng)頁(yè)文檔都可以應(yīng)用于已有的模板,模板的主要特色：當(dāng)修改模板文件后，所有應(yīng)用于 該模板的網(wǎng)頁(yè)文件都會(huì)自動(dòng)隨著更新，即一次可以 更新所有的基于該模板的網(wǎng)頁(yè)文檔文件。,創(chuàng)建模板文檔 定義可編輯區(qū)域 保存為模板文件,創(chuàng)建模板的主要工作就是為其頁(yè)面設(shè)定若干個(gè)可編輯區(qū)域，供編輯各個(gè)頁(yè)面不同的內(nèi)容。在使用的時(shí)候，先由模板創(chuàng)建網(wǎng)頁(yè)，然后在頁(yè)面的可編輯區(qū)域里面添加適當(dāng)?shù)膬?nèi)容。, 創(chuàng)建模板,方法1：利用“資源”面板創(chuàng)建模板文檔 方法2：利用文件菜單創(chuàng)建模板 方法3：將普通網(wǎng)頁(yè)另

3、存為模板,創(chuàng)建模板文檔,創(chuàng)建模板,模板創(chuàng)建時(shí)，Dreamweaver自動(dòng)鎖定文檔的大部分區(qū)域。模板創(chuàng)建者指定基于模板的文檔中的哪些區(qū)域可編輯，創(chuàng)建模板時(shí)，可編輯區(qū)域和鎖定區(qū)域都可修改； 基于模板的文檔中，模板用戶只能在可編輯區(qū)域中進(jìn)行更改；無(wú)法修改鎖定區(qū)域；,定義模板可編輯區(qū)域,由模板產(chǎn)生的網(wǎng)頁(yè)，需要在創(chuàng)建模版文檔時(shí)預(yù)先設(shè)置可編輯區(qū)域。,不可編輯區(qū)域：意指頁(yè)面公共對(duì)象，如標(biāo)題欄、導(dǎo) 航欄、版權(quán)聲明和聯(lián)系方式等設(shè)置成不可編輯的。 可編輯區(qū)域：意指頁(yè)面動(dòng)態(tài)添加信息的區(qū)域，系統(tǒng) 允許在模板文檔的任意區(qū)域設(shè)置可編輯區(qū)域。,插入點(diǎn),可編輯區(qū)域標(biāo)簽,保存模板文件,創(chuàng)建重復(fù)區(qū)域（表格）,一個(gè)模板如果創(chuàng)建了重

4、復(fù)區(qū)域，則可以根據(jù)需要在基于模板的頁(yè)面中復(fù)制任意次數(shù)到指定重復(fù)區(qū)域的地方； 重復(fù)區(qū)域用于表格，也可以為其它頁(yè)面元素定義重復(fù)區(qū)域； 插入重復(fù)區(qū)域：用戶可以使用重復(fù)區(qū)域在模板中復(fù)制任意次數(shù)的指定區(qū)域；重復(fù)區(qū)域不是可編輯區(qū)域；,使用可選區(qū)域,使用可選區(qū)域可以將其設(shè)置為在基于模板的文檔中顯示或隱藏； 插入可選區(qū)域時(shí)，可以為模板參數(shù)設(shè)置特定值或在模板中定義條件語(yǔ)句； 可以根據(jù)需要在以后修改可選區(qū)域；,基于模板創(chuàng)建新頁(yè)面 將模板應(yīng)用于新頁(yè)面 將模板應(yīng)用于已經(jīng)存在的文檔, 應(yīng)用模板,可編輯區(qū)域,示 例,模板建立好后，根據(jù)需要可以進(jìn)行修改。 例如，很多網(wǎng)頁(yè)是使用同一個(gè)模板創(chuàng)建的網(wǎng)頁(yè)，而頁(yè)面底部公共區(qū)域聯(lián)系人的

5、郵件地址或聯(lián)系電話發(fā)生了變化，這時(shí)可利用Dreamweaver 提供的模板自動(dòng)更新功能，達(dá)到一次更新所有網(wǎng)頁(yè)的目的。, 編輯模板,更新提示信息窗口,模板創(chuàng)建演示,第一步：先在Dreamweaver MX 2004中運(yùn)行“FileNew”命令，接著從圖1所示的窗口中依次選定“Template pageHTML template”選項(xiàng)，點(diǎn)擊“Create”按鈕之后即可創(chuàng)建一個(gè)模板文件。,第二步：在頁(yè)面設(shè)計(jì)視圖下插入網(wǎng)頁(yè)框架、導(dǎo)航條、Flash標(biāo)題等所有頁(yè)面公有的元素（如圖），然后運(yùn)行“FileSave”命令將這個(gè)模板保存下來(lái)。,小提示：可以先下載一個(gè)中意的網(wǎng)頁(yè)，然后在Dreamweaver MX

6、2004中打開(kāi)它，僅僅保留框架等元素之后通過(guò)“FileSave as Template”命令將其保存為模板，這樣能夠省去很多制作模板的時(shí)間。,為了避免編輯時(shí)候誤操作而導(dǎo)致模板中的元素變化，模板中的內(nèi)容默認(rèn)為不可編輯，只有把某個(gè)區(qū)域或者某段文本設(shè)置為可編輯狀態(tài)之后，在由該模板創(chuàng)建的文檔中才可以改變這個(gè)區(qū)域。先用鼠標(biāo)選取某個(gè)區(qū)域（也就是每個(gè)頁(yè)面不同內(nèi)容的區(qū)域），接著運(yùn)行“ModifyTemplatesNew Editable Region”命令，并且在彈出的對(duì)話框中為這個(gè)區(qū)域設(shè)定一個(gè)名稱，這樣就完成了編輯區(qū)域的設(shè)置。,小提示,設(shè)定好編輯區(qū)域之后需要運(yùn)行“FileSave”命令保存所做的修改。,模板

7、應(yīng)用演示,有了模板之后，接下來(lái)就要在編輯網(wǎng)頁(yè)時(shí)候使用它們了。只要在Dreamweaver MX 2004主窗口中運(yùn)行“FileNew”命令即可看見(jiàn)如圖所示的新建窗口，接著進(jìn)入“Templates”標(biāo)簽即可查看到已經(jīng)保存的模板，從中選取一種還可以在右部的預(yù)覽區(qū)進(jìn)行預(yù)覽（如圖），最后挑選一款中意的模板并點(diǎn)擊下部“Create”按鈕打開(kāi)這個(gè)模板。,在打開(kāi)的模板中，無(wú)法編輯的區(qū)域?qū)⒊矢吡翣顟B(tài)顯示，但是有些位置是鎖定區(qū)域，卻不是高亮顯示，這主要是因?yàn)閳D片正好蓋住了背景的顏色。對(duì)于這種情況，可以在首選參數(shù)里對(duì)鎖定區(qū)域的顏色進(jìn)行設(shè)置，這樣就可以很清楚地分辨出模板中的鎖定區(qū)域了。,小提示：如果仍然看不見(jiàn)高亮顯

8、示效果，還可以依次選中“ViewVisual AidsInvisible Elements”命令。 最后，我們只要在可編輯區(qū)域添加網(wǎng)頁(yè)的內(nèi)容就可以了，比如添加一些文字說(shuō)明或者是插入相應(yīng)的圖片，最后通過(guò)“FileSave”命令保存頁(yè)面即可。,修改和更換模板演示,在通過(guò)模板創(chuàng)建了若干個(gè)頁(yè)面之后，如果需要更改頁(yè)面或者增加欄目，再對(duì)所有的頁(yè)面手工修改則非常麻煩，因此我們可以通過(guò)Dreamweaver MX 2004的模板修改功能來(lái)解決這個(gè)問(wèn)題。比如我們對(duì)模板進(jìn)行了修改之后，運(yùn)行“FileSave”命令來(lái)保存模板，這時(shí)候會(huì)彈出提示框詢問(wèn)是否更新所有使用了該模板的頁(yè)面（如圖），確認(rèn)之后就會(huì)顯示出更新的頁(yè)面

9、總數(shù)以及更新的時(shí)間等信息。,Dreamweaver MX 2004還提供了一個(gè)為網(wǎng)頁(yè)更換模板的功能，這樣更換模板有點(diǎn)像給人換衣服，只要把各種模板制作好，然后想穿哪件就穿哪件。不過(guò)模板也不是隨便可以更換的，可以更換模板的條件是被更換的頁(yè)面必須是通過(guò)模板創(chuàng)建的，而且頁(yè)面中的可編輯區(qū)域個(gè)數(shù)和名稱必須與要更換模板的可編輯區(qū)域個(gè)數(shù)和名稱相一致。比如一個(gè)網(wǎng)頁(yè)中有3個(gè)可編輯區(qū)域，名稱分別為t1、t2、t3。另外還有一個(gè)模板，無(wú)論這個(gè)模板什么結(jié)構(gòu)，只要它也有3個(gè)可編輯區(qū)域，并且名稱也是t1、t2和t3，那么就可以用它來(lái)為原先的網(wǎng)頁(yè)更換新模板，而頁(yè)面中3個(gè)可編輯區(qū)域的內(nèi)容則相應(yīng)保持不變。具體的更換模板方法也很簡(jiǎn)

10、單，只要運(yùn)行“WindowsTemplates”命令打開(kāi)模板面板，此時(shí)可以從上部區(qū)域挑選合適的模板，然后點(diǎn)擊“Apply To Page”按鈕，這樣就可以很快完成模板更換操作了。,小提示：利用這個(gè)功能可以為網(wǎng)站首頁(yè)分別制作夏天和冬天兩個(gè)版本，這樣可以非常方便地更換模板。 其實(shí)模板的相關(guān)內(nèi)容還很多，不過(guò)限于篇幅只能選取部分介紹，希望大家能夠舉一反三，徹底領(lǐng)會(huì)到模板的精妙所在。,庫(kù),庫(kù)是一種用來(lái)存儲(chǔ)要在整個(gè)Web站點(diǎn)上經(jīng)常重復(fù)使用或更新的頁(yè)面元素（如圖像、文件和其他對(duì)象）的方法，這些元素成為庫(kù)項(xiàng)目，可以在庫(kù)中存儲(chǔ)各種各樣的頁(yè)面元素，每當(dāng)更改某個(gè)庫(kù)項(xiàng)目時(shí)，可以相應(yīng)地更新所有使用該項(xiàng)目的頁(yè)面；,庫(kù),庫(kù)

11、是一種特殊的 Dreamweaver MX文件，其中包含已創(chuàng)建的可在網(wǎng)頁(yè)上單獨(dú)使用“資源”。例如，如果想讓頁(yè)面具有相同的標(biāo)題和腳注，但具有不同的頁(yè)面布局，可以使用庫(kù)項(xiàng)目存儲(chǔ)標(biāo)題和腳注，然后在多個(gè)頁(yè)面中鏈接相同的標(biāo)題和腳注。庫(kù)項(xiàng)目是可以在多個(gè)頁(yè)面中重復(fù)使用的存儲(chǔ)頁(yè)面元素；當(dāng)更改某個(gè)庫(kù)項(xiàng)目時(shí)，所有使用該項(xiàng)目的頁(yè)面都可以自動(dòng)更新 。 可以將各種各樣的頁(yè)面元素，如圖像、表格、聲音和 Flash 影片等存儲(chǔ)成庫(kù)項(xiàng)目。 使用庫(kù)項(xiàng)目時(shí)，Dreamweaver MX不是在網(wǎng)頁(yè)中插入庫(kù)項(xiàng)目，而是向庫(kù)項(xiàng)目中插入一個(gè)鏈接。,創(chuàng)建庫(kù)項(xiàng)目,網(wǎng)頁(yè)文檔body部分中的文本、表格、表單、Java applet、插件、導(dǎo)航條和

12、圖像等元素都可添加為庫(kù)項(xiàng)目，一旦成為庫(kù)項(xiàng)目，就可以在多個(gè)地方引用； 方式 將選定內(nèi)容創(chuàng)建為庫(kù)項(xiàng)目（資源面板）； 創(chuàng)建一個(gè)空白庫(kù)項(xiàng)目 編輯庫(kù)項(xiàng)目 在文檔中插入庫(kù)項(xiàng)目,創(chuàng)建和編輯庫(kù)項(xiàng)目,1.創(chuàng)建庫(kù)項(xiàng)目 可以從文檔 body 部分中的任意元素創(chuàng)建庫(kù)項(xiàng)目，這些元素包括文本、表格、表單、Java applets、插件、ActiveX 元素、導(dǎo)航條和圖像。 創(chuàng)建庫(kù)項(xiàng)目的操作步驟如下： (1) 選擇文檔中欲存為庫(kù)項(xiàng)目的元素。 (2) 執(zhí)行下列操作之一： 選擇“窗口/資源”并將選定內(nèi)容拖動(dòng)到“資源”面板的“庫(kù)”類別中。 單擊“資源”面板底部的“新建庫(kù)項(xiàng)目”按鈕（在“庫(kù)”類別中）。 選擇“修改/庫(kù)/增加對(duì)象到庫(kù)

13、”。 (2)編輯庫(kù)項(xiàng)目 當(dāng)更改庫(kù)項(xiàng)目時(shí)，可以選擇更新使用該項(xiàng)目的所有文檔。如果選擇不更新，那么文檔將保持與庫(kù)項(xiàng)目的關(guān)聯(lián)；可以在以后選擇“修改/庫(kù)/刷新頁(yè)面”菜單來(lái)更新它們。,使用庫(kù)項(xiàng)目,在文檔中將光標(biāo)插入需要鏈接庫(kù)項(xiàng)目的位置。 選擇“窗口/資源”菜單，啟動(dòng)“資源”面板，點(diǎn)擊“庫(kù)”類別圖標(biāo)。 點(diǎn)擊面板底部的“插入”按鈕或?qū)㈩A(yù)覽區(qū)的庫(kù)項(xiàng)目直接拖入文檔中。 點(diǎn)擊插入的項(xiàng)目將出現(xiàn)一個(gè)屬性對(duì)話框，按鈕功能如下： 打開(kāi)：打開(kāi)編輯庫(kù)項(xiàng)目。 從源文件中分離：斷開(kāi)與庫(kù)項(xiàng)目的鏈接，成為獨(dú)立的網(wǎng)頁(yè)元素。 重新創(chuàng)建：重新創(chuàng)建一個(gè)庫(kù)項(xiàng)目。,庫(kù)的使用演示過(guò)程,創(chuàng)建庫(kù)項(xiàng)目 引用庫(kù)項(xiàng)目 編輯庫(kù)項(xiàng)目 重命名庫(kù)項(xiàng)目 刪除庫(kù)項(xiàng)目

14、重新創(chuàng)建丟失或已刪除的庫(kù)項(xiàng)目 利用庫(kù)項(xiàng)目更新網(wǎng)頁(yè),2.1創(chuàng)建庫(kù)項(xiàng)目,文檔 body 部分中的任意元素都可創(chuàng)建庫(kù)項(xiàng)目，這些元素包括文本、表格、表單、Java applet、插件、ActiveX 元素、導(dǎo)航條和圖像等。 創(chuàng)建方法： 利用選定的內(nèi)容創(chuàng)建庫(kù)項(xiàng)目 創(chuàng)建一個(gè)空白庫(kù)項(xiàng)目,利用選定的內(nèi)容創(chuàng)建庫(kù)項(xiàng)目,打開(kāi) “index.htm”文檔，選擇“設(shè)計(jì)”視圖中的“登錄”表格部分，打開(kāi)資源面板下的庫(kù)類，單擊 按鈕，或單擊鼠標(biāo)右鍵，選擇“新建庫(kù)項(xiàng)(W)”，或者直接將所選的表格部分拖動(dòng)到資源面板下的庫(kù)類。,庫(kù)項(xiàng)目都保存為一個(gè)單獨(dú)的文件（文件擴(kuò)展名為 .lbi）,創(chuàng)建一個(gè)空白庫(kù)項(xiàng)目 確保沒(méi)有在“文檔”窗口中選擇

15、任何內(nèi)容。 在【資源】面板中，選擇面板左側(cè)的【庫(kù)】類別 。 單擊【資源】底部的“新建庫(kù)項(xiàng)目”按鈕。一個(gè)新的、無(wú) 標(biāo)題的庫(kù)項(xiàng)目將被添加到面板中的列表。 為庫(kù)項(xiàng)目取名。,2.2 引用庫(kù)項(xiàng)目,將鼠標(biāo)光標(biāo)插入點(diǎn)定位在“文檔”窗口中。 在【資源】面板中，選擇面板左側(cè)的【庫(kù)】 類別。 選擇一個(gè)庫(kù)項(xiàng)目從【資源】面板直接拖曳到“文檔”窗口中即可。 或者選擇一個(gè)庫(kù)項(xiàng)目，然后單擊面板底部的 按鈕。,在從【資源】面板向外拖動(dòng)該項(xiàng)目的同時(shí)按住Ctrl 鍵，則插入的內(nèi)容會(huì)從庫(kù)項(xiàng)目中脫離。,2.3 編輯庫(kù)項(xiàng)目,在資源面板的庫(kù)類別中選擇庫(kù)項(xiàng)目，單擊面板底部的“編輯”按鈕或雙擊庫(kù)項(xiàng)目，進(jìn)入庫(kù)項(xiàng)目編輯狀態(tài) 編輯庫(kù)項(xiàng)目然后保存。 更新庫(kù)項(xiàng)目對(duì)話 框，選擇更新或不更新使用庫(kù)項(xiàng)目的文檔,2.4