（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十二 模板與庫(kù)電子課件

1、正版可修改PPT課件（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十二 模板與庫(kù)電子課件項(xiàng)目十二 模板與庫(kù)任務(wù)一 使用模板認(rèn)識(shí)模板 創(chuàng)建模板定義可編輯區(qū)域應(yīng)用模板=本節(jié)提綱更新模板網(wǎng)頁(yè)模板模板實(shí)質(zhì)上是一種特殊類型的文檔，它主要是作為創(chuàng)建其他文檔的基礎(chǔ)，用于設(shè)計(jì)布局比較固定的頁(yè)面結(jié)構(gòu)或元素。模板是網(wǎng)頁(yè)設(shè)計(jì)中比較高級(jí)的內(nèi)容，很好地體現(xiàn)了Dreamweaver在大型網(wǎng)頁(yè)項(xiàng)目開發(fā)中的先進(jìn)性，這種技術(shù)可以盡量地避免開發(fā)時(shí)的重復(fù)工作?？删庉媴^(qū)域可編輯區(qū)域就是基于模板文檔的未鎖定區(qū)域，是網(wǎng)頁(yè)套用模板后，可以編輯的區(qū)域。認(rèn)識(shí)模板模板實(shí)質(zhì)上是一種特殊類型的文檔，模板文檔中有可編輯區(qū)域和不可編輯區(qū)域。使用模板可以一次在網(wǎng)站站點(diǎn)中更新

2、多個(gè)頁(yè)面。模板的可編輯區(qū)域是基于該模板的網(wǎng)頁(yè)頁(yè)面中可以修改的網(wǎng)頁(yè)元素，不可編輯區(qū)域是在網(wǎng)站頁(yè)面中保持不變的網(wǎng)頁(yè)元素。模板是網(wǎng)頁(yè)設(shè)計(jì)中比較高級(jí)的內(nèi)容，很好地體現(xiàn)了Dreamweaver在大型網(wǎng)頁(yè)項(xiàng)目開發(fā)中的先進(jìn)性，這種技術(shù)可以盡量地避免開發(fā)時(shí)的重復(fù)工作。創(chuàng)建模板（一）在“資源”面板直接創(chuàng)建模板1.選擇“窗口”“資源”命令，打開“資源”面板。2.然后單擊“資源”面板底部的“新建模板”按鈕 。3.創(chuàng)建完空模板后，雙擊該模板或者單擊面板底部的“編輯”按鈕，打開模板進(jìn)行編輯。4.保存模板。一、直接創(chuàng)建模板創(chuàng)建模板（二）在文件菜單中直接創(chuàng)建模板選擇“文件”“新建”命令，打開“新建文檔”對(duì)話框。然后在“類別

3、”列表中選擇“空白頁(yè)”或者“空模板”選項(xiàng)，并在“空白頁(yè)”或者“空模板”列表中選擇“HTML模板”選項(xiàng)，單擊“創(chuàng)建”按鈕即可。創(chuàng)建模板二、將網(wǎng)頁(yè)另存為模板1.打開“tea culture”站點(diǎn)中已存在的網(wǎng)頁(yè)文件“index.html”，這是一個(gè)已基本制作完成的網(wǎng)頁(yè)，如圖12-9所示，刪除其中不要的內(nèi)容，選擇“文件”“另存為模板”命令，將網(wǎng)頁(yè)另存為模板。創(chuàng)建模板二、將網(wǎng)頁(yè)另存為模板1.打開“tea culture”站點(diǎn)中已存在的網(wǎng)頁(yè)文件“index.html”，這是一個(gè)已基本制作完成的網(wǎng)頁(yè)，如圖12-9所示，刪除其中不要的內(nèi)容，選擇“文件”“另存為模板”命令，將網(wǎng)頁(yè)另存為模板。創(chuàng)建模板二、將網(wǎng)頁(yè)另

4、存為模板2.彈出“另存模板”對(duì)話框，如圖12-10所示，請(qǐng)正確選擇正在使用的站點(diǎn)“tea culture”，設(shè)置輸入模板文件名，如“moban”，單擊“保存”按鈕。此時(shí)模板文件將自動(dòng)存入站點(diǎn)的“templates”文件夾中，如果有相同文件名的模板文件，則會(huì)覆蓋掉。定義模板的可編輯區(qū)域模板的可編輯區(qū)域可編輯區(qū)域就是基于模板文檔的未鎖定區(qū)域，是網(wǎng)頁(yè)套用模板后，可以編輯的區(qū)域?？删庉媴^(qū)域的對(duì)象可以把圖像、文本、表格、AP元素、客戶端行為等頁(yè)面元素設(shè)置為可編輯區(qū)，可把整個(gè)表格及表格里的內(nèi)容設(shè)置為一個(gè)可編輯區(qū)，也可以把某一個(gè)單元格及內(nèi)容設(shè)置為一個(gè)可編輯區(qū)定義可編輯區(qū)的具體步驟如下：1.在“文件”面板或“

5、資源”面板中，選擇模板文件“moban”，雙擊打開。2.選中可以編輯修改的區(qū)域，如圖12-12所示，圖中選擇的是標(biāo)題“中國(guó)茶的發(fā)展歷史”所在的表格標(biāo)簽。3.選擇菜單“插入”“模板對(duì)象”“可編輯區(qū)域”命令，在彈出的對(duì)話框中給該可編輯區(qū)域命名，單擊“確定”按鈕，如圖12-13所示。4.新添加的可編輯區(qū)域有藍(lán)色邊框，上面有藍(lán)色標(biāo)簽，標(biāo)簽上是可編輯區(qū)域的名稱，如圖所示。可編輯區(qū)域的內(nèi)容“中國(guó)茶的發(fā)展歷史”可以清除，但為了頁(yè)面的完整性，模板中也可以不刪除，在模板應(yīng)用到網(wǎng)頁(yè)后要輸入新內(nèi)容之前再刪除。5.再將內(nèi)容圖所在單元格添加為一個(gè)可編輯區(qū)域“EditRegion2”， 如圖12-14所示。效果如圖12-

6、15所示。應(yīng)用模板操作步驟如下：1.在站點(diǎn)中新建一個(gè)空白網(wǎng)頁(yè)。在“文件”面板中，在站點(diǎn)的根文件夾下，新建一網(wǎng)頁(yè)，命名為“index.html”，雙擊打開該文件進(jìn)行編輯。2.執(zhí)行菜單“修改”“模板”“應(yīng)用模板到頁(yè)”。如圖12-16所示。3.彈出“選擇模板”對(duì)話框，在對(duì)話框中，選擇本站點(diǎn)中已有的模板“moban”，單擊“選定”按鈕，如圖12-17所示。4.空白網(wǎng)頁(yè)“index”即已套用模板，如圖12-18所示，圖中EditRegion1和EditRegion2為可編輯區(qū)域，其余區(qū)域均不可編輯。5.刪除可編輯區(qū)域內(nèi)的內(nèi)容，將正確的內(nèi)容輸入并編輯好，保存文檔，如圖所示。本例中素材位于“素材”文件夾中。

7、更新模板模板文件中設(shè)置鏈接，實(shí)現(xiàn)茶文化各網(wǎng)頁(yè)之間相互跳轉(zhuǎn)。1.打開模板文件“moban.dwt”，參考下表12-1，設(shè)置相應(yīng)的鏈接。菜單項(xiàng)對(duì)應(yīng)的網(wǎng)頁(yè)文件茶的發(fā)展簡(jiǎn)史index.html茶的貿(mào)易歷史Files茶的貿(mào)易歷史.html飲茶史Files飲茶史.html制茶史Files制茶史.html茶葉品種Files茶葉品種.html茗茶薈萃Files茗茶薈萃.html茶的鑒評(píng)Files茶的鑒評(píng).html茶的保存Files茶的保存.html茶道概論Files茶道概論.html泡茶技法Files泡茶技法.html茶葉飲法Files茶葉飲法.html茶藝演示Files茶藝演示.html民族茶俗Files民

8、族茶俗.html茶與禮儀Files茶與禮儀.html茶與婚俗Files茶與婚俗.html茶與祭祀Files茶與祭祀.html更新模板模板文件中設(shè)置鏈接，實(shí)現(xiàn)茶文化各網(wǎng)頁(yè)之間相互跳轉(zhuǎn)。2.模板修改完畢，保存模板文檔，Dreamweaver CS6會(huì)自動(dòng)更新站點(diǎn)內(nèi)所有應(yīng)用的模板。如圖12-19所示。更新模板手動(dòng)更新模板及網(wǎng)頁(yè)1.在“資源”面板中，在模板列表中右擊要更新的模板。2.在彈出的快捷菜單中選擇“更新站點(diǎn)”命令，打開“更新站點(diǎn)”對(duì)話框3.在“查看”下拉列表中設(shè)置要更新的范圍。選擇“整個(gè)站點(diǎn)”選項(xiàng)，然后在右邊彈出的快捷菜單中選擇站點(diǎn)名，這樣將更新選定站點(diǎn)的所有網(wǎng)頁(yè)。如圖12-20所示。思考1.

9、創(chuàng)建模板一共有幾種方法？2.如何刪除創(chuàng)建的可編輯區(qū)域？3.探究其他的方法實(shí)現(xiàn)模板應(yīng)用？4.如何將模板與網(wǎng)頁(yè)分離？自主練習(xí)1.用兩種不同的方法在站點(diǎn)“tea culture”的Templates文件夾中分別創(chuàng)建名為tea1.dwt和“tea2.dwt”的模板。2.刪除站點(diǎn)“tea culture”“Templates”“moban2.dwt”模板頁(yè)中的可編輯區(qū)域“EditRegion1”。3.根據(jù)完整的網(wǎng)站樣例，完成其他相應(yīng)的頁(yè)面：茶的貿(mào)易歷史.html、飲茶史.html、制茶史.html等其他頁(yè)面。（參見素材范例結(jié)果）4.將“index.html”頁(yè)面中的模板從網(wǎng)頁(yè)中分離出來(lái)。任務(wù)二 使用庫(kù)創(chuàng)

10、建庫(kù)項(xiàng)目=本節(jié)提綱插入庫(kù)項(xiàng)目修改庫(kù)項(xiàng)目更新庫(kù)項(xiàng)目分離庫(kù)項(xiàng)目庫(kù)項(xiàng)目庫(kù)項(xiàng)目是相對(duì)于一個(gè)站點(diǎn)的，所以需要使用庫(kù)項(xiàng)目時(shí)，要先建立一個(gè)站點(diǎn)。庫(kù)項(xiàng)目的擴(kuò)展名為.lbi，同時(shí)所有庫(kù)項(xiàng)目都存儲(chǔ)在站點(diǎn)根目錄下的Library文件夾中，如果本地站點(diǎn)沒有這個(gè)子文件夾，Dreamweaver cs6將自動(dòng)生成。庫(kù)項(xiàng)目的對(duì)象在庫(kù)中，用戶可以存儲(chǔ)各種各樣的頁(yè)面元素，如圖像、文本、聲音、flash影片、表格、表單、java程序、插件、activex控件、導(dǎo)航條等。對(duì)于諸如圖像之類的鏈接項(xiàng)目，庫(kù)中僅保存該項(xiàng)目的引用，原文件仍保存在指定位置。庫(kù)項(xiàng)目中可以包含行為，但不能包含css樣式表，因?yàn)閹?kù)項(xiàng)目要求創(chuàng)建對(duì)象元素的代碼必須位于

11、HTML代碼的和之間。創(chuàng)建庫(kù)項(xiàng)目1.選擇“窗口”“資源”“庫(kù)”按鈕 ，切換到“庫(kù)”視圖。2.然后單擊“資源”面板底部的“新建庫(kù)項(xiàng)目”按鈕 。也可單擊“資源”面板右上角的面板菜單按鈕 ，在打開的菜單中選擇“新建庫(kù)項(xiàng)”命令?；蛘咴凇百Y源”面板空白處右擊，然后在彈出的快捷菜單中選擇“新建庫(kù)項(xiàng)”命令。可以給庫(kù)項(xiàng)目命名，如圖12-21所示。3.雙擊新建的庫(kù)項(xiàng)目，打開庫(kù)項(xiàng)目編輯窗口，如圖12-22所示。庫(kù)項(xiàng)目實(shí)際上是要插入在網(wǎng)頁(yè)中的一段代碼，庫(kù)項(xiàng)目的編輯窗口除不可以設(shè)置頁(yè)面屬性外，其他內(nèi)容與普通網(wǎng)頁(yè)的編輯方式相同。一、新建空白庫(kù)項(xiàng)目創(chuàng)建庫(kù)項(xiàng)目1.打開站點(diǎn)中已編輯好的網(wǎng)頁(yè)“index.html”，選中網(wǎng)頁(yè)中

12、關(guān)于“茶史覓蹤”的內(nèi)容（包括標(biāo)圖片、選擇菜單、表格）。如圖12-23所示2.選擇菜單“修改”“庫(kù)”“增加對(duì)象到庫(kù)”命令，將選中的內(nèi)容轉(zhuǎn)化為庫(kù)文件。軟件彈出一個(gè)提示信息，如圖12-24所示。單擊“確定”后，資源面板會(huì)自動(dòng)切換到“庫(kù)”選項(xiàng)，預(yù)覽新增加的庫(kù)文件以及庫(kù)文件名“Untitled”，將庫(kù)文件名設(shè)置為“導(dǎo)航菜單”，轉(zhuǎn)化后如圖12-25所示。3.查看庫(kù)文件內(nèi)容切換到“文件”面板，在站點(diǎn)文件夾中，新增了一個(gè)文件夾，名為“l(fā)ibrary”，新增的庫(kù)文件就在這個(gè)文件夾中，名為“導(dǎo)航菜單.lbi”，如圖12-26所示。二、創(chuàng)建基于選定內(nèi)容的庫(kù)項(xiàng)目庫(kù)項(xiàng)目一、插入庫(kù)項(xiàng)目1.將插入點(diǎn)放置在網(wǎng)頁(yè)“茶的貿(mào)易歷史

13、”的左邊“茶史覓蹤”導(dǎo)航條下方。如圖12-28所示。2.在資源面板的庫(kù)面板中，選中要插入的庫(kù)文件“導(dǎo)航菜單.lbi”，單擊窗口下方的“插入”按鈕。如圖12-29所示。3.新插入到網(wǎng)頁(yè)中的庫(kù)文件不可編輯，如圖12-30所示。在瀏覽器中瀏覽效果，如圖12-31所示。庫(kù)項(xiàng)目二、修改庫(kù)項(xiàng)目1.將“導(dǎo)航菜單.lbi”文件復(fù)制一份，重命名為“茶葉百科.lbi”如圖12-32、12-33所示。2.選擇“資源”模板“庫(kù)”“茶葉百科”，雙擊“茶葉百科”庫(kù)項(xiàng)目進(jìn)行編輯，如圖12-34所示。3.將插入點(diǎn)放置在網(wǎng)頁(yè)“index.html”的左邊“茶葉百科”導(dǎo)航條下方，在資源面板的庫(kù)面板中，選中要插入的庫(kù)文件“茶葉百科.lbi”，單擊窗口下方的“插入”按鈕，如圖12-35所示。完成效果如圖12-36所示。庫(kù)項(xiàng)目三、更新庫(kù)項(xiàng)目1.在資源面板的庫(kù)面板中，雙擊“茶葉百科”庫(kù)項(xiàng)目進(jìn)行編輯。將文字和單元格的背景顏色進(jìn)行修改。如圖12-37所示。2.保存庫(kù)文件，則彈出“更新庫(kù)項(xiàng)目”對(duì)話框，詢問是否更新網(wǎng)站中使用了該庫(kù)文件的網(wǎng)頁(yè)。如圖12-38所示。3.單擊“更新”按鈕后，彈出“更新頁(yè)面”對(duì)話框，確認(rèn)更新。如圖12-39所示。4.此時(shí)網(wǎng)頁(yè)“index”已自動(dòng)更新。如圖12-40所示。庫(kù)項(xiàng)目四、分離庫(kù)項(xiàng)目1.選中插入的庫(kù)文件部分“茶葉百科.lbi”，如圖12-41所示。2.選擇“屬性”模板單擊“從源文件中分離