《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊4 網(wǎng)頁(yè)中的圖像與多媒體技術(shù)

模塊四網(wǎng)頁(yè)中的圖像與多媒體技術(shù)目錄任務(wù)一制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面任務(wù)二任務(wù)三制作“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面引入知識(shí)點(diǎn)4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像4.2使用<img>標(biāo)記插入圖像任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像在網(wǎng)絡(luò)帶寬的不斷提升以及人們的審美情趣越來(lái)越高的今天，圖像已經(jīng)成為網(wǎng)頁(yè)中必不可少的重要元素之一。網(wǎng)頁(yè)圖像運(yùn)用的好壞，決定了網(wǎng)頁(yè)設(shè)計(jì)的成敗。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像4.1.1網(wǎng)頁(yè)常用圖像格式了解網(wǎng)頁(yè)圖像的類型和格式是在網(wǎng)頁(yè)中合理使用圖像的基礎(chǔ)。圖像的文件格式有很多種，但由于受到網(wǎng)絡(luò)帶寬和瀏覽器的限制，通常在網(wǎng)頁(yè)中使用的有JPEG、GIF和PNG三種。其中JPEG和GIF圖像格式在網(wǎng)頁(yè)上使用最廣，能支持大多數(shù)瀏覽器。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像4.1.2網(wǎng)頁(yè)圖像使用原則目前，雖然寬帶在國(guó)內(nèi)普及，但在制作網(wǎng)頁(yè)時(shí)也要在速度和美觀之間取得較好地結(jié)合點(diǎn)。一般普通的首頁(yè)應(yīng)該限制在100KB以內(nèi)，其他頁(yè)面最好控制在500KB以內(nèi)。因?yàn)?，如果一個(gè)網(wǎng)頁(yè)很大，在瀏覽器里超過(guò)30秒還沒(méi)有打開(kāi)，大部分瀏覽者都會(huì)選擇放棄。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像在網(wǎng)頁(yè)中插入圖像可以起到美化頁(yè)面的作用。HTML提供了<img>標(biāo)記來(lái)插入圖像?；菊Z(yǔ)法格式如下：<imgsrc="圖像文件路徑">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.1使用標(biāo)記屬性設(shè)置圖像大小使用<img>標(biāo)記插入圖像，默認(rèn)情況下將插入原始大小的圖像，如果想在插入時(shí)修改圖像的大小，可以使用height和width屬性來(lái)實(shí)現(xiàn)?；菊Z(yǔ)法格式如下：<imgsrc="圖像文件路徑"width="圖像的寬度"height="圖像的高度">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.2使用標(biāo)記屬性設(shè)置圖像描述信息和替換信息設(shè)置圖像提示信息使用title屬性，設(shè)置圖像的替換信息使用alt屬性?；菊Z(yǔ)法格式如下：<imgsrc="圖像文件的路徑"title="圖像描述信息"alt="圖像替換信息">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.3使用標(biāo)記屬性設(shè)置圖像的邊框默認(rèn)情況下，插入圖像是沒(méi)有邊框的，有時(shí)在我們?cè)O(shè)計(jì)網(wǎng)頁(yè)時(shí)為了獲得某種效果，需要讓圖像顯示邊框。設(shè)置圖像的邊框可以使用圖像的border屬性?；菊Z(yǔ)法如下：

<imgsrc="圖像文件的路徑"border="邊框?qū)挾?>語(yǔ)法說(shuō)明："邊框?qū)挾?的單位為像素，最小值是1。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.4使用標(biāo)記屬性設(shè)置圖像的對(duì)齊方式默認(rèn)情況下，插入圖像在水平方向放置在對(duì)象的左邊，在垂直方向則與baseline（基線）對(duì)齊。我們可以使用圖像的align屬性修改它的對(duì)齊方式?；菊Z(yǔ)法如下：<imgsrc="圖像文件的路徑"align="對(duì)齊方式">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.5使用標(biāo)記屬性設(shè)置圖像與周圍對(duì)象的間距默認(rèn)情況下，圖像與周圍對(duì)象的水平間距和垂直間距都比較緊湊，顯得較為擁擠。這樣的間距，很多時(shí)候都不符合我們的設(shè)計(jì)需要。使用圖像的hspace屬性和vspace屬性可以分別設(shè)置圖像與周圍對(duì)象的間距?；菊Z(yǔ)法格式如下：<imgsrc=“圖像文件的路徑”vspace=“垂直間距數(shù)值”hspace=“水平間距數(shù)值">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面任務(wù)實(shí)現(xiàn)（1）在“在線學(xué)習(xí)網(wǎng)”平面作品展示頁(yè)面中插入文字和5張平面作品的圖像。（2）設(shè)置文字和圖像的屬性，讓網(wǎng)頁(yè)頁(yè)面更加美觀。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面引入知識(shí)點(diǎn)任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)4.4使用<embed>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)<object>標(biāo)記用于包含音頻、視頻、Javaapplets、ActiveX、PDF以及Flash等對(duì)象。<object>標(biāo)記設(shè)計(jì)的初衷是取代<img>和<applet>標(biāo)記。不過(guò)由于漏洞以及缺乏瀏覽器支持，這一點(diǎn)并未實(shí)現(xiàn)。<object>標(biāo)記可用于WindowsIE3.0及以后瀏覽器或者其他支持ActiveX控件的瀏覽器。針對(duì)不同的瀏覽器，<object>標(biāo)記的語(yǔ)法也有所不同，下面分別對(duì)它們進(jìn)行介紹。任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面1．針對(duì)IE9/IE8/IE7/IE6等低版本，基本語(yǔ)法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…</object>任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)2．針對(duì)IE10/IE11和非IE瀏覽器，基本語(yǔ)法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="media/star.swf"width="value"height="value"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--></object><!--<![endif]--></object>任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)<embed>標(biāo)記和<object>標(biāo)記一樣，也可以在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)、音頻、視頻等多媒體內(nèi)容。不同于<object>標(biāo)記的是，<embed>標(biāo)記用于NetscapeNavigator2.0及以后的瀏覽器或者其它支持Netscape插件的瀏覽器，其中包括IE和Chrome瀏覽器。Firefox瀏覽器目前還不支持<embed>標(biāo)記?；菊Z(yǔ)法格式如下：<embedsrc="路徑"屬性1=value1屬性2=value2…></embed>任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.4使用<embed>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容任務(wù)實(shí)現(xiàn)（1）使用<object>在“在線學(xué)習(xí)網(wǎng)”廣告作品展示頁(yè)面的頂部位置插入Flash動(dòng)畫(huà)片頭。（2）使用<embed>在“在線學(xué)習(xí)網(wǎng)”廣告作品展示頁(yè)面中插入“vivo智能手機(jī)廣告”視頻作品。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息引入知識(shí)點(diǎn)任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容4.6使用<video>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容4.7使用<audio>標(biāo)記在網(wǎng)頁(yè)中插入音頻4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容HTML5提供的視頻、音頻插入方式簡(jiǎn)單易用，主要通過(guò)<video>標(biāo)記和<audio>標(biāo)記在頁(yè)面中插入視頻和音頻文件，這需要正確選擇視頻和音頻格式。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5.1網(wǎng)頁(yè)常用視頻格式隨著網(wǎng)速的大幅提高，越來(lái)越多的設(shè)計(jì)者喜歡在網(wǎng)頁(yè)中加入視頻文件。視頻不但使網(wǎng)頁(yè)越來(lái)越精彩及富有動(dòng)感，同時(shí)也越來(lái)越受到瀏覽者的歡迎，像在線影視、視頻教程等。在HTML5中插入的視頻格式常用的包括MPEG4、Ogg、WebM等。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容4.5.2網(wǎng)頁(yè)常用音頻格式人類獲取信息的方式，除了視覺(jué)以外就是聽(tīng)覺(jué)了。為滿足人們聽(tīng)覺(jué)的需求，有時(shí)需要在網(wǎng)頁(yè)中插入聲音元素，包括插入背景音樂(lè)和插入音頻文件等。在HTML5中插入的音頻格式常用的包括MP3、WAV、OggVorbis等，任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容4.6使用<video>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容<video>標(biāo)記用于在網(wǎng)頁(yè)中插入視頻和音頻?；菊Z(yǔ)法格式如下：<videosrc="視頻文件或音頻文件的路徑"controls="controls">替代內(nèi)容</video>語(yǔ)法說(shuō)明：src屬性指定多媒體文件，這是一個(gè)必設(shè)屬性。在<video>與</video>之間插入的內(nèi)容是提供不支持<video>標(biāo)記的瀏覽器顯示的。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.7使用<audio>標(biāo)記在網(wǎng)頁(yè)中插入音頻<audio>用于在網(wǎng)頁(yè)中插入音頻?；菊Z(yǔ)法格式如下：<audiosrc="音頻的路徑"controls="controls">替代內(nèi)容</audio>語(yǔ)法說(shuō)明：src屬性指定多媒體文件，這是一個(gè)必設(shè)屬性。在<