2.6 圖像元素

圖像是美化網頁最常用的元素之一。HTML的一個重要特性就是可以在文本中加入圖像，既可以把圖像作為文檔的內在對象加入，又可以作為超鏈接加入，同時還可以將圖像作為背景加入。

2.6.1 網頁圖像的常用格式

1.常用的網頁圖像格式

雖然計算機圖像格式有很多種，但由于受網絡帶寬和瀏覽器的限制，在網頁上常用的圖像格式有3種：GIF、JPEG和PNG。

（1）GIF

GIF是Internet上應用最廣泛的圖像文件格式之一，是一種索引顏色的圖像格式。它的特點是體積小、支持小型翻頁型動畫。GIF圖像最多可以使用256種顏色，最適合用于徽標、圖標、按鈕和其他顏色及風格比較單一的圖片。

（2）JPEG

JPEG也是Internet上應用最廣泛的圖像文件格式之一，適用于攝影或連續色調的圖像。JPEG圖像可以包含多達數百萬種顏色，因此JPEG格式的文件體積較大，圖片質量較佳。通?？梢酝ㄟ^壓縮JPEG文件在圖像品質和文件大小之間取得良好的平衡。當對圖片的質量有要求時，建議使用此格式。

（3）PNG

PNG是一種新型的無專利權限的圖像格式，兼有GIF和JPEG的優點。它的顯示速度很快，只須下載1/64的圖像信息就可以顯示出低分辨率的預覽圖像。它可以用來代替GIF格式，同樣支持透明層，在質量和體積方面都具有優勢，適合在網絡中傳輸。

2.使用網頁圖像的要點

1）高質量的圖像因其圖像體積過大，不太適合網絡傳輸。一般在網頁設計中選擇的圖像不要超過8KB，如必須選用較大圖像，可先將其分成若干小圖像，顯示時再通過表格將這些小圖像拼合起來。

2）當在同一文件中多次使用相同的圖像時，最好使用相對路徑查找該圖像。相對路徑是相對于文件而言的，從相對文件所在目錄依次往下直到文件所在的位置。例如，文件X.Y與A文件夾在同一目錄下，文件B.A在目錄A下的B文件夾中，文件B.A相對于文件X.Y的相對路徑則為A/B/B.A，如圖2-16所示。

2.6.2 圖像標簽<img>

在HTML中，用<img>標簽在網頁中添加圖像，圖像是以嵌入的方式添加到網頁中的。圖像標簽的格式如下。

<img>標簽的常用屬性見表2-3，其中src是必需的屬性。

需要注意的是，對于width和height屬性，如果只設置了其中一個屬性，則另一個屬性會根據已設置的屬性按原圖等比例顯示。如果對兩個屬性都進行了設置，且其比例和原圖大小的比例不一致，那么顯示的圖像會相對于原圖變形或失真。

1.圖像的替換文本說明

由于網絡過忙或者用戶在圖片還沒有下載完全就單擊了瀏覽器的停止鍵，導致用戶不能在瀏覽器中看到圖片，這時使用替換文本說明就十分有必要了。替換文本說明應該簡潔而清晰，能為用戶提供足夠的圖片說明信息，在無法看到圖片的情況下也可以了解圖片的內容信息。

2.調整圖像大小

在HTML中，通過<img>標簽的width和height屬性來調整圖像大小，其目的是通過指定圖像的寬度和高度加快圖像的下載速度。默認情況下，頁面中顯示的是圖像的原始大小。如果不設置width和height屬性，瀏覽器就要等到圖像下載完畢才顯示網頁，因此延緩了其他頁面元素的顯示。

width和height屬性的單位可以是像素，也可以是百分比。百分比表示圖像顯示大小占瀏覽器窗口大小的百分比。

例如，設置產品圖像的寬度和高度的代碼如下。

3.圖像的邊框

在網頁中顯示的圖像如果沒有邊框，會顯得有些單調，可以通過<img>標簽的border屬性為圖像添加邊框，添加邊框后的圖像顯得更醒目、美觀。

border屬性的值用數字表示，單位為像素；默認情況下圖像沒有邊框，即border=0；圖像邊框的顏色不可調整，為黑色；當圖片作為超鏈接使用時，圖像邊框的顏色和文字超鏈接的顏色一致，默認為深藍色。

【例2-16】圖像的基本用法。本例在瀏覽器中正常顯示的效果如圖2-17所示；當顯示的圖像路徑錯誤時，顯示效果如圖2-18所示。

【說明】①當顯示的圖像不存在時，頁面中圖像的位置將顯示出網頁圖片丟失的信息，但由于設置了alt屬性，因此在圖像占位符上顯示出替代文字“產品簡介”；同時，由于設置了title屬性，因此在圖像占位符上還顯示出提示信息“愛心包裝”。

②在使用<img>標簽時，最好同時使用alt屬性和title屬性，避免圖片路徑錯誤引起的錯誤信息；同時，增加了鼠標提示信息也方便了瀏覽者使用。

2.6.3 設置網頁背景圖像

在網頁中可以利用圖像作為背景，就像在照相的時候取背景一樣。但是要注意不要讓背景圖像影響網頁內容的顯示，因為背景圖像只是起到渲染網頁的作用。此外，背景圖片最好不要設置邊框，這樣有利于生成無縫背景。

設置背景屬性時，屬性值為背景圖像路徑（URL）。如果圖像尺寸小于瀏覽器窗口尺寸，那么圖像將在整個瀏覽器窗口進行復制。格式如下。

設置網頁背景圖像應考慮以下要點。

1）背景圖像是否增加了頁面的加載時間，背景圖像文件大小不應超過10KB。

2）背景圖像是否與頁面中的其他圖像搭配良好。

3）背景圖像是否與頁面中的文字顏色搭配良好。

【例2-17】 設置網頁背景圖像。本例在瀏覽器中的顯示效果如圖2-19所示。

2.6.4 圖文混排

在制作網頁的時候往往要在網頁中的某個位置插入一個圖像，使文本環繞在圖像的周圍。<img>標簽的align屬性用來指定圖像與周圍元素的對齊方式，實現圖文混排效果，其取值見表2-4。

與其他元素不同的是，圖像的align屬性既包括水平對齊方式，又包括垂直對齊方式。align屬性的默認值為bottom。

2.6.5 案例——制作愛心包裝經營模式圖文簡介頁面

【例2-18】 制作愛心包裝經營模式圖文簡介頁面。本例在瀏覽器中的顯示效果如圖2-20所示。

【說明】①本例中為圖像設置了class="right"，實現了圖像居右、文字居左的圖文混排效果；同時還為圖像設置了hspace="20"和vspace="10"，定義了圖像和文字之間的水平間距和垂直間距。

②如果不設置文本對圖像的環繞，圖像將在頁面中占用一整片空白區域。