項目六 使用模板和庫

Dreamweaver網(wǎng)頁設(shè)計立體化教程（微課版）（DreamweaverCC2020）項目六使用模板和庫目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁中使用庫實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁實(shí)訓(xùn)二使用庫項目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁在很多網(wǎng)站中會發(fā)現(xiàn)，網(wǎng)站的許多頁面都有很多相同的部分，如果重復(fù)制作這些內(nèi)容，不僅浪費(fèi)時間，增加網(wǎng)頁設(shè)計人員的工作量，而且后期維護(hù)也較為麻煩。這時，可將共同布局的部分創(chuàng)建為模板，以方便遇到相同的布局及元素時應(yīng)用，在制作本任務(wù)時，就需要通過該方法來完成。一、任務(wù)描述（一）任務(wù)背景（1）掌握創(chuàng)建模板和編輯模板的方法。（2）掌握應(yīng)用模板的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識（一）認(rèn)識模板大部分網(wǎng)頁都會根據(jù)網(wǎng)站的性質(zhì)統(tǒng)一整個網(wǎng)頁格式，如將主頁以某種形式顯示，其他網(wǎng)頁文件則需要標(biāo)識要更換的內(nèi)容和固定不變的內(nèi)容，以便于管理重復(fù)網(wǎng)頁的框架，該種方式稱為“模板”。在網(wǎng)頁中使用模板可以一次性修改多個文件。使用模板的網(wǎng)頁，只要網(wǎng)頁中的模板未刪除，網(wǎng)頁將始終與模板處于鏈接狀態(tài)，即可通過修改模板，更改與模板關(guān)聯(lián)的其他網(wǎng)頁文件。二、相關(guān)知識（二）創(chuàng)建模板1．將現(xiàn)有網(wǎng)頁另存為模板創(chuàng)建模板網(wǎng)頁二、相關(guān)知識（二）創(chuàng)建模板2．新建模板網(wǎng)頁“新建文檔”對話框二、相關(guān)知識（三）編輯模板可編輯區(qū)域是指模板中允許編輯的區(qū)域，通過模板創(chuàng)建的網(wǎng)頁，只能修改可編輯區(qū)域中的內(nèi)容。如果模板中未創(chuàng)建可編輯區(qū)域，則通過該模板創(chuàng)建的網(wǎng)頁中的內(nèi)容將無法進(jìn)行修改。1．創(chuàng)建可編輯區(qū)域輸入可編輯區(qū)域的名稱二、相關(guān)知識（三）編輯模板可選區(qū)域可通過定義條件控制該區(qū)域的顯示或隱藏，如在模板創(chuàng)建的網(wǎng)頁中需要顯示某張圖像，而在其他網(wǎng)頁中卻不需要顯示該圖像時，就可以通過創(chuàng)建可選區(qū)域?qū)崿F(xiàn)。2．創(chuàng)建可選區(qū)域“新建可選區(qū)域”對話框二、相關(guān)知識（三）編輯模板在模板中創(chuàng)建重復(fù)區(qū)域，可以將其中的內(nèi)容重復(fù)顯示任意次數(shù)，重復(fù)區(qū)域中的內(nèi)容是不可編輯的，如果需要編輯，則可以在重復(fù)區(qū)域內(nèi)插入可編輯區(qū)域。3．創(chuàng)建重復(fù)區(qū)域“新建重復(fù)區(qū)域”對話框二、相關(guān)知識（三）編輯模板重復(fù)表格可以創(chuàng)建包含重復(fù)行的表格式可編輯區(qū)域，提高創(chuàng)建相同可編輯區(qū)域的效率。4．創(chuàng)建重復(fù)表格“插入重復(fù)表格”對話框二、相關(guān)知識（三）編輯模板可選區(qū)域通常是無法編輯的，要想編輯可選區(qū)域，則需要創(chuàng)建可編輯的可選區(qū)域。方法為：在模板文件中設(shè)置模板參數(shù)，將插入點(diǎn)定位到需創(chuàng)建可編輯可選區(qū)域的位置，然后選擇【插入】/【模板】/【可編輯的可選區(qū)域】菜單命令，打開“新建可選區(qū)域”對話框，設(shè)置好相關(guān)參數(shù)后，單擊“確定”按鈕，創(chuàng)建可編輯的可選區(qū)域。5．創(chuàng)建可編輯的可選區(qū)域二、相關(guān)知識（四）應(yīng)用模板在創(chuàng)建網(wǎng)站時，將共同的布局及元素創(chuàng)建為模板后，只需要將模板應(yīng)用到創(chuàng)建的網(wǎng)頁上，然后在可編輯區(qū)域修改為不同的網(wǎng)頁元素即可創(chuàng)建新的頁面，大大提高了網(wǎng)站的制作效率。應(yīng)用模板有以下3種方法。從模板新建文檔為網(wǎng)頁應(yīng)用模板在“資源”面板中應(yīng)用模板三、任務(wù)實(shí)施下面將“案例展示”網(wǎng)頁文件另存為模板，并在其中添加可編輯區(qū)域、可選區(qū)域和重復(fù)表格，具體操作如下。（一）創(chuàng)建“案例展示”模板“另存模板”對話框新建“標(biāo)題”可編輯區(qū)域三、任務(wù)實(shí)施（一）創(chuàng)建“案例展示”模板新建“說明文字”可編輯區(qū)域“插入重復(fù)表格”對話框創(chuàng)建“圖片展示區(qū)域”重復(fù)表格三、任務(wù)實(shí)施（一）創(chuàng)建“案例展示”模板插入圖片并輸入文本設(shè)置居中對齊三、任務(wù)實(shí)施下面將從“案例展示”模板創(chuàng)建“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁，具體操作如下。（二）從模板創(chuàng)建“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁從模板新建網(wǎng)頁修改“標(biāo)題”可編輯區(qū)域修改“案例說明”可編輯區(qū)域三、任務(wù)實(shí)施（二）從模板創(chuàng)建“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁使重復(fù)表格增加一行修改重復(fù)表格中的圖片以及說明文本目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁中使用庫實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁實(shí)訓(xùn)二使用庫項目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁庫是一種特殊的Dreamweaver文件（后綴名為.lbi），其中包含可放到網(wǎng)頁中的一組資源或資源副本。庫主要用于存放頁面元素，如圖像和文本等，這些元素能夠被重復(fù)使用或頻繁更新，統(tǒng)稱為庫項目。在制作本網(wǎng)頁時，應(yīng)先創(chuàng)建并編輯庫項目，然后在在網(wǎng)頁中的對應(yīng)位置插入庫項目。一、任務(wù)描述（一）任務(wù)背景（1）掌握創(chuàng)建庫項目和編輯庫項目的方法。（2）掌握插入庫項目的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識（一）認(rèn)識“資源”面板“資源”面板是庫項目的載體。選擇【窗口】/【資源】菜單命令，打開“資源”面板，單擊左側(cè)的“庫”按鈕，面板中將顯示庫項目資源的相關(guān)內(nèi)容?！百Y源”面板二、相關(guān)知識（二）創(chuàng)建庫項目如果某些網(wǎng)頁中已經(jīng)包含了可以創(chuàng)建為庫項目的網(wǎng)頁元素，可以將其直接轉(zhuǎn)換為庫項目，并保存在“資源”面板中。1．將已有網(wǎng)頁元素創(chuàng)建為庫項目從已有網(wǎng)頁元素創(chuàng)建庫項目二、相關(guān)知識（二）創(chuàng)建庫項目不選擇任何網(wǎng)頁元素，單擊“資源”面板中的“新建庫項目”按鈕，可在“資源”面板中增加一個空白庫項目，修改其名稱后即可創(chuàng)建空白庫項目。2．創(chuàng)建空白庫項目二、相關(guān)知識（三）編輯庫項目創(chuàng)建的庫項目可隨時修改，只需在“資源”面板中選擇需要修改的庫項目選項，然后單擊下方的“編輯”按鈕，或雙擊庫項目選項，在打開的庫項目網(wǎng)頁中進(jìn)行修改，如圖所示，完成后保存并關(guān)閉網(wǎng)頁。編輯庫項目二、相關(guān)知識（四）插入庫項目創(chuàng)建好庫項目后，可在任意網(wǎng)頁中插入該庫項目，其方法為：將光標(biāo)插入點(diǎn)定位到要插入庫項目的位置，在“資源”面板中選擇要插入的庫項目，然后單擊“插入”按鈕，插入庫項目。三、任務(wù)實(shí)施下面為zxfa.html首頁中的內(nèi)容創(chuàng)建“裝修方案”庫項目，具體操作如下。（一）創(chuàng)建“裝修方案”庫項目選擇表格新建庫項目三、任務(wù)實(shí)施下面在“裝修方案精選”網(wǎng)頁中添加庫項目，具體操作如下。（二）在網(wǎng)頁中添加庫項目插入表格插入庫項目修改文本內(nèi)容通過插入庫項目添加其他裝修方案目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁中使用庫實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁實(shí)訓(xùn)二使用庫項目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁本實(shí)訓(xùn)要制作“中國皮影——陜西皮影”網(wǎng)頁，要求先創(chuàng)建模板，然后再通過模板創(chuàng)建網(wǎng)頁，完成后的效果如圖所示。實(shí)訓(xùn)要求實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁“陜西皮影”網(wǎng)頁是“皮影的地方特色”欄目下的一個網(wǎng)頁，該欄目下的所有網(wǎng)頁的頁面布局都是相同的，在制作時可以先制作一個模板，將網(wǎng)頁中需要修改的內(nèi)容設(shè)置為可編輯區(qū)域，然后從模板新建網(wǎng)頁并修改可以編輯區(qū)域中的內(nèi)容。實(shí)訓(xùn)思路“中國皮影——陜西皮影”網(wǎng)頁效果實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁步驟提示要完成本實(shí)訓(xùn)，首先需要將“dfts.html”網(wǎng)頁文件另存為模板，然后在模板中添加可編輯區(qū)域，最后從模板新建網(wǎng)頁并修改可編輯區(qū)域中的內(nèi)容。其步驟如圖所示。①另存為模板②添加可編輯區(qū)域③從模板新建網(wǎng)頁目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁中使用庫實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁實(shí)訓(xùn)二使用庫項目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁本實(shí)訓(xùn)的要制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁，在其中需要展示多個皮影文創(chuàng)產(chǎn)品，每個產(chǎn)品包括產(chǎn)品圖片、產(chǎn)品名稱、價格等內(nèi)容，結(jié)構(gòu)完全相同，完成后的效果如圖所示。實(shí)訓(xùn)要求實(shí)訓(xùn)二使用庫項目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁在“皮影文創(chuàng)產(chǎn)品”網(wǎng)頁中展示了多個產(chǎn)品，每個產(chǎn)品的展示畫面都是相同的，在制作時可以先制作一個“產(chǎn)品模塊”庫項目，在庫項目的網(wǎng)頁中制作好