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

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

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

插入多媒體元素5.3

課堂實戰(zhàn)5.4

課后練習(xí)5.1.1

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

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

插入多媒體元素5.3

課堂實戰(zhàn)5.4

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

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

插入多媒體元素5.3

課堂實戰(zhàn)5.4

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

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

插入多媒體元素5.3

課堂實戰(zhàn)5.4

課后練習(xí)5