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