本站小編為你精心準備了社區信息網站設計分析參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

摘要：

介紹了利用圖片整合技術獲取小圖標方法，詳細講解圖片整合技術(CSSSprites)、定位、獲取圖標的方法，并給出了這些方法的詳細步驟和圖例。

關鍵詞：

圖片整合技術；CSSSprites技術；定位

1引言

在設計網站時，多數大公司習慣將許多個圖標、條目背景、按鈕圖片等集成到一個png圖片上，在使用圖標時，再利用CSS定位所需的圖標。比如yahoo.com的網頁就是把頁面上的圖標、欄目背景、圖片按鈕等圖片有規則地合并到一張png圖片中，然后用CSS中的background或者background-po-sition獲取圖片中小圖的坐標，精確取到所需要的小圖片。本人在設計社區信息網站中也大量使用改方法。這種方法在設計初期需要將小圖放置到一個大的png圖片中，還要合理布局，使用的時候又需要分解獲取坐標。這種用一個png圖片來做頁面圖片來源的方法有何好處？原因是計算機中處理文件數量比處理大小耗費的時間更多。舉例來說，復制100個10kb的圖片比復制1個1000kb的文件所耗費的時間要多很多，而平時所做的網站的圖片都是放在服務器上存取的，如果能將若干圖片整合到一張大圖中，服務器的資源將得到極大的節省，同時網頁的響應速度也會得到很大的提高，也可以改善網站的用戶體驗。這里使用的就是圖片整合技術（CSSSprites）在服務器響應方面的優勢。

2方法思路

在目標png圖片事先放置好網頁中所需要的各類大小圖標、圖片。在網頁中使用div中的background來制定在目標png圖片中的坐標，同時限定寬度和高度，取到所需要的圖標或圖片。例如：<divstyle="width:44px;height:11px;back-ground:url(/images/theme/met_img.png)-707px-235pxno-re-peat;"></div>就是要得到目標png圖片中坐標為（-707px-235px），寬度為44px，高度為11px的圖片放置到一個div中。這里的單位為像素點。如果想讓圖片再div中落到底下，可以將y軸坐標往上改。比如高度為30px的div中想將圖標放到底下，可以將y軸坐標往上提高30px改為-205px，即（-707px,-205px）。

3實現步驟

（1）選取網站中所需要的各類圖片、圖標，在PhotoShop中將所需要用到的小圖片放置到一張大的png圖片中（以下簡稱目標png圖片）。這就是所謂的圖片整合技術(CSSSprites)的圖片切割術。處理和放置圖片時需要注意以下幾個方面的問題：1）選取的小圖片在大的png圖片中應該按照由上至下、左至右的順序來放置，最好能記錄每個圖標的坐標，因為在CSS中background和background-position一般是利用圖片的左上角坐標加上長和寬來定位的。做好前期的準備工作，后期使用和維護的工作量就會小很多。2）目標png圖片中的小圖之間可以保持一定的間距，但是也不可間距過大，因為尺寸大了會導致目標png文件變得很大。3）目標png圖片中各個小圖排列時，最好把顏色接近或顏色相同的放置在一起。因為png圖片中顏色數越多圖片所占居的空間就越大。通過把相近顏色的圖片放在一起可以有效降低整個png圖片中總顏色數，從而使得目標png圖片的文件尺寸也變得更小，加快網頁傳輸速度。4）目標png圖片中盡量把小圖片水平排列放置。因為在大小相同的目標png圖片中，把小圖片垂直排列的目標png圖片，比小圖片水平排列放置的png圖片的文件尺寸要大。5）目標png圖片對等合并。在做目標png圖片時，為了有效節省文件占居的空間，需要適當地把對等相同的小圖片合并。6）使用黃金切割位。在目標png圖片的最右邊和最左邊是整個圖片中最靈活、最方便定位的位置，可以放置網頁中各類文本前的項目圖標，因為它不受目標png圖片中其他CSSSprites圖片的影響，同時也不需要預留任何寬度。（2）計算網頁中所需要用到的小圖標位置。為了取到圖標，計算出它的左上角到圖片最左邊的距離為707px，左上角到圖片最上邊的距離為235px，這樣就得到它的坐標為：（-707px，-235px）。（3）使用圖片整合技術獲取圖標的完整代碼.

4結語

以上圖片整合技術，在國內外大型網站的設計中廣泛使用。雖然設計者在設計初期階段要多花一定的時間來規劃、放置這些圖標、欄目背景、按鈕圖片，但是后期在CSS中調用極其方便，這樣做在減少對服務器的請求數量方面也是絕對合算的，而且是有必要的，業界也是極力推薦的。

參考文獻

[1]林菲.ASP.NET案例教程(修訂本).北京交通大學出版社，2011.

作者：萬為清 單位：江西工程學院物聯網工程學院