社区信息网站设计分析范文

摘要：

介绍了利用图片整合技术获取小图标方法，详细讲解图片整合技术(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.

作者：万为清 单位：江西工程学院物联网工程学院