網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第5章 圖像與多媒體元素

第5章圖像與多媒體元素網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents5.1

在網(wǎng)頁(yè)中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.1.1

常用圖像格式GIF、JPEG、PNG等格式是網(wǎng)頁(yè)中常用的圖像格式。1.GIF格式GIF是英文單詞GraphicsInterchangeFormat的縮寫，即圖像交換格式。2.JPEG格式JPEG即JointPhotographicExpertsGroup的縮寫，是用于連續(xù)色調(diào)靜態(tài)圖像壓縮的一種標(biāo)準(zhǔn)，是最常用的圖像文件格式。3.PNG格式PNG是PortableNetworkGraphic的縮寫，即便攜式網(wǎng)絡(luò)圖形。5.1.2插入圖像通過“插入”命令可以在網(wǎng)頁(yè)文檔中添加圖像，美化網(wǎng)頁(yè)頁(yè)面。5.1.3圖像的屬性設(shè)置執(zhí)行“窗口>屬性”命令或按Ctrl+F3組合鍵打開“屬性”面板，選中要設(shè)置的圖像，在“屬性”面板中可查看設(shè)置其參數(shù)。1.寬和高2.圖像源文件3.鏈接4.地圖名稱和熱點(diǎn)工具5.目標(biāo)6.編輯5.1.4圖像的對(duì)齊方式通過設(shè)置插入圖像的對(duì)齊方式，可以使頁(yè)面整齊且具有條理。用戶可以設(shè)置圖像與同一行中的文本、圖像、插件或其他元素對(duì)齊，也可以設(shè)置圖像的水平對(duì)齊方式。5.1.5替換文本“屬性”面板中的“替換”選項(xiàng)可以指定在只顯示文本的瀏覽器或已設(shè)置為手動(dòng)下載圖像的瀏覽器中代替圖像顯示的替代文本。如果用戶的瀏覽器不能正常顯示圖像時(shí)，替換文字代替圖像給用戶以提示。對(duì)于使用語(yǔ)音合成器（用于只顯示文本的瀏覽器）的有視覺障礙的用戶，將大聲讀出該文本。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過圖像時(shí)也會(huì)顯示該文本。5.1.6鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像可以制作在瀏覽器中查看并使用鼠標(biāo)經(jīng)過時(shí)發(fā)生變化的圖像。創(chuàng)建鼠標(biāo)經(jīng)過圖像必須有原始圖像和鼠標(biāo)經(jīng)過圖像兩個(gè)圖像。5.1.7實(shí)操案例：米格餐具本案例將以米格餐具網(wǎng)頁(yè)制作為例，對(duì)圖像的添加與應(yīng)用進(jìn)行介紹。目錄Contents5.1

在網(wǎng)頁(yè)中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.2.1插入HTML5Video元素在HTML5網(wǎng)頁(yè)中可以通過插入HTML5Video元素的方式插入視頻。HTML5Video元素支持Ogg、MPEG4和WebM3種視頻格式。5.2.2插入HTML5Audio元素HTML5網(wǎng)頁(yè)中可以通過插入Audio元素的方式插入音頻，Audio元素能夠播放聲音文件或者音頻流，支持OggVorbis、MP3和WAV3種音頻格式。5.2.3實(shí)操案例：青鳥視頻本案例將以青鳥視頻網(wǎng)頁(yè)中視頻元素的添加為例進(jìn)行介紹。目錄Contents5.1

在網(wǎng)頁(yè)中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.3課堂實(shí)戰(zhàn)本案例將以曲樂影音網(wǎng)站首頁(yè)的制作為例，對(duì)網(wǎng)頁(yè)中圖像及多媒體元素的添加進(jìn)行介紹。目錄Contents5.1

在網(wǎng)頁(yè)中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5