1、1 網 頁 設 計 (第5講）2學習目標學習目標插入多媒體元素模板、庫和資源管理3重點：如何使用重點：如何使用FlashFlash動畫、動畫、FlashFlash按鈕、按鈕、FlashFlash元素和元素和AppletApplet小小程序豐富網頁。程序豐富網頁。 41.1 1.1 網頁的動感效果設計網頁的動感效果設計1.2 1.2 插入插入FlashFlash對象對象1.3 1.3 插入其它多媒體元素插入其它多媒體元素1.4 1.4 插入第三方插件插入第三方插件1.5 1.5 實戰演練實戰演練51.1 1.1 網頁的動感效果設計網頁的動感效果設計 1.1.1 1.1.1 案例綜述案例綜述本章案

2、例主本章案例主要是通過在要是通過在網頁中插入網頁中插入FlashFlash動畫和動畫和AppletApplet插件插件等多媒體元等多媒體元素來美化網素來美化網頁，使網頁頁，使網頁看上去更加看上去更加生動。生動。 61.1 1.1 網頁的動感效果設計網頁的動感效果設計 1.1.2 1.1.2 案例分析案例分析本頁面的制作分五個步驟進行：本頁面的制作分五個步驟進行：n頁面基本制作頁面基本制作n BannerBanner條的制作條的制作n導航條的制作導航條的制作n正文區的制作；正文區的制作；n擴展功能。擴展功能。71.1 1.1 網頁的動感效果設計網頁的動感效果設計 1.1.3 1.1.3 實現步驟

3、實現步驟n頁面基本制作頁面基本制作n創建站點創建站點創建主頁文件創建主頁文件設置設置標題標題n BannerBanner條的制作條的制作（透明背景的（透明背景的Flash)Flash)設置圖片背景設置圖片背景插入插入FlashFlash設置背設置背景透明參數景透明參數n導航條的制作導航條的制作插入插入FlashFlash按鈕按鈕81.1 1.1 網頁的動感效果設計網頁的動感效果設計 1.1.3 1.1.3 實現步驟實現步驟n正文區的制作正文區的制作用用CSSCSS樣式格式化頁面樣式格式化頁面插入插入FlashFlash文本文本插入圖像查看器插入圖像查看器插入插入Java Java Applet

4、Applet小程序小程序插入背景音樂插入背景音樂 n擴展功能擴展功能擴展命令擴展命令 擴展對象擴展對象 擴展行為擴展行為 91.2 1.2 插入插入FlashFlash對象對象FlashFlash動畫的優點：文件小，網上傳輸快。動畫的優點：文件小，網上傳輸快。在在Dreamweaver 8Dreamweaver 8中可以插入多種中可以插入多種FlashFlash對象對象包括：包括：FlashFlash動畫、動畫、FlashFlash按鈕、按鈕、FlashFlash文本、文本、FlashFlash視頻、視頻、FlashFlash元素（圖像查看器）、元素（圖像查看器）、FlashFlash文檔等。

5、文檔等。101.2 1.2 插入插入FlashFlash對象對象1.2.1 1.2.1 插入插入FlashFlash動畫動畫 插入插入FlashFlash動畫的操作步驟：動畫的操作步驟：n將插入點置于要插入將插入點置于要插入FlashFlash影片的位置。影片的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash】命令，或命令，或【常用【常用/ /媒體】插入欄中媒體】插入欄中FlashFlash按鈕。按鈕。n在彈出的對話框中選擇一個在彈出的對話框中選擇一個swfswf文件。文件。n插入的插入的FlashFlash動畫顯示為一個灰色的方框，里面動畫顯示為一個灰色的方

6、框，里面有有FlashFlash標志。標志。1.1.單擊【屬性】面板上的【播放】按鈕，可預覽單擊【屬性】面板上的【播放】按鈕，可預覽動畫。動畫。111.2 1.2 插入插入FlashFlash對象對象1.2.1 1.2.1 插入插入FlashFlash動畫動畫設置設置FlashFlash影片屬性：影片屬性：n【FlashFlash】: :影片的名稱。影片的名稱。n【寬】【寬】和和【高】【高】：以像素為單位指定影片的寬：以像素為單位指定影片的寬度和高度。度和高度。n【文件】【文件】：指定指向：指定指向FlashFlash或或ShockwaveShockwave文件的文件的路徑。路徑。n【源文件】

7、【源文件】指定指向指定指向FlashFlash源文檔源文檔( (fla)fla)的路徑。的路徑。n【編輯】【編輯】可以啟動可以啟動Macromedia Flash MX 2004Macromedia Flash MX 2004以更新以更新flafla文件。文件。n【重設大小】【重設大小】將選定影片返回到其初始大小。將選定影片返回到其初始大小。1.1.【循環】【循環】選中則連續播放。選中則連續播放。121.2 1.2 插入插入FlashFlash對象對象1.2.1 1.2.1 插入插入FlashFlash動畫動畫設置設置FlashFlash影片屬性：影片屬性：n【自動播放】選中則在加載頁面時自動

8、播放。【自動播放】選中則在加載頁面時自動播放。n【垂直邊距】和【水平邊距】指定空白的像素值。【垂直邊距】和【水平邊距】指定空白的像素值。n【品質】控制抗失真度。【品質】控制抗失真度。n【比例】確定影片如何適合在【寬】和【高】文本框中設【比例】確定影片如何適合在【寬】和【高】文本框中設置的尺寸。置的尺寸。n【對齊】確定影片在頁面上的對齊方式。【對齊】確定影片在頁面上的對齊方式。n【背景顏色】指定影片區域的背景顏色。【背景顏色】指定影片區域的背景顏色。8.8.【參數】打開一個對話框，可在其中輸入傳遞給影片的附【參數】打開一個對話框，可在其中輸入傳遞給影片的附加參數加參數131.2 1.2 插入插入

9、FlashFlash對象對象1.2.2 1.2.2 插入插入FlashFlash按鈕按鈕 n操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入FlashFlash按鈕對象的位按鈕對象的位置。置。n 選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash按按鈕】命令，或單擊鈕】命令，或單擊【插入】面板上【常【插入】面板上【常用】用】| |【媒體】【媒體】| |【FlashFlash按鈕】，打按鈕】，打開【插入開【插入FlashFlash按鈕】按鈕】對話框對話框. .n設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。141.2 1.2 插入插入FlashFlas

10、h對象對象1.2.3 1.2.3 插入插入FlashFlash文本文本 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入Flash文本對象的文本對象的位置位置 。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash文本】命令，或單文本】命令，或單擊【插入】欄上擊【插入】欄上【常用】【常用】| |【媒體】【媒體】| |【FlashFlash文本】，文本】，打開【插入打開【插入FlashFlash文本】對話框文本】對話框 . .1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。151.2 1.2 插入插入FlashFlash對象對象1.2.4 1.2

11、.4 插入圖像查看器插入圖像查看器 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入Flash元素的位置元素的位置 。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【圖像查看器】命令，打開【圖像查看器】命令，打開【保存【保存FlashFlash元素】對話框。元素】對話框。1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。161.2 1.2 插入插入FlashFlash對象對象1.2.51.2.5插入插入FlashFlash視頻視頻 操作步驟如下操作步驟如下 ：n選擇【插入】【媒體】【選擇【插入】【媒體】【Flash 視頻】命令，或單視頻】命令，或單擊【插入】欄的

12、【常用】類別中的【媒體】下拉框，選擊【插入】欄的【常用】類別中的【媒體】下拉框，選擇【擇【Flash Video】。】。 1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。171.2 1.2 插入插入FlashFlash對象對象1.2.61.2.6插入插入 FlashPaper FlashPaper 文檔文檔 操作步驟如下操作步驟如下 ：n將插入點放在頁面上想要顯示將插入點放在頁面上想要顯示 FlashPaper FlashPaper 文文檔的位置，然后選擇【插入】【媒體】檔的位置，然后選擇【插入】【媒體】【FlashPaperFlashPaper】命令，或單擊【插入】欄的命令，或單

13、擊【插入】欄的【常用】類別中的【媒體】下拉框，選擇【常用】類別中的【媒體】下拉框，選擇【FlashPagerFlashPager】。】。 n在【插入在【插入 FlashPaperFlashPaper】對話框中，瀏覽到一對話框中，瀏覽到一個個 FlashPaper FlashPaper 文檔并將其選定。文檔并將其選定。1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。181.31.3插入其它多媒體元素插入其它多媒體元素 1.3.11.3.1插入插入Java AppletJava Applet小程序小程序 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入AppletAppl

14、et小程序的位置。小程序的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【AppletApplet】命令，或命令，或者單擊【插入】面板上【常規】者單擊【插入】面板上【常規】| |【媒體】【媒體】| |【AppletsApplets】按鈕，打開【選擇文件】對話框，按鈕，打開【選擇文件】對話框，從對話框中選擇擴展名為從對話框中選擇擴展名為. .classclass的文件。的文件。n選中插入到頁面中的選中插入到頁面中的AppletApplet圖標，打開屬性面圖標，打開屬性面板，設置其屬性。板，設置其屬性。 191.31.3插入其它多媒體元素插入其它多媒體元素 1.3.21.3.2插入插

15、入ActiveXActiveX控件控件 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入ActiveXActiveX對象的位置。對象的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【ActiveXActiveX】命令或命令或者單擊【插入】面板上【常規】者單擊【插入】面板上【常規】| |【媒體】【媒體】| |【ActiveXActiveX】按鈕，即可在文檔中插入按鈕，即可在文檔中插入ActiveXActiveX對象。對象。 n選中選中ActiveXActiveX對象圖標，打開它的屬性面板，對象圖標，打開它的屬性面板，設置其屬性。設置其屬性。 201.31.3插入其它多

16、媒體元素插入其它多媒體元素 1.3.31.3.3插入插入 Shockwave Shockwave 影片影片操作步驟如下操作步驟如下 ：n將插入點置于要插入將插入點置于要插入Shockwave 影片的位置。影片的位置。n選擇【插入】選擇【插入】|【媒體】【媒體】|【 Shockwave 】命令，或【常用命令，或【常用/媒體】插入欄中媒體】插入欄中Shockwave圖標。圖標。n插入的插入的Flash動畫顯示為一個灰色的方框，里動畫顯示為一個灰色的方框，里面有面有Shockwave標志。標志。n選中此影片標記，在屬性面板中設置其相關屬選中此影片標記，在屬性面板中設置其相關屬性。性。 211.41.

17、4插入第三方插件插入第三方插件1.4.1 1.4.1 安裝擴展插件安裝擴展插件 利用插件可以增強利用插件可以增強Dreamweaver 8Dreamweaver 8的功能。在網站的功能。在網站可以下載第三方插件，大部分是免費的。可以下載第三方插件，大部分是免費的。插入第三方插件的操作方法：插入第三方插件的操作方法：n在【文檔】窗口中，將插入點置于要插入在【文檔】窗口中，將插入點置于要插入ActiveXActiveX控件的地方。控件的地方。n選擇【插入】欄選擇【插入】欄| |【常用【常用】| |【媒體媒體】| |【 插件插件】圖標，或【插入】圖標，或【插入】| |【媒體】【媒體】| | 【 插件

18、】插件】1.1.出現的出現的 圖標會標記出頁面中插件將在頁面上出圖標會標記出頁面中插件將在頁面上出現的位置現的位置。221.4 1.4 插入第三方插件插入第三方插件( (擴展插件管理器擴展插件管理器) )要保存下載的擴展：要保存下載的擴展：n單擊單擊 Macromedia Exchange Web 站點上的擴展鏈站點上的擴展鏈接，開始下載。接，開始下載。 n將擴展保存到擴展管理器應用程序文件夾的將擴展保存到擴展管理器應用程序文件夾的 Downloaded Extensions 文件夾中。文件夾中。 n執行下列操作之一來安裝擴展：執行下列操作之一來安裝擴展：n在擴展管理器中，選擇在擴展管理器中，

19、選擇“文件文件”“安裝擴展安裝擴展”。 1.瀏覽到已保存在瀏覽到已保存在 Downloaded Extensions 文文件夾中的該文件，然后雙擊文件圖標。件夾中的該文件，然后雙擊文件圖標。 23安裝擴展：安裝擴展：n用以下方法之一啟動擴展管理器：用以下方法之一啟動擴展管理器： n雙擊雙擊 Windows Windows 資源管理器資源管理器 ( (Windows) Windows) 或或 Finder (Macintosh) Finder (Macintosh) 中的擴展文件。中的擴展文件。 n在在 Windows Windows 中，選擇中，選擇“開始開始”菜單中的菜單中的“Macrome

20、dia”“Macromedia Macromedia”“Macromedia 擴展管理器擴展管理器”。 n在在 Macintosh Macintosh 中，雙擊中，雙擊 Applications/Macromedia Extension Manager Applications/Macromedia Extension Manager 文件夾中的擴展管理器圖標。文件夾中的擴展管理器圖標。 1.1.在在 Dreamweaver Dreamweaver 中，選擇中，選擇“命令命令”“”“管理擴管理擴展展”，或者在，或者在 Flash Flash 或或 Fireworks Fireworks 中選擇

21、中選擇“幫幫助助”“”“管理擴展功能管理擴展功能”。 1.4 1.4 插入第三方插件插入第三方插件( (擴展插件管理器擴展插件管理器) )241.4 1.4 插入第三方插件插入第三方插件( (擴展插件管理器擴展插件管理器) )n在擴展管理器工具欄的在擴展管理器工具欄的“產品產品”彈出菜單中，選擇彈出菜單中，選擇您要在其中安裝該擴展的您要在其中安裝該擴展的 Macromedia Macromedia 產品。產品。 n在擴展管理器中，選擇在擴展管理器中，選擇“文件文件”“”“安裝擴展安裝擴展”。 n在出現的文件選擇對話框中，選擇一個擴展名在出現的文件選擇對話框中，選擇一個擴展名為為 . .mxp

22、mxp 的擴展文件，然后選擇的擴展文件，然后選擇“安裝安裝”(”(Windows) Windows) 或或“選擇選擇”(”(Macintosh)Macintosh)。 n仔細閱讀仔細閱讀 Macromedia Macromedia 擴展免責聲明和所有可能附擴展免責聲明和所有可能附帶的第三方擴展許可。帶的第三方擴展許可。 選擇選擇“接受接受”，繼續安裝；，繼續安裝；或者選擇或者選擇“拒絕拒絕”，取消安裝。，取消安裝。251.4 1.4 插入第三方插件插入第三方插件( (擴展插件管理器擴展插件管理器) )n如果您已安裝了該擴展的另一個版本，或者安裝了如果您已安裝了該擴展的另一個版本，或者安裝了具有

23、相同名稱的另一個擴展，擴展管理器會問您是具有相同名稱的另一個擴展，擴展管理器會問您是否禁用已經安裝的那個擴展。否禁用已經安裝的那個擴展。 選擇選擇“是是”會用新會用新的擴展替換以前安裝的擴展，或者選擇的擴展替換以前安裝的擴展，或者選擇“否否”取消取消安裝，保留現有的擴展。安裝，保留現有的擴展。6.6.如果系統問您是否替換一個或多個現有文件，選擇如果系統問您是否替換一個或多個現有文件，選擇“是是”或者或者“全是全是”將接受擴展中包括的一個或多將接受擴展中包括的一個或多個版本；或者選擇個版本；或者選擇“否否”，則保留當前文件版本。，則保留當前文件版本。 如果您單擊如果您單擊“取消取消”，則會取消安

24、裝，不安裝或替，則會取消安裝，不安裝或替換任何文件。換任何文件。261.4 1.4 插入第三方插件插入第三方插件( (擴展插件管理器擴展插件管理器) )1.4.21.4.2使用擴展插件使用擴展插件 Dreamweaver插件一般有三大類：對象，命令，插件一般有三大類：對象，命令，行為行為 n對象：將出現在【插入】菜單或【插入】欄中。對象：將出現在【插入】菜單或【插入】欄中。n命令：將出現在【命令】菜單下。命令：將出現在【命令】菜單下。6.6.行為：在行為面板的動作列表中。行為：在行為面板的動作列表中。 271.51.5實戰演練實戰演練 一、實戰效果旅游網一、實戰效果旅游網281.51.5實戰演

25、練實戰演練 一、實戰要求一、實戰要求n添加添加FlashFlash動畫。動畫。n添加添加AppletApplet小程序。小程序。1.1.添加背景音樂。添加背景音樂。 29 重點：模板、庫的創建、編輯、應重點：模板、庫的創建、編輯、應用、修改，站點的更新。用、修改，站點的更新。 難點：如何合理的設置和定義模板難點：如何合理的設置和定義模板的可編輯區域。的可編輯區域。302.1 2.1 應用模板制作相似網頁應用模板制作相似網頁2.2 2.2 模板的基本操作模板的基本操作2.3 2.3 庫的應用庫的應用2.4 2.4 資源管理資源管理2.5 2.5 實戰演練實戰演練312.12.1應用模板制作相似網

26、頁應用模板制作相似網頁2.1.1 2.1.1 案例綜述案例綜述 本例通過模板設計出網頁的整體風格、布局，本例通過模板設計出網頁的整體風格、布局，當制作各個分頁時，通過模板來創建，而當修改模當制作各個分頁時，通過模板來創建，而當修改模板時，與之相鏈接的網頁都將隨之改變。板時，與之相鏈接的網頁都將隨之改變。 322.12.1應用模板制作相似網頁應用模板制作相似網頁2.1.2 2.1.2 案例分析案例分析 在制作中，可利用模板來設計其相同部分，不在制作中，可利用模板來設計其相同部分，不同之處留為可編輯區域，待在具體制作網頁時，再同之處留為可編輯區域，待在具體制作網頁時，再將具體內容填入可編輯區域。將

27、具體內容填入可編輯區域。 可編輯區可編輯區域域332.12.1應用模板制作相似網頁應用模板制作相似網頁2.1.3 2.1.3 實現步驟實現步驟 n制作模板制作模板 n基本元素的制作基本元素的制作 n創建可編輯區域創建可編輯區域 n創建基于模板的網頁文檔創建基于模板的網頁文檔 1.1.修改模板并更新修改模板并更新 342.2 2.2 模板的基本操作模板的基本操作2.2.1 2.2.1 模板的基本特點模板的基本特點使用模板的好處在于：使用模板的好處在于：1.1.可以生成大批的風格相近的網頁。可以生成大批的風格相近的網頁。2.2.一旦模板修改了，就修改了一批網頁（自動一旦模板修改了，就修改了一批網頁

28、（自動更新）。更新）。352.2 2.2 模板的基本操作模板的基本操作2.2.2 2.2.2 模板的創建與保存模板的創建與保存1.1.模板的創建方法模板的創建方法 方法一：方法一：通過菜單創建模板通過菜單創建模板 步驟步驟1 1在文件面板中選擇要創建模板的站點。在文件面板中選擇要創建模板的站點。步驟步驟2 2選擇【文件】【新建】【常規】模板頁，選選擇【文件】【新建】【常規】模板頁，選擇需創建的模板類型。單擊【確定】，創建了一個空白模擇需創建的模板類型。單擊【確定】，創建了一個空白模板板 方法二：在【資源】面板創建模板方法二：在【資源】面板創建模板步驟步驟1 1在文件面板中選擇要創建模板的站點。

29、在文件面板中選擇要創建模板的站點。步驟步驟2 2選擇【窗口】【資源】命令，打開【資源】面板，選擇【窗口】【資源】命令，打開【資源】面板，選定面板左側的【模板】按鈕，單擊選定面板左側的【模板】按鈕，單擊“添加添加”按鈕。按鈕。 方法三：利用現成網頁創建模板方法三：利用現成網頁創建模板步驟步驟1 1打開欲做模板的網頁。打開欲做模板的網頁。步驟步驟2 2選擇【文件】【另存為模板】命令。選擇【文件】【另存為模板】命令。362.2 模板的基本操作模板的基本操作2 2、模板的保存、模板的保存n新建的模板文件會保存在本地站點的新建的模板文件會保存在本地站點的TemplatesTemplates文件夾中。文件

30、夾中。n如果該如果該TemplatesTemplates文件夾在站點中尙不存在，文件夾在站點中尙不存在，Dreamweaver 8Dreamweaver 8將在保存新建模板時自動創將在保存新建模板時自動創建該文件夾。建該文件夾。n模板文件的擴展名為模板文件的擴展名為. .dwtdwt。372.2 2.2 模板的基本操作模板的基本操作2.2.3 創建可編輯區域創建可編輯區域 可編輯模板區域控制基于模板的頁面中的哪些可編輯模板區域控制基于模板的頁面中的哪些區域可以編輯。設置可編輯區域，需要在制作區域可以編輯。設置可編輯區域，需要在制作模板的時候完成。模板的時候完成。 相似網頁相似網頁 n完全一樣部

31、分（在模板中制作）完全一樣部分（在模板中制作）n不同部分（設為可編輯區域）不同部分（設為可編輯區域）38設置可編輯區域的具體步驟如下：設置可編輯區域的具體步驟如下：n步驟步驟1 1在已創建的模板文件中，編輯網頁，在已創建的模板文件中，編輯網頁，其布局、制作方法與普通網頁完全一致。其布局、制作方法與普通網頁完全一致。n步驟步驟2 2將插入點放在想要插入可編輯區域的將插入點放在想要插入可編輯區域的地方地方n步驟步驟3 3在插入欄中選擇【模板】，然后單擊在插入欄中選擇【模板】，然后單擊【可編輯區域】按鈕。【可編輯區域】按鈕。n步驟步驟4 4在【新建可編輯區域】對話框中，輸在【新建可編輯區域】對話框中

32、，輸入該區域的名稱入該區域的名稱, ,單擊【確定】按鈕單擊【確定】按鈕2.2 2.2 模板的基本操作模板的基本操作39要點提示：要點提示：1.1.表格布局的模板定義可編輯區域時，可將整表格布局的模板定義可編輯區域時，可將整個表格或表格的某個單元格定義為可編輯區個表格或表格的某個單元格定義為可編輯區域，但是不能同時將多個單元格定義為一個域，但是不能同時將多個單元格定義為一個單獨的可編輯區域。單獨的可編輯區域。2.2.層和層中的內容是不同的元素，當層設為可層和層中的內容是不同的元素，當層設為可編輯區域時，在應用該模板編輯文檔時，可編輯區域時，在應用該模板編輯文檔時，可改變層的位置和層中的內容。而將

33、層的內容改變層的位置和層中的內容。而將層的內容設為可編輯區域時，則只能改變層中的內容設為可編輯區域時，則只能改變層中的內容而不能改變層的位置。而不能改變層的位置。2.2 2.2 模板的基本操作模板的基本操作402.2.4 2.2.4 創建基于模板的網頁創建基于模板的網頁方法一：用菜單方式方法一：用菜單方式n步驟步驟1 1選擇【文件】【新建】選擇【文件】【新建】| |【新建文檔】【新建文檔】| |【模板】，選擇新建的頁面存放的站點及所用【模板】，選擇新建的頁面存放的站點及所用模板名稱。模板名稱。n步驟步驟2 2選中【當模板改變時更新頁面】的復選選中【當模板改變時更新頁面】的復選框時，當模板被修改

34、后，用此模板創建的網頁也框時，當模板被修改后，用此模板創建的網頁也會被修改。會被修改。n步驟步驟3 3單擊【創建】按鈕，此時在網頁編輯窗單擊【創建】按鈕，此時在網頁編輯窗口建立了一個由模板生成的網頁，設計者可在可口建立了一個由模板生成的網頁，設計者可在可編輯區域輸入相關內容。編輯區域輸入相關內容。2.2 2.2 模板的基本操作模板的基本操作412.2.4 2.2.4 創建基于模板的網頁創建基于模板的網頁方法二：用資源面板方法二：用資源面板n步驟步驟1 1首先新建頁面，通過【窗口】菜單打開資源首先新建頁面，通過【窗口】菜單打開資源面板。面板。n步驟步驟2 2選擇面板中的模板資源。選擇面板中的模板

35、資源。n步驟步驟3 3選中欲使用的模板，單擊【應用】按鈕；或選中欲使用的模板，單擊【應用】按鈕；或將選中的模板拖到編輯窗口。應用模板文檔在右上將選中的模板拖到編輯窗口。應用模板文檔在右上角會標明模板名稱。角會標明模板名稱。n步驟步驟4 4在應用了模板的文檔的可編輯區域內編輯相在應用了模板的文檔的可編輯區域內編輯相關內容。關內容。2.2 2.2 模板的基本操作模板的基本操作422.2 2.2 模板的基本操作模板的基本操作2.2.5 2.2.5 更新模板及頁面更新模板及頁面修改模板操作步驟：修改模板操作步驟：步驟步驟1 1選擇【窗口】【資源】命令，打開資源面板，選擇【窗口】【資源】命令，打開資源面

36、板，切換到【模板】資源。切換到【模板】資源。步驟步驟2 2選中要修改的模板后右擊鼠標，在快捷菜單中選選中要修改的模板后右擊鼠標，在快捷菜單中選擇【編輯】命令，或雙擊該模板，便可打開要修改的擇【編輯】命令，或雙擊該模板，便可打開要修改的模板模板. .步驟步驟3 3在快捷菜單中選擇【新建可編輯區域】在快捷菜單中選擇【新建可編輯區域】【刪除【刪除模板標記】以添加或刪除可編輯區域。模板標記】以添加或刪除可編輯區域。步驟步驟4 4模板修改完成后，選擇【文件】【保存】命令，模板修改完成后，選擇【文件】【保存】命令，保存模板。保存模板。432.2 2.2 模板的基本操作模板的基本操作更新頁面：更新頁面：n保

37、存模板時，保存模板時，Dreamweaver 8Dreamweaver 8會詢問它會詢問它是否更是否更新新所有附著到該模板的網頁。所有附著到該模板的網頁。n也可以使用也可以使用【修改】【模板】【更新頁【修改】【模板】【更新頁面】面】命令。或【模板】資源窗口右上角的按命令。或【模板】資源窗口右上角的按鈕，選擇【更新站點】命令，鈕，選擇【更新站點】命令，DreamweaverDreamweaver在在該模板所在的站點中更新基于模板的所有網該模板所在的站點中更新基于模板的所有網頁文檔。頁文檔。 442.32.3庫的應用庫的應用 庫庫是一種用來存儲想要在整個網站上經常重復使是一種用來存儲想要在整個網站

38、上經常重復使用或更新的頁面元素（如圖像、文本和其他對象）用或更新的頁面元素（如圖像、文本和其他對象）的方法。這些元素稱為庫項目的方法。這些元素稱為庫項目 使用庫的意義使用庫的意義：如果使用了庫，就可以通過改動：如果使用了庫，就可以通過改動庫更新所有采用庫的網頁，不用一個一個的修改庫更新所有采用庫的網頁，不用一個一個的修改網頁元素或者重新制作網頁。使用庫比使用模板，網頁元素或者重新制作網頁。使用庫比使用模板，有更大的靈活性。有更大的靈活性。 452.32.3庫的應用庫的應用2.3.12.3.1 創建庫項目創建庫項目創建庫項目的方式有兩種：創建庫項目的方式有兩種： n選定內容創建為庫項目。選定內容

39、創建為庫項目。n創建一個空白庫項目創建一個空白庫項目 462.32.3庫的應用庫的應用n選定內容創建為庫項目選定內容創建為庫項目 操作操作方法方法：n步驟步驟1 1 選擇【窗口】【資源】命令，出現選擇【窗口】【資源】命令，出現“資源資源”面板，選擇面板左側的面板，選擇面板左側的“庫庫”類別。類別。n步驟步驟2 2 在在“文檔文檔”窗口中，選擇文檔要另窗口中，選擇文檔要另存為庫項目的內容。存為庫項目的內容。n步驟步驟3 3 將選定內容拖到將選定內容拖到“資源資源”面板的面板的“庫庫”類別中，或者單擊類別中，或者單擊“資源資源”面板的面板的“庫庫”類別底部的類別底部的“新建庫項目新建庫項目”按鈕，

40、一個庫項目被按鈕，一個庫項目被創建，此時網頁文檔下方的屬性檢查器也變為創建，此時網頁文檔下方的屬性檢查器也變為“庫項目庫項目”檢查器。檢查器。n步驟步驟4 4為新的庫項目輸入一個名稱。為新的庫項目輸入一個名稱。 472.32.3庫的應用庫的應用n創建一個空白庫項目創建一個空白庫項目操作方法：操作方法：n步驟步驟1 1 選擇【窗口】【資源】選擇【窗口】【資源】【庫】【庫】n步驟步驟2 2 在在“資源資源”面板中，單擊面板中，單擊“庫庫”類別底類別底部的部的“新建庫項目新建庫項目”按鈕。按鈕。n步驟步驟3 3 一個新的庫項目被添加到面板上的列表一個新的庫項目被添加到面板上的列表中。中。n步驟步驟4

41、 4 為新的庫項目輸入一個名稱。為新的庫項目輸入一個名稱。n步驟步驟5 5 雙擊該庫項目，在文檔窗口進行編輯。雙擊該庫項目，在文檔窗口進行編輯。482.32.3庫的應用庫的應用2.3.2 2.3.2 插入庫項目插入庫項目操作方法：操作方法：n步驟步驟1 1 將文本光標定位于將文本光標定位于“文檔文檔”窗口窗口中。中。n步驟步驟2 2 在在“資源資源”面板上選擇面板左側的面板上選擇面板左側的“庫庫”類別。類別。n步驟步驟3 3 將一個庫項目從將一個庫項目從“資源資源”面板拖動到面板拖動到“文檔文檔”窗口中，或者選擇一個庫項目，然窗口中，或者選擇一個庫項目，然后單擊面板底部的后單擊面板底部的“插入

42、插入”按鈕。按鈕。492.32.3庫的應用庫的應用注意：注意：插入庫項目后，會在插入庫項目后，會在“文檔文檔”窗口的下方出現窗口的下方出現“庫項目庫項目”屬性檢查器，如圖所示。屬性檢查器，如圖所示。n【從源文件分離】可以斷開文檔中的項目和庫【從源文件分離】可以斷開文檔中的項目和庫之間的鏈接，從而使文檔中的庫項目可編輯。之間的鏈接，從而使文檔中的庫項目可編輯。“庫項目庫項目”屬性檢查器屬性檢查器502.32.3庫的應用庫的應用2.3.32.3.3修改庫項目和更新站點修改庫項目和更新站點當修改庫項目時，可以更新使用該項目的所有文當修改庫項目時，可以更新使用該項目的所有文檔。檔。1 1 修改庫項目修

43、改庫項目n步驟步驟1 1 選中頁面中的庫項目。選中頁面中的庫項目。n步驟步驟2 2在屬性面板中點擊在屬性面板中點擊“打開打開”按鈕。按鈕。n步驟步驟3 3修改庫項目，修改完成之后保存。修改庫項目，修改完成之后保存。n步驟步驟4 4在在“更新庫項目更新庫項目”對話框中點擊對話框中點擊“更更新新”按鈕。按鈕。n步驟步驟5 5選擇更新的范圍，更新完成之后關閉。選擇更新的范圍，更新完成之后關閉。 512.32.3庫的應用庫的應用2.3.32.3.3修改庫項目和更新站點修改庫項目和更新站點2.2.更新整個站點或所有使用特定庫項目的文檔更新整個站點或所有使用特定庫項目的文檔：選擇【修改】【庫】【更新頁面】

44、選擇【修改】【庫】【更新頁面】3. 3. 更改當前文檔已使用所有庫項目的當前版本更改當前文檔已使用所有庫項目的當前版本選擇【修改】選擇【修改】| |【庫】【更新當前頁】【庫】【更新當前頁】 522.4 2.4 資源管理資源管理 利用【資源】面板的功能可以統一管理整個站點的利用【資源】面板的功能可以統一管理整個站點的資源，避免反復查找某些網頁元素，能大大提高網資源，避免反復查找某些網頁元素，能大大提高網頁設計的效率，得到事半功倍的效果。頁設計的效率，得到事半功倍的效果。 在【資源】面板中管理的幾種對象分別是：【圖在【資源】面板中管理的幾種對象分別是：【圖像】、【顏色】、【超鏈接】、：【像】、【顏

45、色】、【超鏈接】、：【FlashFlash】、】、【ShockwaveShockwave】、【】、【視頻】、【腳本】、【模板】、視頻】、【腳本】、【模板】、【庫】。【庫】。532.4 2.4 資源管理資源管理 選擇【窗口】【資源】命令，或者直接按選擇【窗口】【資源】命令，或者直接按F10F10鍵，鍵，可打開【資源】面板。可打開【資源】面板。 圖像管理顏色管理鏈接管理Flash管理Shockwave管理視頻管理腳本管理模板管理庫管理542.4 2.4 資源管理資源管理 2.4.1 2.4.1 圖像管理圖像管理 【資源】面板能自動管理本地站點內的每一幅圖像。【資源】面板能自動管理本地站點內的每一幅

46、圖像。【資源】面板可對本地站點內的圖像完成插入、編【資源】面板可對本地站點內的圖像完成插入、編輯和管理，其操作步驟如下輯和管理，其操作步驟如下: : （1 1）打開打開 圖像圖像 資源：資源：單擊單擊 資源資源 面板左側的圖面板左側的圖像按鈕，可進入【圖像】窗口。像按鈕，可進入【圖像】窗口。 ( (2 2) ) 插入圖像：插入圖像：把光標定位在網頁編輯窗口的圖把光標定位在網頁編輯窗口的圖像插入處，然后在圖像列表中選中要插入的圖像，像插入處，然后在圖像列表中選中要插入的圖像，單擊【插入】即可插入的圖像。單擊【插入】即可插入的圖像。 ( (3 3) ) 編輯圖像：編輯圖像：在圖像列表中選中要編輯修

47、改的在圖像列表中選中要編輯修改的圖像，然后單擊該面板底部的編輯按鈕，啟動圖像，然后單擊該面板底部的編輯按鈕，啟動Dreamweaver 8Dreamweaver 8默認的圖像編輯軟件來對選中的圖像默認的圖像編輯軟件來對選中的圖像進行編輯與修改。進行編輯與修改。552.4 2.4 資源管理資源管理 2.4.1 2.4.1 圖像管理圖像管理 (4)(4)圖片收藏夾：圖片收藏夾：n添加：添加：單擊位于【資源】面板底端的【添單擊位于【資源】面板底端的【添加到收藏夾】按鈕，可將圖片收藏到收藏加到收藏夾】按鈕，可將圖片收藏到收藏夾中。夾中。n查看：查看：在【圖像】管理窗口的頂端選擇在【圖像】管理窗口的頂端

48、選擇【收藏】單選按鈕，即可在圖像列表欄中【收藏】單選按鈕，即可在圖像列表欄中查看站點中的圖片收藏情況。查看站點中的圖片收藏情況。n刪除：刪除：單擊位于【資源】面板底部的【從單擊位于【資源】面板底部的【從收藏夾中刪除】按鈕后即可將圖像從收藏收藏夾中刪除】按鈕后即可將圖像從收藏夾中刪除。夾中刪除。 562.4 2.4 資源管理資源管理 2.4.2 2.4.2 顏色管理顏色管理 n打開打開 資源資源 面板面板：選擇【窗口】【資源】命：選擇【窗口】【資源】命令，或者按令，或者按F10F10鍵。鍵。n打開打開 顏色顏色 資源：資源：單擊【資源】面板左側的單擊【資源】面板左側的【顏色】按鈕即可進入【顏色】管理窗口。【顏色】按鈕即可進入【顏色】管理窗口。n顏色收藏夾：顏色收藏夾：單擊位于【資源】面板頂端的單擊位于【資源】面板頂端的【收藏】單選按鈕，切換到顏