2.4 圖像

網頁中的圖片具有直觀和美化的作用，是網頁設計中必不可少的元素。它既是文字表達的有力補充，又是網頁美化裝飾中最具渲染力的元素。本節講解如何在網頁中插入圖片，從而使網頁豐富多彩更顯生動，進而激發瀏覽者的興趣。

2.4.1 Web中常用的圖像格式及使用要點

1．Web中常用的圖像格式

圖像文件的格式很多，但一般在網頁中使用的圖片格式并不多，主要有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）網頁中的動畫并非越多越好，頁面中應合理使用動畫，太炫酷的動畫會分散網站訪客的注意力。

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

2.4.2 圖像標簽＜img＞

在HTML中，用＜img＞標簽在網頁中添加圖像，圖像是以嵌入的方式添加到網頁中的。圖像標簽的格式：

＜imgsrc="圖像文件名"alt="替代文字"title="鼠標懸停提示文字"width="圖像寬度"height="圖像高度"border="邊框寬度"align="環繞方式|對齊方式"/＞

標簽中的屬性說明見表2-2，其中src是必須的屬性。

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

1．指定圖像的替換文本說明

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

【演練2-15】圖像的替換文本說明，本例文件2-15.html在瀏覽器中正常顯示的效果如圖2-17所示；當顯示的圖像路徑錯誤時，效果如圖2-18所示。

代碼如下。

【說明】

1）當顯示的圖像不存在時，頁面中圖像的位置將顯示出網頁圖片丟失的信息，但由于設置了alt屬性，因此在的右邊顯示出替代文字“田園風光”；同時，由于設置了title屬性，因此在替代文字附近還顯示出提示信息“田園風光”。

2）在使用＜img＞標簽時，最好同時使用alt屬性和title屬性，避免因圖片路徑錯誤帶來的錯誤信息；同時，增加的鼠標提示信息也方便了瀏覽者的使用。

2．調整圖像大小

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

width和height的單位可以是像素，也可以是百分比。百分比表示顯示圖像大小為瀏覽器窗口大小的百分比。例如，設置田園風光圖像的寬度和高度，代碼如下。

＜img src="images/fields._jpg"width="115”height="146"＞

3．指定圖像的邊框

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

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

4．圖像超鏈接

圖像也可作為超鏈接熱點，單擊圖像則跳轉到被鏈接的文本或其他文件。格式：

＜a href="URL"＞＜imgsrc="圖像文件名"/＞＜/a＞

例如，制作風景圖像的超鏈接，代碼如下。

需要注意的是，當用圖像作為超鏈接熱點的時候，圖像按鈕會因為超鏈接而加上超鏈接的邊框，如圖2-19所示。

去除圖像超鏈接邊框的方法是為圖像標簽添加樣式“style="border:none"”，代碼如下。

去除圖像超鏈接邊框后的鏈接效果如圖2-20所示。

5．設置網頁背景圖像

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

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

＜body background="背景圖像路徑"＞

例如，設置田園風光圖像作為網頁的背景圖像，瀏覽效果如圖2-21所示。代碼如下。

＜body background="images/fields.jpg"＞

2.4.3 圖文混排

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

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

【演練2-16】使用圖文混排技術制作光影世界最近活動頁面，本例文件2-16.html在瀏覽器中顯示的效果如圖2-22所示。

代碼如下。

【說明】如果不設置文本對圖像的環繞，圖像在頁面中將占用一整片空白區域。利用＜img＞標簽的align屬性，可以使文本環繞圖像。使用該標簽設置文本環繞方式后，將一直有效，直到遇到下一個設置標簽為止。