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

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