（中職）網(wǎng)頁設計與制作項目十二 模板與庫電子課件

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

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

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

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

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

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

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

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

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

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

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

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

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