论文部分内容阅读
摘 要: 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,代码如下:
关键词: 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,代码如下:
其他文献
健美操是在音乐伴奏下,运用各种不同类型的身体动作,融体操、舞蹈、音乐为一体的身体练习。学生们通过学习健美操,不仅可以达到锻炼身体,增强体质的目的,而且可以激发体育兴趣和审美情趣,对启发智力、净化心灵起到积极作用。动作学习指人通过练习对技能性动作的掌握,决定完成动作能力的内在过程发生变化。掌握健美操技能的过程是一个有别于其他形式的学习过程。健美操课教学在高校中深受广大学生的喜爱,在高校体育教育所设课
音乐是人们通向精神天堂的云梯,是人们眺望大千世界的窗口,是人们感知过往旧事的诗篇,是人们憧憬理想境界的梦幻。在听到绝妙动人、感人肺腑的琴箫雅韵,人们总是手舞足蹈,仿
摘 要: 在中职学校的教学活动中,体育教学与品德教育从来都是相互渗透、相互影响的。本文发掘体育教学中品德教育的作用,探究体育教学中开展品德教育的两个原则,阐述在中职学校体育教学中渗透品德教育的方法。 关键词: 中职学校体育教学 品德教育 渗透 德育的目的在于让学生树立正确的理想信念,增强使命感和责任感,培养良好的道德品质和健康的心理素质,进而树立正确的世界观、人生观、择业观和就业观。体育教
一、学生体育情感的概念 学生体育情感,指学生在体育课堂和课外体育活动中所产生的持续、稳定(积极或消极)的态度体验。这样定义可以赋予体育情感更多的内涵。第一,学生在体育运动中不仅有身体的行为,而且有心理因素的投入,表现为外在的情绪,如表情、语气、眼神等。第二,在体育运动中,教师可根据行为、表情、语言、眼神等明确学生的参与行为是积极的还是消极的,判断学生学习的自觉性、主动性。第三,无论是在课内还是课
摘 要: 本文对职业学校的校园文化建设进行了探讨,主要的目的是寻求校园文化建设一些具体的实施办法,以及一系列的监管措施。校园体育文化是校园文化的重要组成部分,加强体育文化建设对于抢占职业学校思想政治教育阵地,打开校园的“壁垒”,拓展高校体育教育功能,推进校园精神文明建设,抵制伪科学的渗透,营造良好的体育氛围,以及全面推进素质教育具有积极的作用。 关键词: 职业学校 校园体育文化建设 体育物质文化
新课程以提高学生的科学素养为主旨,使学生在知识与技能、过程与方法、情感态度与价值观三方面得到全面发展。《中共中央、国务院关于深化教育改革,全面推进素质教育的决定》曾指出:“实施素质教育必须把德育、智育、体育、美育等有机统一在教育活动的各个环节中。”学校体育教育的目的和任务既要育体,又要育心。在德育教育成为学校教育的重点的今天,体育教学作为学校教育的重要组成部分,在加强学生德育教育方面具有举足轻重的
摘 要: 本文作者以高中学生心理健康现状,以及体育活动对心理健康的影响为依据,在体育课堂教学中有意识、有目的地贯穿和渗透情绪、兴趣、合作和社会性等有利于心理健康发展的教育教学手段,以达到改善和提高学生心理健康发展的目的。 关键词: 高中体育教学 心理健康教育 策略 1.引言 良好的心理素质是素质教育工程培养高质量人才的重要环节,教育家洛克说:“健康的心理寓于健全的身体。”现代社会需要的是
在体育课中教师多措并举,运用一些艺术的教学方法,可以激发学生的学习兴趣,提高教学质量。本文从实施初中体育教学艺术的必要性与重要性出发,探讨提高初中体育教学艺术的一些
高校公共计算机机房是高校重要的教学资源,承担着全校计算机公共基础课实践教学以及其他专业课程的实验辅助教学作用。现我根据自己在计算机公共机房的经验结合有关情况探讨一下机房的维护方法。 我校区公共计算机机房承担的主要教学任务有:第一,校区专科与本科新生计算机基础课上机、其它各年级的专业课上机与实验课。第二,每学期的计算机基础等级考试与英语二级考试。第三,在暑假期间,成为校区培训中心举办各种培训班不可
摘 要: 针对当前PROTEL教学存在的问题,文章把基于工作过程的教学模式应用到该课程教学实践中,通过把课程内容分成几个包含几个知识点的小项目,让学生自主设计并完成项目。学生是整个学习过程的核心,老师只是起辅助作用,整个学习过程中学生是边做边学,边学边做。教学实践证明工作过程教学法对提高学生的动手操作能力具有良好的作用,提高了教学效果。 关键词: 工作过程教学法 PROTEL 实施过程 1