網頁圖片的使用技巧

在網頁中使用用圖片，先要處理要用到的圖片，再利用網頁制作工具在需要的位置插入相應的圖片，然后設置其寬度和高度，添加文字說明。在這個過程中，圖像設置規則顯得尤為重要。

　　1 圖片位置的選擇與設置

通常網頁圖像主要包括網站logo，網站banner，網站導航和各種輔助修飾圖片以及網頁背景圖片等等。這些圖像位置的選擇應該有利于瀏覽者接受信息和提高頁面美感，做到既不喧賓奪主又能很好的傳達信息。

一個網站頁面的頭部一般由導航和網站banner組成，網站設計者可以在bannar中投放廣告吸引用戶，并利用導航欄清晰的像用戶展現網站的欄目結構。

網站logo做為網站的標志性圖像，應該安排在頁面最突出最顯眼的位置，而輔助說明的小文字應當緊靠相應的文字。

對于大篇幅的文字內容，在適當的位置插入概括大意的圖片可以幫助用戶理解內容，而且還可以通過這些插入的圖片劃分章節。

以京東商城首頁的頭部頁面為例，他總共包括網站banner，網站logo，搜索欄和導航三個部分。他直接將網站banner放在了頂部，將店內最重要的信息通過這個顯著的位置發布出去。將logo放在了第二行位置來顯示網站的品牌屬性，同時網站banner和導航都用紅色加深，突出了視覺效果，京東這么做的目的主要是從視覺效果，用戶體驗方面來考量的。

值得注意的是，圖片位置的選擇不必局限于常規手法，適當的發揮創意調整位置，能使網站更具有吸引力。

　　2 切圖規則

對于一個已經設計好的網頁效果圖進行切圖是主要涉及兩個原則：一個以色塊為單位盡量保持網頁元素相對獨立。二是盡量保證切線的水平對齊從而方便頁面布局。大面積相同色塊部分在切割時只需切割一小段，充分利用背景重復的特性，提高頁面加載速度。

　　3 設置圖片尺寸

在布局網頁的時候，將切割好的圖片插入相應的位置，不應使用圖片的width和hight屬性改變圖片的尺寸，因為那樣會使圖片變形和失真。使用矢量繪圖工具制作的圖像適合保存為png格式，其大小尺寸應在設計的時候確定，變為位圖后不宜對其進行縮放操作。

　　4 背景圖片的設置

如果想在某個圖片上添加文字，則可以將該圖片設計為背景圖片。除此功能外，靈活設置網頁背景圖片還能大大加快網頁的加載速度。對于大面積相同色塊的背景圖片，我們可以只切割狹小的長條，然后利用背景圖在水平和垂直方向上自動重復的特性設置背景圖片。對于單一顏色的背景，我們則可以利用html單元格背景屬性直接設置相應的背景顏色。

以上四點都是常用的圖片使用技巧，不必太拘泥于這些規則，只要給用戶帶來好的用戶體驗那就是好的使用規則。同時在使用圖片時還要考慮搜索引擎的優化，這一方面也是非常重要的一個方面。

服務器租用/服務器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質保障！--億恩科技[ENKJ.COM]