Web应用与开发 CSS,Sprites在Web开发中的应用
时间：2019-01-04 03:33:13 来源：雅意学习网 本文已影响 人 
摘 要: HTTP连接数对网站的加载性能有至关重要的影响。本文将CSS Sprites技术应用于BS系统的制作之中,将普通制作方式下的大量图片,合并成一个大图片,减少了用户发出的HTTP连接的数量,大大提升了网站性能。
关键词: CSS Sprites DIV Web
1.引言
进入二十一世纪后,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非JS的方式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。2004年,Dave Shea提出了一种使用CSS控制组合图片的方案,将许过小的图片组合在一起,使用CSS定义背景属性,来控制图片的显示位置和方式。当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
2.CSS Sprites技术概述
CSS Sprites技术在国外并不是什么新技术,只不过近几年国内开始流行这个词,大家也开始越来越关注CSS Sprites技术。通常我们把CSS Sprites叫做CSS图像拼合技术。
CSS Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,受到定位等因素的制约。所以,我们需要在可维护性和降低负载之间权衡利弊,选择最适合的方式。
在具体的实现过程中,background-position属性是非常重要的属性。根据CSS规范,该属性包含了两个变量:水平位置(horizontal)和垂直位置(vertical)。使用这个属性,可以定义块级元素的背景图像位置,可以使用%(百分比)或PX像素为单位来定义图像开始的位置,也可以使用Top、Center、Bottom、Left、Right等关键字。
在需要用到图片的时候,是通过CSS属性background-image组合background-repeat,background-position等来实现。通过调整background-position的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你只是看到该看到的而已。
CSS Sprites,利用CSS background-position进行背景绝对定位,减少HTTP请求,加速网页显示,解决图片载入闪动问题的技巧。CSS Sprites最适合用来做的,比如:清单导航的CSS鼠标翻转效果、大量小图标集中的应用。
3.实现过程
所有的设计第一步就是构思,构思好了,一般来说还需要用PS或FW等工具将需要制作的界面布局简单的构画出来,效果如图所示。
下面根据效果图来规划一下页面的布局,仔细分析一下,效果图大致分为以下三个部分:
1)顶部部分,其中又包括了LOGO、MENU和Banner
2)内容部分,包含界面的主要部分
3)底部部分,包括联系方式和版权信息
根据以上分析,画了一个实际的页面布局图。
至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。由于Head部分比其它部分相比略显复杂,接下来主要实现的是Head部分。
接下来我们首先新建一个空白的网页文件,在Head标签内导入CSS文件,另一个为CSS文件,内容如下:
body {font:12px Tahoma;margin:0px;
text- align:center;background:#FFF;}
a:link,a:visited,a:hover {
font-size:12px;text-decoration:none;}
#logo{BACKGROUND:url(Union_sprites.gif)}
#banner{BACKGROUND:url(topbanner.gif)}
#container{width:100%}
#Header,#Main,#Contact,#Footer{
MARGIN:10px auto;WIDTH: 980px}
文件保存后,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。写好了页面大致的DIV结构后,就可以开始细致地对每一个部分进行制作了。
接下来,我们开始制作Head部分,Head部分包括了LOGO、菜单和Banner,首先我们要做的就是对背景图片进行切片,CSS Sprites中需要精确的背景图片定位。我将Head部分切片为两部分,第一部分包括了LOGO和Banner。
#logo {
BACKGROUND-POSITION:0px 0px;
MARGIN-TOP:20px; DISPLAY:inline;
FLOAT:left;MARGIN-LEFT:30px;
WIDTH:250px;HEIGHT:63px}
#banner {FLOAT:right}
切好片后,需要对TOP部分进行分析并将DIV结构写入Head,代码如下:
首页
用户登陆
分享规则
时尚资讯
申请加盟
以上是Menu的结构,、的作用就是在HTML中以列表的形式来显示一些信息。还有一点需要大家一定要分清楚的,当在HTML中定义为id=″divID″时,在CSS对应的设置语法则是#divID{},如果在HTML中定义为class=″divID″时,则在CSS中对应的设置语法是.divID。如果id=″divID″这个层中包括了一个标签,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class=″divID″这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input,等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。
根据上面的原理,我们先在CSS文件中写入以下代码:
#menu ul {list-style:none;margin:0 10px}
本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文 #menu ul li {float:left;}
保存预览可以看到,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:
#menu {padding:20px 20px 0 0}
#menuul {float:right;list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
这时,位置已经确定好了,在菜单项间添加竖线,我们可以使用预留好的。按照上面说的方法,我们再添加以下代码:
.menuDiv{width:1px;height:28px;background:#999}
保存预览一下,竖线已经出来了。不过,菜单选项的文字却在顶部,我们再修改成以下代码:
#menu ul li {
float:left;margin:0 10px;display:block;
line-height:28px}
效果基本上已经实现了,剩下的就是添加菜单的背景和超链接样式,在CSS文件中添加以下代码:
#menu ul li a:link,#menu ul li a:visited {
font-weight:bold;color:#666}
.c1 {BACKGROUND-POSITION:0px-67px}
.c2 {BACKGROUND-POSITION: 0px-110px}
最后的效果如下:
Head部分制作完成,在Web的界面设计中,Head部分的制作是最复杂的,Main、Contact,以及Footer的制作可以参考Head部分的来实现。
4.结语
普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。不足之处主要体现在CSS Sprites需要精确的背景图片定位,比较让人头疼。相对于减少了多次HTTP请求的优点,却增加了一次性一个大的HTTP请求的缺点。至于可维护性,这是一把双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置也是一件颇为不爽的事情。当然,在性能的口号下,这些都可以克服。
参考文献:
[1]孙晓辉,刘建,王劲林,陈晓.基于CSS的网页分割算法.微计算机应用,2008,29,(9):46-51.
[2]罗威,陈伟.基于模板和CSS技术的Web页面定制.计算机应用研究,2008,25,(7):2100-2103.
[3]朱艳琴,陆建德,潘建玉.CSS自动生成器的设计与实现.计算机应用,2001,21,(8):19-21.
本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文
