網(wǎng)頁制作基礎(chǔ)教程 （Dreamweaver CC）（第3版）課件 第6章 制作多媒體網(wǎng)頁

職業(yè)教育教學(xué)用書網(wǎng)頁制作基礎(chǔ)教程（DreamweaverCC）網(wǎng)站制作前的準(zhǔn)備1網(wǎng)頁布局與規(guī)劃2網(wǎng)頁的編輯3網(wǎng)頁的多媒體效果4網(wǎng)站的管理與上傳5模塊目錄制作多媒體網(wǎng)頁插入HTML5音頻插入HTML5視頻項目一在網(wǎng)頁中插入HTML5音頻與HTML5視頻子項目1插入HTML5音頻為網(wǎng)頁添加音頻為網(wǎng)頁添加音頻可以突出多媒體功能。Dreamweaver支持Ogg、WAV、MP3等格式的音頻文件。將鼠標(biāo)指針移動到需要插入音頻文件的位置并單擊，使光標(biāo)處于該位置。選擇菜單欄中的“插入”→“HTML”→“HTML5Audio”命令。網(wǎng)頁中出現(xiàn)音頻圖標(biāo)。子項目1插入HTML5音頻選中該音頻圖標(biāo)，在屬性檢查器中可以設(shè)置音頻文件的各項參數(shù)，輸入鳥類名稱作為音頻文件的ID，單擊“源”文本框右側(cè)的“瀏覽”按鈕，在彈出的“選擇音頻”對話框中選擇存放音頻文件的文件夾，并在該文件夾中選擇需要的音頻文件，單擊“確定”按鈕。子項目1插入HTML5音頻屬性檢查器的“源”文本框中顯示音頻文件的相關(guān)信息。保存網(wǎng)頁后，在瀏覽器中打開網(wǎng)頁，單擊“播放”按鈕，音樂播放器開始工作，而用戶就可以聽到悅耳的鳥叫聲了。子項目1插入HTML5音頻在屬性檢查器右側(cè)的空白處雙擊可以將屬性檢查器完全打開，此時，用戶可以設(shè)置播放音頻文件的控制參數(shù)。取消勾選“Controls”復(fù)選框表示隱藏播放器的各個按鈕，勾選“Autoplay”復(fù)選框表示自動播放音頻文件，勾選“Loop”復(fù)選框表示循環(huán)播放音頻文件，勾選“Muted”復(fù)選框表示靜音。子項目1插入HTML5音頻將網(wǎng)頁中的音頻文件設(shè)置為自動循環(huán)播放，并且不顯示播放器控制按鈕。保存網(wǎng)頁后，在瀏覽器中預(yù)覽并驗證效果。子項目1插入HTML5音頻做一做打開網(wǎng)頁，將鼠標(biāo)指針移動到需要插入視頻文件的位置，然后選擇菜單欄中的“插入”→“HTML”→“HTML5Video”命令。網(wǎng)頁中出現(xiàn)視頻圖標(biāo)。子項目2插入HTML5視頻選中視頻圖標(biāo)，在屬性檢查器的“ID”文本框中輸入“wudong”，將“W”值設(shè)置為“320”像素，“H”值設(shè)置為“240”像素，即設(shè)置視頻播放時寬度為320像素，高度為240像素，單擊“源”文本框右側(cè)的“瀏覽”按鈕。子項目2插入HTML5視頻子項目2插入HTML5視頻HTML5視頻屬性檢查器中的主要選項說明如下。（1）“ID”文本框：用于設(shè)置視頻的名稱或視頻的標(biāo)題文字。（2）“Class”文本框：用于設(shè)置視頻的樣式，一般不用設(shè)置。（3）“W”文本框：用于設(shè)置視頻在頁面中的寬度。（4）“H”文本框：用于設(shè)置視頻在頁面中的高度。（5）“源”文本框：用于設(shè)置視頻文件的位置。（6）“Controls”復(fù)選框：勾選后，顯示播放器控件。（7）“AutoPlay”復(fù)選框：勾選后，視頻會在瀏覽器中自動播放。（8）“Loop”復(fù)選框：勾選后，視頻會在瀏覽器中循環(huán)播放。（9）“Muted”復(fù)選框：勾選后，視頻被設(shè)置為靜音。（10）“Alt源1”文本框：當(dāng)瀏覽器不支持“源”文本框中的視頻文件格式時，播放此視頻文件。（11）“Alt源2”文本框：當(dāng)瀏覽器不支持“源”文本框和“Alt源1”文本框中的視頻文件格式時，播放此視頻文件。（12）“Flash回退”文本框：在不支持HTML5視頻的瀏覽器中顯示SWF文件。讀一讀在彈出的“選擇視頻”對話框中選擇要插入的視頻文件，此時，網(wǎng)頁中視頻控件的大小發(fā)生變化。屬性檢查器的“源”文本框中出現(xiàn)了視頻文件的相關(guān)信息。子項目2插入HTML5視頻保存網(wǎng)頁后，在瀏覽器中打開網(wǎng)頁，單擊“播放”按鈕，開始播放視頻。子項目2插入HTML5視頻將網(wǎng)頁中的視頻文件設(shè)置為自動循環(huán)播放，并且不顯示播放器控制按鈕。保存網(wǎng)頁后，在瀏覽器中預(yù)覽并驗證效果。子項目2插入HTML5視頻做一做滾動文字效果鼠標(biāo)指針經(jīng)過圖像效果插入日期和時間項目二實現(xiàn)文字與圖像的動態(tài)效果在瀏覽網(wǎng)頁時，經(jīng)常可以看到從屏幕一側(cè)滾動到屏幕另一側(cè)的一行文字，非常引人注意，這行文字傳達(dá)的信息要比普通靜態(tài)文字傳達(dá)的信息更加容易被人關(guān)注，宣傳效果更加明顯。滾動文字是通過在網(wǎng)頁中加入<marquee>"滾動文字"</marquee>代碼來實現(xiàn)的，將需要滾動的文字寫入代碼并插入網(wǎng)頁的合適位置，就可以實現(xiàn)滾動文字效果。子項目1滾動文字效果打開網(wǎng)頁，切換到“拆分”視圖，在上半部分“設(shè)計”視圖中要插入滾動文字的位置單擊，確定插入位置。此時可以發(fā)現(xiàn)，光標(biāo)出現(xiàn)在下半部分“代碼”視圖的對應(yīng)位置。在光標(biāo)位置處輸入代碼<marquee>歡迎訪問“城市里的鳥”網(wǎng)站！</marquee>。子項目1滾動文字效果保存網(wǎng)頁后，在瀏覽器中打開網(wǎng)頁，用戶可以看到文字從屏幕右側(cè)向屏幕左側(cè)慢慢滾動子項目1滾動文字效果保存網(wǎng)頁后，在瀏覽器中打開網(wǎng)頁，用戶可以看到文字從屏幕右側(cè)向屏幕左側(cè)慢慢滾動子項目1滾動文字效果修改代碼，更改滾動文字的字體、顏色，并在“實時視圖”中觀察實際效果。做一做當(dāng)鼠標(biāo)指針經(jīng)過圖像時可以實現(xiàn)這樣的效果：網(wǎng)頁中有一張靜態(tài)圖片，當(dāng)鼠標(biāo)指針移動到這張圖片上時，該圖片會變?yōu)榱硪粡垐D片，用于提醒瀏覽者這張圖片存在超鏈接，單擊圖片可以打開其超鏈接的網(wǎng)頁。如果想實現(xiàn)鼠標(biāo)指針經(jīng)過圖像效果，則要事先準(zhǔn)備好兩張大小一致的圖片，以及其超鏈接的網(wǎng)頁。子項目2鼠標(biāo)指針經(jīng)過圖像效果確定光標(biāo)的位置，然后選擇菜單欄中的“插入”→“HTML”→“鼠標(biāo)經(jīng)過圖像”命令，“插入鼠標(biāo)經(jīng)過圖像”對話框，在“圖像名稱”文本框中輸入“l(fā)iuyan”作為圖像名稱，單擊“原始圖像”文本框右側(cè)的“瀏覽”按鈕。在彈出的“原始圖像”對話框中選擇事先準(zhǔn)備好的圖片1，單擊“確定”按鈕。子項目2鼠標(biāo)指針經(jīng)過圖像效果在返回的“插入鼠標(biāo)經(jīng)過圖像”對話框，單擊“確定”按鈕。設(shè)置完畢。子項目2鼠標(biāo)指針經(jīng)過圖像效果保存網(wǎng)頁后，在瀏覽器中打開網(wǎng)頁，將鼠標(biāo)指針移動到剛插入的圖片上可以發(fā)現(xiàn)，圖片變?yōu)榱硪粡垐D片，同時鼠標(biāo)指針變?yōu)槭中?，單擊該圖片，即可打開網(wǎng)頁。子項目2鼠標(biāo)指針經(jīng)過圖像效果選擇菜單欄中的“插入”→“HTML”→“日期”命令。在彈出的“插入日期”對話框中分別確定“星期格式”“日期格式”“時間格式”，并勾選“儲存時自動更新”復(fù)選框，單擊“確定”按鈕。子項目3插入日期和時間保存網(wǎng)頁后，在瀏覽器中預(yù)覽網(wǎng)頁，網(wǎng)頁底部出現(xiàn)當(dāng)前日期、星期和時間。子項目3