考慮網絡速度的限制，網頁圖片文件一般不能太大，太大的圖片影響瀏覽器打開網頁的速度。目前，網頁中最常采用的圖片格式主要有Gif、Jpg、Png三種。下面分別介紹：
1. Gif格式（圖形交換格式）
Gif格式全稱是Graphic Interchange Format，這是網頁設計者最常使用的圖片格式之一，Gif格式具有如下特點：
Ø 無損壓縮，即在壓縮時不降低圖像的品質，而是減少顯示色彩數目。
Ø 可設置透明背景，便于更好地融合到網頁中。
Ø 支持動畫效果，能夠使網頁變得豐富多彩。
Ø 強大的跨平臺能力，可以適合不同的瀏覽器平臺。
Ø 256色的限制，即最多可以顯示的顏色數是256色，所以能夠實現無損壓縮。
2. Jpg格式（聯合圖像專家組標準）
Jpg格式又稱Jpeg，全稱是Joint Photograpic Experts Group，這種文件格式具有如下特點：
Ø 有損壓縮，即壓縮時有些圖像細節可能被忽略。
Ø 支持真彩色（32位顏色支持），顏色豐富，適應對顏色要求比較高的場合。
Ø 強大的跨平臺能力，可以適合不同的瀏覽器平臺。
3. Png格式（可移植網絡圖形）
Png格式全稱是可移植網絡圖形（Portrable Net Graphic），以PNG格式保存的圖片可以被壓縮，以減小其占用的存儲空間并加快下載速度，同時不損失任何圖像質量。PNG 格式支持不同的圖像透明度以及不同計算機上的圖像亮度控制，可用于從小圖像（如項目符號和橫幅）到復雜圖像（如照片）的各種圖像。用Fireworks設計的圖片默認保存格式就是.png。
由于PNG文件具有較大的靈活性并且文件較小，所以它對于幾乎任何類型的Web圖形都是適合的；但是，IE（4.0 和更高版本）和 Netscape（4.04 和更高版本）只能部分支持PNG圖像的顯示。因此，除非正在為支持PNG格式的瀏覽器的特定用戶進行設計，否則還是請使用GIF或JPEG格式以迎合大多數人的需求。
在插入圖像選擇圖像源文件過程中，如果當前文檔是新建的未保存文檔，在“URL”選擇框中顯示的是圖像文件在本地計算機硬盤中的絕對路徑，如：“file:///E|/wjx/03/pic/pic2.gif”。將該網頁文檔保存后，Dreamweaver8將該引用路徑轉換為文檔的相對路徑。如果在站點中操作，在頁面插入非站點目錄內的圖像時，系統會彈出對話框詢問是否將圖像文件復制到網站目錄下，如圖3-61所示。選擇【是】將在站點內保存該圖像，否則只是使用帶文件協議的絕對路徑，將來可能無法顯示該圖像。
圖3-61 在站點插入站點外圖像
那么什么是絕對路徑和相對路徑呢？
文檔絕對路徑就是一個文件的完整 URL，它包括所使用的協議（如http://和file:///）。例如，“http://www.sdut.edu.cn/01/shm.html”和“http://www.sdut.edu.cn/image/01/banner_2.gif”就是絕對路徑。
在網頁中使用文件協議（file:///）指定文件，會經常發生連接錯誤，建議不要使用。
文檔相對路徑的基本思想是省略掉對于當前文檔和所發生關系（引用或鏈接等）的文檔都相同的絕對 URL部分，而只提供不同的路徑部分。例如圖3-62所示的文件夾結構中，對于文件“pic.html”來說：
圖3-62 文件的路徑示例
●圖像文件“Back.gif”和它位于同一文件夾中，若在文件中引用“Back.gif”，則其名就可以使用相對路徑：“Back.gif”。
●圖像文件“pic1.gif”（在名為<22>的子文件夾中），可使用相對路徑“22/pic1.gif”。每個正斜杠 (/) 表示在文件夾層次結構中下移一級。
●網頁文件“index.html”（在父文件夾中，“pic.html”向上一級），可使用相對路徑“../index.html”。每個“../”表示在文件夾層次結構中上移一級。
●文件“wjx.dwt”（在父文件夾的其它子文件夾中），可使用相對路徑“../Templates/wjx.dwt”。其中“../”向上移至父文件夾；“Templates/”向下移至<Templates>子文件夾中。
文檔相對路徑對于大多數圖像路徑來說是最適用的路徑。在當前文檔與所插入的圖像文檔處于同一文件夾內，而且可能保持這種狀態的情況下，文檔相對路徑特別有用。若成組地移動一組文件，例如移動整個文件夾時，該文件夾內所有文件保持彼此間的相對路徑不變，此時不需要更新這些文件間的文檔相對鏈接。
當插入圖像使用絕對路徑時，圖像若駐留在遠程服務器上而不在本地硬盤驅動器上，則將無法在文檔窗口中查看該圖像。此時，必須在瀏覽器中預覽該文檔才能看到它。
只要情況允許，對于圖像，請盡量使用相對路徑。
注意：圖片文件最好獨立存放于相對獨立的文件夾。圖片文件名盡量不使用漢字和特殊符號，否則可能導致瀏覽器不能顯示。
2. 插入鼠標經過圖像
在網頁中，我們經常可以看到這種情況，即當鼠標指針移動到某一幅圖像上面時，圖像變化為另一幅圖像，鼠標移開時，又恢復為原來的圖像，這就是“鼠標經過圖像”。鼠標經過圖像的效果實際是由兩幅圖像完成的：主圖像（當首次載入頁時顯示的圖像）和次圖像（當鼠標指針移過主圖像時顯示的圖像）。這兩個圖像應大小相等；如果這兩個圖像大小不同，Dreamweaver 將自動調整第二個圖像的大小以匹配第一個圖像的屬性。“鼠標經過圖像”經常用于網頁中的按鈕，使網頁顯得生動活潑。下面通過一個實例講解如何插入鼠標經過圖像。
（1）在網頁編輯窗口中，將光標停留在要插入“鼠標經過圖像”的位置，點擊“常用”插入工具欄右面的“插入圖像”按鈕，會彈出下拉菜單，選擇“鼠標經過圖像”；或者通過菜單欄選擇“插入”-“圖像對象”-“鼠標經過圖像”。
（2）出現“插入鼠標經過圖像”對話框，如圖3-70所示。
圖3-70 “插入鼠標經過圖像”對話框
在“圖像名稱”文本框輸入一個名字，如“change”，在“原始圖像”文本框輸入打開網頁時顯示的圖像，即“主圖像”，在“鼠標經過圖像”文本框輸入要變換的圖像，即“次圖像”。本例中分別選擇的是<pic>文件夾下的”fish1.jpg”和”fish2.jpg”,如圖3-71所示。
圖3-71 準備交換的圖像
在“替換文本”文本框輸入鼠標經過圖像時的說明文字。實例中輸入的是“海底世界歡迎您”。在“按下時，前往的URL”文本框輸入一個網址。表示單擊圖像時轉向的鏈接地址（此處使用了超級鏈接的內容，我們將在3.4節詳細講解），本例中輸入的是“http://www.buww.com.cn”。
（3）設置完畢，點【確定】。按 F12 鍵預覽該網頁。將鼠標指針移過原始圖像，可以看到圖片發生了變化，切換到第二幅，點擊圖像將連接到設定的網址。如圖3-72所示。
圖3-72 鼠標經過圖像發生變化
注：不能在“設計”視圖中看到鼠標經過圖像的效果。
3.4.3 使用圖像地圖
有時瀏覽網頁，經常會發現一張圖片（例如地圖），點擊圖片中的不同區域，分別指向不同的URL地址，這是怎么實現的呢？在一張圖片上如何實現多個URL鏈接呢？這就需要用到Dreamweaver8的圖像地圖功能。
圖像地圖是指已被分為多個區域（或稱“熱點”）的圖像，當用戶單擊某個熱點時，會發生某種操作（例如，打開一個新文件）。要創建圖像地圖，請執行以下操作：
（1）在“文檔”窗口中，選擇圖像。
（2）在屬性檢查器中，單擊右下角的展開箭頭，查看所有屬性。在“地圖名稱”文本框中為該圖像地圖一個輸入唯一的名稱，如圖3-85所示。
圖3-85 命名圖像地圖
（3）選擇圖像熱點區域工具：選擇圓形工具，并將鼠標指針拖至圖像上，創建一個圓形熱點；選擇矩形工具，并將鼠標指針拖至圖像上，創建一個矩形熱點；選擇多邊形工具，在各個頂點上單擊一下，定義一個不規則形狀的熱點。然后單擊箭頭工具封閉此形狀。使用箭頭圖標可以拖動熱點區域。
我們為山東選擇圓形熱點區域，創建熱點后，出現熱點屬性檢查器，如圖3-86所示。
圖3-86 設置圖像熱點屬性
（4）在“鏈接”文本框中，單擊文件夾圖標可選擇在用戶單擊該熱點時要打開的文件，我們輸入“http://www.shandong.gov.cn”。在“替換”文本框中，鍵入作為替換文本出現的文本。完成設置后，在該文檔的空白區域單擊，退出熱點屬性檢查器。
（5）依此步驟創建其它熱點區域。
（6）保存網頁，用F12鍵瀏覽，鼠標移動到設置的熱點區域時，鼠標指針變成小手，點擊后轉到該熱點定義的URL，如圖3-87所示。
圖3-87 圖像熱點區域示例
定義圖像熱點后，可以移動熱點，調整熱點大小，還可以將含有熱點的圖像從一個文檔復制到其它文檔，或者復制某圖像中的一個或多個熱點，然后將其粘貼到其它圖像上；這樣就將與該圖像關聯的熱點也復制到了新文檔中。
若要選擇圖像地圖中的多個熱點，請按下 Shift 鍵的同時單擊要選擇的其它熱點。
若要移動熱點，請使用指針熱點工具選擇要移動的熱點，可直接拖動熱點到新區域。
若要調整熱點的大小或形狀，請用指針熱點工具選擇熱點，然后拖動熱點選擇器手柄即可。
