在網(wǎng)頁中加入多媒體

1、.第十一章 在網(wǎng)頁中加入多媒體Dreamweaver MX可以很方便、快捷地在網(wǎng)頁中加入聲音、動畫等文件，可以合成、編輯這些多媒體文件和對象，例如Java小程序、QuickTime、Flash動畫、ShockWave動畫和MP3文件等，還可以在這些對象里附加一些設(shè)計記錄，也可以插入Flash按鈕和文本對象等。本章介紹利用Dreamweaver MX在網(wǎng)頁中插入多媒體元素的方法。通過本章的學習，讀者應該掌握以下內(nèi)容：·制作交互對象·在網(wǎng)頁中插入媒體對象·在網(wǎng)頁中插入聲音11.1 網(wǎng)頁多媒體應用實例在網(wǎng)頁中加入多媒體可以使網(wǎng)頁既美觀又生動，令網(wǎng)頁增色不少，圖11-1所

2、示為在網(wǎng)頁中插入了一個flash動畫。11.2 制作交互對象Macromedia Flash技術(shù)是矢量圖形和動畫的傳遞的先進解決方式。在Dreamweaver中可以使用的Flash文件格式通常有以下3種。(1)The Flash file(.fla)：是在Flash程序中創(chuàng)建的各種項目的原文件。這種文件格式只能在Flash中打開，而不能在Dmamweaver或瀏覽器中打開?？梢栽贔lash中打開fla文件，并輸出成SWF或SWT文件，從而在瀏覽器中使用。(2)The Flash movie file (.swf)：是Flash (.fla)文件的壓縮版本，為在網(wǎng)絡中瀏覽做了優(yōu)化。該文件可以在瀏

3、覽器和Dreamweaver中播放預覽，但不能在Flash中編輯。這是使用Flash按鈕和文字對象所創(chuàng)建的文件格式。(3)The Flash Generator template(.swt)：可以用來修改和替換swf文件中的信息。這些文件被使用在Flash按鈕對象中，用戶可以用文字或連接修改模板，來創(chuàng)建自定義的SWF并插入到文件中。在Dreamweaver MX中，這些模板文件可以在Dreamweaver/Configuration/Flash Objects/Flash Buttons和Flash Text文件夾中找到。如果用戶使用Flash來設(shè)計自己的Generator模板文件，可以將這些

4、模板在網(wǎng)絡設(shè)計小組成員間共享。可以將這些文件存放到Configuration/Flash Objects/Flash Buttons文件夾，然后通過使用Flash按鈕對象來進入這些文件。11.2.1 插入Flash按鈕對象1.使用Flash按鈕對象使用Flash按鈕對象可以自定義和插入一組預設(shè)的Flash按鈕，但必須在插入一個Flash按鈕或文字對象前保存文檔。2.插入一個Flash按鈕對象Flash按鈕對象是基于Flash模板的可更新按鈕。用戶可以自定義Flash按鈕對象，并添加文本、背景顏色以及指向其他文件的鏈接。在使用設(shè)計視圖或代碼視圖時可以插入Flash按鈕。若要插入Flash按鈕對象

5、，可執(zhí)行以下操作。(1)在文檔窗口中，將插入點放置在要插入Flash按鈕的地方。(2)執(zhí)行以下操作之一，可打開“插入Flash對象”對話框，如圖11-2所示。圖11-2 “插入Flash按鈕”對話框·在插入欄中，選擇“媒體”，然后單擊“Flash按鈕”圖標。·在插入欄中，選擇“媒體”，然后將“Flash按鈕”圖標拖入文檔窗口中，如果正在處理代碼，也可以將圖標拖入代碼視圖窗口中。·單擊“插入”“交互式圖像”“Flash按鈕”菜單命令。(3)從“樣式”列表中選擇所需的按鈕樣式。(4)在“按鈕文本”域中鍵入需要顯示的文本。(5)在“字體”彈出式菜單中，選擇需要使用的字體

6、。(6)在“大小”域中輸入字體大小的數(shù)字值。(7)在“鏈接”域中輸入該按鈕的文檔相對或絕對鏈接。(8)在“目標”域中指定鏈接的文檔將在其中打開的位置?？梢栽趶棾鍪讲藛沃羞x擇框架或窗口選項。只有在框架頁中編輯Flash對象時，才列出框架名稱。(9)在“背景顏色”域中設(shè)置Flash影片的背景顏色。使用顏色選擇器或鍵入Web十六進制值(例如#FFFFFF)。(10)在“另存為”域中輸入用來保存此新SWF文件的文件名?？墒褂媚J文件名(例如button1.swf)或鍵入新文件名。如果該文件包含文檔相對鏈接，則必須將該文件保存到與當前HTML文檔相同的目錄中，以保持文檔相對鏈接的有效性。(11)單擊“獲

7、取更多樣式.”以轉(zhuǎn)到Macromedia Exchange站點并下載更多按鈕樣式。(12)單擊“應用”或“確定”以將Flash按鈕插入到文檔窗口中。注意：選擇“應用”可以在設(shè)計視圖中看到更改，同時令對話框仍處于打開狀態(tài)，這樣就可以繼續(xù)對按鈕進行更改。3.修改Flash按鈕對象用戶可以修改Flash按鈕對象的屬性和內(nèi)容。若要修改Flash按鈕對象，可執(zhí)行以下操作。(1)在文檔窗口中，單擊Flash按鈕對象。(2)如果屬性面板尚未打開，則打開屬性面板。屬性面板顯示Flash按鈕屬性。可以通過屬性面板來修改按鈕的HTML屬性，例如寬度、高度和背景顏色，如圖11-3所示。圖11-3 Flash按鈕屬性

8、面板(3)執(zhí)行如下方法之一，打開“插入Flash按鈕”對話框。·雙擊Flash按鈕對象。·在屬性面板中單擊“編輯”。·右擊Flash按鈕對象，然后從快捷菜單中選擇“編輯”。(4)在“插入Flash按鈕”對話框中對各選項進行重新設(shè)置。在設(shè)計視圖中，通過使用調(diào)整大小手柄可以很容易地調(diào)整對象的大小。還可以通過在屬性面板中選擇“重設(shè)大小”，將該對象返回到其初始大小。11.2.2 插入Flash文本對象利用Flash文本對象可以創(chuàng)建和插入只包含文本的Flash影片。用戶可以使用自己選擇的設(shè)計器字體和文本創(chuàng)建較小的矢量圖形影片。若要插入Flash文本對象，可執(zhí)行以下操作。(1

9、)在文檔窗口中，將插入點放置在要插入Flash文本的地方。(2)執(zhí)行以下操作之一，打開“插入Flash文本”對話框，如圖11-4所示。圖11-4 “插入Flash文本”對話框·在插入欄中，選擇“媒體”，然后單擊“Flash文本”圖標。·在插入欄中，選擇“媒體”，然后將“Flash文本”圖標拖到文檔窗口(或者如果您正處理代碼，則拖到代碼視圖窗口)。·在菜單欄中單擊“插入”“交互式圖像”“Flash文本”命令。(3)從“字體”彈出式菜單中選擇一種字體。(4)在“大小”域中輸入字體大小，這些字體大小是以點為單位的。(5)通過單擊適當?shù)臉邮桨粹o，指定樣式屬性(例如粗體或斜

10、體)和文本對齊方式。(6)在“顏色”域中，通過使用顏色選擇器或輸入Web十六進制值(例如#FFFFFF)設(shè)置文本的顏色。(7)在“轉(zhuǎn)滾顏色”域中設(shè)置當鼠標指針經(jīng)過Flash文本對象時顯示的顏色。使用顏色選擇器或輸入Web十六進制值(例如何FFFFF)。(8)在“文本”域中輸入所需的文本。若要查看在“文本”域中顯示的字體樣式，需選擇“顯示字體”。(9)如果想要將一個鏈接與Flash文本對象關(guān)聯(lián)，可在“鏈接”域中輸入文檔相對或絕對鏈接。因為瀏覽器不能識別Flash影片中的站點相對鏈接，所以不接受站點相對鏈接。如果使用文檔相對鏈接，要確保將SWF文件保存到與HTML文件相同的目錄上。瀏覽器不同，對文

11、檔相對鏈接的解釋也不同，因此保存到相同目錄中可確保鏈接正確工作。(10)如果已輸入鏈接，則可以在“目標”域中為該鏈接指定要轉(zhuǎn)到的目標框架或目標窗口。(11)在“背景顏色”域中選擇文本的背景顏色。使用顏色選擇器或輸入Web十六進制值(例如#FFFFFF)。(12)在“另存為”域中輸入文件的名稱。用戶可以使用默認文件名(例如tex1.swf)或鍵入新名稱。如果文件包含文檔相對鏈接，則必須將該文件保存到與當前HTML文檔相同的目錄中，以保持文檔相對鏈接的有效性。(13)單擊“應用”或“確定”按鈕，可以將Flash文本插入文檔窗口中。若要修改或播放Flash文本對象，所采用的步驟與對Flash按鈕進行

12、修改或播放所采用的步驟相同。11.2.3 鼠標經(jīng)過圖像將插入點放在文檔中要插入對象的位置上，在菜單欄單擊“插入”“交互式圖像”“鼠標經(jīng)過圖像”命令，打開“插入鼠標經(jīng)過圖像”對話框，如圖11-5所示。圖11-5 “插入鼠標經(jīng)過圖像”對話框插入鼠標經(jīng)過圖像的操作步驟如下。(1)在“圖像名稱”文本框中輸入圖像的名稱。(2)在“原始圖像”文本框中輸入原始圖像的URL。單擊“瀏覽”按鈕，可以從磁盤上選擇相應的文件。(3)在“鼠標經(jīng)過圖像”文本框中輸入鼠標經(jīng)過的圖像的URL。單擊“瀏覽”按鈕，可以從磁盤上選擇相應的文件。(4)選中“預載鼠標經(jīng)過圖像”復選框，則無論這些圖像是否被顯示過，瀏覽器都會將所有的圖

13、像都下載到本地的緩存中，以加快瀏覽速度。如果清除該復選框，則只在相應類型的圖像被顯示后，才會被瀏覽器下載到本地的緩存中。(5)在“替換文本”文本框中輸入項目描述性名稱。替換文本在純文本瀏覽器或設(shè)為手動下載的瀏覽器中，替代圖像出現(xiàn)在應顯示圖像的位置。屏幕閱讀器讀取替換文本，而且有些瀏覽器在用戶鼠標劃過圖像時顯示替換文本。(6)在“按下時，前往的URL”文本框中輸入該按鈕圖像要鏈接的U阻地址。單擊“瀏覽”按鈕，可以從磁盤上選擇目標端點的文件。(7)單擊“確定”按鈕。11.3 在網(wǎng)頁中插入媒體對象11.3.1 插入Flash電影當將Flash影片插入文檔時，Dreamweaver MX同時使用obj

14、ect標記(該標記是Microsoft Internet Explorer為ActiveX控件定義的)和embed標記(由Netscape Navigator定義)以在所有瀏覽器中都獲得最佳效果。當用戶在屬性面板中對影片進行更改時，Dreamweaver MX會將采用的各項映射為object和embed標記的適當參數(shù)。1.插入Flash電影(1)在文檔窗口的設(shè)計視圖中，將插入點放置在要插入影片的地方，然后執(zhí)行以下操作之一。·在插入欄中，選擇“媒體”，然后單擊“插入Flash”圖標。·在插入欄中，選擇“媒體”，然后將“插入Flash”圖標拖到文檔窗口中。在菜單欄中單擊“插入”

15、“媒體”“Flash”命令。(2)在打開的“選擇文件”對話框中，選擇Flash影片文件(.swf)。Flash占位符隨即出現(xiàn)在文檔窗口中(與Flash按鈕和文本對象不同)2.在文檔窗口中預覽Flash影片在“文檔”窗口中，單擊Flash占位符以選擇要預覽的Flash影片。在屬性面板中，單擊“播放”按鈕預覽的Flash影片。單擊“停止”可以結(jié)束預覽。還可以通過按F12鍵在瀏覽器中預覽Flash影片。若要預覽某一頁面中的所有Flash內(nèi)容，可按下Ctrl+Alt+Shift+P組合鍵。所有Flash對象和影片都將被設(shè)置為“播放”。3.設(shè)置Flash影片屬性若要設(shè)置Flash影片屬性，首先選擇一個F

16、lash影片，打開其屬性面板，如圖11-6所示。圖11-6 Flash影片屬性面板Flash影片屬性面板中各項的含義如下。名稱：指定用來標識影片以進行腳本撰寫的名稱。在屬性面板最左側(cè)的未標記域中輸入名稱?！皩挕焙汀案摺保阂韵袼貫閱挝恢付ㄓ捌膶挾群透叨?。還可以指定以下單位：pc(十二點活字)、pt(點)、in(英寸)、mm(毫米)、cm (厘米)或%(相對于父對象值的百分比)。縮寫必須緊跟在值之后，中間不留空格(例如3mm)。文件：指定指向Flash或Shockwave影片文件的路徑。單擊文件夾圖標以瀏覽到某一文件，或者鍵入路徑。編輯：啟動Macromedia Flash MX以更新Flash

17、文件。如果用戶計算機上沒有加載Macromedia Flash MX，此按鈕將被禁用。重設(shè)大?。簩⑦x定影片返回到其初始大小。循環(huán)：在選中該選項時影片將連續(xù)播放；如果沒有選中該選項，則影片在播放一次后即停止播放。自動播放：如果選中該選項，則在加載頁面時自動播放影片。“垂直邊距”和“水平邊距”：指定影片上、下、左、右空白的像素數(shù)。品質(zhì)：在影片播放期間控制抗失真。設(shè)置越高，影片的觀看效果就越好，但這要求更快的處理器以使影片在屏幕上正確顯示?！暗推焚|(zhì)”設(shè)置意味著更看重速度而非外觀，而“高品質(zhì)”設(shè)置意味著更看重外觀而非速度。“自動低品質(zhì)”意味著首先看重速度，但如有可能則改善外觀?！白詣痈咂焚|(zhì)”意味著首先

18、看重品質(zhì)，但根據(jù)需要可能會因為速度而影響外觀。比例：確定影片如何適合在寬度和高度域中設(shè)置的尺寸。有3個選項：“默認值”設(shè)置顯示整個影片；“無邊框”使影片適合設(shè)定的尺寸，因此無邊框顯示并維持原始的縱橫比；“嚴格匹配”對影片進行縮放以適合設(shè)定的尺寸，而不管縱橫比如何。對齊：確定影片在頁面上的對齊方式。背景顏色：指定影片區(qū)域的背景顏色。在不播放影片時也顯示此顏色。參數(shù)：打開一個對話框(如圖11-7所示)，可在其中輸入傳遞給影片的附加參數(shù)。影片必須己設(shè)計好，可以接收這些附加參數(shù)。圖11-7 “參數(shù)”對話框11.3.2 插入Shockwave電影1.關(guān)于Shockwave電影Shockwave是Macr

19、omedia用于網(wǎng)頁瀏覽者互動的多媒體標準，它是一種壓縮格式，可以讓媒體文件在Macromedia Director中得以創(chuàng)建，并能被迅速下載，被大多數(shù)常用的瀏覽器播放。2.插入Shockwave電影若要在網(wǎng)頁中插入Shockwave影片，可執(zhí)行以下操作。(1)在文檔窗口中，將插入點放置在要插入Shockwave影片的地方，然后執(zhí)行以下操作之一。在插入欄中，選擇“媒體”，然后單擊“Shockwave”圖標輸。在插入欄中，選擇“媒體”，然后將“Shockwave”圖標拖到文檔窗口中(如果正處理代碼，則拖到代碼視圖窗口中)。在菜單欄中選擇“插入”“媒體”“Shockwave”命令。(2)在打開的“

20、選擇文件”對話框中，選擇一個影片文件。(3)在屬性面板的“寬”和“高”文本框中分別輸入影片的寬度和高度。(4)單擊“確認”按鈕，在插入點出現(xiàn)一個圖標。3.設(shè)置Shockwave屬性與前一節(jié)中設(shè)置Flash屬性的方法相同。11.3.3 插入ActiveX控件ActiveX控件(即OLE控件)是可以重復調(diào)用的組件，類似于微機的應用軟件，可以作為瀏覽器插件使用。這種插件可以在Windows系統(tǒng)的Internet Explorer瀏覽器中運行，但是無法在Macintosh或者Natscape Navigator中運行。在Dreamweaver MX中，可以為訪問者的瀏覽器提供對于ActiveX控件的屬

21、性和參數(shù)設(shè)置。Dreamweaver使用object標簽來標記頁面中出現(xiàn)ActiveX控件的位置，以及提供ActiveX空間的參數(shù)設(shè)置。1.插入ActiveX控件在文件窗口中，將光標置于要插入控件的地方，然后用以下方法之一插入控件。·在插入欄中，選擇“媒體”，然后單擊“ActiveX”圖標艘。·在插入欄中，選擇“媒體”，然后拖動ActiveX圖標到插入點(或者如果正在處理代碼，則拖到代碼視圖窗口)。·在菜單欄中選擇“插入”“媒體”“AcdveX”命令。執(zhí)行上述操作后，一個表示ActiveX控件的標記顯示在頁面上。2.設(shè)置ActiveX屬性在插入ActiveX對象后

22、，使用屬性面板設(shè)置object標記的屬性以及ActiveX控件的參數(shù)。選中ActiveX控件，打開其屬性面板，如圖11-8所示。圖11-8 設(shè)置ActiveX屬性面板中各項的含義如下。名稱：指定用來標識ActiveX控件以進行腳本撰寫的名稱。在屬性面板最左側(cè)的未標記域中輸入名稱?！皩挕焙汀案摺保褐付▽ο蟮膶挾群透叨取lassID：為瀏覽器標識ActiveX控件。輸入一個值或從彈出式菜單中選擇一個值。在加載頁面時，瀏覽器使用該類ID來確定與該頁面關(guān)聯(lián)的ActiveX控件的位置。如果瀏覽器未找到指定的ActiveX控件，則嘗試從“基址”指定的位置中下載它。嵌入：為該ActiveX控件在objec

23、t標記內(nèi)添加embed標記。如果ActiveX控件具有等效的Netscape Navigator插件，則embed標記激活該插件。Dreamweaver將作為ActiveX屬性輸入的值指派給等效的Netscape Navigator插件。對齊：確定對象在頁面上的對齊方式。參數(shù)：打開一個對話框(參見圖11-7，在其中可輸入傳遞給ActiveX對象的附加參數(shù)。源文件：如果啟用了“嵌入”選項，定義將要用于Netscape Navigator插件的數(shù)據(jù)文件。如果沒有輸入值，則Dreamweaver將嘗試根據(jù)己輸入的ActiveX屬性確定該值?！按怪边吘唷焙汀八竭吘唷保阂韵袼貫閱挝恢付▽ο笊?、下、左、

24、右的空白量。基址：指定包含該ActiveX控件的URL。如果在訪問者的系統(tǒng)中尚未安裝ActiveX控件，則Internet Explorer從該位置下載它。如果沒有指定“基址”參數(shù)，并且訪問者尚未安裝相應的ActiveX控件，則瀏覽器不能顯示ActiveX對象。替代圖像：指定在瀏覽器不支持object標記的情況下要顯示的圖像。只有在取消對“嵌入”選項的選擇后此選項才可用。數(shù)據(jù)：為要加載的ActiveX控件指定數(shù)據(jù)文件。許多ActiveX控件(例如Shockwave和RealPlayer)不使用此參數(shù)。11.3.4 插入Java程序(Java Applet)Java是一種編程語言，它可以在網(wǎng)頁中

25、嵌入一種小型應用程序(Applet)。在創(chuàng)建Java小程序后，也可以使用Dreamweaver將小程序插入HTML文件中，Dreamweaver使用applet標簽來標記Java小程序文件。1.插入Java小程序在網(wǎng)頁中插入Java小程序的步驟如下。(1)在文件窗口中，將插入點放在要插入Java小程序的地方。(2)執(zhí)行下列操作之一，打開“選擇文件”對話框。·在插入“媒體”面板上點擊Applet圖標。·將“Applet”圖標也拖到文檔窗口(如果正在處理代碼，則拖到代碼視圖窗口)。在菜單欄中選擇“插入”“媒體”“Applet”命令。(3)在“選擇文件”對話框中，選擇一個包含Ja

26、va小程序的文件。(4)單擊“確認”按鈕，在插入點出現(xiàn)一個圖標。2.設(shè)置Java小程序?qū)傩栽诓迦隞ava Applet后，選擇圖標打開其屬性面板，如圖11-9所示。在屬性面板上可以設(shè)置Java小程序的相關(guān)參數(shù)。圖11-9 Java小程序?qū)傩悦姘迤渲懈鲄?shù)的含義如下。名稱：指定用來標識Applet以進行腳本撰寫的名稱。在屬性面板最左側(cè)的未標記域中輸入名稱?！皩挕焙汀案摺保褐付ˋpplet的寬度和高度。代碼：指定包含該Applet的Java代碼的文件。單擊文件夾圖標以瀏覽到某一文件，或者輸入文件名?；罚簶俗R包含選定Applet的文件夾。在選擇了一個Applet后，此域被自動填充。對齊：確定對象在

27、頁面上的對齊方式。替代：指定如果用戶的瀏覽器不支持Java Applet或者己禁用Java，將要顯示的替代內(nèi)容。如果輸入文本，Dreamweaver將用Applet標記的alt屬性顯示該文本。如果選擇一個圖像，Dreamweaver將在開始和結(jié)束Applet標記之間插入img標記。若要指定在Netscape Navigator (已禁用Java)和Lynx(基于文本的瀏覽器)中均可查看的替代內(nèi)容，請選擇一個圖像，然后在代碼檢查器中手動將alt屬性添加到img標記中?！按怪边吘唷焙汀八竭吘唷保阂韵袼貫閱挝恢付ˋpplet上、下、左、右的空白量。參數(shù)：打開一個對話框，可在其中輸入傳遞給Apple

28、t的附加參數(shù)。許多Applet都受到特殊參數(shù)的控制。11.4 在網(wǎng)頁中插入聲音11.4.1 聲音文件聲音文件有很多種格式，添加到頁面的方式也有很多，在決定使用的格式和添加方法前要考慮一些因素，如目的、聽眾群、文件大小、聲音質(zhì)量、不同瀏覽器等。不同瀏覽器處理聲音的方式差別很大?？梢詫⒙曇粑募龀蒘WF文件來提高兼容性。下面介紹幾種常見的音頻文件格式。(1).midi或.mid(Musical Instrument Digital Interface，樂器數(shù)字化接口)該格式用于器樂。MIDI文件被大多數(shù)瀏覽器所支持且不需插件。雖然其音質(zhì)非常好，但卻依賴于訪問者的聲卡。一個小的MIDI文件能夠提供長

29、時間的聲音剪輯。MIDI文件不能被錄制，必須用具有特殊軟硬件的計算機來合成。(2).wav (Waveform Extension，波形擴展)該格式文件具有好的音質(zhì)，被大多數(shù)瀏覽器支持且不需插件?？梢詮腃D、磁帶、麥克風中錄制需要的WAV文件。不過，該文件較大，不宜在網(wǎng)頁中過多的使用。(3).aif(Audio Interchange File Format，音頻交換文件格式，或AIFF)同WAV格式一樣，AIFF格式擁有好的音質(zhì)，可由大多數(shù)瀏覽器播放且不需插件。可從CD、磁帶、麥克風中錄制AIFF文件。該文件也較大，不宜過多的使用。(4).mp3(Motion Picture Experts Group Audio，運動圖像專家組音頻，或MPEG-Audio Layer-3)該格式是一種壓縮格式，能相當大地縮小聲音文件，音質(zhì)是非常好的。如果一個MP3文件是正確錄制與壓縮的話，其音質(zhì)可與CD媲美。MP3文件的尺寸還是大于Real Audio文件