項(xiàng)目二多媒體元素的應(yīng)用371

制作元宵節(jié)的習(xí)俗圖文網(wǎng)頁(yè)2制作元宵節(jié)的習(xí)俗多媒體網(wǎng)頁(yè)目錄CONTENTS383制作每日鑒賞多媒體網(wǎng)頁(yè)任務(wù)1

制作元宵節(jié)的習(xí)俗圖文網(wǎng)頁(yè)391.了解網(wǎng)頁(yè)中圖像的格式、特點(diǎn)及應(yīng)用。2.能用“插入”面板、“文件”面板插入圖像。3.能用“屬性”面板設(shè)置圖像的屬性，編輯圖像的標(biāo)簽及屬性代碼。40本任務(wù)是一個(gè)圖像和文本混排的網(wǎng)頁(yè)制作實(shí)例（見(jiàn)右圖

）。通過(guò)本任務(wù)的學(xué)習(xí)，可以掌握使用菜單、組合快捷鍵、“插入”面板、“文件”面板、“屬性”面板、代碼視圖插入圖像并設(shè)置圖像屬性的方法，熟悉網(wǎng)頁(yè)圖文混排的技巧。41元宵節(jié)的習(xí)俗圖文網(wǎng)頁(yè)最終效果一、網(wǎng)頁(yè)中圖像的格式目前，網(wǎng)頁(yè)中常用的圖像格式有JPEG、GIF、PNG等，其特點(diǎn)見(jiàn)下表。42

網(wǎng)頁(yè)中常用的圖像格式和特點(diǎn)二、圖像的HTML標(biāo)簽和屬性1.?圖像的HTML標(biāo)簽圖像的HTML標(biāo)簽代碼示例如下：上述示例代碼表示插入文件夾“images”中一個(gè)名為“1-4-hanchuan.jpg”的圖像，圖像的寬度和高度分別設(shè)為200px（像素）和132px。其中，src、alt屬性是必需的，src屬性用來(lái)規(guī)定圖像的URL，alt屬性用來(lái)規(guī)定圖像的替代文本。432.?圖像的屬性圖像的屬性及說(shuō)明見(jiàn)下表。44

圖像的屬性及說(shuō)明三、圖像的插入方法1.單擊“插入”面板中的“Image”圖標(biāo)。2.單擊“插入”→“Image”命令。3.按組合快捷鍵Ctrl+Alt+I。4.在“文件”面板上選擇圖像文件后，將圖像文件拖動(dòng)到設(shè)計(jì)視圖中圖像應(yīng)放置的位置，如圖所示。45

從“文件”面板上拖動(dòng)圖像文件到設(shè)計(jì)視圖中任務(wù)2

制作元宵節(jié)的習(xí)俗多媒體網(wǎng)頁(yè)461.了解網(wǎng)頁(yè)中視頻的格式和特點(diǎn)。2.了解視頻的標(biāo)簽及屬性。3.能在網(wǎng)頁(yè)中插入視頻，用“屬性”面板設(shè)置視頻的屬性。4.能編輯視頻的標(biāo)簽和屬性代碼。47本任務(wù)是一個(gè)視頻與文本混排的網(wǎng)頁(yè)制作實(shí)例（見(jiàn)右圖）。通過(guò)本任務(wù)的學(xué)習(xí)，可以掌握利用“插入”面板、“屬性”面板、代碼視圖來(lái)插入視頻并設(shè)置其屬性的步驟和技巧。48元宵節(jié)的習(xí)俗多媒體網(wǎng)頁(yè)最終效果一、網(wǎng)頁(yè)中常用的視頻格式和瀏覽器支持情況1.?網(wǎng)頁(yè)中常用的視頻格式目前，在網(wǎng)頁(yè)中常用的視頻格式有MP4、Ogg和WebM，見(jiàn)下表。49網(wǎng)頁(yè)中常用的視頻格式及說(shuō)明2.?瀏覽器對(duì)視頻格式的支持情況目前，主流瀏覽器對(duì)三種視頻格式的支持情況見(jiàn)下表。50主流瀏覽器對(duì)三種視頻格式的支持情況二、網(wǎng)頁(yè)中視頻的標(biāo)簽和屬性1.?網(wǎng)頁(yè)中視頻的標(biāo)簽如圖所示為網(wǎng)頁(yè)中視頻的標(biāo)簽格式示例。51視頻的標(biāo)簽格式示例上圖中的代碼表示插入一個(gè)名為“movie.mp4”的視頻，視頻的寬度和高度分別設(shè)為320px和240px，“controls”用于設(shè)置video標(biāo)簽是否需要顯示控制條。其中，“src”和“type”屬性是必需的，“src”屬性用于指定需要播放的視頻地址，“type”屬性用于指定視頻的類(lèi)型。522.?視頻的屬性視頻的屬性及說(shuō)明見(jiàn)下表。53視頻的屬性及說(shuō)明三、在網(wǎng)頁(yè)中插入視頻的方法1.按組合快捷鍵Ctrl+Alt+Shift+V。2.單擊“插入”面板中的“HTML5Video”按鈕。3.單擊“插入”→“HTML”→“HTML5Video”命令。4.在代碼視圖中插入video標(biāo)簽。54任務(wù)3

制作每日鑒賞多媒體網(wǎng)頁(yè)551.了解網(wǎng)頁(yè)中音頻的作用、格式、標(biāo)簽及屬性。2.了解鼠標(biāo)經(jīng)過(guò)圖像的形式和特點(diǎn)，能插入鼠標(biāo)經(jīng)過(guò)圖像。3.能插入HTMLAudio元素，并用“屬性”面板設(shè)置其屬性。4.能編輯HTMLAudio元素的標(biāo)簽和屬性代碼。56本任務(wù)是一個(gè)音頻和鼠標(biāo)經(jīng)過(guò)圖像的網(wǎng)頁(yè)制作實(shí)例（見(jiàn)右圖）。通過(guò)本任務(wù)的學(xué)習(xí)，可以掌握使用“插入”面板、“屬性”面板、代碼視圖來(lái)插入音頻并設(shè)置其屬性的步驟和技巧。57每日鑒賞多媒體網(wǎng)頁(yè)最終效果一、網(wǎng)頁(yè)中的音頻1.?網(wǎng)頁(yè)中常用的音頻格式HTML5規(guī)定了一種通過(guò)audio元素來(lái)包含音頻的標(biāo)準(zhǔn)方法，目前，audio元素支持Ogg、MP3和WAV三種音頻格式，其音頻格式及特點(diǎn)見(jiàn)下表。5859網(wǎng)頁(yè)中常用的音頻格式及特點(diǎn)2.?網(wǎng)頁(yè)音頻標(biāo)簽網(wǎng)頁(yè)音頻標(biāo)簽格式舉例如下：上述代碼表示插入文件名為“yongliu_du.mp3”“yongliu_du.ogg”“yongliu_du.wav”的三種格式的音頻文件。其中“src”和“type”屬性是必需的，“src”屬性用于指定需要播放的音頻文件地址，“type”屬性用于指定音頻的類(lèi)型，“controls”用于設(shè)置是否需要顯示控制條。603.?網(wǎng)頁(yè)音頻標(biāo)簽的屬性網(wǎng)頁(yè)音頻標(biāo)簽的屬性及說(shuō)明見(jiàn)下表。61

網(wǎng)頁(yè)音頻標(biāo)簽的屬性及說(shuō)明4.?插入音頻的方法（1）單擊“插入”面板中的“HTML5Audio”按鈕。（2）單擊“插入”→“HTML”→“HTML5Audio”命令。（3）在代碼視圖中插入Audio標(biāo)簽。62二、鼠標(biāo)經(jīng)過(guò)圖像1.?鼠標(biāo)經(jīng)過(guò)圖像的含義在預(yù)覽的網(wǎng)頁(yè)中，當(dāng)鼠標(biāo)指針移到某一圖像上時(shí)，該圖像就變成了另一幅圖像；而當(dāng)鼠標(biāo)指針移開(kāi)時(shí)，該圖像又恢復(fù)成原來(lái)的圖像，這就是所謂的鼠標(biāo)經(jīng)過(guò)圖像。要制作鼠標(biāo)經(jīng)過(guò)圖像，需要用到兩張大小相同而內(nèi)容不同的圖像。632.?“鼠標(biāo)經(jīng)過(guò)圖像