計算機網(wǎng)絡(luò)與網(wǎng)頁制作Chapter15：使用模塊化技術(shù)PPT課件

1、計算機網(wǎng)絡(luò)與網(wǎng)頁制作Chapter 15：使用模塊化技術(shù)復(fù)旦大學(xué)計算機學(xué)院肖川1目標(biāo)添加代碼片斷使用庫重用一些常用項新建和修改頁面模板新建和復(fù)制模板內(nèi)可編輯區(qū)2效果31. 代碼片斷的介紹代碼片斷庫頁面內(nèi)任何元素(即代碼片斷)可存儲為庫元件庫是DW軟件的一部分，不限于某個站點任何站點都可使用庫里的代碼片斷通過“代碼片斷”面板管理庫元件修改庫元件不會影響已經(jīng)在頁面內(nèi)使用的此元件實例4代碼片斷庫類似于超級剪貼板2. 使用代碼片斷“代碼片斷”面板添加、編輯代碼片斷選中代碼片斷并拖至頁面內(nèi)很多現(xiàn)成的代碼片斷5代碼片斷庫示例在面板內(nèi)選中某個代碼片斷時，在面板的上半部顯示的是當(dāng)前代碼片斷的預(yù)覽（設(shè)計或代碼）

2、把代碼片段拖至頁面的特定位置63. 新建代碼片斷從“代碼片斷”面板直接創(chuàng)建新的代碼片斷用頁面上被選中的頁面元素創(chuàng)建代碼片斷7把phonetips.html的表格做成代碼片斷選中表格，再單擊“代碼片斷”面板右下角的“新建代碼片斷”圖標(biāo)8自動生成“插入代碼”的內(nèi)容。在面板內(nèi)可以改變代碼片斷所在文件夾。注意，庫里的表格沒有呈現(xiàn)樣式。在main.html中使用新建的代碼片斷在頁面內(nèi)定位光標(biāo)，再雙擊面板內(nèi)的代碼片斷。9庫里的代碼片斷并不包含CSS代碼，此表格之所以有樣式，是因為main.html引用了外部樣式文件。修改面板里的代碼不會影響頁面上已經(jīng)使用的代碼片斷104. 庫和庫項庫是Dreamweave

3、r的另一種模塊化技術(shù)，每個站點有自己的庫(即站點內(nèi)Library文件夾)，站點之間不能共享庫?？梢园讶魏雾撁嬖胤湃霂斐蔀閹祉?。每個庫項單獨地保存為一個文件，后綴名為.lbi。 (library item)添加至網(wǎng)頁的庫項稱為實例。庫項與其多個實例始終保持關(guān)聯(lián)，修改庫項會自動更新該庫項的所有實例。通過面板 資源庫 進行管理。11新建庫項選中頁面元素，面板 資源庫新建庫項。12Div呈現(xiàn)高亮黃色，表明它是庫項的一個實例。插入庫項1) 把庫項拖至頁面內(nèi)2) 定位光標(biāo)，在“資源”面板內(nèi)選中庫項，再單擊“插入”按鈕。若庫項是AP Div則無需定位光標(biāo)。13演示：分別在phonetips.html 和r

4、ecommend.html 頁面內(nèi)插入 GNav 庫項修改庫項1) 在“資源”面板內(nèi)雙擊庫項2) 在頁面內(nèi)選中庫項的一個實例，之后在“屬性”面板單擊“打開”按鈕來編輯庫項14打開庫項，不包含樣式添加超鏈接保存時彈出“更新庫項目”對話框，決定是否要把庫項的改動反映到該庫項的實例15了解更新時是否發(fā)生錯誤庫項對應(yīng)的全部實例自動更新16注意導(dǎo)航超鏈接路徑的自動變化，因此庫項對超鏈接導(dǎo)航尤其有用。把被鏈接的網(wǎng)頁移到新文件夾新建文件夾GlobalNavigation把login.html拖至新文件夾后，自動彈出“更新文件”對話框。17列出了由于login.html的移動而受到影響的頁面這些頁面包含指向l

5、ogin.html的超鏈接。解除某個實例與庫項的關(guān)聯(lián)在頁面內(nèi)選中庫項實例，之后在“屬性”面板單擊“從源文件中分離”按鈕。分離后庫項的更改不會影響到這個實例。18刪除庫項在“資源”面板內(nèi)選中庫項，再單擊底部的“刪除”圖標(biāo)。在面板內(nèi)刪除庫項將自動刪除Library文件夾下對應(yīng)的lbi文件。刪除庫項不會影響頁面中已有的該庫項實例。195. 模板的介紹Dreamweaver的模板是用于創(chuàng)建其他網(wǎng)頁的母版。當(dāng)你創(chuàng)建一個模板時，你需要指定頁面內(nèi)只讀區(qū)域和可編輯區(qū)域。用模板創(chuàng)建的網(wǎng)頁繼承了模板的全部元素，你可以修改網(wǎng)頁的可編輯區(qū)使之包含特有的內(nèi)容和元素。與庫項相同，當(dāng)你修改一個模板后，所有基于此模板的網(wǎng)頁會

6、自動更新以反映模板的改動。每個站點有自己的模板庫(即站點內(nèi)Templates文件夾)，站點之間不能共享模板。可以把任何頁面轉(zhuǎn)成模板。每個模板單獨地保存為一個文件，后綴名為.dwt。 (dreamweaver template)通過面板 資源模板 進行管理。20新建模板分別從category.html和phone_detail.html創(chuàng)建模板。先把GNav庫項添加至phone_detail.html，這一步不是創(chuàng)建模板所必需的。打開頁面文件，菜單 文件另存為模板。21模板文件將保存于Templates文件夾內(nèi)，故文件中鏈接的相對路徑需要更新。設(shè)置模板的可編輯區(qū)在“文件”面板雙擊模板文件或者在“

7、資源”面板雙擊模板均可打開模板。選中模板內(nèi)頁面元素，菜單 插入模板對象可編輯區(qū)域，再輸入?yún)^(qū)域名稱。22插入三個可編輯區(qū)域。用此模板創(chuàng)建的網(wǎng)頁只有這三個區(qū)域是可修改內(nèi)容的。用模板新建網(wǎng)頁1) 在“資源”面板選中模板，再從右鍵快捷菜單選擇“從模板新建”2) 菜單 文件新建模板中的頁，再從模板列表選中模板，之后單擊“創(chuàng)建”按鈕。23保存網(wǎng)頁24如此形狀的光標(biāo)表示不可編輯。這是可編輯區(qū)域表示這個網(wǎng)頁與模板phone_detail關(guān)聯(lián)。2個實例25phone1.htmlphone2.html26修改模板打開模板phone_detail，菜單 插入模板對象可編輯區(qū)域。插入重復(fù)區(qū)域用模板創(chuàng)建網(wǎng)頁時，你可以多

8、次添加或重復(fù)模板的“重復(fù)區(qū)域”來顯示信息。一個重復(fù)區(qū)域并非自動就是可編輯的，因此，為了在網(wǎng)頁中可以添加或編輯重復(fù)區(qū)域的內(nèi)容，你需要在重復(fù)區(qū)域內(nèi)設(shè)置可編輯區(qū)域。27往category模板插入重復(fù)區(qū)域打開模板，選中表格，再菜單 插入模板對象重復(fù)區(qū)域，28在重復(fù)區(qū)域內(nèi)插入可編輯區(qū)域在模板內(nèi)選中頁面元素，菜單 插入模板對象可編輯區(qū)域，則所選內(nèi)容位于可編輯區(qū)域內(nèi)。29一個模板內(nèi)區(qū)域名稱不能重復(fù)。在網(wǎng)頁中編輯重復(fù)區(qū)域用category模板新建網(wǎng)頁category_phone.html。在新建的網(wǎng)頁中通過單擊“+”按鈕把重復(fù)區(qū)域Phones增加一次。30表示這個網(wǎng)頁是用模板category創(chuàng)建的。用于添加、刪除或者上下移動重復(fù)區(qū)域。修改頁面的可編輯區(qū)域31調(diào)整重復(fù)項的上下位置32上下移動光標(biāo)