来看看：网页CSS背景图片利用的测试了局

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
　　这篇文章次要讲了CSS对背景图片衬着效力的一些履历和研讨，在poluoluo.com中，另有着相似CSS效力的相干文章。
　　树型布局竖线用款式表（背景图）来完成，款式表背景图片只必要加载一次，而如今这个形式（用多个<img>）图片固然有缓存机制，但仍是有能够每张小图片都哀求一次服务器的，以是我想用款式表来完成有何等的好呀，代码又精简，布局又明晰，效果又酷，可是了局我快要一个礼拜的测试，我这类假想完全失利，缘故原由就是款式表的衬着效力太差。新的构思没能完成，心境有些懊丧，但我想也应当让人人分享一下这个测试功效。
　　这里我再注释一下树型里的竖线，树的右边都有┌├└│这些竖线图暗示树条理，我的1.0版里是用一张张的小图片聚积起来的，而这类利用款式表的是用<divclass="l2"></div>（l是字母L）这类代码来完成的，款式表卖力添补背景图。
#www_poluoluo_com.l0{background:url(line0.gif)no-repeatcenter}
#www_poluoluo_com.l1{background:url(line1.gif)no-repeatcenter}
#www_poluoluo_com.l2{background:url(line2.gif)no-repeatcenter}
#www_poluoluo_com.l3{background:url(line3.gif)no-repeatcenter}
#www_poluoluo_com.l4{background:url(line4.gif)no-repeatcenter}
#www_poluoluo_com.ll{background:url(line5.gif)no-repeatcenter}
#www_poluoluo_com.pm0{background:url(plus0.gif)no-repeatcenter}
#www_poluoluo_com.pm1{background:url(plus1.gif)no-repeatcenter}
#www_poluoluo_com.pm2{background:url(plus2.gif)no-repeatcenter}
#www_poluoluo_com.pm3{background:url(plus3.gif)no-repeatcenter}
#www_poluoluo_com.expand.pm0{background:url(minus0.gif)no-repeatcenter}
#www_poluoluo_com.expand.pm1{background:url(minus1.gif)no-repeatcenter}
#www_poluoluo_com.expand.pm2{background:url(minus2.gif)no-repeatcenter}
#www_poluoluo_com.expand.pm3{background:url(minus3.gif)no-repeatcenter}
　　下面这段CSS是我在剧本里静态天生的一段款式的片断，我把它贴下去，有助于前面的解说。使用款式表以后，果然精简了很多，每一个节点的天生也够快，但我发明，当我的树节点量到达，好比说300-500个节点以后，节点天生的效力没有影响甚么，但每一个节点的睁开/压缩很慢很慢，必要几秒钟以上乃至10秒，且这个时代的CPU占用率是100％。申明一下，树型的睁开/压缩是设置父节点的style.display=none|block来完成的。我的电脑设置是：AMD2800+1GDDR400内存，设置不太差的。
　　我起首的反响是：是否是用了太多的<table>影响了效力？由于我每个节点都用了一个<table>，可是我把<table>换成了<div>、<span>等，效力没有甚么改良，申明这个CPU占用率100％的成绩不是HTML标签的成绩，那末剩上去的成绩就是这里利用了款式表。
　　以一个500节点的量来讲吧，1.0里右边也许要聚积2000个摆布的小图片。这类情形在扫瞄器端设置当地不缓存的时分会存在很年夜的成绩，要加载这些多的小图片必要损耗很多的工夫和服务器资本，以是我才会有这类新的用款式表来办理的设法，如今换成款式表法，也就是也许有2000个中央必要用款式表来衬着出背景图。我测试了各类情形，再对照1.0版的代码得出的结论是：CPU的点用率云云之高，独一的缘故原由也就只要这类衬着的耗时了。考证也十分复杂，我把下面的款式表的右边#www_poluoluo_com这部分往失落，也就是往失落款式表的依托干系，测试的了局发明效力改良了良多，但耗时仍然是可不雅的，有3-5秒之多。
　　别的我换了分歧的扫瞄器，测试的了局也不太一样，在IE里最为恶心，好比说我在某个节点有500子节点，我将它收起（CPU100％，守候3-5秒），也就是display="none"，这时候候若我往收起这个节点的父节点（这个节点没有别的的同级节点，即它的父节点只要它这么一个子节点），照理说只要一个节点，收起应当是立即的事，但了局否则，了局又是3-5秒的CPU100％，这个让我狂忧郁，也就是说即便HTML工具被display="none"埋没失落了，可是对它的父级举行任何操纵的时分，IE会对这些被埋没的工具用款式表从头衬着一遍，真是弄不懂IE的开辟者现在是怎样想的。
　　我又到FIREFOX里测试了一下，在收起的时分(display=none)是刹时的，能够一定，FF看待被埋没的工具不会再损耗精神。固然睁开的时分一切的扫瞄器都一样：3-5秒的CPU100％，不外FF略微要快些。
　　经由过程下面的这些征象我得出这么一个结论：款式表在静态衬着的时分效力其实不高；在父容器发明形态变更的时分会引发它的以是子孙工具的款式表从头衬着；FireFox看待被display=none埋没的工具不会从头衬着而IE会。
　　那末这类款式表的衬着效力成绩之前为何一向没有被发明呢？嘿嘿，人人做网页的时分可贵会做到这类极度的时分，一个页面里有几千个必要款式表衬着背景图。一般也就几个中央大概几十个中央了，以是感到不出来衬着的效力，也感到不出这方面在分歧的扫瞄器之间的不同。可是在做树这些的控件的时分一定会碰着各类极度的成绩，好比年夜数据量的数组，天生的HTML工具的几等等，象这类衬着的效力不同也只是我在写JS剧本时碰着的成绩之一罢了。明天我把这个测试了局共享出来是但愿对人人今后写程序的时分有所借荐，在做计划的时分有所思索。

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

仓酷云

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

学Dreamweaver技术的过程其实是一个增加信心的过程。