考慮網(wǎng)絡(luò)速度的限制，網(wǎng)頁圖片文件一般不能太大，太大的圖片影響瀏覽器打開網(wǎng)頁的速度。目前，網(wǎng)頁中最常采用的圖片格式主要有Gif、Jpg、Png三種。下面分別介紹：

1. Gif格式（圖形交換格式）

Gif格式全稱是Graphic Interchange Format，這是網(wǎng)頁設(shè)計者最常使用的圖片格式之一，Gif格式具有如下特點：

Ø 無損壓縮，即在壓縮時不降低圖像的品質(zhì)，而是減少顯示色彩數(shù)目。

Ø 可設(shè)置透明背景，便于更好地融合到網(wǎng)頁中。

Ø 支持動畫效果，能夠使網(wǎng)頁變得豐富多彩。

Ø 強大的跨平臺能力，可以適合不同的瀏覽器平臺。

Ø 256色的限制，即最多可以顯示的顏色數(shù)是256色，所以能夠?qū)崿F(xiàn)無損壓縮。

2. Jpg格式（聯(lián)合圖像專家組標準）

Jpg格式又稱Jpeg，全稱是Joint Photograpic Experts Group，這種文件格式具有如下特點：

Ø 有損壓縮，即壓縮時有些圖像細節(jié)可能被忽略。

Ø 支持真彩色（32位顏色支持），顏色豐富，適應(yīng)對顏色要求比較高的場合。

Ø 強大的跨平臺能力，可以適合不同的瀏覽器平臺。

3. Png格式（可移植網(wǎng)絡(luò)圖形）

Png格式全稱是可移植網(wǎng)絡(luò)圖形（Portrable Net Graphic），以PNG格式保存的圖片可以被壓縮，以減小其占用的存儲空間并加快下載速度，同時不損失任何圖像質(zhì)量。PNG 格式支持不同的圖像透明度以及不同計算機上的圖像亮度控制，可用于從小圖像（如項目符號和橫幅）到復(fù)雜圖像（如照片）的各種圖像。用Fireworks設(shè)計的圖片默認保存格式就是.png。

由于PNG文件具有較大的靈活性并且文件較小，所以它對于幾乎任何類型的Web圖形都是適合的；但是，IE（4.0 和更高版本）和 Netscape（4.04 和更高版本）只能部分支持PNG圖像的顯示。因此，除非正在為支持PNG格式的瀏覽器的特定用戶進行設(shè)計，否則還是請使用GIF或JPEG格式以迎合大多數(shù)人的需求。

在插入圖像選擇圖像源文件過程中，如果當前文檔是新建的未保存文檔，在“URL”選擇框中顯示的是圖像文件在本地計算機硬盤中的絕對路徑，如：“file:///E|/wjx/03/pic/pic2.gif”。將該網(wǎng)頁文檔保存后，Dreamweaver8將該引用路徑轉(zhuǎn)換為文檔的相對路徑。如果在站點中操作，在頁面插入非站點目錄內(nèi)的圖像時，系統(tǒng)會彈出對話框詢問是否將圖像文件復(fù)制到網(wǎng)站目錄下，如圖3-61所示。選擇【是】將在站點內(nèi)保存該圖像，否則只是使用帶文件協(xié)議的絕對路徑，將來可能無法顯示該圖像。

圖3-61 在站點插入站點外圖像

那么什么是絕對路徑和相對路徑呢？

文檔絕對路徑就是一個文件的完整 URL，它包括所使用的協(xié)議（如http://和file:///）。例如，“http://www./01/shm.html”和“http://www./image/01/banner_2.gif”就是絕對路徑。

在網(wǎng)頁中使用文件協(xié)議（file:///）指定文件，會經(jīng)常發(fā)生連接錯誤，建議不要使用。

文檔相對路徑的基本思想是省略掉對于當前文檔和所發(fā)生關(guān)系（引用或鏈接等）的文檔都相同的絕對 URL部分，而只提供不同的路徑部分。例如圖3-62所示的文件夾結(jié)構(gòu)中，對于文件“pic.html”來說：

圖3-62 文件的路徑示例

●圖像文件“Back.gif”和它位于同一文件夾中，若在文件中引用“Back.gif”，則其名就可以使用相對路徑：“Back.gif”。

●圖像文件“pic1.gif”（在名為<22>的子文件夾中），可使用相對路徑“22/pic1.gif”。每個正斜杠 (/) 表示在文件夾層次結(jié)構(gòu)中下移一級。

●網(wǎng)頁文件“index.html”（在父文件夾中，“pic.html”向上一級），可使用相對路徑“../index.html”。每個“../”表示在文件夾層次結(jié)構(gòu)中上移一級。

●文件“wjx.dwt”（在父文件夾的其它子文件夾中），可使用相對路徑“../Templates/wjx.dwt”。其中“../”向上移至父文件夾；“Templates/”向下移至<Templates>子文件夾中。

文檔相對路徑對于大多數(shù)圖像路徑來說是最適用的路徑。在當前文檔與所插入的圖像文檔處于同一文件夾內(nèi)，而且可能保持這種狀態(tài)的情況下，文檔相對路徑特別有用。若成組地移動一組文件，例如移動整個文件夾時，該文件夾內(nèi)所有文件保持彼此間的相對路徑不變，此時不需要更新這些文件間的文檔相對鏈接。

當插入圖像使用絕對路徑時，圖像若駐留在遠程服務(wù)器上而不在本地硬盤驅(qū)動器上，則將無法在文檔窗口中查看該圖像。此時，必須在瀏覽器中預(yù)覽該文檔才能看到它。

只要情況允許，對于圖像，請盡量使用相對路徑。

注意：圖片文件最好獨立存放于相對獨立的文件夾。圖片文件名盡量不使用漢字和特殊符號，否則可能導(dǎo)致瀏覽器不能顯示。

2. 插入鼠標經(jīng)過圖像

在網(wǎng)頁中，我們經(jīng)常可以看到這種情況，即當鼠標指針移動到某一幅圖像上面時，圖像變化為另一幅圖像，鼠標移開時，又恢復(fù)為原來的圖像，這就是“鼠標經(jīng)過圖像”。鼠標經(jīng)過圖像的效果實際是由兩幅圖像完成的：主圖像（當首次載入頁時顯示的圖像）和次圖像（當鼠標指針移過主圖像時顯示的圖像）。這兩個圖像應(yīng)大小相等；如果這兩個圖像大小不同，Dreamweaver 將自動調(diào)整第二個圖像的大小以匹配第一個圖像的屬性。“鼠標經(jīng)過圖像”經(jīng)常用于網(wǎng)頁中的按鈕，使網(wǎng)頁顯得生動活潑。下面通過一個實例講解如何插入鼠標經(jīng)過圖像。

（1）在網(wǎng)頁編輯窗口中，將光標停留在要插入“鼠標經(jīng)過圖像”的位置，點擊“常用”插入工具欄右面的“插入圖像”按鈕，會彈出下拉菜單，選擇“鼠標經(jīng)過圖像”；或者通過菜單欄選擇“插入”-“圖像對象”-“鼠標經(jīng)過圖像”。

（2）出現(xiàn)“插入鼠標經(jīng)過圖像”對話框，如圖3-70所示。

圖3-70 “插入鼠標經(jīng)過圖像”對話框

在“圖像名稱”文本框輸入一個名字，如“change”，在“原始圖像”文本框輸入打開網(wǎng)頁時顯示的圖像，即“主圖像”，在“鼠標經(jīng)過圖像”文本框輸入要變換的圖像，即“次圖像”。本例中分別選擇的是<pic>文件夾下的”fish1.jpg”和”fish2.jpg”,如圖3-71所示。

圖3-71 準備交換的圖像

在“替換文本”文本框輸入鼠標經(jīng)過圖像時的說明文字。實例中輸入的是“海底世界歡迎您”。在“按下時，前往的URL”文本框輸入一個網(wǎng)址。表示單擊圖像時轉(zhuǎn)向的鏈接地址（此處使用了超級鏈接的內(nèi)容，我們將在3.4節(jié)詳細講解），本例中輸入的是“http://www.”。

（3）設(shè)置完畢，點【確定】。按 F12 鍵預(yù)覽該網(wǎng)頁。將鼠標指針移過原始圖像，可以看到圖片發(fā)生了變化，切換到第二幅，點擊圖像將連接到設(shè)定的網(wǎng)址。如圖3-72所示。

圖3-72 鼠標經(jīng)過圖像發(fā)生變化

注：不能在“設(shè)計”視圖中看到鼠標經(jīng)過圖像的效果。

3.4.3  使用圖像地圖

有時瀏覽網(wǎng)頁，經(jīng)常會發(fā)現(xiàn)一張圖片（例如地圖），點擊圖片中的不同區(qū)域，分別指向不同的URL地址，這是怎么實現(xiàn)的呢？在一張圖片上如何實現(xiàn)多個URL鏈接呢？這就需要用到Dreamweaver8的圖像地圖功能。

圖像地圖是指已被分為多個區(qū)域（或稱“熱點”）的圖像，當用戶單擊某個熱點時，會發(fā)生某種操作（例如，打開一個新文件）。要創(chuàng)建圖像地圖，請執(zhí)行以下操作：

（1）在“文檔”窗口中，選擇圖像。

（2）在屬性檢查器中，單擊右下角的展開箭頭，查看所有屬性。在“地圖名稱”文本框中為該圖像地圖一個輸入唯一的名稱，如圖3-85所示。

圖3-85 命名圖像地圖

（3）選擇圖像熱點區(qū)域工具：選擇圓形工具，并將鼠標指針拖至圖像上，創(chuàng)建一個圓形熱點；選擇矩形工具，并將鼠標指針拖至圖像上，創(chuàng)建一個矩形熱點；選擇多邊形工具，在各個頂點上單擊一下，定義一個不規(guī)則形狀的熱點。然后單擊箭頭工具封閉此形狀。使用箭頭圖標可以拖動熱點區(qū)域。

我們?yōu)樯綎|選擇圓形熱點區(qū)域，創(chuàng)建熱點后，出現(xiàn)熱點屬性檢查器，如圖3-86所示。

圖3-86 設(shè)置圖像熱點屬性

（4）在“鏈接”文本框中，單擊文件夾圖標可選擇在用戶單擊該熱點時要打開的文件，我們輸入“http://www.”。在“替換”文本框中，鍵入作為替換文本出現(xiàn)的文本。完成設(shè)置后，在該文檔的空白區(qū)域單擊，退出熱點屬性檢查器。

（5）依此步驟創(chuàng)建其它熱點區(qū)域。

（6）保存網(wǎng)頁，用F12鍵瀏覽，鼠標移動到設(shè)置的熱點區(qū)域時，鼠標指針變成小手，點擊后轉(zhuǎn)到該熱點定義的URL，如圖3-87所示。

圖3-87 圖像熱點區(qū)域示例

定義圖像熱點后，可以移動熱點，調(diào)整熱點大小，還可以將含有熱點的圖像從一個文檔復(fù)制到其它文檔，或者復(fù)制某圖像中的一個或多個熱點，然后將其粘貼到其它圖像上；這樣就將與該圖像關(guān)聯(lián)的熱點也復(fù)制到了新文檔中。

若要選擇圖像地圖中的多個熱點，請按下 Shift 鍵的同時單擊要選擇的其它熱點。

若要移動熱點，請使用指針熱點工具選擇要移動的熱點，可直接拖動熱點到新區(qū)域。

若要調(diào)整熱點的大小或形狀，請用指針熱點工具選擇熱點，然后拖動熱點選擇器手柄即可。