11.1網頁圖像的基本知識目前雖然有很多種圖像格式，但是在網站頁面中常用的只有GIF、JPEG、PNG這3種格式，其中PNG文件具有較大的靈活性且文件比較小，所以它對于目前任何類型的Web圖形來說都是最適合的，但是只有較高版本的瀏覽器才支持這種圖像格式，而且也不是對PNG文件的所有特性都能很好地支持。都可以支持。11.1.1

GIF格式

GIF是英文GraphicsInterchangeFormat（圖形交換格式）的縮寫，GIF采用LZW無損壓縮算法，而且最多使用256種顏色，最適合顯示色調不連續或具有大面積單一顏色的圖像。另外，GIF圖片支持動畫。GIF動畫的顯示不需要特定的插件，在制作簡單的、只有幾幀圖片交替的動畫時，GIF動畫也有著特定的優勢。

11.1.2

JPEG格式

JPEG是英文JointPhotographicExpertsGroup（聯合圖像專家組）的縮寫，該圖像格式是用于攝影連續色調圖像的高級格式，因為JPEG文件可以包含數百萬種顏色。通常JPEG文件需要通過壓縮圖像品質和文件大小之間來達到良好的平衡，因為隨著JPEG文件品質的提高，文件的大小和下載時間也會隨之增加。

11.1.3

PNG格式

PNG是英文PortableNetworkGraphic（可移植網絡圖形）的縮寫，該圖像格式是一種替代GIF格式的專利權限制的格式，它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。PNG是Fireworks固有的文件格式。PNG文件可保留所有的原始圖層、矢量、顏色和效果信息，并且在任何時候都可以完全編輯所有元素。

11.2在網頁中插入圖像在DreamweaverCC中，可以直接插入圖像，也可以將圖像作為頁面的背景。另外，還可以創建出圖像交替的交互效果。想在制作網頁的過程中直接修改圖像，可以調出外部圖像編輯器。

11.2.1插入圖像在網頁中插入圖像可以有效地提高網頁的觀賞性，并且可以反映出網站的主題，下面我們將向大家介紹一下如何在網頁中插入圖像。動手實踐——插入圖像

11.2.2設置圖像屬性

如果需要對圖像進行屬性設置，首先需要在Dreamweaver設計視圖中選中需要設置屬性的圖像，可以看到該圖像的屬性出現在“屬性”面板上。

最終文件：光盤\最終文件\第11章\11-2.html視頻：光盤\視頻\第11章\11-2.swf

11.3插入其他圖像元素Dreamweaver中還提供了一些其他相關的圖像元素，單擊“插入”面板上的“常用”選項卡中的“圖像”按鈕右側的下三角形，即可彈出下拉菜單，可以看到“鼠標經過圖像”和FireworksHTML兩種圖像元素。下面主要向大家介紹如何在頁面中插入其他兩種圖像元素。11.3.1鼠標經過圖像鼠標經過圖像是一種在瀏覽器中查看并使用鼠標指針經過它時發生變化的圖像。鼠標經過圖像實際上由兩個圖像組成：主圖像（當首次載入頁面時顯示的圖像）和次圖像（當鼠標指針經過主圖像時顯示的圖像）。鼠標經過圖像中的這兩幅圖像應該大小相等；如果這兩幅圖像大小不同，Dreamweaver將自動調整第2幅圖像的大小匹配第1幅圖像的屬性。下面向大家介紹一下插入鼠標經過圖像的相關屬性。動手實踐——制作交互導航菜單最終文件：光盤\最終文件\第11章\11-3-1.html視頻：光盤\視頻\第11章\11-3-1.swf

11.3.2插入FireworksHTML在Dreamweaver中整合了很多Fireworks的功能，這里講到的也是其中之一，用戶可以輕松插入Fireworks制作的HTML文檔。

11.4插入HTML5畫布畫布是DreamweaverCC新增的基于HTML5的全新功能，通過該功能可以在網頁中自動繪制出一些常見的圖形，例如矩形和橢圓形等，并且能夠添加一些圖像。11.4.1

插入畫布在網頁中插入畫布，像插入其他網頁對象一樣簡單，然后利用JavaScript腳本調用繪圖API（接口函數），在網頁中繪制出各種圖形效果。畫布具有多種繪制路徑、矩形、圓形、字符和添加圖像的方法，還能實現動畫。11.4.2設置畫布屬性單擊選中剛剛在網頁中插入的畫布圖標，在“屬性”面板中可以對畫布的相關屬性進行設置。11.4.3如何使用畫布在網頁中繪制圖形畫布元素本身是沒有繪圖能力的，畫布元素提供了一套繪圖API。在開始繪圖之前，先要獲取畫布元素的對象，再獲取一個繪圖上下文，接下來就可以使用繪圖API中豐富的功能了。11.4.4使用HTML5畫布繪制矩形在DreamweaverCC的畫布工具在網頁中繪制矩形需要添加相應的腳本代碼，矩形繪制有兩種專用方法：strokeRect()和fillRect()，分別用于繪制矩形的邊框和填充的矩形區域。動手實踐——使用HTML5畫布繪制矩形最終文件：光盤\最終文件\第11章\11-4-4.html視頻：光盤\視頻\第11章\11-4-4.swf11.4.5使用HTML5畫布實現圓形圖片在使用畫布繪圖時還有一種對路徑的處理方法叫做剪裁方法clip()，與圖片的剪裁相似，在畫布中分割一塊區域來保留圖片的一部分。

11.5制作旅游信息網站頁面圖像可以使網頁充滿生命力和說服力，能夠體現出網頁及其網站獨有的風格。在擁有了華麗視覺效果的同時，也一定要留意圖像的占用的空間大小，在頁面效果和大小之間找到一個合適的交叉點。下面通過一個旅游信息網站頁面的實例，講解制作圖像頁面的方法。

動手實踐——使用HTML5畫布實現圓形圖片動手實踐——制作旅游信息網站頁面最終文件：光盤\最終文件\第11章\11-4-5.html視頻：光盤\視頻\第11章\11-4-5.swf最終文件：光盤\最終文件\第11章\11-5.html視頻：光盤\視頻\第11章\11-5.swf

11.6本章小結本章主要講解了圖像元素在