返回 教育论文 首页
CSS Sprites在Web开发中的应用

  摘 要: 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的结构,

【相关论文推荐】
  • CSS Sprites提升网页加载速度的应用研究
  • 基于CSS Sprites的可伸缩圆角矩形的设计
  • WEB设计中CSS技术的应用研究
  • CSS Sprites网页背景定位技术的研究及应用
  • 浅释CSS HACK的用法
  • 解析CSS在网页中的应用
  • 基于Web标准的CSS网页布局应用分析
  • CSS编码中的几个问题
  • 有限群的CSS—子群