1、網頁制作基礎教程網頁制作基礎教程（Dreamweaver CS3Dreamweaver CS3）電子教案電子教案ISBN7121028824本章重點：如何使用本章重點：如何使用FlashFlash動畫、動畫、FlashFlash按鈕、按鈕、FlashFlash元素和元素和AppletApplet小小程序豐富網頁。程序豐富網頁。 7.1 7.1 網頁的動感效果設計網頁的動感效果設計7.2 7.2 插入插入FlashFlash對象對象7.3 7.3 插入其它多媒體元素插入其它多媒體元素7.4 7.4 插入第三方插件插入第三方插件網頁制作基礎教程網頁制作基礎教程7.1 7.1 網頁的動感效果設計網頁

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

3、能。網頁制作基礎教程網頁制作基礎教程7.1 7.1 網頁的動感效果設計網頁的動感效果設計 7.1.3 7.1.3 實現步驟實現步驟n頁面基本制作頁面基本制作n創建站點創建站點創建主頁文件創建主頁文件設置設置標題標題n BannerBanner條的制作條的制作（透明背景的（透明背景的Flash)Flash)設置圖片背景設置圖片背景插入插入FlashFlash設置背設置背景透明參數景透明參數n導航條的制作導航條的制作插入插入FlashFlash按鈕按鈕網頁制作基礎教程網頁制作基礎教程7.1 7.1 網頁的動感效果設計網頁的動感效果設計 7.1.3 7.1.3 實現步驟實現步驟n正文區的制作正文區的

4、制作用用CSSCSS樣式格式化頁面樣式格式化頁面插入插入FlashFlash文本文本插入圖像查看器插入圖像查看器插入插入Java Java AppletApplet小程序小程序插入背景音樂插入背景音樂n擴展功能擴展功能n擴展命令擴展命令 n擴展對象擴展對象 n擴展行為擴展行為 網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象FlashFlash動畫的優點：文件小，網上傳輸快。動畫的優點：文件小，網上傳輸快。FlashFlash對象包括：對象包括：nFlashFlash動畫動畫nFlashFlash按鈕按鈕nFlashFlash文本文本nFlashFlash視

5、頻視頻nFlashFlash元素（圖像查看器）元素（圖像查看器）nFlashFlash文檔等。文檔等。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.1 7.2.1 插入插入FlashFlash動畫動畫 插入插入FlashFlash動畫的操作步驟：動畫的操作步驟：n將插入點置于要插入將插入點置于要插入FlashFlash影片的位置。影片的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash】命令，或【常用命令，或【常用/ /媒體】插入欄中媒體】插入欄中FlashFlash按鈕。按鈕。n在彈出的對話框中選擇一個在彈出的對話

6、框中選擇一個swfswf文件。文件。n插入的插入的FlashFlash動畫顯示為一個灰色的方框，里面有動畫顯示為一個灰色的方框，里面有FlashFlash標志。標志。1.1.單擊【屬性】面板上的【播放】按鈕，可預覽動畫。單擊【屬性】面板上的【播放】按鈕，可預覽動畫。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.1 7.2.1 插入插入FlashFlash動畫動畫設置設置FlashFlash影片屬性：影片屬性：n【Flash】:影片的名稱。影片的名稱。n【寬】【寬】和和【高】【高】：以像素為單位指定影片的寬度和：以像素為單位指定影片的寬度和高度。高度

7、。n【文件】【文件】：指定指向：指定指向Flash或或Shockwave文件的路徑。文件的路徑。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.1 7.2.1 插入插入FlashFlash動畫動畫設置設置FlashFlash影片屬性：影片屬性：n【源文件】【源文件】指定指向指定指向FlashFlash源文檔源文檔( (fla)fla)的路徑。的路徑。n【編輯】【編輯】可以啟動可以啟動Flash Flash 以更新以更新flafla文件。文件。n【重設大小】【重設大小】將選定影片返回到其初始大小。將選定影片返回到其初始大小。n【循環】【循環】選中則連續

8、播放。選中則連續播放。n【自動播放】【自動播放】選中則在加載頁面時自動播放。選中則在加載頁面時自動播放。n【垂直邊距【垂直邊距】和【水平邊距】指定空白的像素值。】和【水平邊距】指定空白的像素值。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.1 7.2.1 插入插入FlashFlash動畫動畫設置設置FlashFlash影片屬性：影片屬性：n【品質】【品質】控制抗失真度。控制抗失真度。n【比例】【比例】確定影片如何適合在【寬】和【高】文本框確定影片如何適合在【寬】和【高】文本框中設置的尺寸。中設置的尺寸。n【對齊】【對齊】確定影片在頁面上的對齊方式。

9、確定影片在頁面上的對齊方式。n【背景顏色】【背景顏色】指定影片區域的背景顏色。指定影片區域的背景顏色。10.10.【參數】【參數】打開一個對話框，可在其中輸入傳遞給影片打開一個對話框，可在其中輸入傳遞給影片的附加參數的附加參數網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.2 7.2.2 插入插入FlashFlash按鈕按鈕 n將光標放到要插入將光標放到要插入FlashFlash按鈕對象的按鈕對象的位置。位置。n 選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash按鈕】命令，或單按鈕】命令，或單擊【插入】面板上擊【插入】面板上

10、【常用】【常用】| |【媒體】【媒體】| |【FlashFlash按鈕】，按鈕】，打開【插入打開【插入FlashFlash按鈕】對話框按鈕】對話框. .網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.3 7.2.3 插入插入FlashFlash文本文本 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入Flash文本對象的位文本對象的位置置 。n選擇【插入】選擇【插入】| |【媒【媒體】體】| |【FlashFlash文本】文本】命令，或單擊【插命令，或單擊【插入】欄上【常用】入】欄上【常用】| |【媒體】【媒體】| |【FlashFla

11、sh文本】，打開【插文本】，打開【插入入FlashFlash文本】對話文本】對話框框 . .1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.4 7.2.4 插入圖像查看器插入圖像查看器 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入Flash元素的位置元素的位置 。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【圖像查看器】命令，打開【圖像查看器】命令，打開【保存【保存FlashFlash元素】對話框。元素】對話框。1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕

12、。按鈕。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.57.2.5插入插入FlashFlash視頻視頻 操作步驟如下操作步驟如下 ：n選擇【插入】【媒體】【選擇【插入】【媒體】【Flash 視頻】命令，或單視頻】命令，或單擊【插入】欄的【常用】類別中的【媒體】下拉框，選擊【插入】欄的【常用】類別中的【媒體】下拉框，選擇【擇【Flash Video】。】。 1.1.設置完成后單擊設置完成后單擊“確定確定”按鈕。按鈕。網頁制作基礎教程網頁制作基礎教程7.2 7.2 插入插入FlashFlash對象對象7.2.67.2.6插入插入 FlashPaper

13、FlashPaper 文檔文檔 操作步驟如下操作步驟如下 ：n將插入點放在頁面上想要顯示將插入點放在頁面上想要顯示 FlashPaper FlashPaper 文檔的位置，文檔的位置，然后選擇【插入】【媒體】【然后選擇【插入】【媒體】【FlashPaperFlashPaper】命令，命令，或單擊【插入】欄的【常用】類別中的【媒體】下拉框，或單擊【插入】欄的【常用】類別中的【媒體】下拉框，選擇【選擇【FlashPagerFlashPager】。】。 n在【插入在【插入 FlashPaperFlashPaper】對話框中，瀏覽到一個對話框中，瀏覽到一個 FlashPaper FlashPaper

14、文檔并將其選定。設置完成后單擊文檔并將其選定。設置完成后單擊“確定確定”按鈕。按鈕。網頁制作基礎教程網頁制作基礎教程7.37.3插入其它多媒體元素插入其它多媒體元素 7.3.17.3.1插入插入Java AppletJava Applet小程序小程序 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入AppletApplet小程序的位置。小程序的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【AppletApplet】命令，或者單擊命令，或者單擊【插入】面板上【常規】【插入】面板上【常規】| |【媒體】【媒體】| |【AppletsApplets】按鈕，按鈕，打開【選

15、擇文件】對話框，從對話框中選擇擴展名打開【選擇文件】對話框，從對話框中選擇擴展名為為. .classclass的文件。的文件。n選中插入到頁面中的選中插入到頁面中的AppletApplet圖標，打開屬性面板，設置圖標，打開屬性面板，設置其屬性。其屬性。 網頁制作基礎教程網頁制作基礎教程7.37.3插入其它多媒體元素插入其它多媒體元素 7.3.27.3.2插入插入ActiveXActiveX控件控件 操作步驟如下操作步驟如下 ：n將光標放到要插入將光標放到要插入ActiveXActiveX對象的位置。對象的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【ActiveXActiveX

16、】命令或命令或者單擊【插入】面板上【常規】者單擊【插入】面板上【常規】| |【媒體】【媒體】| |【ActiveXActiveX】按鈕，即可在文檔中插入按鈕，即可在文檔中插入ActiveXActiveX對象。對象。 n選中選中ActiveXActiveX對象圖標，打開它的屬性面板，對象圖標，打開它的屬性面板，設置其屬性。設置其屬性。 網頁制作基礎教程網頁制作基礎教程7.37.3插入其它多媒體元素插入其它多媒體元素 7.3.37.3.3插入插入 Shockwave Shockwave 影片影片操作步驟如下操作步驟如下 ：n將插入點置于要插入將插入點置于要插入Shockwave 影片的位置。影片的

17、位置。n選擇【插入】選擇【插入】|【媒體】【媒體】|【 Shockwave 】命令，或【常用命令，或【常用/媒體】插入欄中媒體】插入欄中Shockwave圖標。圖標。n插入的插入的Flash動畫顯示為一個灰色的方框，里動畫顯示為一個灰色的方框，里面有面有Shockwave標志。標志。n選中此影片標記，在屬性面板中設置其相關屬選中此影片標記，在屬性面板中設置其相關屬性。性。 網頁制作基礎教程網頁制作基礎教程7.47.4插入第三方插件插入第三方插件7.4.1 7.4.1 安裝擴展插件安裝擴展插件 利用插件可以增強利用插件可以增強Dreamweaver CS3Dreamweaver CS3的功能。在

18、網的功能。在網站可以下載第三方插件，大部分是免費的。站可以下載第三方插件，大部分是免費的。插入第三方插件的操作方法：插入第三方插件的操作方法：n在【文檔】窗口中，將插入點置于要插入在【文檔】窗口中，將插入點置于要插入ActiveXActiveX控件的地方。控件的地方。n選擇【插入】欄選擇【插入】欄| |【常用【常用】| |【媒體媒體】| |【 插件插件】圖標，或【插入】圖標，或【插入】| |【媒體】【媒體】| | 【 插件】插件】1.1.出現的出現的 圖標會標記出頁面中插件將在頁面上出圖標會標記出頁面中插件將在頁面上出現的位置現的位置。網頁制作基礎教程網頁制作基礎教程7.4 7.4 插入第三方

19、插件插入第三方插件( (擴展插件管理器擴展插件管理器) )要保存下載的擴展：要保存下載的擴展：n單擊單擊 Macromedia Exchange Web 站點上的擴展鏈站點上的擴展鏈接，開始下載。接，開始下載。 n將擴展保存到擴展管理器應用程序文件夾的將擴展保存到擴展管理器應用程序文件夾的 Downloaded Extensions 文件夾中。文件夾中。 n執行下列操作之一來安裝擴展：執行下列操作之一來安裝擴展：n在擴展管理器中，選擇在擴展管理器中，選擇“文件文件”“安裝擴展安裝擴展”。 1.瀏覽到已保存在瀏覽到已保存在 Downloaded Extensions 文件夾中的文件夾中的該文件，

20、然后雙擊文件圖標。該文件，然后雙擊文件圖標。 網頁制作基礎教程網頁制作基礎教程安裝擴展：安裝擴展：n用以下方法之一啟動擴展管理器：用以下方法之一啟動擴展管理器： n雙擊雙擊 Windows Windows 資源管理器資源管理器 ( (Windows) Windows) 或或 Finder (Macintosh) Finder (Macintosh) 中的擴展文件。中的擴展文件。 n在在 Windows Windows 中，選擇中，選擇“開始開始”菜單中的菜單中的“Macromedia”“Macromedia Macromedia”“Macromedia 擴展管理器擴展管理器”。 n在在 Mac

21、intosh Macintosh 中，雙擊中，雙擊 Applications/Macromedia Applications/Macromedia Extension Manager Extension Manager 文件夾中的擴展管理器圖標。文件夾中的擴展管理器圖標。 1.1.在在 Dreamweaver Dreamweaver 中，選擇中，選擇“命令命令”“”“管理擴展管理擴展”，或者，或者在在 Flash Flash 或或 Fireworks Fireworks 中選擇中選擇“幫助幫助”“”“管理擴展功管理擴展功能能”。 7.4 7.4 插入第三方插件插入第三方插件( (擴展插件管理器

22、擴展插件管理器) )網頁制作基礎教程網頁制作基礎教程7.4 7.4 插入第三方插件插入第三方插件( (擴展插件管理器擴展插件管理器) )n在擴展管理器工具欄的在擴展管理器工具欄的“產品產品”彈出菜單中，選擇您要在其中彈出菜單中，選擇您要在其中安裝該擴展的安裝該擴展的 Macromedia Macromedia 產品。產品。 n在擴展管理器中，選擇在擴展管理器中，選擇“文件文件”“”“安裝擴展安裝擴展”。 n在出現的文件選擇對話框中，選擇一個擴展名為在出現的文件選擇對話框中，選擇一個擴展名為 . .mxp mxp 的擴展的擴展文件，然后選擇文件，然后選擇“安裝安裝”(”(Windows) Windows) 或或“選擇選擇”(”(Macintosh)Macintosh)。 n仔細閱讀仔細閱讀 Macromedia Macromedia 擴展免責聲明和所有可能附帶的第三方擴