论文发表 | 论文范文 | 公文范文
最新公告:目前,本站已经取得了出版物经营许可证 、音像制品许可证,协助杂志社进行初步审稿、征稿工作。咨询:400-675-1600
您现在的位置: 新晨范文网 >> 设计论文 >> 网站设计论文 >> 正文

社区信息网站设计分析

定制服务

定制原创材料,由写作老师24小时内创作完成,仅供客户你一人参考学习,无后顾之忧。

发表论文

根据客户的需要,将论文发表在指定类别的期刊,只收50%定金,确定发表通过后再付余款。

加入会员

申请成为本站会员,可以享受经理回访等更17项优惠服务,更可以固定你喜欢的写作老师。

摘要:

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

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

社区信息网站设计分析责任编辑:杨雪    阅读:人次