計算機網絡與網頁制作Chapter15：使用模塊化技術PPT課件

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

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

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

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

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

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

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

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