東北大學,網(wǎng)站設計,課件第6章 模板與庫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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