苏州和联科技电子厂在哪里

書名： Adobe Dreamweaver CS5 網頁設計與制作技能基礎教程
作者名：易連雙趙林
本章字數： 4278字
更新時間： 2020-04-22 16:19:51

2.3 插入多媒體

互聯網不僅能夠在網站上傳輸文字和圖片，還能傳輸各類多媒體信息，如動畫、音頻和視頻等，這樣既可以豐富網頁的內容，又可以使網頁生動有趣。

2.3.1 插入SWF動畫

SWF動畫是在Flash軟件中完成的，在Dreamweaver中能將現有的SWF動畫插入到文檔中，以便豐富網頁效果。

（1）打開網頁文檔，將光標定位在要插入SWF動畫的位置，執行【插入】>【媒體】>【SWF】命令，如圖2-30所示。

圖2-30

（2）打開【選擇SWF】對話框，選擇要插入的Flash動畫，然后單擊【確定】按鈕，如圖2-31所示。

圖2-31

（3）彈出【對象標簽輔助功能屬性】對話框，單擊【確定】按鈕。此時，網頁中就插入了Flash動畫，如圖2-32所示。

圖2-32

（4）選擇插入的Flash，單擊【屬性】面板中的【播放】按鈕，即可預覽動畫，如圖2-33所示。

圖2-33

選中插入的SWF，在【屬性】面板可以設置以下參數。

◆【FlashID】：為SWF文件指定唯一ID。在【屬性】面板最左側的未標記文本框中輸入ID。

◆【寬】和【高】：以像素為單位設定文檔中SWF動畫的尺寸。可以輸入數值改變其大小，也可以在文檔中拖動縮放手柄改變其大小。

◆【文件】：指定SWF文件或Shockwave文件的路徑。單擊文件夾圖標瀏覽文件或直接輸入文件路徑。

◆【源文件】：指定源文檔（FLA文件）的路徑。

◆【背景顏色】：指定影片區域的背景顏色。在不播放影片時（在加載時和在播放后）也顯示此顏色。

◆【編輯】：啟動Flash以更新FLA文件（使用Flash創作工具創建的文件）。如果計算機上沒有安裝Flash，則會禁用此選項。

◆【類】：可用于對影片應用CSS類。

◆【循環】：選中此選項，使影片連續播放。如果沒有選擇循環，則影片將播放一次，然后停止。

◆【自動播放】：在加載頁面時自動播放影片。

◆【垂直邊距】和【水平邊距】：指定動畫邊框與網頁上邊界和左邊界的距離。

◆【品質】：設置SWF動畫在瀏覽器中的播放質量，包括低品質、自動低品質、自動高品質和高品質4個選項。

◆【比例】：設置影片如何適合在寬度和高度文本框中設置的尺寸，包括全部顯示、無邊框和嚴格匹配3個選項，【默認】設置為顯示整個影片。

◆【對齊】：設置影片在頁面上的對齊方式。

◆【Wmode】：為SWF文件設置Wmode參數以避免與DHTML元素相沖突。默認值為不透明，這樣在瀏覽器中，DHTML元素就可以在SWF文件的上面顯示。如果SWF文件包括透明度，并且希望DHTML元素顯示在它們的后面，則選擇【透明】選項。選擇【窗口】選項可從代碼中刪除Wmode參數并允許SWF文件顯示在其他DHTML元素的上面。

◆【播放】：在【文檔】窗口中播放影片。

◆【參數】：打開一個對話框，可在其中輸入傳遞給影片的附加參數。影片必須已設計好，才可以接收這些附加參數。

2.3.2 插入FLV視頻

FLV就是Flash Video的簡稱。FLV流媒體格式是Flash支持的一種視頻格式。由于它形成的文件極小、加載速度極快，使得網絡觀看視頻文件非常方便，有效地解決了SWF文件體積龐大，不能在網絡上很好地使用等缺點。

目前各在線視頻網站（如新浪播客、優酷、土豆等）均采用此視頻格式。FLV已經成為當前視頻文件的主流格式。該格式不僅可以輕松地導入到Flash中，并能起到版權保護的作用，同時還可以不通過本地的播放器播放視頻。在網頁中插入視頻文件的具體操作方法如下。

（1）打開網頁文檔，將光標定位在要插入FLV的位置，執行【插入】>【媒體】>【FLV】命令，如圖2-34所示。

圖2-34

（2）打開【插入FLV】對話框，單擊該對話框中的【瀏覽】按鈕，彈出【選擇FLV】對話框，選擇要插入的FLV視頻文件，然后單擊【確定】按鈕，如圖2-35所示。

圖2-35

（3）返回【插入FLV】對話框，在該對話框中設置視頻文件的外觀、寬度和高度等參數，然后單擊【確定】按鈕，如圖2-36所示。

圖2-36

（4）此時，在網頁中就插入了FLV視頻文件，如圖2-37所示。

圖2-37

（5）保存文件，按【F12】快捷鍵預覽網頁。單擊視頻播放按鈕即可觀看該視頻，如圖2-38所示。

圖2-38

在【插入FLV】對話框的【視頻類型】下拉列表中有兩種視頻類型，一種是累進式下載視頻；另一種是流視頻。

1．累進式下載視頻

累進式下載視頻類型是將FLV文件下載到站點訪問者的硬盤上，然后進行播放，但是與傳統的“下載并播放”視頻傳送方法不同，累進式下載允許在下載完成之前就開始播放視頻文件。

執行【插入】>【媒體】>【FLV】命令，打開【插入FLV】對話框，在【視頻類型】下拉列表中選擇【累進式下載視頻】，如圖2-39所示。

圖2-39

該對話框中所有選項的含義如下。

◆【URL】：設置FLV文件的相對路徑或絕對路徑。若要指定相對路徑可單擊【瀏覽】按鈕，導航到FLV文件并將其選定。若要指定絕對路徑，則輸入FLV文件的URL。

◆【外觀】：設置視頻組件的外觀。

◆【寬度】和【高度】：以像素為單位設置FLV文件的寬度和高度。

◆【包括外觀】：指FLV文件的寬度和高度與所選外觀的寬度和高度相加得出的和。

◆【限制高寬比】：保持視頻組件的寬度和高度之間的比例不變。默認情況下會選擇此選項。

◆【自動播放】：指定在網頁面打開時是否播放視頻。

◆【自動重新播放】：指定播放控件在視頻播放完之后是否返回起始位置。

2．流視頻

流視頻是對視頻內容進行流式處理，并在一段可確保流暢播放的很短的緩沖時間后在網頁上播放該內容。

在【插入FLV】對話框的【視頻類型】下拉列表中選擇【流視頻】，如圖2-40所示。

圖2-40

該對話框中部分選項的含義如下。

◆【服務器URI】：指定服務器名稱、應用程序名稱和實例名稱。

◆【流名稱】：指定想要播放的FLV文件的名稱。

◆【實時視頻輸入】：指定視頻內容是否是實時的。

◆【自動播放】：指定在網頁打開時是否播放視頻。

◆【自動重新播放】：指定播放控件在視頻播放完之后是否返回起始位置。

◆【緩沖時間】：指定在視頻開始播放前，進行緩沖處理所需的時間（以秒為單位）。默認的緩沖時間設置為0。單擊【播放】按鈕后，視頻會立即開始播放。

2.3.3 插入Shockwave動畫

Shockwave是Macromedia公司制定的一種網上媒體交互壓縮格式的標準，其生成的壓縮格式可以被快速下載，并且被目前的主流瀏覽器所支持。Shockwave是一種復雜的播放技術，由于它提供了強大的、可擴展的腳本引擎，可以用來制作聊天室、操作html 、解析xml2文檔、控制矢量圖形。

打開網頁文檔，將光標定位在要插入影片的位置，執行【插入】>【媒體】>【Shockwave】命令，如圖2-41所示，彈出【選擇文件】對話框，選擇需要的文件，單擊【確定】按鈕即可。

圖2-41

2.3.4 為網頁添加聲音

當訪問者打開了添加背景音樂的網頁時背景音樂即會自動播放，設置背景音樂可以加深瀏覽者對網站的印象，突出網站的主題，達到聲色并茂的效果。用戶可以向網頁中添加聲音。有多種不同類型的聲音文件和格式，例如．wav、.mid和．mp3等。

1．為網頁添加背景音樂

如果能在打開頁面的同時，聽到一曲優美動人的音樂，相信這會使網站增色不少。為網頁添加背景音樂的方法一般有兩種。一種是通過普通的<bgsound> 標簽來添加，另一種是通過<embed> 標簽來添加。

（1）使用<bgsound>標簽

打開網頁文檔，點擊【代碼】切換到代碼編輯視圖，在<body>和</body> 之間輸入“<”，在彈出的代碼提示框中選擇bgsound，并輸入以下代碼：src=“music.mp3”loop=“-1”，如圖2-42所示。

bgsound標簽包含5個屬性。

◆【balance】：設置音樂的左右均衡。

◆【delay】：設置播放延時。

◆【loop】：控制循環次數。

◆【src】：設置音樂文件的路徑。

◆【volume】：設置音樂的音量。

圖2-42

loop= "-1"表示音樂無限循環，若要設置播放次數，則改為相應的數字即可。

（2）使用<embed>標簽

使用<embed> 標簽來添加音樂的方法并不是很常見，但是它的功能非常強大，如果結合一些播放控件就可以制作一個Web播放器。

它的使用方法和<bgsound>標簽基本一樣，添加如下代碼：<embed src= "music.mp3" autostart="true" loop= "true" hidden= "true" >，如圖2-43所示。

圖2-43

其中，autostart用來設置打開頁面時音樂是否自動播放，而hidden設置是否隱藏媒體播放器。因為embed實際上類似一個Web頁面的音樂播放器，所以如果不隱藏，則會顯示出系統默認的媒體插件。

2．在網頁中嵌入音頻

在網頁中嵌入音頻可將聲音直接集成到頁面中，但只有訪問者具有所選聲音文件的適當插件后，聲音才可以播放。如果希望將聲音用作背景音樂，或者希望控制音量、播放器在頁面上的外觀以及聲音文件的開始點和結束點時，就可以嵌入文件。

（1）打開網頁文檔，將光標定位在要插入音頻文件的位置，執行【插入】>【媒體】>【插件】命令，如圖2-44所示?；蛘咴凇静迦搿棵姘宓摹境Ｓ谩款悇e中，單擊【媒體】按鈕，然后從彈出菜單中選擇【插件】圖標。

圖2-44

（2）打開【選擇文件】對話框，選擇要插入的音頻文件，然后單擊【確定】按鈕，如圖2-45所示。

圖2-45

（3）選中該插件，在【屬性】面板中設置【寬】為248，如圖2-46所示。

圖2-46

（4）保存文件，按【F12】快捷鍵預覽網頁。在網頁上就出現了音頻播放插件，用戶即可控制音樂的播放與停止，如圖2-47所示。

圖2-47

2.3.5 插入ActiveX控件

用戶可以通過不同方式和使用不同格式將視頻添加到網頁。視頻可被用戶下載，或者可將視頻進行流式處理以便在下載它的同時播放它。

視頻格式可以分為適合本地播放的本地影像視頻和適合在網絡中播放的網絡流媒體影像視頻兩大類。盡管后者在播放的穩定性和播放畫面質量上沒有前者優秀，但網絡流媒體影像視頻的廣泛傳播性使之正被廣泛應用于視頻點播、網絡演示、遠程教育、網絡視頻廣告等互聯網信息服務領域。在網頁中常用的視頻格式有AVI、MPEG、ASF和RM。

在網頁中插入ActiveX控件的步驟如下。

（1）打開網頁文檔，將光標定位在要插入視頻文件的位置，在【插入】面板的【常用】類別中，單擊【媒體】按鈕，然后從彈出菜單中選擇【ActiveX】圖標，如圖2-48所示。

圖2-48

（2）選中插入的控件，在【屬性】面板中設置【寬】和【高】分別為400、290，選中【嵌入】復選框，然后單擊【源文件】文本框后的【瀏覽】按鈕，如圖2-49所示。

圖2-49

（3）彈出【選擇Netscape插件文件】對話框，選擇要嵌入的視頻文件，然后單擊【確定】按鈕，如圖2-50所示。

圖2-50

（4）保存文件，按【F12】快捷鍵預覽網頁。網頁上就出現視頻播放插件，用戶就可以觀看視頻了，如圖2-51所示。

圖2-51

在ActiveX的【屬性】面板中可以設置以下參數。

◆【名稱】：指定用來標識ActiveX對象以撰寫腳本的名稱。

◆【寬】和【高】：指定對象的寬度和高度（以像素為單位）。

◆【ClassID】：為瀏覽器標識ActiveX控件。輸入一個值或從彈出菜單中選擇一個值。在加載頁面時，瀏覽器使用該類ID來確定與該頁面關聯的ActiveX控件所需的ActiveX控件的位置。如果瀏覽器未找到指定的ActiveX控件，則它將嘗試從【基址】中指定的位置下載它。

◆【嵌入】：為該ActiveX控件在object標簽內添加embed標簽。如果ActiveX控件具有Netscape Navigator插件等效項，則embed標簽激活該插件。Dreamweaver將作為ActiveX屬性輸入的值分配給它們的Netscape Navigator插件等效項。

◆【對齊】：確定對象在頁面上的對齊方式。

◆【參數】：打開一個用于輸入要傳遞給ActiveX對象的其他參數的對話框。許多ActiveX控件都受特殊參數的控制。

◆【源文件】：定義在啟用了【嵌入】選項時用于Netscape Navigator插件的數據文件。如果用戶沒有輸入值，則Dreamweaver將嘗試根據已輸入的ActiveX屬性確定該值。

◆【垂直邊距】和【水平邊距】：以像素為單位指定對象上、下、左、右的空白量。

◆【基址】：指定包含該ActiveX控件的URL。如果在訪問者的系統中尚未安裝該ActiveX控件，則Internet Explorer將從該位置下載它。如果沒有指定【基址】參數并且訪問者尚未安裝相應的ActiveX控件，則瀏覽器無法顯示ActiveX對象。

◆【替換圖像】：指定在瀏覽器不支持object標簽的情況下要顯示的圖像。只有在取消選中【嵌入】選項后此選項才可用。

◆【數據】：為要加載的ActiveX控件指定數據文件。許多ActiveX控件（例如Shockwave和RealPlayer）不使用此參數。

官术网_书友最值得收藏!