靜態(tài)網(wǎng)頁設計與制作 課件 第6章 制作多媒體網(wǎng)頁

項目六

制作多媒體網(wǎng)頁任務1添加聲音任務2HTML5多媒體任務3Flash對象任務1添加聲音任務引入網(wǎng)頁中除了包含圖像和文字之外，有時還需要添加一些音頻，小明了解到不同類型的聲音文件插入到網(wǎng)頁中會有不同的要求和效果，那么具體有哪些類型的聲音文件，如何將聲音文件添加到網(wǎng)頁中呢？知識準備聲音文件的格式有多種類型，將聲音添加到網(wǎng)頁中也有多種不同的方法。在確定采用哪一種格式和方法添加聲音之前，需要考慮以下一些因素：添加聲音的目的、受眾、文件大小、聲音品質(zhì)和不同瀏覽器的差異。一、關于聲音不同類型的聲音文件和格式有各自不同的特點。下面介紹幾種較為常見的音頻文件格式，以及每一種格式在網(wǎng)頁應用中的一些優(yōu)缺點：.midi或.mid（樂器數(shù)字接口）格式：主要用于器樂。.wav（Waveform擴展名）格式：.aif（音頻交換文件格式，即AIFF）格式：.mp3（運動圖像專家組音頻，即MPEG-音頻層-3）格式：.ra、.ram、.rpm或RealAudio格式：二、鏈接到音頻文件鏈接到音頻文件是在網(wǎng)頁中添加音頻文件的一種簡單而有效的方法。這種集成聲音文件的方法可以使訪問者能夠選擇是否收聽該文件，并且可使文件用于最廣范圍的訪客。案例——鏈接到音頻文件下面創(chuàng)建一個簡單的例子，演示鏈接到音頻文件的具體操作，效果如圖所示。（1）新建一個空白的HTML文件，輸入并格式化圖中的文字。（2）選中“1.SleepAway”，在屬性面板中，單擊“鏈接”文本框右側(cè)的“瀏覽文件”按鈕，在彈出的對話框中選中音頻文件，或者在“鏈接”文本框中鍵入文件的路徑和名稱。（3）保存文件，在瀏覽器中預覽創(chuàng)建的結(jié)果。鏈接到音樂文件

打開播放器播放音樂三、嵌入音樂文件嵌入音頻是指將聲音播放器直接并入頁面中，只有當訪問者的瀏覽器安裝有播放聲音所需的插件時，聲音才可以播放。如果要將聲音用作背景音樂，或者要對聲音演示進行更多控制，例如設置音量、播放器在頁面上顯示的方式，以及聲音文件的開始點和結(jié)束點，可以嵌入文件。案例——制作背景音樂下面通過一個簡單實例演示背景音樂的制作方法。最終的創(chuàng)建效果如圖所示。（1）新建一個空白的HTML文檔。（2）在“設計”視圖中，將插入點放置在要嵌入文件的位置，執(zhí)行“插入”｜“HTML”｜“插件”命令，彈出“選擇文件”對話框。（3）選擇要鏈接的音樂文件，單擊“確定”按鈕，在頁面上插入一個插件占位符。（4）選中插件占位符，在屬性面板上將插件尺寸修改為300×40。單擊“參數(shù)”按鈕，彈出如圖所示的“參數(shù)”對話框。（5）單擊對話框上的“添加”按鈕，在“參數(shù)”列中輸入?yún)?shù)的名稱“l(fā)oop”。在“值”域中輸入該參數(shù)的值“true”，如圖所示。輸入完畢后單擊“確定”按鈕。（6）執(zhí)行“文件”｜“保存”命令，保存文檔。在瀏覽器中的預覽效果如圖所示，且音樂循環(huán)播放?！皡?shù)”對話框

“參數(shù)”對話框任務2HTML5多媒體任務引入在Dreamweaver2021中，除了能在網(wǎng)頁中插入聲音之外，還可以插入HTML5視頻、HTML5音頻等多媒體對象，那么要如何插入HTML5多媒體呢，如何設置媒體屬性呢？知識準備HTML5視頻元素提供一種將動畫或視頻嵌入網(wǎng)頁中的標準方式。一、插入HTML5視頻在網(wǎng)頁中插入HTML5視頻的操作步驟如下：（1）將光標放置在要插入視頻的位置。（2）執(zhí)行“插入”｜“HTML”｜“HTML5Video”菜單命令，即可在指定位置插入一個HTML5視頻占位符，如圖所示。HTML5視頻占位符二、設置HTML5視頻屬性在網(wǎng)頁中插入HTML5視頻后，選中HTML5視頻占位符，對應的屬性面板如圖所示。下面簡要介紹屬性面板中常用屬性的功能。源：用于指定視頻文件的位置。Alt源1、Alt源2：用于指定備用視頻文件的路徑。三、插他們?nèi)際TML5音頻在網(wǎng)頁中插入HTML5音頻的操作步驟如下：（1）將光標放置在要插入音頻的位置。（2）執(zhí)行“插入”｜“HTML”｜“HTML5Audio”菜單命令，即可在指定位置插入HTML5音頻的占位符，如圖所示。四、設置HTML5音頻屬性在網(wǎng)頁中插入HTML5音頻后，選中HTML5音頻占位符，對應的屬性面板如圖所示。與HTML5視頻相同，“源”/“Alt源1”/“Alt源2”用于指定音頻文件的路徑和備用音頻文件的路徑。如果“源”中指定的音頻格式不被支持，則使用“Alt源1”或“Alt源2”指定的格式。瀏覽器選擇第一個可識別格式播放音頻。任務3Flash對象任務引入小明已經(jīng)掌握了添加音頻文件和HTML5多媒體對象的方法，但是有時也需要插入Flash對象，這個在Dreamweaver軟件中也是可實現(xiàn)的，具體應該怎么去插入對象以及修改對象屬性呢？知識準備Flash技術是一種實現(xiàn)和傳遞基于矢量圖形和動畫的解決方案，能與Dreamweaver很好地結(jié)合使用。用戶可以很方便地在Dreamweaver文檔中插入Flash動畫和Flash視頻。一、添加Flash動畫在Dreamweaver2021中，用戶可以很方便地在頁面中添加Flash動畫。本小節(jié)將通過一個實例演示在文檔中插入Flash影片的操作方法。（1）新建一個HTML文檔并保存。（2）在“設計”視圖中，將插入點放置在要插入Flash動畫的地方，在“插入”/“HTML”面板中單擊“FlashSWF”按鈕。（3）在彈出的“選擇SWF”對話框中選擇需要的Flash動畫文件之后，單擊“確定”按鈕插入Flash動畫。（4）選中插入的影片占位符，在屬性面板上設置其大小、播放方式、對齊方式和背景顏色。本例將其居中對齊，其他采用默認設置。在Wmode下拉列表中選擇“透明”，則可使Flash背景透明。（5）保存文件，按F12鍵即可預覽影片文件。如圖所示。二、插入Flash視頻內(nèi)容若要在網(wǎng)頁中插入Flash視頻，執(zhí)行以下操作：（1）選擇“插入”|“HTML”|“FlashVideo”菜單命令，彈出如圖所示的“插入FLV”對話框。（2）在“視頻類型”下拉列表中選擇視頻加載方式。（3）在“URL”文本框中鍵入Flash視頻的路徑。（4）在“外觀”下拉菜單中指定Flash視頻組件的外觀。Flash動畫的占位符

播放Flash動畫（5）在“寬度”和“高度”文本框中以像素為單位指定FLV文件的寬度和高度。（6）選中“限制高寬比”復選框，可以保持Flash視頻組件的寬度和高度的比例不變。默認情況下選擇此選項。（7）選中“自動播放”復選框，則網(wǎng)頁加載時自動播放視頻。（8）選中“自動重新播放”復選框，則播放控件在視頻播放完之后返回到起始位置，循環(huán)播放。（9）單擊“確定”按鈕關閉對話框，即可在頁面中插入Flash視頻占位符?！安迦隖LV”對話框三、修改Flash視頻屬性若要修改Flash視頻屬性，可以執(zhí)行以下步驟：（1）在“文檔”窗口中，單擊選中Flash視頻組件占位符。（2）打開屬性面板進行更改。項目總結(jié)項目實戰(zhàn)實戰(zhàn)一在網(wǎng)頁中添加聲音練習繪制如圖所示的符號，涉及的命令主要是“直線”命令。為了使繪制過程準確無誤，要求通過坐標值的輸入指定線段的端點，利用這些操作使讀者靈活掌握線段的繪制方法。（1）新建一個HTML文件，輸入并格式化文字。（2）文本，在屬性面板上的“鏈接”區(qū)域單擊文件夾圖標找到需要的音頻文件。（3）同樣的方法，為其他文本選擇鏈接的音樂文件。（4）保存文件，在瀏覽器中預覽頁面效果，效果如圖所示。