6.2 設置網頁圖像

網頁中的圖片為了滿足排版要求，往往需要設置圖片的樣式。

6.2.1 設置圖像路徑及文件

路徑是定位圖像文件的位置，有兩種方式，以當前文檔為參照點表示文件的位置，是相對路徑；以根目錄為參照點表示文件的位置，是絕對路徑。

為了方便介紹絕對路徑和相對路徑，假設現有目錄結構，如圖6-2所示。

圖6-2 目錄結構

1．絕對路徑

例如，在D盤deme目錄下的img下有一個01.jpg圖像，那么它的路徑就是D:\demo\img\01.jpg，像這種完全描述文件位置的路徑就是絕對路徑，如果想要把01.jpg插入index.html中，絕對路徑表示方式如下：

      D:\demo\img\01.jpg

如果使用了絕對路徑D:\demo\img\01.jpg進行圖片鏈接，那么本地計算機中將一切正常，因為在D:\demo\img下的確存在01.jpg這個圖片文件。

2．相對路徑

那么如何使用相對路徑在index.html中插入01.jpg呢？其實很簡單，只需要以index.html為參照點，去尋找01.jpg即可，從目錄結構圖可以發現，index.html和img屬于同一級，路徑是一樣的，因此可以定位到img，img的下級就是01.jpg，使用相對路徑表示圖片，如下面代碼所示：

      ./img/01.jpg

使用相對路徑，不論將這些文件放到哪里，只要index.html和01.jpg文件的相對位置沒有發生改變，就不會出錯。

在相對路徑中，“./”表示同級目錄，“../”表示上一級目錄，“../../”表示上級的上級目錄，以此類推。

6.2.2 設置圖像的寬度和高度

在HTML文檔中，圖片一般是以原圖尺寸來顯示的，可以通過width（寬度）和height（高度）屬性來設置圖片的尺寸。圖片的尺寸可以選擇數值或者百分比，數值是絕對尺寸，百分比是相對尺寸。

【例6-2】（實例文件：ch06\Chap6.2.html）設置圖像的寬和高。

相關的代碼實例請參考Chap6.2.html文件，在IE瀏覽器中運行的結果如圖6-3所示。

圖6-3 設置圖像的寬度和高度

6.2.3 設置圖像的提示文字

圖像文字的提示效果使用alt和title屬性來完成，當圖像沒有下載完成時，才會顯示alt屬性所設置的提示文字；當把鼠標指針移動到圖片上時，顯示title屬性設置的提示信息。

【例6-3】（實例文件：ch06\Chap6.3.html）設置圖像的提示文字。

相關的代碼實例請參考Chap6.3.html文件，在IE瀏覽器中運行的結果如圖6-4所示。

圖6-4 設置圖像的提示文字