05-網(wǎng)頁設(shè)計(插多媒體元素和模板、庫及資源管理)

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

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

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

4、Applet小程序小程序插入背景音樂插入背景音樂 n擴展功能擴展功能擴展命令擴展命令 擴展對象擴展對象 擴展行為擴展行為 91.2 1.2 插入插入FlashFlash對象對象FlashFlash動畫的優(yōu)點：文件小，網(wǎng)上傳輸快。動畫的優(yōu)點：文件小，網(wǎng)上傳輸快。在在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標(biāo)志。標(biāo)志。1.1.單擊【屬性】面板上的【播放】按鈕，可預(yù)覽單擊【屬性】面板上的【播放】按鈕，可預(yù)覽動畫。動畫。111.2 1.2 插入插入FlashFlash對象對象1.2.1 1.2.1 插入插入FlashFlash動畫動畫設(shè)置設(shè)置FlashFlash影片屬性：影片屬性：n【FlashFlash】: :影片的名稱。影片的名稱。n【寬】【寬】和和【高】【高】：以像素為單位指定影片的寬：以像素為單位指定影片的寬度和高度。度和高度。n【文件】【文件】：指定指向：指定指向FlashFlash或或ShockwaveShockwave文件的文件的路徑。路徑。n【源文件】

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

8、播放?！咀詣硬シ拧窟x中則在加載頁面時自動播放。n【垂直邊距】和【水平邊距】指定空白的像素值?！敬怪边吘唷亢汀舅竭吘唷恐付瞻椎南袼刂?。n【品質(zhì)】控制抗失真度。【品質(zhì)】控制抗失真度。n【比例】確定影片如何適合在【寬】和【高】文本框中設(shè)【比例】確定影片如何適合在【寬】和【高】文本框中設(shè)置的尺寸。置的尺寸。n【對齊】確定影片在頁面上的對齊方式?！緦R】確定影片在頁面上的對齊方式。n【背景顏色】指定影片區(qū)域的背景顏色。【背景顏色】指定影片區(qū)域的背景顏色。8.8.【參數(shù)】打開一個對話框，可在其中輸入傳遞給影片的附【參數(shù)】打開一個對話框，可在其中輸入傳遞給影片的附加參數(shù)加參數(shù)131.2 1.2 插入插入

9、FlashFlash對象對象1.2.2 1.2.2 插入插入FlashFlash按鈕按鈕 n操作步驟如下操作步驟如下 ：n將光標(biāo)放到要插入將光標(biāo)放到要插入FlashFlash按鈕對象的位按鈕對象的位置。置。n 選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash按按鈕】命令，或單擊鈕】命令，或單擊【插入】面板上【?！静迦搿棵姘迳稀境Ｓ谩坑谩縷 |【媒體】【媒體】| |【FlashFlash按鈕】，打按鈕】，打開【插入開【插入FlashFlash按鈕】按鈕】對話框?qū)υ捒? .n設(shè)置完成后單擊設(shè)置完成后單擊“確定確定”按鈕。按鈕。141.2 1.2 插入插入FlashFlas

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

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

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

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

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

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

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

17、4插入第三方插件插入第三方插件1.4.1 1.4.1 安裝擴展插件安裝擴展插件 利用插件可以增強利用插件可以增強Dreamweaver 8Dreamweaver 8的功能。在網(wǎng)站的功能。在網(wǎng)站可以下載第三方插件，大部分是免費的?？梢韵螺d第三方插件，大部分是免費的。插入第三方插件的操作方法：插入第三方插件的操作方法：n在【文檔】窗口中，將插入點置于要插入在【文檔】窗口中，將插入點置于要插入ActiveXActiveX控件的地方?？丶牡胤健選擇【插入】欄選擇【插入】欄| |【常用【常用】| |【媒體媒體】| |【 插件插件】圖標(biāo)，或【插入】圖標(biāo)，或【插入】| |【媒體】【媒體】| | 【 插件

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

19、選擇“文件文件”“安裝擴展安裝擴展”。 1.瀏覽到已保存在瀏覽到已保存在 Downloaded Extensions 文文件夾中的該文件，然后雙擊文件圖標(biāo)。件夾中的該文件，然后雙擊文件圖標(biāo)。 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 文件夾中的擴展管理器圖標(biāo)。文件夾中的擴展管理器圖標(biāo)。 1.1.在在 Dreamweaver Dreamweaver 中，選擇中，選擇“命令命令”“”“管理擴管理擴展展”，或者在，或者在 Flash Flash 或或 Fireworks Fireworks 中選擇

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

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

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

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

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

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

27、具體內(nèi)容填入可編輯區(qū)域。 可編輯區(qū)可編輯區(qū)域域332.12.1應(yīng)用模板制作相似網(wǎng)頁應(yīng)用模板制作相似網(wǎng)頁2.1.3 2.1.3 實現(xiàn)步驟實現(xiàn)步驟 n制作模板制作模板 n基本元素的制作基本元素的制作 n創(chuàng)建可編輯區(qū)域創(chuàng)建可編輯區(qū)域 n創(chuàng)建基于模板的網(wǎng)頁文檔創(chuàng)建基于模板的網(wǎng)頁文檔 1.1.修改模板并更新修改模板并更新 342.2 2.2 模板的基本操作模板的基本操作2.2.1 2.2.1 模板的基本特點模板的基本特點使用模板的好處在于：使用模板的好處在于：1.1.可以生成大批的風(fēng)格相近的網(wǎng)頁?？梢陨纱笈娘L(fēng)格相近的網(wǎng)頁。2.2.一旦模板修改了，就修改了一批網(wǎng)頁（自動一旦模板修改了，就修改了一批網(wǎng)頁

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

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

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

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

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

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

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

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

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

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

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

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

40、一個庫項目被按鈕，一個庫項目被創(chuàng)建，此時網(wǎng)頁文檔下方的屬性檢查器也變?yōu)閯?chuàng)建，此時網(wǎng)頁文檔下方的屬性檢查器也變?yōu)椤皫祉椖繋祉椖俊睓z查器。檢查器。n步驟步驟4 4為新的庫項目輸入一個名稱。為新的庫項目輸入一個名稱。 472.32.3庫的應(yīng)用庫的應(yīng)用n創(chuàng)建一個空白庫項目創(chuàng)建一個空白庫項目操作方法：操作方法：n步驟步驟1 1 選擇【窗口】【資源】選擇【窗口】【資源】【庫】【庫】n步驟步驟2 2 在在“資源資源”面板中，單擊面板中，單擊“庫庫”類別底類別底部的部的“新建庫項目新建庫項目”按鈕。按鈕。n步驟步驟3 3 一個新的庫項目被添加到面板上的列表一個新的庫項目被添加到面板上的列表中。中。n步驟步驟4

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

42、插入”按鈕。按鈕。492.32.3庫的應(yīng)用庫的應(yīng)用注意：注意：插入庫項目后，會在插入庫項目后，會在“文檔文檔”窗口的下方出現(xiàn)窗口的下方出現(xiàn)“庫項目庫項目”屬性檢查器，如圖所示。屬性檢查器，如圖所示。n【從源文件分離】可以斷開文檔中的項目和庫【從源文件分離】可以斷開文檔中的項目和庫之間的鏈接，從而使文檔中的庫項目可編輯。之間的鏈接，從而使文檔中的庫項目可編輯?！皫祉椖繋祉椖俊睂傩詸z查器屬性檢查器502.32.3庫的應(yīng)用庫的應(yīng)用2.3.32.3.3修改庫項目和更新站點修改庫項目和更新站點當(dāng)修改庫項目時，可以更新使用該項目的所有文當(dāng)修改庫項目時，可以更新使用該項目的所有文檔。檔。1 1 修改庫項目修

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

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

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

46、圖像?！举Y源】面板可對本地站點內(nèi)的圖像完成插入、編【資源】面板可對本地站點內(nèi)的圖像完成插入、編輯和管理，其操作步驟如下輯和管理，其操作步驟如下: : （1 1）打開打開 圖像圖像 資源：資源：單擊單擊 資源資源 面板左側(cè)的圖面板左側(cè)的圖像按鈕，可進入【圖像】窗口。像按鈕，可進入【圖像】窗口。 ( (2 2) ) 插入圖像：插入圖像：把光標(biāo)定位在網(wǎng)頁編輯窗口的圖把光標(biāo)定位在網(wǎng)頁編輯窗口的圖像插入處，然后在圖像列表中選中要插入的圖像，像插入處，然后在圖像列表中選中要插入的圖像，單擊【插入】即可插入的圖像。單擊【插入】即可插入的圖像。 ( (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打開打開 顏色顏色 資源：資源：單擊【資源】面板左側(cè)的單擊【資源】面板左側(cè)的【顏色】按鈕即可進入【顏色】管理窗口。【顏色】按鈕即可進入【顏色】管理窗口。n顏色收藏夾：顏色收藏夾：單擊位于【資源】面板頂端的單擊位于【資源】面板頂端的【收藏】單選按鈕，切換到顏