1、網(wǎng)頁設(shè)計與制作教程,作者：孟顯勇 北京理工大學出版社,第五章 網(wǎng)頁添加多媒體,在網(wǎng)頁中添加文字、圖像、音樂和視頻等多媒體對象可以增強網(wǎng)頁的視覺效果，使用Dreamweaver添加多媒體對象簡單、方便，并可以通過屬性面板對多媒體對象的屬性進行修改。 使用Dreamweaver添加對媒體對象時，選擇菜單欄的【插入】菜單，在彈出下拉菜單中選擇插入的對象，完成對象相關(guān)屬性設(shè)置，即可在頁面中插入多媒體對象。,5.1 網(wǎng)頁中加入音樂,網(wǎng)頁中嵌入恰當?shù)囊魳房梢栽鎏砭W(wǎng)頁的藝術(shù)效果，給用戶帶來全面的視聽感受。隨著網(wǎng)絡(luò)帶寬的提高，可以通過簡單的音樂嵌入技術(shù)制作一個音樂網(wǎng)站。 使用Dreamweaver添加多媒體對

2、象時，可以使用插入欄的【常用】【標簽選擇器】，也可以使用菜單欄的【插入】菜單添加多媒體對象。,5.1.1 使用標簽,HTML語言中的標簽可以在網(wǎng)頁中嵌入一個背景音樂，適用于IE瀏覽器或以IE為內(nèi)核的瀏覽器。 屬性src表示音頻文件的路徑信息，可以是相對路徑或絕對路徑； 屬性autostart表示音樂文件是否在下載完后自動播放，autostart=true表示下載后自動播放； 屬性loop表示循環(huán)播放次數(shù)，屬性值為-1時，音樂文件反復播放。,5.1.1 使用標簽, 嵌入背景音樂 ,5.1.2 使用標簽,HTML語言使用標簽嵌入多媒體對象，可以將主流音樂格式的文件嵌入到網(wǎng)頁中，例如，MID格式、M

3、P3格式等。 其中標簽的屬性src表示音樂文件路徑信息，可以是相對路徑也可以是絕對路徑； 屬性width和height表示音樂播放界面的寬和高； 屬性 autostart表示開啟自動播放功能，autostart=true表示開啟自動播放功能； 屬性align表示播放窗口與文字對齊方式； 屬性style包含豐富的樣式定義； 屬性hidden表示是否顯示播放界面，hidden=true表示隱藏播放界面。,5.1.2 使用標簽, 嵌入背景音樂 ,5.2 網(wǎng)頁中嵌入視頻,網(wǎng)頁中可以嵌入多種格式視頻文件，隨著網(wǎng)絡(luò)帶寬的不斷提高，在線方式播放視頻成為網(wǎng)站主要功能之一。,5.2.1 標簽嵌入視頻,使用標簽嵌

4、入rm格式的視頻，在嵌入視頻之前首先要安裝相應(yīng)的插件，或者安裝相應(yīng)的播放器。 Rm格式是RealNetworks公司制定的網(wǎng)絡(luò)音頻/視頻格式，用RealPlayer或RealOne Player播放器可以實現(xiàn)在線播放，并且根據(jù)網(wǎng)絡(luò)帶寬調(diào)整壓縮比，在低速網(wǎng)絡(luò)上實現(xiàn)視頻影像實時傳送和播放。 Real Alternative是從RealOne Player中提取出來的解碼包，安裝解碼包之后，可以在不安裝RealOne Player或RealPlayer播放器的情況下播放Real格式的音頻、視頻文件。,5.2.1 標簽嵌入視頻, rm視頻 ,5.2.2 標簽的屬性dynsrc嵌入視頻,標簽的屬性dyn

5、src可以嵌入多種音頻和視頻，例如，WAV格式、AVI格式、MP3格式等等。 其中屬性dynsrc表示嵌入視頻的文件路徑信息，可以是相對路徑也可以是絕對路徑； 屬性src表示圖片路徑信息，該屬性表示視頻在下載時，暫時用圖片代替視頻顯示在播放窗口。 當dynsrc屬性指向一個音頻文件時，src屬性失去作用，圖片就不可見； 屬性start定義文件播放方式，start=fileopen表示打開文件時播放視頻，start=mouseover表示鼠標移動到播放區(qū)時開始播放；,5.2.2 標簽的屬性dynsrc嵌入視頻,屬性height和width表示播放視頻界面的高度和寬度 屬性controls表示在視

6、頻窗口顯示播放控制條 屬性loop表示視頻的播放次數(shù) 屬性值是正整數(shù)或-1，屬性值為-1表示視頻反復播放 屬性loopdelay表示視頻延時播放時間，單位為毫秒數(shù)； 屬性hspace和 vspace分別表示視頻播放窗口距離左邊和上邊的頁面空白大小。, 視頻 ,5.2.2 標簽的屬性dynsrc嵌入視頻,5.3 使用標簽嵌入媒體對象,HTML語言中標簽可以在網(wǎng)頁中嵌入各種多媒體對象，例如，F(xiàn)lash動畫、視頻、音頻、ActiveX控件等。 對于不支持標簽的瀏覽器，可以執(zhí)行標簽內(nèi)的內(nèi)容。 標簽的屬性width 和 height 表示播放界面寬和高； 屬性Classid唯一的標識使用播放器ID值，表

7、示視頻播放所需要安裝的播放器或ActiveX控件，如果沒有，瀏覽器會自動下載并安裝；,5.3 使用標簽嵌入媒體對象,標簽表示播放器運行時的參數(shù)，標簽的name屬性表示播放運行參數(shù)，常用參數(shù)如下： ：不顯示控制按鈕 ：鏈接多個控件的控制臺名稱 ：是否自動播放 ：視頻文件路徑 ：啟動窗口不顯示RealPlayer的logo ：可以禁止顯示標題或是版權(quán)信息 ：重置播放列表控件,5.3.1 插入RealPlayer ActiveX對象,插入RealPlayer ActiveX對象，首先需要先安裝RealPlayer播放器，或安裝Real Alternative插件。,5.3.1 插入RealPlaye

8、r ActiveX對象, 視頻 ,5.3.2 插入wmplayer控件,如果要插入wmplayer對象，首先需要先安裝windows media player播放器，或安裝相應(yīng)的解碼器。wmplayer控件可以播放wmv格式視頻、wma格式音頻和asf格式視頻等。,5.3.2 插入wmplayer控件, 視頻 ,5.3.3 插入Flash動畫,需要使用標簽插入Flash動畫、視頻時，首先需要先安裝Flash Player播放器，或安裝Flash 8網(wǎng)頁動畫設(shè)計軟件，會自動安裝Flash Player播放器。網(wǎng)頁中可以播放swf格式的Flash動畫和flv格式的Flash視頻。Flash動畫導出

9、的文件為swf格式，F(xiàn)lash視頻文件為flv格式。,5.3.3 插入Flash動畫,其中標簽的name常用屬性值如下： ：播放文件格式 ：播放質(zhì)量 ：背景透明播放,5.3.3 插入Flash動畫, flash ,5.4 Dremweaver插件,插件是Dreamweaver主要功能的擴展，可以使用Dreamweaver或第三方開發(fā)的插件提供更多的擴展功能。 Dreamweaver插件主要包括命令、行為和對象三種。,5.4 Dremweaver插件,Dreamweaver提供了大量的插件，教材通過Float Image、RealMedia Suite和Sound三個控件的使用來了解控件的功能。

10、 在Dreamweaver的官方網(wǎng)站下載上述插件，文件為mxp格式。 安裝Dreamweaver 8后，在程序菜單中可以找到擴展管理器Macromedia Extension Manager，可以利用擴展管理器安裝、刪除和管理插件。,5.4.1 浮動圖片插件,Float Image插件安裝后，在擴展管理器Macromedia Extension Manager里可以看到Float Image插件信息。 打開Dreamweaver，選擇菜單欄的【命令】【Floating image】，彈出浮動圖像設(shè)置對話框。,5.4.2 視頻插件,RealMedia Suite插件安裝后，在擴展管理器Macro

11、media Extension Manager里可以看到RealMedia Suite插件信息。 打開Dreamweaver，選擇視頻插入位置，然后選擇插入欄的【Real Audio】【Real Video】，將視頻插入到網(wǎng)頁中。,5.4.3 音頻插件,Sound插件安裝后，在擴展管理器Macromedia Extension Manager里可以看到Sound插件信息。 打開Dreamweaver，選擇音頻插入位置，然后選擇插入欄的【常用】【Sound】，彈出文件選擇對話框，將視頻插入到網(wǎng)頁中。,本章小結(jié),本章主要介紹網(wǎng)頁中添加多媒體對象的技術(shù)。熟悉網(wǎng)頁中添加多媒體的基本方法；掌握常用添加多媒體標簽的使用方法和格式；掌握標簽、標簽、標簽和標簽的使用方法；學會使用Dreamweaver添加音頻、視頻的操作方法，并且掌握Dreamweaver插件的功能和具體使用方法。,思考與練習,請簡述常用多媒體文件的格式和特點。 請簡述使用標簽添加音樂的格式和方法。 請簡述使用標簽添加音頻和視頻到網(wǎng)頁的步驟和方法。 請簡述使用標簽添加音頻和視頻到網(wǎng)頁的步驟和方法。 請簡述使用標簽添加多媒體對象的步驟和方法。