《Dreamweaver CS5網(wǎng)頁設(shè)計與制作實例教程》課件-第5章 模板與庫

第5章模板與庫5.1模板5.1.1創(chuàng)建模板5.1.2編輯模板5.1.3使用模板與脫離5.1.4模板應(yīng)用5.2庫小結(jié)5.1模板

用模板可以創(chuàng)建具有統(tǒng)一結(jié)構(gòu)和外觀的網(wǎng)站。在需要更改網(wǎng)站的整體外觀時，只要對相應(yīng)的模板文件稍作修改，即可對整個網(wǎng)站進行快速更新。5.1.1創(chuàng)建模板創(chuàng)建模板有兩種方法：在Assets面板中按“新建”按紐，創(chuàng)建模板，修改已有的HTML文檔然后存成模板。模板可以自動保存在站點根目錄下的Templates文件夾內(nèi)。邊講邊操作5.1.2編輯模板

模板內(nèi)分為可編輯區(qū)及不可編輯區(qū)，缺省是不可編輯區(qū)。不可編輯區(qū)是指引入模板的文檔而言；在模板環(huán)境下（.dwt）均可編輯?？删庉媴^(qū)<!--TemplateBeginEditablename="aaa"-->可編輯區(qū)的內(nèi)容<!--TemplateEndEditable-->不可編輯區(qū)普通網(wǎng)頁的不可編輯區(qū)在Dreamweaver代碼編輯器中以灰色字體顯示，不能被修改，但在其他編輯器（如記事本）中不可編輯區(qū)代碼是可以修改的。

5.1.2編輯模板建立可編輯區(qū)做表格，劃分區(qū)域。選中一區(qū)域－>“插入”面板|“常用”選項卡|“可編輯區(qū)”按鈕刪除可編輯區(qū)域指向可編輯區(qū)執(zhí)行右鍵菜單“模板”|“刪除模板標記”存盤可以存成*.htm或*.dwt。5.1.3使用模板1．使用模板和脫離模板使用：從“資源”面板中的“模板”類別中選中要插入的模板，直接拖動到網(wǎng)頁中脫離：如果要修改應(yīng)用了模板的文檔中的不可編輯區(qū)域，須將文檔和模板分離。菜單命令“修改”|“模板”|“從模板中分離”更新模板時，已分離的文檔不再會隨之更新！5.1.3使用模板2．用模板更新網(wǎng)站文檔中只有不可編輯的部分才會隨模板更新修改模板并執(zhí)行菜單命令“文件”|“保存”5.1.4模板創(chuàng)建和應(yīng)用實例【例5-1】制作一個簡單的小商品銷售網(wǎng)站模板,如圖1。并應(yīng)用該模版制作頁面2和3?！纠?-1】詳細步驟看教材5.2庫

庫項目可以包含文本、表格、圖象、Java程序、插件、Active元素；當修改某個庫項目后，整個網(wǎng)站包含該庫項目的網(wǎng)頁均自動更新。建立庫項目：拖入“資源”面板的“庫”中（起名）。若用Ctrl＋拖入，則文檔中元素仍是文檔元素，不是庫元素，無指針。應(yīng)用庫項目：拖出即可。編輯庫項目：雙擊庫中目標對象—>編輯庫項目—>存盤“文件”|“保存”—>更新頁面窗口。更新：“修改”|“庫”|“更新當前頁”或“修改”|“庫”|“更新頁面”庫項目“屬性”面板：脫離庫5.2.1創(chuàng)建庫項目

創(chuàng)建庫文件有兩種方法：1.新建庫文件2.將網(wǎng)頁內(nèi)容轉(zhuǎn)化為庫文件。5.2.2插入庫項目

上面將網(wǎng)頁內(nèi)容轉(zhuǎn)換為庫文件后，對于轉(zhuǎn)換成庫文件的內(nèi)容，網(wǎng)頁中已經(jīng)算是插入了這個庫文件，背景顯示為淡黃色，并且不可編輯。當然，我們同樣可以反復(fù)地插入已建立的庫項目。5.2.3網(wǎng)頁與庫文件脫離

網(wǎng)頁中使用了庫文件，該部分元素在網(wǎng)頁中不能直接被編輯，有時候也需要進行脫離以便單獨進行修改。方法是：選中網(wǎng)頁中插入的庫文件，在其對應(yīng)的“屬性”面板中單擊“從源文件中分離”按鈕。這樣，原來不可編輯的庫文件區(qū)域也可以進行編輯修改了。【例5-2】創(chuàng)建庫項目并使用庫更新頁面文件小結(jié)由于模板文件決定了網(wǎng)頁的布局框架，所以可能有時風格一致，但缺乏靈活性和個性。庫項目則可以彌補這一不足。將若干網(wǎng)頁元素