第7章 插入多媒體元素

1、網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程（Dreamweaver CS3Dreamweaver CS3）電子教案電子教案ISBN7121028824本章重點(diǎn)：如何使用本章重點(diǎn)：如何使用FlashFlash動(dòng)畫、動(dòng)畫、FlashFlash按鈕、按鈕、FlashFlash元素和元素和AppletApplet小小程序豐富網(wǎng)頁(yè)。程序豐富網(wǎng)頁(yè)。 7.1 7.1 網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì)網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì)7.2 7.2 插入插入FlashFlash對(duì)象對(duì)象7.3 7.3 插入其它多媒體元素插入其它多媒體元素7.4 7.4 插入第三方插件插入第三方插件網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.1 7.1 網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì)網(wǎng)頁(yè)

2、的動(dòng)感效果設(shè)計(jì) 7.1.1 7.1.1 案例綜述案例綜述本章案例主本章案例主要是通過(guò)在要是通過(guò)在網(wǎng)頁(yè)中插入網(wǎng)頁(yè)中插入FlashFlash動(dòng)畫和動(dòng)畫和AppletApplet插件插件等多媒體元等多媒體元素來(lái)美化網(wǎng)素來(lái)美化網(wǎng)頁(yè)，使網(wǎng)頁(yè)頁(yè)，使網(wǎng)頁(yè)看上去更加看上去更加生動(dòng)。生動(dòng)。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.1 7.1 網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì)網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì) 7.1.2 7.1.2 案例分析案例分析本頁(yè)面的制作分五個(gè)步驟進(jìn)行：本頁(yè)面的制作分五個(gè)步驟進(jìn)行：n頁(yè)面基本制作頁(yè)面基本制作n BannerBanner條的制作條的制作n導(dǎo)航條的制作導(dǎo)航條的制作n正文區(qū)的制作；正文區(qū)的制作；n擴(kuò)展功能。擴(kuò)展功

3、能。網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.1 7.1 網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì)網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì) 7.1.3 7.1.3 實(shí)現(xiàn)步驟實(shí)現(xiàn)步驟n頁(yè)面基本制作頁(yè)面基本制作n創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn)創(chuàng)建主頁(yè)文件創(chuàng)建主頁(yè)文件設(shè)置設(shè)置標(biāo)題標(biāo)題n BannerBanner條的制作條的制作（透明背景的（透明背景的Flash)Flash)設(shè)置圖片背景設(shè)置圖片背景插入插入FlashFlash設(shè)置背設(shè)置背景透明參數(shù)景透明參數(shù)n導(dǎo)航條的制作導(dǎo)航條的制作插入插入FlashFlash按鈕按鈕網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.1 7.1 網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì)網(wǎng)頁(yè)的動(dòng)感效果設(shè)計(jì) 7.1.3 7.1.3 實(shí)現(xiàn)步驟實(shí)現(xiàn)步驟n正文區(qū)的制作正文區(qū)的

4、制作用用CSSCSS樣式格式化頁(yè)面樣式格式化頁(yè)面插入插入FlashFlash文本文本插入圖像查看器插入圖像查看器插入插入Java Java AppletApplet小程序小程序插入背景音樂(lè)插入背景音樂(lè)n擴(kuò)展功能擴(kuò)展功能n擴(kuò)展命令擴(kuò)展命令 n擴(kuò)展對(duì)象擴(kuò)展對(duì)象 n擴(kuò)展行為擴(kuò)展行為 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.2 7.2 插入插入FlashFlash對(duì)象對(duì)象FlashFlash動(dòng)畫的優(yōu)點(diǎn)：文件小，網(wǎng)上傳輸快。動(dòng)畫的優(yōu)點(diǎn)：文件小，網(wǎng)上傳輸快。FlashFlash對(duì)象包括：對(duì)象包括：nFlashFlash動(dòng)畫動(dòng)畫nFlashFlash按鈕按鈕nFlashFlash文本文本nFlashFlash視

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

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

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

8、播放。選中則連續(xù)播放。n【自動(dòng)播放】【自動(dòng)播放】選中則在加載頁(yè)面時(shí)自動(dòng)播放。選中則在加載頁(yè)面時(shí)自動(dòng)播放。n【垂直邊距【垂直邊距】和【水平邊距】指定空白的像素值?！亢汀舅竭吘唷恐付瞻椎南袼刂怠＞W(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.2 7.2 插入插入FlashFlash對(duì)象對(duì)象7.2.1 7.2.1 插入插入FlashFlash動(dòng)畫動(dòng)畫設(shè)置設(shè)置FlashFlash影片屬性：影片屬性：n【品質(zhì)】【品質(zhì)】控制抗失真度?？刂瓶故д娑?。n【比例】【比例】確定影片如何適合在【寬】和【高】文本框確定影片如何適合在【寬】和【高】文本框中設(shè)置的尺寸。中設(shè)置的尺寸。n【對(duì)齊】【對(duì)齊】確定影片在頁(yè)面上的對(duì)齊方式。

9、確定影片在頁(yè)面上的對(duì)齊方式。n【背景顏色】【背景顏色】指定影片區(qū)域的背景顏色。指定影片區(qū)域的背景顏色。10.10.【參數(shù)】【參數(shù)】打開(kāi)一個(gè)對(duì)話框，可在其中輸入傳遞給影片打開(kāi)一個(gè)對(duì)話框，可在其中輸入傳遞給影片的附加參數(shù)的附加參數(shù)網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.2 7.2 插入插入FlashFlash對(duì)象對(duì)象7.2.2 7.2.2 插入插入FlashFlash按鈕按鈕 n將光標(biāo)放到要插入將光標(biāo)放到要插入FlashFlash按鈕對(duì)象的按鈕對(duì)象的位置。位置。n 選擇【插入】選擇【插入】| |【媒體】【媒體】| |【FlashFlash按鈕】命令，或單按鈕】命令，或單擊【插入】面板上擊【插入】面板上

10、【常用】【常用】| |【媒體】【媒體】| |【FlashFlash按鈕】，按鈕】，打開(kāi)【插入打開(kāi)【插入FlashFlash按鈕】對(duì)話框按鈕】對(duì)話框. .網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.2 7.2 插入插入FlashFlash對(duì)象對(duì)象7.2.3 7.2.3 插入插入FlashFlash文本文本 操作步驟如下操作步驟如下 ：n將光標(biāo)放到要插入將光標(biāo)放到要插入Flash文本對(duì)象的位文本對(duì)象的位置置 。n選擇【插入】選擇【插入】| |【媒【媒體】體】| |【FlashFlash文本】文本】命令，或單擊【插命令，或單擊【插入】欄上【常用】入】欄上【常用】| |【媒體】【媒體】| |【FlashFla

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

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

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

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

15、擇文件】對(duì)話框，從對(duì)話框中選擇擴(kuò)展名打開(kāi)【選擇文件】對(duì)話框，從對(duì)話框中選擇擴(kuò)展名為為. .classclass的文件。的文件。n選中插入到頁(yè)面中的選中插入到頁(yè)面中的AppletApplet圖標(biāo)，打開(kāi)屬性面板，設(shè)置圖標(biāo)，打開(kāi)屬性面板，設(shè)置其屬性。其屬性。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.37.3插入其它多媒體元素插入其它多媒體元素 7.3.27.3.2插入插入ActiveXActiveX控件控件 操作步驟如下操作步驟如下 ：n將光標(biāo)放到要插入將光標(biāo)放到要插入ActiveXActiveX對(duì)象的位置。對(duì)象的位置。n選擇【插入】選擇【插入】| |【媒體】【媒體】| |【ActiveXActiveX

16、】命令或命令或者單擊【插入】面板上【常規(guī)】者單擊【插入】面板上【常規(guī)】| |【媒體】【媒體】| |【ActiveXActiveX】按鈕，即可在文檔中插入按鈕，即可在文檔中插入ActiveXActiveX對(duì)象。對(duì)象。 n選中選中ActiveXActiveX對(duì)象圖標(biāo)，打開(kāi)它的屬性面板，對(duì)象圖標(biāo)，打開(kāi)它的屬性面板，設(shè)置其屬性。設(shè)置其屬性。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.37.3插入其它多媒體元素插入其它多媒體元素 7.3.37.3.3插入插入 Shockwave Shockwave 影片影片操作步驟如下操作步驟如下 ：n將插入點(diǎn)置于要插入將插入點(diǎn)置于要插入Shockwave 影片的位置。影片的

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

18、網(wǎng)的功能。在網(wǎng)站可以下載第三方插件，大部分是免費(fèi)的。站可以下載第三方插件，大部分是免費(fèi)的。插入第三方插件的操作方法：插入第三方插件的操作方法：n在【文檔】窗口中，將插入點(diǎn)置于要插入在【文檔】窗口中，將插入點(diǎn)置于要插入ActiveXActiveX控件的地方?？丶牡胤健選擇【插入】欄選擇【插入】欄| |【常用【常用】| |【媒體媒體】| |【 插件插件】圖標(biāo)，或【插入】圖標(biāo)，或【插入】| |【媒體】【媒體】| | 【 插件】插件】1.1.出現(xiàn)的出現(xiàn)的 圖標(biāo)會(huì)標(biāo)記出頁(yè)面中插件將在頁(yè)面上出圖標(biāo)會(huì)標(biāo)記出頁(yè)面中插件將在頁(yè)面上出現(xiàn)的位置現(xiàn)的位置。網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程7.4 7.4 插入第三方

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

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

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

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