靜態(tài)網頁設計制作 教案 第6章 制作多媒體網頁

靜態(tài)網頁設計制作STYLEREFbt1a項目六STYLEREFbt1b制作多媒體網頁項目六制作多媒體網頁思政目標培養(yǎng)學生對本課程的興趣以及自主探索能力。充分發(fā)揮主觀能動性，主動提升自身技能，提高獨立思考、推陳出新的能力技能目標學會在網頁中插添加聲音學會在網頁中插入HTML5媒體對象學會在網頁中插入Flash對象項目導讀伴隨著網絡的飛速發(fā)展，網絡多媒體技術也日益成熟。網頁中除了可以加入文本和圖片之外，還可以添加聲音、視頻等多媒體，從而創(chuàng)建豐富多彩的頁面效果。任務1添加聲音任務引入網頁中除了包含圖像和文字之外，有時還需要添加一些音頻，小明了解到不同類型的聲音文件插入到網頁中會有不同的要求和效果，那么具體有哪些類型的聲音文件，如何將聲音文件添加到網頁中呢？知識準備聲音文件的格式有多種類型，將聲音添加到網頁中也有多種不同的方法。在確定采用哪一種格式和方法添加聲音之前，需要考慮以下一些因素：添加聲音的目的、受眾、文件大小、聲音品質和不同瀏覽器的差異。一、關于聲音不同類型的聲音文件和格式有各自不同的特點。下面介紹幾種較為常見的音頻文件格式，以及每一種格式在網頁應用中的一些優(yōu)缺點：.midi或.mid（樂器數字接口）格式：主要用于器樂。許多瀏覽器都支持MIDI文件并且不要求插件。盡管其聲音品質非常好，且很小的MIDI文件也可以提供較長時間的聲音剪輯，但訪問者的聲卡不同，聲音效果也會不同。另外，MIDI文件必須使用特殊的硬件和軟件在計算機上合成，不能錄制。.wav（Waveform擴展名）格式：這種格式的聲音具有較好的聲音品質，許多瀏覽器都支持此類格式文件并且不要求插件，可以從CD、磁帶、麥克風等錄制。但是文件體積較大，限制了可以在網頁中使用的聲音剪輯的長度。.aif（音頻交換文件格式，即AIFF）格式：與WAV格式類似，具有較好的聲音品質，大多數瀏覽器都可以播放并且不要求插件，可以從CD、磁帶、麥克風等錄制。但這種格式的文件較大，限制了可以在網頁上使用的聲音剪輯的長度。.mp3（運動圖像專家組音頻，即MPEG-音頻層-3）格式：這是一種壓縮格式，可使聲音文件明顯縮小，并且聲音品質非常好。如果正確錄制和壓縮MP3文件，其質量甚至可以和CD質量相媲美。若要播放MP3文件，訪問者必須下載并安裝輔助應用程序或插件。.ra、.ram、.rpm或RealAudio格式：具有非常高的壓縮程度，文件大小要小于MP3。全部聲音文件可以在合理的時間范圍內下載。因為可以在普通的Web服務器上對這些文件進行“流式處理”，所以訪問者在文件完全下載完之前即可聽到聲音。其聲音品質比MP3文件聲音品質差，訪問者必須下載并安裝輔助應用程序或插件才可以播放這些文件。二、鏈接到音頻文件鏈接到音頻文件是在網頁中添加音頻文件的一種簡單而有效的方法。這種集成聲音文件的方法可以使訪問者能夠選擇是否收聽該文件，并且可使文件用于最廣范圍的訪客。案例——鏈接到音頻文件下面創(chuàng)建一個簡單的例子，演示鏈接到音頻文件的具體操作，效果如圖6-1所示。（1）新建一個空白的HTML文件，輸入并格式化圖中的文字。（2）選中“1.SleepAway”，在屬性面板中，單擊“鏈接”文本框右側的“瀏覽文件”按鈕，在彈出的對話框中選中音頻文件，或者在“鏈接”文本框中鍵入文件的路徑和名稱。（3）保存文件，在瀏覽器中預覽創(chuàng)建的結果。單擊鏈接“1.SleepAway”，會打開相應的媒體播放器播放音樂，如圖6-2所示。圖6-1鏈接到音樂文件圖6-2打開播放器播放音樂三、嵌入音樂文件嵌入音頻是指將聲音播放器直接并入頁面中，只有當訪問者的瀏覽器安裝有播放聲音所需的插件時，聲音才可以播放。如果要將聲音用作背景音樂，或者要對聲音演示進行更多控制，例如設置音量、播放器在頁面上顯示的方式，以及聲音文件的開始點和結束點，可以嵌入文件。案例——制作背景音樂下面通過一個簡單實例演示背景音樂的制作方法。最終的創(chuàng)建效果如圖6-3所示。圖6-3實例效果（1）新建一個空白的HTML文檔。（2）在“設計”視圖中，將插入點放置在要嵌入文件的位置，執(zhí)行“插入”｜“HTML”｜“插件”命令，彈出“選擇文件”對話框。（3）選擇要鏈接的音樂文件，單擊“確定”按鈕，在頁面上插入一個插件占位符。默認情況下，插入的插件尺寸為32×32。可以在屬性面板上修改插件的寬度和高度。如果希望在網頁中不顯示播放器，可以在屬性面板上將插件的尺寸設置為0。（4）選中插件占位符，在屬性面板上將插件尺寸修改為300×40。單擊“參數”按鈕，彈出如圖6-4所示的“參數”對話框。（5）單擊對話框上的“添加”按鈕，在“參數”列中輸入參數的名稱“l(fā)oop”。在“值”域中輸入該參數的值“true”，如圖6-5所示。輸入完畢后單擊“確定”按鈕。圖6-4“參數”對話框圖6-5“參數”對話框（6）執(zhí)行“文件”｜“保存”命令，保存文檔。在瀏覽器中的預覽效果如圖6-3所示，且音樂循環(huán)播放。任務2HTML5多媒體任務引入在Dreamweaver2021中，除了能在網頁中插入聲音之外，還可以插入HTML5視頻、HTML5音頻等多媒體對象，那么要如何插入HTML5多媒體呢，如何設置媒體屬性呢？知識準備圖6-6圖6-6HTML5視頻占位符一、插入HTML5視頻在網頁中插入HTML5視頻的操作步驟如下：（1）將光標放置在要插入視頻的位置。（2）執(zhí)行“插入”｜“HTML”｜“HTML5Video”菜單命令，即可在指定位置插入一個HTML5視頻占位符，如圖6-6所示。二、設置HTML5視頻屬性在網頁中插入HTML5視頻后，選中HTML5視頻占位符，對應的屬性面板如圖6-7所示。圖6-7HTML5視頻的屬性面板下面簡要介紹屬性面板中常用屬性的功能。源：用于指定視頻文件的位置。Alt源1、Alt源2：用于指定備用視頻文件的路徑。不同瀏覽器對視頻格式的支持有所不同。如果瀏覽器不支持“源”中指定的視頻格式，則使用“Alt源1”或“Alt源2”中指定的視頻格式。瀏覽器選擇第一個可識別格式顯示視頻。注意若要快速指定“源”/“Alt源1”/“Alt源2”，可以使用多重選擇。方法如下：在選擇文件時為同一視頻選擇三個視頻格式，列表中的第一個格式將用于“源”，其他兩個格式用于自動填寫“Alt源1”和“Alt源2”。標題（Title）：為視頻指定標題。寬度（W）：指定視頻的寬度（像素）。高度（H）：指定視頻的高度（像素）?？丶–ontrols）：用于設置是否要在HTML頁面中顯示視頻控件，如播放、暫停和靜音。自動播放（AutoPlay）：該選項用于設置網頁上加載時是否自動播放視頻。循環(huán)（Loop）：選中該項后，視頻將連續(xù)播放，直到用戶停止播放影片。靜音（Muted）：選中此項，則在播放視頻時不播放視頻中的音頻。預加載（Preload）：指定視頻加載的方式。選擇“自動（auto）”會在頁面下載時加載整個視頻。選擇“元數據（metadata）”會在頁面下載完成之后僅下載元數據。海報（Poster）：指定視頻下載完成后或用戶單擊“播放”按鈕后顯示的圖像。插入圖像時，圖像寬度和高度自動填充。Flash回退：瀏覽器不支持HTML5視頻時，播放指定的SWF文件?；赝宋谋荆簽g覽器不支持HTML5視頻時，在視頻占位符位置顯示指定的文本。三、插入HTML5音頻在網頁中插入HTML5音頻的操作步驟如下：圖6-8HTML5音頻占位符（1）將光標圖6-8HTML5音頻占位符（2）執(zhí)行“插入”｜“HTML”｜“HTML5Audio”菜單命令，即可在指定位置插入HTML5音頻的占位符，如圖6-8所示。四、設置HTML5音頻屬性在網頁中插入HTML5音頻后，選中HTML5音頻占位符，對應的屬性面板如圖6-9所示。圖6-9HTML5音頻的屬性面板與HTML5視頻相同，“源”/“Alt源1”/“Alt源2”用于指定音頻文件的路徑和備用音頻文件的路徑。如果“源”中指定的音頻格式不被支持，則使用“Alt源1”或“Alt源2”指定的格式。瀏覽器選擇第一個可識別格式播放音頻。提示若要快速指定“源”/“Alt源1”/“Alt源2”，可以使用多重選擇。同時選擇同一音頻的三種格式，列表中的第一個格式將用于“源”，其他兩種格式自動填寫“Alt源1”和“Alt源2”。標題（Title）：指定音頻文件的標題?；赝宋谋荆簽g覽器不支持HTML5音頻時，在音頻占位符位置顯示指定的文本。控件（Controls）：該選項用于選擇是否在HTML頁面中顯示音頻控件，如播放、暫停和靜音。自動播放（AutoPlay）：用于設置音頻在網頁上加載后是否自動開始播放。循環(huán)（Loop）：如果選中該項，則音頻將連續(xù)播放，直到用戶停止。靜音（Muted）：選中此項，則不播放音頻。預加載（Preload）：指定音頻加載的方式。選擇“自動（auto）”會在頁面下載時加載整個音頻文件。選擇“元數據（metadata）”會在頁面下載完成之后僅下載元數據。任務3Flash對象任務引入小明已經掌握了添加音頻文件和HTML5多媒體對象的方法，但是有時也需要插入Flash對象，這個在Dreamweaver軟件中也是可實現的，具體應該怎么去插入對象以及修改對象屬性呢？知識準備Flash技術是一種實現和傳遞基于矢量圖形和動畫的解決方案，能與Dreamweaver很好地結合使用。用戶可以很方便地在Dreamweaver文檔中插入Flash動畫和Flash視頻。一、添加Flash動畫在Dreamweaver2021中，用戶可以很方便地在頁面中添加Flash動畫。本小節(jié)將通過一個實例演示在文檔中插入Flash影片的操作方法。（1）新建一個HTML文檔并保存。（2）在“設計”視圖中，將插入點放置在要插入Flash動畫的地方，在“插入”/“HTML”面板中單擊“FlashSWF”按鈕。（3）在彈出的“選擇SWF”對話框中選擇需要的Flash動畫文件之后，單擊“確定”按鈕插入Flash動畫。插入的動畫在頁面上顯示為一個Flash占位符，如圖6-10所示。（4）選中插入的影片占位符，在屬性面板上設置其大小、播放方式、對齊方式和背景顏色。本例將其居中對齊，其他采用默認設置。在Wmode下拉列表中選擇“透明”，則可使Flash背景透明。（5）保存文件，按F12鍵即可預覽影片文件。如圖6-11所示。圖6-10Flash動畫的占位符圖6-11播放Flash動畫二、插入Flash視頻內容若要在網頁中插入Flash視頻，執(zhí)行以下操作：（1）選擇“插入”|“HTML”|“FlashVideo”菜單命令，彈出如圖6-12所示的“插入FLV”對話框。圖6-12“插入FLV”對話框（2）在“視頻類型”下拉列表中選擇視頻加載方式?！袄圻M式下載視頻”：將Flash視頻文件下載到站點訪問者的硬盤上，然后播放。與傳統(tǒng)的“下載并播放”視頻傳送方法不同，累進式下載允許在下載完成之前就開始播放視頻文件。“流視頻”：對Flash視頻內容進行流式處理，并在一段很短時間的緩沖（可確保流暢播放）后在網頁上播放。若要在網頁上啟用流視頻，必須具有訪問AdobeFlashCommunicationServer的權限。（3）在“URL”文本框中鍵入Flash視頻的路徑。（4）在“外觀”下拉菜單中指定Flash視頻組件的外觀。所選外觀的預覽顯示在“外觀”下拉菜單下方。（5）在“寬度”和“高度”文本框中以像素為單位指定FLV文件的寬度和高度。（6）選中“限制高寬比”復選框，可以保持Flash視頻組件的寬度和高度的比例不變。默認情況下選擇此選項。設置寬度、高度和外觀后，“包括外觀”右側將自動顯示FLV文件的寬度和高度與所選外觀的寬度和高度相加得出的總和。（7）選中“自動播放”復選框，則網頁加載時自動播放視頻。（8）選中“自動重新播放”復選框，則播放控件在視頻播放完之后返回到起始位置，循環(huán)播放。（9）單擊“確定”按鈕關閉對話框，即可在頁面中插入Flash視頻占位符。三、修改Flash視頻屬性若要修改Flash視頻屬性，可以執(zhí)行以下步驟：（1）在“文檔”窗口中，單擊選中Flash視頻組件占位符。（2）打開屬性面板進行更改。項目總結項目實戰(zhàn)實戰(zhàn)一在網頁中添加聲音練習如何在網頁中添加音頻文件。（1）新建一個HTML文件，輸入并格式化文字。（2）選擇文本，在屬性面板上的“鏈接”區(qū)域