《網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第3版）》項(xiàng)目7 使用模板和庫(kù)

項(xiàng)目七使用模板和庫(kù)理解模板和庫(kù)在網(wǎng)頁(yè)制作中的作用；學(xué)習(xí)模板和庫(kù)的創(chuàng)建與編輯；能夠應(yīng)用模板和庫(kù)制作和更新網(wǎng)頁(yè)。

教學(xué)目標(biāo)：教學(xué)重點(diǎn):模板和庫(kù)的作用模板和庫(kù)的應(yīng)用教學(xué)難點(diǎn):

模板和庫(kù)的應(yīng)用教學(xué)方法:

任務(wù)驅(qū)動(dòng)法任務(wù)一、認(rèn)識(shí)模板

知識(shí)點(diǎn)：理解什么是模板；理解模板的作用；了解模板的優(yōu)點(diǎn)。任務(wù)描述

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

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

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

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

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

任務(wù)描述

本任務(wù)主要學(xué)習(xí)如何創(chuàng)建空白模板，以及如何將已有文檔轉(zhuǎn)換成模板。任務(wù)分析在創(chuàng)建模板前一定要先創(chuàng)建站點(diǎn)，才能在保存一個(gè)新模板時(shí)保存在Dreamweaver在站點(diǎn)根目錄下自動(dòng)生成的Templates文件夾中，才能在新建“模板中的頁(yè)”時(shí)找到該模板，也才能有效管理站點(diǎn)中應(yīng)用模板的頁(yè)面。不能將模板文件移動(dòng)到其它位置存放，如果模板文件改變了位置，Dreamweaver將無(wú)法識(shí)別該模板文件?？梢灾苯觿?chuàng)建空白模板，也可以將已有文檔轉(zhuǎn)換為模板。新創(chuàng)建的模板中用戶如果沒(méi)有定義任何可編輯區(qū)域，那么由模板生成的網(wǎng)頁(yè)是不可編輯的，用戶無(wú)法編輯網(wǎng)頁(yè)之間不同的內(nèi)容部分，雖然快速創(chuàng)建相似網(wǎng)頁(yè)是模板的優(yōu)點(diǎn)，但一個(gè)站點(diǎn)中的頁(yè)面如果全都一樣就沒(méi)有現(xiàn)實(shí)意義了，因此在保存或關(guān)閉模板時(shí)Dreamweaver都會(huì)彈出“此模板不含有任何可編輯區(qū)域”的警告框提醒用戶進(jìn)行設(shè)置。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)二。試一試

打開(kāi)素材文件夾myweb中的公司簡(jiǎn)介文檔“myweb\html\GuanYuWoMen\42.html”，將該網(wǎng)頁(yè)文檔轉(zhuǎn)換成保留頁(yè)頭、頁(yè)腳及主體部分右側(cè)“用戶登錄、服務(wù)項(xiàng)目、最新客戶及網(wǎng)站調(diào)查”四個(gè)版塊為公共內(nèi)容的模板“blycmoban.dwt”。任務(wù)三、編輯模板知識(shí)點(diǎn)：了解編輯模板的方法；掌握在模板中設(shè)置可編輯區(qū)域的方法。任務(wù)描述

前面學(xué)習(xí)了如何創(chuàng)建模板，下面就來(lái)學(xué)習(xí)如何制作模板以及如何在模板中設(shè)置可編輯區(qū)域的方法。任務(wù)分析

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

可編輯區(qū)域是可以在基于該模板的文檔中進(jìn)行編輯的區(qū)域。模板的制作與普通網(wǎng)頁(yè)的制作方法相同。但要使模板生效，其中至少要設(shè)置一個(gè)可編輯區(qū)域，否則基于該模板的頁(yè)面是不可編輯的。在關(guān)閉或保存模板文件時(shí)，用戶如果沒(méi)有創(chuàng)建任何可編輯區(qū)域，Dreamweaver都會(huì)彈出警告框提醒用戶。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)三。二、知識(shí)鏈接1．模板的特征2．可編輯區(qū)域的顯示3．可編輯區(qū)域的刪除4．使用可編輯區(qū)域的注意事項(xiàng)三、拓展與提高1．模板重復(fù)區(qū)域2．模板可選區(qū)域試一試

打開(kāi)上一任務(wù)試一試中創(chuàng)建的模板“blycmoban.dwt”，保留頁(yè)頭、頁(yè)腳及主體區(qū)域右側(cè)的“用戶登錄、服務(wù)項(xiàng)目、最新客戶、網(wǎng)站調(diào)查”四個(gè)版塊等公共內(nèi)容不變，將Banner條下方時(shí)間條前端class為"path"的Div定義成可編輯區(qū)域“導(dǎo)航路徑”，將主體區(qū)域左側(cè)id為"main-left"的Div設(shè)置為可編輯區(qū)域“主體左側(cè)”。任務(wù)四、應(yīng)用模板知識(shí)點(diǎn)：了解編輯模板的方法；掌握在模板中設(shè)置可編輯區(qū)域的方法。任務(wù)描述

前面學(xué)習(xí)了創(chuàng)建及編輯模板，下面就來(lái)學(xué)習(xí)如何應(yīng)用模板。任務(wù)分析

將頁(yè)面中相同的部分制作成一個(gè)模板文件后，就可以通過(guò)模板來(lái)快速創(chuàng)建這些相似的頁(yè)面。我們只需要在套用了模板的頁(yè)面中進(jìn)行修改，就可以制作出風(fēng)格相似，但又有區(qū)別的頁(yè)面。模板一旦被更新，應(yīng)用了模板的頁(yè)面都可以隨之更新，從而極大地提高工作效率，避免了反復(fù)修改幾十乃至上百次的重復(fù)勞動(dòng)。當(dāng)需要對(duì)頁(yè)面中受不可編輯區(qū)域限制被鎖定的區(qū)域進(jìn)行編輯時(shí)，可以將網(wǎng)頁(yè)脫離模板。不僅可以創(chuàng)建基于模板的新頁(yè)，也可以將模板應(yīng)用于已經(jīng)存在的網(wǎng)頁(yè)。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)四。二、知識(shí)鏈接1．應(yīng)用模板到空白頁(yè)2．應(yīng)用模板到已經(jīng)進(jìn)行編輯過(guò)的頁(yè)三、拓展與提高1．應(yīng)用“資源”面板管理模板

有關(guān)模板的創(chuàng)建、編輯、重命名、分離、應(yīng)用等操作，都可以在“資源”面板完成。試一試

創(chuàng)建基于上一任務(wù)定義了可編輯區(qū)域模板“mobanblyc.dwt”的網(wǎng)頁(yè)，如經(jīng)典案例頁(yè)面，編輯如圖7-17所示主體區(qū)域左側(cè)內(nèi)容后保存，再進(jìn)行更新、分離等操作。任務(wù)五、應(yīng)用庫(kù)項(xiàng)目知識(shí)點(diǎn)：理解庫(kù)項(xiàng)目的作用；掌握創(chuàng)建庫(kù)項(xiàng)目的方法；掌握插入庫(kù)項(xiàng)目的方法；掌握更新庫(kù)項(xiàng)目的方法；掌握分離庫(kù)項(xiàng)目的方法。任務(wù)描述

在Dreamweaver中，除了提供模板功能減少重復(fù)性勞動(dòng)，還可以使用庫(kù)項(xiàng)目達(dá)到這一目標(biāo)。任務(wù)分析

可以將站點(diǎn)中多個(gè)頁(yè)面都要用到的相同內(nèi)容創(chuàng)建成庫(kù)項(xiàng)目，可以滿足反復(fù)使用或經(jīng)常需要更新維護(hù)的需要。利用庫(kù)項(xiàng)目，可以將一個(gè)固定內(nèi)容插入到不同頁(yè)面中，當(dāng)需要更新時(shí)，只要改變庫(kù)項(xiàng)目一個(gè)文件就能使站點(diǎn)中的相關(guān)頁(yè)面都得到更新。庫(kù)項(xiàng)目是一種特殊的Dreamweaver文檔，其后綴名為“.lbi”，存儲(chǔ)在站點(diǎn)中的Library文件夾中，這個(gè)文件夾是在第一次在“資源”面板創(chuàng)建庫(kù)項(xiàng)目時(shí)自動(dòng)生成的，不能隨意對(duì)其修改，否則庫(kù)項(xiàng)目將不能正常使用。庫(kù)項(xiàng)目比模板靈活，可以插入到頁(yè)面的任何位置，而不是固定在同一位置。

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

當(dāng)修改庫(kù)項(xiàng)目時(shí)，會(huì)更新使用該項(xiàng)目的所有文檔。如果選擇不更新，那么文檔保持與庫(kù)項(xiàng)目的關(guān)聯(lián)，可以在以后進(jìn)行更新。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)五。二、知識(shí)鏈接1．庫(kù)項(xiàng)目的作用2．庫(kù)項(xiàng)目的顯示三、拓展與提高

庫(kù)項(xiàng)目實(shí)際上是要插入到頁(yè)面中的一段代碼。把庫(kù)項(xiàng)目插入到頁(yè)面中，就是把該庫(kù)項(xiàng)目的源代碼的一份拷貝插入到頁(yè)面中，并創(chuàng)建一個(gè)對(duì)外部庫(kù)項(xiàng)目的引用。重命名庫(kù)項(xiàng)目會(huì)斷開(kāi)其與文檔或模板的連接。創(chuàng)建庫(kù)項(xiàng)目時(shí)不復(fù)制樣式表信息，因?yàn)檫@些對(duì)象的代碼位于文檔的head段。將帶有行為的對(duì)象創(chuàng)建為庫(kù)項(xiàng)目時(shí)，系統(tǒng)將把對(duì)象及其行