2.2 網頁圖像

圖像是網頁中最重要的元素之一。有美感的圖像會為網站增添活力，同時也會引起瀏覽者的興趣，增加網站瀏覽量。圖像在網頁中能夠起到畫龍點睛的作用，在文檔的適當位置上放置一些圖像，比單純使用文字更具有說服力，同時更能起到美化頁面的效果。

2.2.1 網頁中的圖像格式

網頁中常用的圖像格式有3種，即GIF、JPEG和PNG。其中GIF和JPEG文件格式的支持情況最好，大多數瀏覽器都可以進行查看。另外，PNG文件具有較大的靈活性并且文件較小，所以它對于幾乎任何類型的網頁圖形都是最合適的。

GIF是英文單詞Graphics Interchange Format的縮寫，即圖像交換格式。GIF支持256色，可以做成逐幀動畫，可以設置透明度，一般用于網頁中的小圖標。

JPEG是英文單詞Joint Photographic Experts Group的縮寫，即聯合圖像專家組，專門用來處理照片圖像。JPEG支持百萬級真彩，被廣泛應用于網頁制作上，特別是在表現色彩豐富、物體形狀結構復雜的圖片，如風景照片、人物照片等方面。

PNG是英文單詞Portable Network Graphic的縮寫，即便攜網絡圖像。該格式是一種將圖像壓縮到Web上的文件格式，和GIF格式不同的是，PNG格式并不僅限于256色。它包括對索引色、灰度、真彩色圖像以及alpha通道透明的支持。

2.2.2 插入圖像

要想制作出精美的網頁效果，圖像是必不可少的。圖像在網頁中具有提供信息、展示形象、美化網頁、表達個人情趣和風格的作用。

（1）打開需要插入圖像的網頁，將光標定位在要插入圖像的位置，執行【插入】→【圖像】命令，如圖2-15所示。

（2）彈出【選擇圖像源文件】對話框，在該對話框中選擇需要的圖像文件，然后單擊【確定】按鈕，如圖2-16所示。

（3）彈出【圖像標簽輔助功能屬性】對話框，直接單擊【確定】按鈕，圖像就被插入到網頁中了，如圖2-17所示。

（4）使用同樣的方法依次插入其他的圖像文件，如圖2-18所示。

2.2.3 設置圖像的屬性

插入圖像以后，如果圖像的大小、位置不合適，會使得網頁效果不協調，這時就需要對圖像屬性進行調整。

（1）在網頁中選擇圖像后，在【屬性】面板可以看到圖像的相關屬性，如圖2-19所示。

（2）修改圖像的大小，設置其寬為160，高為87，此時頁面中的元素看起來就很協調了，如圖2-20所示。

在圖像的【屬性】面板，可以設置以下參數。

◆【寬】和【高】：以像素為單位設定圖像的寬度和高度。當在網頁中插入圖像時，Dreamweaver自動使用圖像的原始尺寸。指定圖像的大小時可以使用點、英寸、毫米和厘米等單位，在HTML源代碼中，Dreamweaver將這些值轉換為以像素為單位。除此之外，還可以在圖像上直接拖動鼠標來改變大小。選中要改變的圖像，圖像四周出現控制點，拖動任一個控制點則可改變圖像大小。

◆【源文件】：指定圖像文件的具體路徑。

◆【鏈接】：為圖像設置超鏈接。可以單擊瀏覽按鈕選擇要鏈接的文件，或者直接輸入URL路徑。

◆【目標】：鏈接時的目標窗口或框架，包括_parent、_blank、_new、_self和_top 5個選項。

◆【替換】：可用于注釋圖片。當瀏覽器不能正常顯示圖像時，便在圖像的位置用這個注釋代替圖像。

◆【編輯】：啟動【外部編輯器】首選參數中指定的圖像編輯器，并使用該圖像編輯器打開選定的圖像，通過屬性面板可以設置裁剪大小、重新取樣、設置亮度、對比度及銳化圖像等操作。

◆【地圖】：可用于創建客戶端圖像地圖。

◆【熱點工具】：單擊這些按鈕，可以創建圖像的熱區鏈接。

◆【垂直邊距】：圖像在垂直方向與文本域或其他頁面元素的間距。

◆【水平邊距】：圖像在水平方向與文本域或其他頁面元素的間距。

◆【原始】：指定在載入主圖像之前應該載入的圖像。

◆【邊框】：以像素為單位的圖像邊框的寬度。默認為無邊框。

◆【對齊】：設置圖像和文本的對齊方式。其中，【對齊】下拉列表中各對齊方式的含義如下：

●【默認值】：瀏覽器默認的對齊方式，大多數瀏覽器使用基線對齊作為默認對齊方式。

●【基線】：圖像底部與文本或者同一段落中其他對象的基線對齊。

●【頂端】：圖像頂端與當前行最高對象的頂端對齊。

●【居中】：圖像中間與當前行的基線對齊。

●【底部】：圖像底部與當前行最低對象的底部對齊。

●【文本上方】：圖像頂端與當前行中的最高字母對齊。

●【絕對居中】：圖像中間與當前行中的文本或對象的中間對齊。

●【絕對底部】：圖像的底部與當前行中字母（如j、q、y等）的下部對齊。

●【左對齊】：圖像與瀏覽器或表格中單元格的左邊對齊，當前行中的所有文本移動到圖像的右邊。

●【右對齊】：圖像與瀏覽器或表格中單元格的右邊對齊，當前行中的所有文本移動到圖像的左邊。

2.2.4 插入圖像占位符

為方便版面設計的需要，可以使用【圖像占位符】在圖像沒有處理好之前，先為圖像預留指定大小的空間。

（1）打開網頁文件，將光標定位在要插入圖像占位符的位置。執行【插入】>【圖像對象】>【圖像占位符】命令，如圖2-21所示。

（2）彈出【圖像占位符】對話框，在對話框中進行相應的設置，如圖2-22所示。

（3）然后單擊【確定】按鈕，這時圖像占位符已經插入，如圖2-23所示。

2.2.5 插入鼠標經過圖像

鼠標經過圖像是指在瀏覽器中查看并在鼠標指針移過它時發生變化的圖像。鼠標經過圖像由兩個圖像文件組成，一個是主圖像，就是頁面首次載入時顯示的圖像；而另一個是次圖像，就是當鼠標指針經過主圖像時顯示的圖像。通常情況下，這兩個圖像文件的大小應該大小相等。如果這兩個圖像文件的大小不同，Dreamweaver會自動調整次圖像，以便使其符合主圖像的尺寸。

（1）打開網頁文件，將光標定位在要插入圖像的位置，執行【插入】>【圖像對象】>【鼠標經過圖像】命令，如圖2-24所示。

（2）彈出【插入鼠標經過圖像】對話框，在該對話框中設置相關參數，如圖2-25所示。

（3）在對話框中單擊【原始圖像】文本框后面的【瀏覽】按鈕，彈出【原始圖像】對話框，選擇需要的圖像，如圖2-26所示。

（4）單擊【確定】按鈕，添加原始圖像，單擊【鼠標經過圖像】文本框右邊的【瀏覽】按鈕，彈出【鼠標經過圖像】對話框，選擇需要的圖像，如圖2-27所示。

（5）單擊【確定】按鈕，插入鼠標經過圖像。使用同樣的方法插入其他鼠標經過圖像，如圖2-28所示。

（6）按【F12】快捷鍵預覽網頁，效果如圖2-29所示。