来谈谈：CSS Sprites简介和优弱点
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.网页制造poluoluo文章简介：阿里妈妈UED谈CSSSprites手艺.
CSSSprites简介
一般被意译为“CSS图象拼合”或“CSS贴图定位”。CSSSprites并非一门新手艺，今朝它已在网页开辟中开展得较为成熟，阿里巴巴各子公司的网页中各处都可发明csssprites的影子。但CSSSprites并非甚么清规戒律，但在良多情形下，它有着必定的上风，最主要的是它能够加重服务器的负载，进步网页加载速率。跟着Web计划向着精巧、奇妙的偏向开展，计划师们入手下手思索利用非Javascript的方式制造鼠标滑过、悬停菜单的效果，这时候CSSSprite应运而生。
说白了，CSSSprites实在就是把网页中一些背景图片整合到一张图片文件中，再使用CSS的“background-image”，“background-repeat”，“background-position”的组合举行背景定位，background-position能够用数字能准确的定位出背景图片的地位。
当页面加载时，不是加载每一个独自图片，而是一次加载全部组合图片。这是一个了不得的改善，它年夜年夜削减了HTTP哀求的次数，加重服务器压力，同时延长了悬停加载图片所必要的工夫提早，使效果更流利，不会停留。
CSSSprites使用
在这方面，淘宝网做的对照好，我就以淘宝网为例吧。
实例一：淘宝频道页面导航
最终效果：
点击缩小
sprites图：
网页制造poluoluo文章简介：阿里妈妈UED谈CSSSprites手艺.
实例二：淘宝首页
最终效果：
点击缩小
sprites图：
CSSSprites长处
CSSSprites为何俄然跑火，跟可以提拔网站功能有关。不言而喻，这是它的伟大长处之一。
[*]使用CSSSprites能很好地削减了网页的http哀求，从而年夜年夜的进步了页面的功能，这是CSSSprites最年夜的长处，也是其被普遍传布和使用的次要缘故原由；
[*]团体以为CSSSprites能削减图片的字节，我已经对照过量次3张图片兼并成1张图片的字节老是小于这3张图片的字节总和。
CSSSprites弱点
固然CSSSprites是云云的壮大，可是也存在一些不成无视的弱点。
[*]在图片兼并的时分，你要把多张图片有序的公道的兼并成一张图片，还要留好只够的空间，避免板块内不会呈现不用要的背景，不然大概会呈现呈现搅扰图片的情形；这些还好，做疾苦的是在宽屏，高分辩率的屏幕下的自顺应页面，你的图片假如不敷宽，很简单呈现背景断裂；
[*]CSSSprites在开辟的时分对照贫苦，你要经由过程photoshop或其他工具丈量盘算每个背景单位的准确地位，这是针线活，没甚么难度，可是很烦琐；不外网上已有妙手开辟出“CSSSprites款式天生工具”，人人能够实验一下。
[*]CSSSprites在保护的时分对照贫苦，sprites是一样平常双刃剑，假如页面背景有少量修改，一样平常就要改这张兼并的图片，无需改的中央最好不要动，如许制止修改更多的css，假如在本来的中央放不下，有只能（最好）往下加图片，如许图片的字节就增添了，由于每次的图片修改都得往这个图片删除或增加内容，显得略微烦琐，并且从头算图片的地位（特别是这类上千px的图）也是一件很是不爽的事变。固然，在功能的标语下，这些都是能够克制的。
[*]因为图片的地位必要流动为某个相对数值，这就得到了诸如center之类的天真性。
CSSSprites总结
功能名列前茅。CSSSprites十分值得进修和使用，出格是页面有一堆ico（图标）。总之良多时分人人要衡量一下利害，在决意是否是使用CSSSprites。为坚持兼容性和保护性，sprites图片中的各个部分坚持必定的间隔是一种不错的做法。
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。 可以使用CSS检查工具进行设计。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
页:
[1]