中職網(wǎng)頁制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目七 使用模板和庫電子課件（）

(中職）網(wǎng)頁制作基礎(chǔ)（DreamweaverCS6）（第2版）項(xiàng)目七使用模板和庫電子課件（工信版）項(xiàng)目七使用模板和庫

項(xiàng)目目標(biāo)（1）理解模板和庫在網(wǎng)頁制作過程中的作用；（2）學(xué)習(xí)模板和庫的創(chuàng)建與編輯；（3）能夠應(yīng)用模板和庫制作、更新網(wǎng)頁。項(xiàng)目描述

本項(xiàng)目將通過5個任務(wù)來說明如何創(chuàng)建并應(yīng)用模板與庫快速制作風(fēng)格一致的網(wǎng)頁。任務(wù)1認(rèn)識模板任務(wù)目標(biāo)（1）理解什么是模板；（2）理解模板的作用；（3）了解模板的優(yōu)點(diǎn)。任務(wù)描述

本任務(wù)主要學(xué)習(xí)什么是模板，模板在網(wǎng)頁制作中起什么作用，以及使用模板制作和更新網(wǎng)頁有什么優(yōu)點(diǎn)。

任務(wù)1認(rèn)識模板任務(wù)分析

在使用Dreamweaver建設(shè)一個大規(guī)模的網(wǎng)站時，通常需要制作很多頁面，而且要保證這些頁面的風(fēng)格統(tǒng)一。為了提高網(wǎng)站建設(shè)與維護(hù)的工作效率，避免重復(fù)操作，需要用到模板。模板實(shí)質(zhì)上就是創(chuàng)建其他具有相同版式和風(fēng)格文檔的基礎(chǔ)文檔，它是一種特殊類型的文檔，模板文件的擴(kuò)展名為.dwt，是Dreamweaver提供的一種對站點(diǎn)中的文檔進(jìn)行管理的功能，而非HTML本身的功能。

當(dāng)創(chuàng)建一個模板或?qū)⒁粋€網(wǎng)頁另存為模板時，Dreamweaver默認(rèn)將所有區(qū)域標(biāo)志為“鎖定”。通過模板生成網(wǎng)頁時，Dreamweaver會自動生成網(wǎng)頁共用部分（模板中相同布局網(wǎng)頁的公共部分），并且這些鎖定區(qū)域處于不允許編輯的狀態(tài)，也稱為不可編輯區(qū)域，用戶無法修改。當(dāng)要更新公共部分時，只能在模板中編輯，或者將頁面與模板分離。只需要更改模板，所有應(yīng)用該模板的頁面就會隨之改變。

用戶可以根據(jù)需要在模板中創(chuàng)建可編輯區(qū)域，模板的可編輯區(qū)域是指基于模板創(chuàng)建的網(wǎng)頁中用戶可以編輯的區(qū)域。在制作模板時，可以創(chuàng)建可編輯區(qū)域，以決定模板中的哪些部分是基于模板生成的網(wǎng)頁中能自由編輯的，應(yīng)用該模板的頁面只能在可編輯區(qū)域中進(jìn)行編輯，用戶可以在可編輯區(qū)域中放置各頁面之間不同的主體部分。

任務(wù)1認(rèn)識模板任務(wù)分析

模板的最大作用是快速創(chuàng)建及更新具有統(tǒng)一結(jié)構(gòu)和風(fēng)格的網(wǎng)頁，省去了重復(fù)操作的麻煩，提高了工作效率，維護(hù)網(wǎng)站更輕松。就快速創(chuàng)建頁面來講，通過復(fù)制網(wǎng)頁內(nèi)容、另存網(wǎng)頁等操作也能實(shí)現(xiàn)，但是快速更新大批量網(wǎng)頁是模板特有的功能，具有高效的特點(diǎn)。使用模板的優(yōu)點(diǎn)如下。（1）省去了重復(fù)勞動的麻煩，提高了設(shè)計(jì)者的工作效率。（2）更新站點(diǎn)時，如果要修改共同的頁面元素，則只要更改應(yīng)用的模板即可，所有相同模板的網(wǎng)頁文件可快速更新，不必一個一個地逐頁修改。（3）基于模板生成的網(wǎng)頁文件與模板之間相互關(guān)聯(lián)，公共內(nèi)容可保證完全一致，風(fēng)格統(tǒng)一，看起來比較系統(tǒng)。在需要時還可以斷開頁面與模板之間的鏈接。

任務(wù)2創(chuàng)建模板任務(wù)目標(biāo)（1）掌握空白模板的創(chuàng)建方法；（2）了解空白模板保存并關(guān)閉的方法；（3）掌握使用已有文檔生成模板、保存模板并關(guān)閉模板的方法。任務(wù)描述

本任務(wù)主要學(xué)習(xí)如何創(chuàng)建空白模板，以及如何將已有文檔轉(zhuǎn)換為模板。

任務(wù)2創(chuàng)建模板任務(wù)分析

在創(chuàng)建模板前一定要先創(chuàng)建站點(diǎn)，才能在保存一個新模板時保存到Dreamweaver在站點(diǎn)根目錄下自動生成的Templates文件夾中，才能在新建“模板中的頁”時從“站點(diǎn)的模板”列表框中找到該模板，才能有效管理站點(diǎn)中應(yīng)用模板的頁面。不能將模板文件移動到其他位置存放，如果模板文件改變了位置，則Dreamweaver將無法識別并管理該模板文件。

可以直接創(chuàng)建空白模板，也可以將已有文檔轉(zhuǎn)換為模板。在新創(chuàng)建的模板中，如果用戶沒有定義任何可編輯區(qū)域，那么由模板生成的網(wǎng)頁是不可編輯的，用戶無法編輯網(wǎng)頁之間不同內(nèi)容的部分，雖然快速創(chuàng)建相似網(wǎng)頁是模板的優(yōu)點(diǎn)，但一個站點(diǎn)中的頁面如果全部一樣也就沒有任何意義了，因此，在保存或關(guān)閉模板時，Dreamweaver會彈出“此模板不含有任何可編輯區(qū)域”的警告對話框，以提醒用戶進(jìn)行設(shè)置。操作步驟步驟1．創(chuàng)建站點(diǎn)。

將素材文件夾myweb復(fù)制到E盤根目錄中，創(chuàng)建站點(diǎn)myweb。步驟2．創(chuàng)建空白模板，保存后關(guān)閉模板。（1）創(chuàng)建空白模板。（2）保存“Untitled-1”模板。（3）關(guān)閉模板。步驟3．將已有文檔轉(zhuǎn)換為模板。（1）打開要轉(zhuǎn)換為模板的網(wǎng)頁文檔。選擇“文件”→“打開”命令，彈出“打開”對話框，在myweb站點(diǎn)文件夾中選擇要轉(zhuǎn)換為模板的網(wǎng)頁文檔“moban.html”，單擊“打開”按鈕。（2）將當(dāng)前打開的文檔轉(zhuǎn)換為模板時，可使用3種方法操作步驟（3）設(shè)置模板保存位置及名稱。（4）單擊當(dāng)前“文檔”窗口中的“還原”按鈕，在“文檔”窗口處于還原狀態(tài)時可以看到標(biāo)題欄處顯示“<<模板>>moban.dwt(XHTML)”字樣，表明當(dāng)前文檔是一個模板文檔。試一試

打開本書素材“素材\項(xiàng)目7\試一試\02\myweb\html\GuanYuWoMen\42.html”，將該網(wǎng)頁文檔轉(zhuǎn)換為以頁頭、頁腳和主體部分右側(cè)的用戶登錄、服務(wù)項(xiàng)目、最新客戶及網(wǎng)站調(diào)查4個板塊為公共內(nèi)容的模板文件“blycmoban.dwt”。任務(wù)3編輯模板任務(wù)目標(biāo)（1）了解編輯模板的方法；（2）掌握在模板中設(shè)置可編輯區(qū)域的方法。任務(wù)描述

前面學(xué)習(xí)了如何創(chuàng)建模板，下面來學(xué)習(xí)如何制作模板及在模板中設(shè)置可編輯區(qū)域。

任務(wù)3編輯模板任務(wù)分析

空白模板就如同空白網(wǎng)頁一樣，創(chuàng)建好空白模板后，可以像編輯普通網(wǎng)頁一樣在模板中制作公共部分，包括結(jié)構(gòu)和內(nèi)容。如果已經(jīng)有制作好的網(wǎng)頁文檔包含了所需要的公共部分，則可以將其復(fù)制粘貼到模板中，也可以直接將其轉(zhuǎn)換為模板，然后再像編輯修改普通網(wǎng)頁一樣對模板文檔進(jìn)行修改，得到需要的公共部分。

可編輯區(qū)域是可以在基于模板的文檔中進(jìn)行編輯的區(qū)域。模板的制作與普通網(wǎng)頁的制作方法相同。但要使模板生效，至少要設(shè)置一個可編輯區(qū)域，否則基于模板的頁面是不可編輯的。在關(guān)閉或保存模板文件時，如果用戶沒有創(chuàng)建任何可編輯區(qū)域，則Dreamweaver會彈出警告對話框提醒用戶。

操作步驟步驟1．編輯模板。（1）打開本項(xiàng)目任務(wù)2中創(chuàng)建的模板“moban.dwt”。（2）像編輯普通網(wǎng)頁一樣對模板進(jìn)行編輯。步驟2．定義模板可編輯區(qū)域。（1）在Banner下方的時間條前端定義可編輯區(qū)域“導(dǎo)航路徑”。（2）將步驟1中在主體區(qū)域添加的ID為“main”的Div定義為可編輯區(qū)域。知識鏈接1．模板的特征2．可編輯區(qū)域的顯示3．可編輯區(qū)域的刪除4．使用可編輯區(qū)域的注意事項(xiàng)（1）可編輯區(qū)域命名時不能使用雙引號、單引號、小于號、大于號等特殊字符。（2）同一個模板中的多個可編輯區(qū)域不能重名。（3）可以將整個表格、整個表格行或單獨(dú)的單元格標(biāo)記為可編輯區(qū)域，但不能在多個單元格周圍創(chuàng)建模板區(qū)域。如果<td>被選中，則可編輯區(qū)域中包括單元格周圍的區(qū)域；如果<td>未被選中，則可編輯區(qū)域?qū)⒅挥绊憜卧裰械膬?nèi)容。（4）層和層內(nèi)容是單獨(dú)的元素。使層可編輯時，可以更改層的位置及內(nèi)容；使層的內(nèi)容可編輯時，只能更改層的內(nèi)容，而不能更改層的位置。（5）如果要在網(wǎng)頁文檔中插入可編輯區(qū)域，則Dreamweaver會自動將該文檔轉(zhuǎn)換為模板。（6）可編輯區(qū)域不能嵌套插入。如果在可編輯區(qū)域中再次插入可編輯區(qū)域，則Dreamweaver會提示“選定內(nèi)容已位于可編輯、重復(fù)或可選區(qū)域中”。拓展與提高1．模板重復(fù)區(qū)域

在模板中還可以創(chuàng)建重復(fù)區(qū)域，重復(fù)區(qū)域是可以根據(jù)需要在基于模板的頁面中復(fù)制任意次數(shù)的模板部分。使用重復(fù)區(qū)域可以通過重復(fù)特定項(xiàng)目來控制頁面布局，如目錄項(xiàng)、說明項(xiàng)、列表項(xiàng)等。重復(fù)區(qū)域通常用于表格，但也可以為其他頁面元素定義重復(fù)區(qū)域?？梢允褂谩爸貜?fù)區(qū)域”在模板中復(fù)制任意次數(shù)的指定區(qū)域，也可以使用“重復(fù)表格”創(chuàng)建包含重復(fù)行的表格式的可編輯區(qū)域。重復(fù)區(qū)域是不可編輯的，若要使重復(fù)區(qū)域中的內(nèi)容可以編輯，則必須在重復(fù)區(qū)域中插入可編輯區(qū)域。2．模板可選區(qū)域

在模板中也可以創(chuàng)建可選區(qū)域，可選區(qū)域是指可將其設(shè)置為在基于模板的網(wǎng)頁文檔中顯示或隱藏的區(qū)域?？梢酝ㄟ^選擇“修改”→“模板屬性”命令設(shè)置可選區(qū)域的顯示或隱藏?？蛇x區(qū)域有以下兩種類型。（1）不可編輯的可選區(qū)域：在基于模板的網(wǎng)頁文檔中可以顯示或隱藏該區(qū)域，但不允許編輯該區(qū)域中的內(nèi)容。（2）可編輯的可選區(qū)域：用戶可以自己設(shè)定是否顯示標(biāo)注的區(qū)域，并能夠編輯該區(qū)域中的內(nèi)容。試一試

打開本項(xiàng)目任務(wù)2試一試中創(chuàng)建的模板文件“blycmoban.dwt”，保留頁頭、頁腳和主體區(qū)域右側(cè)的用戶登錄、服務(wù)項(xiàng)目、最新客戶及網(wǎng)站調(diào)查4個板塊等公共內(nèi)容，將Banner下方時間條前端class為“path”的Div定義為可編輯區(qū)域“導(dǎo)航路徑”，將主體區(qū)域左側(cè)ID為“main-left”的Div設(shè)置為可編輯區(qū)域“主體左側(cè)”。任務(wù)4應(yīng)用模板任務(wù)目標(biāo)（1）掌握創(chuàng)建基于模板的網(wǎng)頁的方法；（2）掌握更新網(wǎng)頁的方法；（3）掌握從模板中分離網(wǎng)頁的方法；（4）了解將模板應(yīng)用于現(xiàn)有文檔的方法。任務(wù)描述

前面學(xué)習(xí)了創(chuàng)建及編輯模板，下面來學(xué)習(xí)如何應(yīng)用模板。

任務(wù)4應(yīng)用模板任務(wù)分析

將頁面中相同的部分制作成一個模板文件后，可以通過模板來快速創(chuàng)建這些相似的頁面。只需要在套用了模板的頁面中進(jìn)行修改，就可以制作出風(fēng)格相似，但又有區(qū)別的頁面。模板一旦被更新，應(yīng)用了模板的頁面就都可以隨之更新，從而極大地提高了工作效率，避免了反復(fù)修改。當(dāng)需要對頁面中受不可編輯區(qū)域限制被鎖定的區(qū)域進(jìn)行編輯時，可以將網(wǎng)頁從模板中分離出來。使用模板不僅可以創(chuàng)建基于模板的新頁，還可以將模板應(yīng)用于已經(jīng)存在的網(wǎng)頁。

操作步驟步驟1．新建基于模板的頁。（1）選擇“文件”→“新建”命令，彈出“新建文檔”對話框，選擇“模板中的頁”選項(xiàng)卡，在“站點(diǎn)”列表框中選擇“myweb”站點(diǎn)，在“站點(diǎn)‘myweb’的模板”列表框中選擇“moban”選項(xiàng)，單擊“創(chuàng)建”按鈕，在“文檔”窗口中按照模板中的設(shè)置創(chuàng)建基于模板的新文檔“Untitled-1”，其右上方有“模板：moban”標(biāo)記，表示此文檔與“moban”模板關(guān)聯(lián)，鼠標(biāo)指針指向不可編輯區(qū)域時為禁止編輯狀態(tài)“”。（2）在新文檔可編輯區(qū)域編輯新聞頁面，編輯完網(wǎng)頁標(biāo)題、導(dǎo)航路徑及主體內(nèi)容后，選擇“文件”→“保存”命令，將新文檔保存到“myweb\html\GongSiXinWen”文件夾中，將其命名為“gsxw257.html”。操作步驟步驟2．更新基于模板的頁。（1）在模板文件“moban.dwt”中將導(dǎo)航欄的“客戶反饋”修改為“客戶留言”，可以看到有變更的文件標(biāo)示了更新標(biāo)記

，選擇“文件”→“保存”命令，保存模板更新的內(nèi)容，此時自動彈出“更新模板文件”對話框。（2）單擊“更新”按鈕，不可編輯區(qū)域中不相同的公共內(nèi)容會被更新為相同內(nèi)容，可以看到基于“moban.dwt”的網(wǎng)頁“gsxw257.html”已經(jīng)更新為“客戶留言”，并且文件名處顯示了更新標(biāo)記*。如果單擊“不更新”按鈕，或者沒有彈出詢問對話框，則可以在以后選擇“修改”→“模板”→“更新當(dāng)前頁”或者“更新頁面”命令時進(jìn)行更新。

操作步驟步驟3．分離基于模板的頁面。

如果要對基于模板的頁面的鎖定區(qū)域進(jìn)行修改，則必須先把頁面從模板中分離出來。一旦頁面被分離出來，就可以像沒有應(yīng)用模板的普通網(wǎng)頁一樣進(jìn)行編輯。但當(dāng)模板被更新時，該頁面將不能隨之被更新。（1）打開要分離的網(wǎng)頁文檔“gsxw257.html”。（2）選擇“修改”→“模板”→“從模板中分離”命令，即可把頁面從模板中分離出來。

與模板分離后，可以看到文檔右上方的“模板：moban”標(biāo)記沒有了，鼠標(biāo)指針指向原來不可編輯的區(qū)域時也不再是禁止編輯狀態(tài)“”。知識鏈接應(yīng)用模板到頁

除可以通過“新建模板中的頁”操作創(chuàng)建出基于模板的頁外，還可以將已經(jīng)存在的頁面通過“應(yīng)用模板到頁”功能與模板建立關(guān)聯(lián)。（1）應(yīng)用模板到空白頁。（2）應(yīng)用模板到已經(jīng)編輯過的頁面。拓展與提高1．資源管理

“站點(diǎn)”面板組中有“資源”面板，可對資源進(jìn)行分類組織和管理，并以列表形式顯示。如果要顯示所有該網(wǎng)站中的圖像（無論是否使用），則可以直接在“資源”面板中將資源拖動到插入點(diǎn)所在的位置，這樣不僅方便，還能在某個資源改變后，使所有使用該資源網(wǎng)頁的信息得到及時更新。2．應(yīng)用“資源”面板管理模板（1）打開“資源”面板。選擇“窗口”→“資源”命令，選中“資源”復(fù)選框后可以在Dreamweaver窗口的右側(cè)面板組中看到“資源”面板。（2）在“資源”面板中，單擊其左側(cè)的“模板”按鈕，可以打開“模板”子面板，在此可以完成有關(guān)模板的新建、編輯、重命名、應(yīng)用、更新等操作。如在“模板”列表框中選擇相應(yīng)的模板，單擊下方的“應(yīng)用”按鈕，即可在當(dāng)前文檔中應(yīng)用該模板。試一試

創(chuàng)建基于本項(xiàng)目任務(wù)3定義的可編輯區(qū)域模板“mobanblyc.dwt”的網(wǎng)頁，如“經(jīng)典案例”頁面，編輯下圖主體區(qū)域左側(cè)的內(nèi)容后保存頁面，并進(jìn)行更新、分離等操作。任務(wù)5應(yīng)用庫項(xiàng)目任務(wù)目標(biāo)（1）理解庫項(xiàng)目的作用；（2）掌握創(chuàng)建庫項(xiàng)目的方法；（3）掌握插入庫項(xiàng)目的方法；（4）掌握更新庫項(xiàng)目的方法；（5）掌握分離庫項(xiàng)目的方法。任務(wù)描述

在

Dreamweaver中，除了可以使用模板功能減少重復(fù)性勞動，利用庫項(xiàng)目同樣可以實(shí)現(xiàn)對文件風(fēng)格的維護(hù)。很多網(wǎng)頁帶有相同的內(nèi)容（如圖像、文本和其他對象），可以將這些文檔中的共有內(nèi)容定義為庫項(xiàng)目，并插入需要這些頁面元素的網(wǎng)頁文檔中。

任務(wù)5應(yīng)用庫項(xiàng)目任務(wù)分析

將站點(diǎn)中多個頁面都要用到的頁面元素創(chuàng)建成庫項(xiàng)目，可以滿足重復(fù)使用或頻繁更新維護(hù)的需要。利用庫項(xiàng)目，可以將一個固定內(nèi)容（如聯(lián)系方式、最新客戶等）插入到多個頁面中。當(dāng)需要更新時，只要改變庫項(xiàng)目文件就能使站點(diǎn)中的相關(guān)頁面得到更新。庫項(xiàng)目是一種特殊的Dreamweaver文檔，其擴(kuò)展名為.lbi，存儲在站點(diǎn)中的Library文件夾中。這個文件夾是第一次在“資源”面板中創(chuàng)建庫項(xiàng)目時自動生成的，不能隨意對其進(jìn)行修改，否則庫項(xiàng)目將不能正常使用。庫項(xiàng)目比模板靈活，可以插入到頁面的任何位置，而不會固定在同一位置。

可以新建一個空白庫文件，也可以使用文檔<body>部分中的任意元素創(chuàng)建庫文件。將經(jīng)常用到的圖片、文字、鏈接、廣告條、頁頭、頁腳等制作成庫項(xiàng)目是最合適的。

當(dāng)修改庫項(xiàng)目時，會更新使用該項(xiàng)目的所有文檔。如果選擇不更新，那么文檔將保持與庫項(xiàng)目的關(guān)聯(lián)，可以在以后進(jìn)行更新。

操作步驟步驟1．創(chuàng)建空白庫項(xiàng)目。步驟2．將現(xiàn)有內(nèi)容轉(zhuǎn)換為庫項(xiàng)目。（1）在“文檔”窗口中選中要轉(zhuǎn)換為庫項(xiàng)目的元素。（2）創(chuàng)建庫項(xiàng)目。（3）如果選中元素應(yīng)用了CSS，則在將其轉(zhuǎn)換為庫項(xiàng)目時會彈出提示信息，如下圖所示，單擊“確定”按鈕，創(chuàng)建庫項(xiàng)目；單擊“取消”按鈕，放棄創(chuàng)建庫項(xiàng)目。操作步驟（4）為新創(chuàng)建的庫項(xiàng)目設(shè)置名稱，如果內(nèi)容中含有鏈接，則會詢問是否更新鏈接，單擊“更新”按鈕。注意觀察庫項(xiàng)目“屬性”面板中源文件名稱是否隨之變化，如果命名前做了其他操作，則源文件名稱會保持為原名稱，選中內(nèi)容與改名后的庫項(xiàng)目失去連接。單擊“打開”按鈕，提示找不到源文件；單擊“重新創(chuàng)建”按鈕，可以重新創(chuàng)建原名稱的庫項(xiàng)目；單擊“從源文件分離”按鈕，可以將選中內(nèi)容恢復(fù)到初始可編輯狀態(tài)。步驟3．插入庫項(xiàng)目。（1）將光標(biāo)移動到頁面的合適位置。（2）在“庫”列表框中選擇要添加的庫項(xiàng)目，單擊左下方的“插入”按鈕，即可將其插入到頁面中。步驟4．刪除庫項(xiàng)目。

在“庫”列表框中選擇要刪除的庫項(xiàng)目，單擊右下方的“刪除”按鈕

，即可將其刪除。操作步驟步驟5．重新創(chuàng)建庫項(xiàng)目。

如果庫項(xiàng)目被誤刪除了，則可以在頁面中選擇該庫項(xiàng)目中的一個實(shí)例，單擊庫項(xiàng)目“屬性”面板中的“重新創(chuàng)建”按鈕，重新創(chuàng)建被誤刪除的庫項(xiàng)目。如果庫項(xiàng)目還存在，則單擊“重新創(chuàng)建”按鈕會彈出是否覆蓋現(xiàn)存庫項(xiàng)目的提示信息。步驟6．編輯庫項(xiàng)目。

在“庫”列表框中，雙擊要修改的庫項(xiàng)目，可打開庫項(xiàng)目，可以根據(jù)需要像編輯普通網(wǎng)頁一樣修改庫項(xiàng)目中的內(nèi)容。步驟7．更新庫項(xiàng)目。（1）選擇“修改”→“庫”→“更新當(dāng)前頁”命令，可對當(dāng)前頁面進(jìn)行更新。（2）選擇“修改”→“庫”→“更新頁面”命令，彈出“更新頁面”對話框，可以設(shè)置用庫項(xiàng)目中的最新內(nèi)容更新整個站點(diǎn)，或只更新插入特定庫項(xiàng)目的頁面。（3）修改庫項(xiàng)目后進(jìn)行保存，會彈出“更新庫項(xiàng)目”對話框，單擊“更新”按鈕，所有應(yīng)用此庫項(xiàng)目的頁面都會自動更新。操作步驟步驟8．分離庫。（1）打開插入了庫項(xiàng)目的頁面文