xhtml+css

【转载】图片格式与设计那点事儿

由 七彩crystal 撰写  |  2011/01/20 14:31 发表在 xhtml+css  |  评论 (0)
第一次写技术博客，有不尽如人意的地方，还请见谅和指正。

为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。

除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么 样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。

有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。

本文主要包括以下几方面内容：

  1. 1、基本概念
  2. 2、实际应用
  3. 3、思考与实践
  4. 4、附录-Photoshop中各种参数的含义及设置技巧

1、基本概念

要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。

矢量图与位图

矢量图-完美的几何图形

矢量图是 通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半 径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。

矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。

需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。

位图-神奇的拼图

位图又 叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的 像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素 点（如下图）。

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。 位图示意 尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。

有损压缩与无损压缩

有损压缩-你看到的不一定是真实的

按照我的理解有损压缩就 是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验 证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐 变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。 有损压缩示意图 JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8*8像素的栅格（如上图），然后对每个栅格的 数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看 得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。

无损压缩-最精确的拼图

相对有损压缩而言无损压缩则 会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪 些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的 白云和渐变等数据）。 无损压缩示意图 PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（如上图），我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”，PNG在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。

这里大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还 原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色 数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原；PNG24 则可以保存1600多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG格式最多可以保存48位颜色通道）。而对于有损压缩来说，不管 图像上的颜色多少，都会损失图像信息。

JPG和PNG

关于JPG和PNG的基本信息介绍这里就不赘述了，有兴趣详细了解的同学可以去这里： 什么是JPG、什么是PNG。另外这里我们也不对GIF进行讨论，是因为PNG就是为取代GIF而生的，而且PNG的压缩算法也要优于GIF，所以只要不是需要动画效果的地方强烈建议都采用PNG格式图片。

这里我们不妨把JPG和PNG的一些特性进行一个简单对比：

格式 压缩模式 交错支持 透明支持 动画支持
JPG 有损压缩 支持 不支持 不支持
PNG 无损压缩 支持 支持 不支持

JPG的特性

  1. 1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
  2. 2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
  3. 3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

PNG的特性

  1. 1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
  2. 2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
  3. 3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

PNG8与PNG24

提到PNG格式就不得不提到PNG8和PNG24，这种叫法并非官方定义，不过由于普遍使用已经被大家广泛接受了。通过前面的介绍我们知道PNG采 用无损压缩是通过索引色去存储和还原图像的，PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也 就是256色，而24则代表2的24次方大概有1600多万色。

不仅如此，PNG8还支持1位的布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。而PNG24则支持8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。

格式 最高支持色彩通道 索引色编辑支持 透明支持
PNG8 256色 支持 支持布尔透明
PNG24 约1600万色 不支持 支持8位（256阶）alpha透明

可能通过以上特性的对比大家还不能很直观的理解在实际应用中到底因该选择什么格式的图片文件，我们不妨结合上面的基本概念通过几个例子去给大家说明。

2、实际应用

什么时候应该使用PNG

示例1

下图是淘宝网最常见的一个图片即“立刻购买”按钮，这里我尝试用JPG和PNG8格式分别进行保存，可以看到保存的结果有两个值得注意的地方：

  1. 1、JPG保存的文件大小是PNG保存的文件大小的2倍
  2. 2、JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的）

适用PNG的场景1 那么是什么原因造成这样的差异呢？

首先我们可以看出“立刻购买”这个按钮是在photoshop中用矢量工具绘制出来的，其渐变填充是非常规则的线性渐变，文字颜色和描边等都是采用 纯色，所以这个图像所包含的色彩信息非常有限。根据前面我们介绍的无损压缩的特性，当用PNG存储这个图像时，只需要保存很少的色彩信息就可以真实还原这 个图像。而对于JPG格式来说大小主要决定于图像的颜色层次，所以在这种颜色较少但对比强烈的情况下，反而不能很好的压缩文件大小。

另外根据有损压缩的压缩算法JPG会在图像中通过渐变或其他方式填充一些被删除的数据信息来对图像进行压缩，图中红色和白色的地方由于色差较 大，JPG在压缩过程中就会填充一些额外杂色进去，反而影响的图像的质量。这也是为什么JPG不利于存储大块颜色相近区域以及亮度差异十分明显的图像的原 因。

示例2

我们再来看另外一个应用场景，下图是在淘宝彩票页面使用的一个Banner图像。同样用PNG8和JPG进行了保存，可以发现当用PNG8保存时不 仅保证了图像的质量且图像文件的大小仅有8.3K，而当用JPG 100%保存时文件大小则增加到44.2K，如果不经放大可能还看不出具体的差异，但实际和前面一样也会出现不必要的噪点。如果我们要达到PNG8的压缩 率采用JPG 45%进行保存，则图像会出现较严重的失真。 PNG的应用场景2 由此我们可以得出结论，具备以下条件的图像更适合用PNG8格式进行存储：

  1. 1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
  2. 2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。

根据经验具备上述条件的图像一般是使用photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。

什么时候应该使用JPG

示例1

从JPG的特性介绍我们知道JPG更适合用来存储摄影或写实图像，所以我们不妨先拿一张摄影作品做尝试。

下图是一副巴士车的照片，我们尝试用JPG 60%（左上）、PNG8 256色 无仿色（右上）、PNG8 256色 扩散仿色（左下）、PNG32（右下）分别进行了存储。可以看出当用JPG存储图像时不仅能够达到最大的压缩率，也能尽量保证原图的还原效果。而采用PNG8进行保存时图像文件大小更大，失真也较严重。只有在PNG24的格式下才能保证品质，然而文件大小却比JPG要大很多。

产生这种结果的原因也与JPG和PNG各自的压缩算法有关。

对于摄影或者写实作品，由于受环境光线的影响，图像上的色彩层次十分丰富。比如巴士车上的红色区域由于反光、阴影以及透视效果会形成明暗、深浅各异 的区域，如果用PNG去保存，则需要不同明暗度的红色去存储这个区域。对于整张图片来说，PNG8的256色无法完全索引图像上出现的所有颜色，于是在存 储时就会丢失许多颜色而产生失真。如果要保证图像的效果，则需要色彩范围更广的PNG24进行存储，相应的文件大小也会增加。

而JPG的压缩算法则更利于对真实世界中这些复杂的色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下比较好的还原图像的视觉效果。 适用JPG的场景1-1 适用JPG的场景1-2 适用JPG的场景1-3

示例2

那么是不是只有在存储照片的时候才需要用到JPG呢？我们不妨来看另外一个例子。

下图是最近比较火爆的某微博页面，在这里我们可以选择不同的风格，每种风格都会有一个非常有特色的背景图片。我们尝试用不同图片格式对背景进行保存时可以发现：当用JPG进行保存时（直接背景另存为）文件大小仅36.3K；而用PNG8 256色无仿色去保存时大小增加到57.7K，不仅如此由于颜色的缺失在图像上还出现了一些带锯齿的色块；为了降低这些色块对图像质量的影响我们对PNG8增加了扩散仿色的效果，此时文件大小达到了156.3K；而当采用PNG24完全不失真的保存时文件大小是231.9K。

尽管这幅背景图也是通过photoshop制作，但我们可以发现由于在图像上采用了很多的真实素材（比如白云、蚂蚁、绿叶等），而这些真实素材和摄影图像一样也会存在非常丰富的色彩层次，所以也不适合用PNG格式进行保存。这个时候我们就应该采用JPG格式。 适用JPG的场景2-1 适用JPG的场景2-2 由此我们可以得出结论：对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。 根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像更适合采用JPG的图片格式保存。

总结

由此可见在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对 比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进 行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。

另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

3、思考与实践

什么样的设计更适合web页面？

慎用较“重”的视觉设计元素

Web2.0时代网页设计的一大趋势就是越来越“轻”。除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的 完美结合，而非形式的堆砌。所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。

“轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的CSS样式去实现，这样不仅能够突出内 容，更能提升页面的访问速度。所以我十分强烈的建议视觉设计师也掌握一定的html和css知识（尤其是CSS3实现了很多过去需要图片才能实现的效果， 例如圆角和渐变），这样在做设计的时候能够全面的去考虑产品效果。 轻量设计示例 下面这个电子商务网站则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性能。 重度设计 如果由于产品需要在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。

例如在下面这个例子中，第一个Banner应用了更适合PNG格式的设计风格（较多纯色和简单渐变的应用）不仅能达到热烈、突出的视觉效果，在保证 图片质量的同时也更好的压缩了文件大小；而第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片 的色彩层次过多，不论采用PNG还是JPG格式保存都无法实现图像质量和文件大小的最优化。 设计风格选择 当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做？

内容和形式的分离

对于一些比较强调视觉效果的特殊产品，比如活动推广页面或Mini Site。我们也可以利用图片格式和一些前端知识对设计进行优化，比较常用的一种设计方法就是内容和形式的分离。

如下面一些国外比较流行的设计风格，以及前面提到的微博网站，都是通过大幅的背景图去进行意境的传达和气氛的渲染。这样做的一个好处就是能把需要用 到图片的视觉元素进行集中的压缩优化，同时又不会由于加载太慢而影响用户的访问速度（前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景 图）。 内容和形式分离1 内容和形式分离2 适用JPG的场景2-1 个人认为好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的也仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛， 所以切忌为了质感而质感。即便是为了体现设计品质也不一定非要使用炫丽的滤镜，相较而言优美的布局和精巧的结构才是体现品质的关键！

通过较小的视觉牺牲换取较大的性能提升

有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化。这个时候利用我们对图片格式知识掌握就可以更有目的性的去进行优化。

例如下图是淘宝“双十一”大促活动的一个页头设计，由于页面访问量非常大并且要使用较多的商品图片，不得不对页头设计进行优化以提升性能。这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小。 设计优化

我们还可以做些什么？

Sprite图片二次优化

由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式 是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个 图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。 下图是一个优化前的Sprite图片，由于视觉元素过多PNG8无法真实保存所有的颜色信息，于是便会产生颜色的缺失和杂色的产生（如局部放大图所示）。 Sprite优化1 在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。 Sprite优化2 Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。

以上设计和优化的方法只是我在工作中一些经验的积累和总结，个人感觉每一个点展开来都有很多值得研究和讨论的地方，限于篇幅有限不能继续深入。关于图片优化的高级技巧有两篇比较经典的文章推荐给大家：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。

4、附录-Photoshop中各种参数的含义及设置技巧

PNG8的参数设置

PNG8参数设置

减低颜色深度算法与颜色

指定用于生成颜色查找表的方法，以及想要在颜色查找表中使用的颜色数量。可以选择以下减低颜色深度算法之一：

  1. 1、可感知：通过为人眼比较灵敏的颜色赋以优先权来创建自定颜色表。
  2. 2、可选择：创建一个颜色表，此表与”可感知”颜色表类似，但对大范围的颜色区域和保留 Web 颜色有利。此颜色表通常会生成具有最大颜色完整性的图像。“可选择”是默认选项。
  3. 3、随样性：通过从图像的主要色谱中提取色样来创建自定颜色表。例如，只包含绿色和蓝色的图像产生主要由绿色和蓝色构成的颜色表。大多数图像的颜色集中在色谱的特定区域。
  4. 4、受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）调板通用的标准 216 色颜色表。该选项确保当使用 8 位颜色显示图像时，不会对颜色应用浏览器仿色。（该调板也称为 Web 安全调板。） 使用 Web 调板可能会创建较大的文件，因此，只有当避免浏览器仿色是优先考虑的因素时，才建议使用该选项。
  5. 5、自定：使用用户创建或修改的调色板。如果打开现有的 GIF 或 PNG-8 文件，它将具有自定调色板。使用”存储为 Web 和设备所用格式”对话框中的”颜色表”调板可自定颜色查找表。
  6. 6、黑白、灰度、Mac OS、Windows使用一组调色板。

建议：一般情况下默认选择“可选择”项即可。 减低颜色深度算法设置

仿色方法和仿色

确定应用程序仿色的方法和数量。”仿色”是指模拟计算机的颜色显示系统中未提供的颜色的方法。

较高的仿色百分比使图像中出现更多的颜色和更多的细节，但同时也会增大文件大小。为了获得最佳压缩比，请使用可提供所需颜色细节的最低百分比的仿色。

若图像所包含的颜色主要是纯色，则在不应用仿色时通常也能正常显示。包含连续色调（尤其是颜色渐变）的图像，可能需要仿色以防止出现颜色条带现象。

可以选择以下几种仿色方法之一：

  1. 1、扩散：应用与”图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。
  2. 2、图案：使用类似半调的方形图案模拟颜色表中没有的任何颜色。
  3. 3、杂色：应用与”扩散”仿色方法相似的随机图案，但不在相邻像素间扩散图案。使用”杂色”仿色方法时不会出现接缝。

建议：一般只在图片颜色过多产生失真的情况下才需要选择仿色。建议选择扩散仿色，可以适当调节仿色的百分比以达到最佳的效果。仿色度越高文件大小也越大。 仿色设置

透明度和杂边

确定如何优化图像中的透明像素。

  1. 1、要使完全透明的像素透明并将部分透明的像素与一种颜色相混合，请选择”透明度”，然后选择一种杂边颜色。
  2. 2、要使用一种颜色填充完全透明的像素并将部分透明的像素与同一种颜色相混合，请选择一种杂边颜色，然后取消选择”透明度”。
  3. 3、要选择杂边颜色，请单击”杂边”色板，然后在拾色器中选择一种颜色。或者，也可以从”杂边”菜单中选择一个选项：”吸管”（使用吸管样本框中的颜色）、”前景色”、”背景色”、”白色”、”黑色”或”其它”（使用拾色器）。

建议：强烈建议由视觉设计师根据实际应用场景在保存之前就处理好透明图像的背景。 透明度杂边设置

交错

PNG、GIF这两种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。 建议：对于尺寸和文件大小相对较大的图片建议勾选此项。

JPG的参数设置

JPG参数设置

品质

从”品质级别”菜单中选取一个选项，或者在”品质”文本框中指定一个值。”品质”设置越高，压缩算法保留的细节越多。但是，使用高”品质”设置比使用低”品质”设置生成的文件大。查看几种品质设置下的优化图像，确定品质和文件大小之间的最佳平衡点。

品质设置技巧

  1. 1、不要存100%品质的JPG格式图片。因为100%并不一定是最高的品质，而是一个优化算法的极限值，所以会增加不必要的文件大小。建议存储95%品质的图片就可以最大限度的降低失真。
  2. 2、谨慎使用50%品质以下的压缩率。使用50%以下品质存储时会采用额外的压缩算法而导致图片失真更严重，尤其是对于有高对比度的图片。

优化

选择”优化”创建文件大小稍小的增强型 JPEG。建议使用”优化 JPEG”格式以获得最大文件压缩量；但是，一些较旧的浏览器不支持此特性。 建议：建议勾选此项，目前基本已经不存在不支持改功能的浏览器。

连续

选择”连续”创建在 Web 浏览器中连续显示的图像。图像将显示为一系列的叠加，使查看者在整个图像下载完毕之前，能够看到图像的低分辨率版本。连续 JPEG 需要更多的内存用于查看，一些浏览器不支持该选项。 建议：勾选此项在某些情况下可压缩文件大小（图片大小大于10k时），某些情况下会增大文件大小，建议在保存是 根据实际情况决定。不过IE6及更早版本的IE浏览器不支持JPG连续显示，而是在图片完全加载后一次成像，用户体验上可能还不如不使用连续的逐步成像要 好，所以建议慎选此项。

模糊

指定应用于图像的模糊量。”模糊”选项应用与”高斯模糊”滤镜相同的效果，并允许进一步压缩文件以获得更小的文件大小。建议使用 0.1 到 0.5 之间的设置。

ICC 配置文件

选择”ICC 配置文件”将图片的 ICC 配置文件与文件保留在一起。ICC 配置文件由某些浏览器用于色彩校正。（请参阅Photoshop中设置色彩管理。）

杂边

指定原稿图像中透明像素的填充色：点按”杂边”色板，然后在拾色器中选择一种颜色。从”杂边”菜单中选取选项。原稿图像中完全透明的像素由选中的颜色填充，原稿图像中部分透明的像素与选中的颜色相混合。

基于vertical-align的表单元素垂直对齐方式研究

由 七彩crystal 撰写  |  2010/07/01 11:26 发表在 xhtml+css  |  评论 (0)

最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的 提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依 然不能完美对齐。如下图所示：

liuhanyu-1

于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：

error

在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了蓝色上wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：

1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。

2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心

（baseline等名词如果不懂，请先阅读wheatlee的文章）

按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：
<style>
body{font-size:12px;}
</style><input style=”vertical-align:middle;” name=”test” type=”checkbox”>
<img style=”vertical-align:middle;” src=”testpic.gif” />
测试文字
代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

02

事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的 中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的 时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一半偏上1px，有时在一半偏下1px)。如图：

03

但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来 对齐的。）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面 跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲 染呢？如果那样，我们就达到目的了。

但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：

04

如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：

05

在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。

经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，接入对垂直对齐结果进行“微调”呢？

最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
</html>
最终效果：

06

至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。文字提 示依然 是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

08

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影 响。） 下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或 者将文字设置成为偶数的高度，则显示正常）：

09
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
<br/><br/>
<input class=”inputcheckbox” name=”test2″ value=”2″ type=”radio”>
<label>测试文字x</label>
<br/><br/>
<input class=”inputcheckbox” name=”Text1″ type=”text” />
<label>文字</label>
<input class=”inputcheckbox” name=”Text1″ type=”text” />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input class=”inputcheckbox” name=”Button1″ type=”button” value=”按钮” />
<br/><br/>
<select class=”inputcheckbox” name=”Select1″>
<option>测试文字</option>
</select>
<label>测试文字</label>
</html>
而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

07
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>這是繁體中文</label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>次回から自動的にログイン</label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>English</label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>Чужой компьютер</label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>صفحات من ‏السعودية </label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>회원가입</label>
<br/>
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>הפתוח</label>
<br/>
</html>
至此，我的研究过程告于段落。

你是一个职业的页面重构工作者吗？

由 七彩crystal 撰写  |  2009/10/22 13:09 发表在 xhtml+css  |  评论 (0)

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里 导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种 的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不 理会下面的内容。

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”， 虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设 计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热 情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

  1. 结构完整，可通过标准验证
  2. 标签语义化，结构合理
  3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

一，设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

  1. 能分清设计稿中的公共与私有的部分
  2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
  3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
  4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
  5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二，切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

  1. 切成所需要的图片（如何将需要的部分切出来）
  2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
  3. 在2的基础上，规划切出来的图片（包括文件分布）
  4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

  1. 还原设计稿视觉效果，并通过标准验证（HTML）
  2. 在1的基础上，实现多浏览器的兼容（HTML）
  3. 在2的基础上，标签语义化（HTML）
  4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
  5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
  6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
  7. 在6的基础上，样式写法的优化（包括技巧的应用）

是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

转自：http://webteam.tencent.com/?p=133

透明png在IE6下的3种解决方法【css.htc.js】

由 七彩crystal 撰写  |  2009/05/18 13:33 发表在 xhtml+css  |  评论 (0)
透明png在IE6下的3种解决方法【css.htc.js】

透明png在IE6下的3种解决方法【css.htc.js】

css_ie6_png页面效果预览

htc_ie6_png页面效果预览

js_ie6_png页面效果预览

打包下载

用户名和密码输入框的一种设计by Dofy

由 七彩crystal 撰写  |  2008/08/26 11:18 发表在 xhtml+css  |  评论 (0)

登陆框在站点中的应用应该算最多的了, 设计中有很多种方案, 近日应用到一种输入框前面没有 label 的.
如果单纯去掉 label 将没有任何说明, 用户很可能不知道两个文本框是干嘛用的, 所以还要有提示, 怎么提示呢?
最先想到的一种方法是设置 input 的默认 value 属性, 然后在输入框获得焦点后清空 value, 失去焦点且 value 为空时恢复默认 value, 这种设计很容易实现, 但有几个弊病:

需要判断用户输入值是否与默认值相同, 不相同则失去焦点后不能清除 value;
这样带来另一个问题, 如果用户名,尤其是密码刚好与默认值相同怎么办?
还有个问题就是密码输入框的type属性, 如果用文字提示, 显示文字的时候密码输入框的 type 就不能是 password, 否则提示文字也会变成掩码, 那么就带来了额外的工作, 就是要转换输入框的type属性, 在我测试中貌似有兼容问题, 有的浏览器不能修改这个属性.
于是想到另外一个解决方案 —— 背景图, 就是把提示文本做成背景, 通过控制输入框的样式来实现提示的显示与隐藏:
<script type="text/javascript">
function setbg(obj, cname){
if(obj.value != ''){
obj.className = '';
}else{
obj.className = cname;
}
}
</script>
<style type="text/css">
input {
font: 12px "Courier New", Courier, monospace;
border: 1px solid #666666;
padding: 3px;
height: 23px;
}
.un_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px 0px;
}
.pw_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px -30px;
}
</style>
<form>
<p>
<input type="text" class="un_bg" onfocus="setbg(this, '');" onblur="setbg(this, 'un_bg');" />
</p>
<p>
<input type="password" class="pw_bg" onfocus="setbg(this, '');" onblur="setbg(this, 'pw_bg');" />
</p>
</form>

扩展一下, 获得更好的效果
<script type="text/javascript">
function setbg(obj, cname, isfocus){
if(obj.value != ''){
obj.className = isfocus?'fc_bg':'';
}else{
obj.className = cname;
}
}
</script>
<style type="text/css">
input {
font: 12px "Courier New", Courier, monospace;
border: 1px solid #666666;
padding: 3px;
height: 23px;
}
.un_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px 0px;
}
.pw_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px -30px;
}
.fc_bg {
background: url(/upload/2008-08-26/input_background.png) repeat-x 0px -60px;
}
</style>
<form>
<p>
<input type="text" class="un_bg" onfocus="setbg(this, 'fc_bg', 1);" onblur="setbg(this, 'un_bg', 0);" />
</p>
<p>
<input type="password" class="pw_bg" onfocus="setbg(this, 'fc_bg', 1);" onblur="setbg(this, 'pw_bg', 0);" />
</p>
</form>

郁闷的CSS文件编码[UTF-8 、 ANSI] CSS无法被应用

由 七彩crystal 撰写  |  2008/07/24 12:15 发表在 xhtml+css  |  评论 (0)

昨天写了个页面在FF、IE7、Opera下显示正常 IE6却不能正常显示样式，今天才发现不晓得啥时候那个文件编码被更改了，整站所有页面用的是UTF-8，但那个文件不晓得啥时候成了ANSI，郁闷啊，IE6我…… 无语。

解决IE6下 PNG底色不透明的问题

由 七彩crystal 撰写  |  2008/03/18 11:54 发表在 xhtml+css  |  评论 (0)


function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
var imgAttribs = img.attributes;
for (var j=0; j<imgAttribs.length; j++)
{
var imgAttrib = imgAttribs[j];
if (imgAttrib.nodeName == "align")
{
if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
break
}
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

在HTML里加入此段js

CSS布局 Web标准 必备小结

由 七彩crystal 撰写  |  2008/03/17 11:48 发表在 xhtml+css  |  评论 (0)

今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。

１、必备工具
　　其实web标准并不是很复杂的技术，实现web标准的工具也很简单，说白了，只要可以进行纯文本编辑的软件，都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器（象我这种懒人有时候就用那玩艺儿直接在线编辑，汗）。
　　而另一些较专业软件会提供高亮显示代码（前面提到的UltraEdit也具有此项功能）、代码提示、自动闭合标签等等功能，使用起来会大大提高工作效率。如DreamWeaver、MS Expression、EditPlus等等，这些编辑软件目前是绝对的主流，无论是初学者上手容易还是专业人士提高效率都是不错的选择。

　　再说说浏览器环境，目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事，而IE7 Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、 Safari，同时安装MultipleIE。从我个人的使用经验，IE7 Standalone存在一定的缺陷，有可能导致本机安装的IE6无法正常使用。

　　除了编辑器以外，还有就是必不可少的调试工具啦，首推当然是Firefox下的Firebug！IE下目前还没有与之相当的调试工具，比较好的有IE development toobar、IE Debugbar等等，不过和Firebug完全不是一个档次的东西，只能说勉强凑合用。

２、必备的HTML/XHTML基础

　　说到基础，其实正是我最想谈的。从论坛许多的帖子也可以看出来，大多数问题的产生是由于制作者本身基础的不牢固。而HTML/XHTML作为基础中的基础，更是许多人的薄弱环节。然而很多人还是喜欢一上来就问布局或者Hack这些技巧方面的问题，其实很多问题如果本人的基础牢固了，几乎不能被称之为问题。
　　web标准必备的HTML/XHTML基础，大致有几个方面：
　　1、每个标签的语义，这一点是网页标准的根本。而整个网页标准化几乎都是围绕着这一点而来的，明确了语义，才能选择合适的标签；明确了语义，才能构建可读性良好的结构。例如<h1>就是网站最高等级的标题，它不应该放在<h2>层级之下；例如<fieldset> 和<legend>，主要用于表单元素分组，不应该因为它那个漂亮的边框就用来表现新闻列表。
　　2、每个标签的初始样式，现在有很多重置标签样式就是针对这一点，因为每个标签在不同浏览器下的初始样式是不同的，而重置样式是为了更好地实现网页兼容性。从我个人的角度来说，不推荐初学者一上来就了解如何重置样式，而应该从了解标签的初始样式入手，先了解了这些，才能明白每一行重置样式的代码的真正含义。
　　3、标签的正确嵌套规则，同时还必须了解的是哪些标签属于块元素，而哪些属于行内元素。这是即使是高手也会经常忽略的方面，例如本人（^_^）。今天看到http://bbs.blueidea.com/thread-2834342-1-1.html这个帖子的时候，才意识到，原来之前对dt、dd的嵌套规则理解有误，二者不能一视同仁。HTML/XHTML的嵌套规则并不算简单，常用的标签不过三十个上下，就有大约二十种不同的嵌套规则，稍不留神就会出错。虽然不严格遵循并不会影响页面的表现，但养成一个良好的习惯是很重要的，它往往能决定你在这条路上可以走多远。
　　4、标签的属性。这个又要分为两方面，一是符合标准的常用属性及对应的值，例如<table>的summary属性、< th><td>的scope属性、<label>的for属性等等；二是标准强制要求的属性，例如图片的alt属性、 form的action属性、textfield的col属性和row属性等等。
　　HTML/XHTML基础，虽然可以分开成多个方面讲，但实际关于它们的知识往往是综合在一起的，大多数相关的手册几乎都有详尽的介绍。对于这方面知识的学习，除了看相关手册外，多把自己的网页拿去w3c做校验也是不错的方法。

３、必须了解的CSS知识

　　CSS是标准化最吸引人的地方，也是时下讨论最多的话题，市面上的相关书籍也在web标准类里占据压倒性的比重，甚至有些人（包括一些用人单位）认为CSS就是网页标准。这种过于夸大CSS作用的观点固然是错误的，但CSS对于网页标准的重要性却也可见一斑。
　　CSS相关的知识、技巧很多，从知识的必备性方面来讲，以下几个方面是我认为最重要的：
　　1、布局。布局是表现层技术的基础，任何表现层的东西都是基于布局之上的。利用CSS布局的方法有很多种，例如float、绝对定位、负margin 等等。每一种布局都有着各自的优势和局限性，从适性最广来讲显然是float最佳，也最为常用，但清除浮动往往是让人头疼的问题。绝对定位的网页抗压性好，但自由度低，而且渲染效率最差。负margin是最不破坏文档流的办法，但在对负值支持不佳的IE下往往会有灵异表现。关于布局方面的知识，建议看一下webflash的《彻底弄懂CSS盒子模式》系列文章，个人认为相关知识的文章尚无出其右者。
　　2、IE下的Haslayout渲染模式。其实hack是许多标准工程师所深恶痛绝的东西，但在浏览器兼容性要求越来越高的今天，hack却往往是一种无奈之举。而深入了解IE的Haslayout渲染模式，就会明白许多hack的来由，以及许多兼容性问题的产生之源。推荐阅读——译文On having layout。然而HasLayout问题之多，绝非一两篇文章所能概括，通过阅读文章，了解其中的原理，再举一反三，很多问题就会迎刃而解了。
　　3、符合标准的CSS规则。关于这一点，我可以不负责任地说，数以千万计的网站，其CSS完全符合标准的，所占比重不会超过1%。这并不是一个悲观的估计，即使是w3c推荐的一些网站，例如ESPN，他们的CSS也时常会通不过校验。CSS的许多规则的确令CSSer们非常不适，例如 background和color，这两个属性绝大多数人都是分开来使用的，而w3c标准却规定两者必须“生则同生，死则同死”。还有就是各个浏览器的专有属性，在实现一些效果时是最简单有效的。这种时候我们往往会选择放弃标准，但暂时的放弃不意味着无视。今天知道我们哪些行为是错误的，以及为什么要用错误的方法，明天改正起来就不会太难。
　　4、提高网站性能的技巧，如有助于SEO的以图代字、用尽量少和小容量的图片实现圆角表格、用background-position实现图片切换以提高渲染效率等等。从对网站的帮助角度来看，这些技巧远比浏览器hack更值得掌握。
　　5、了解一点js知识。这个和CSS关系不是那么密切，但经常看到很多人钻牛角尖，用js可以非常简单实现的效果，非要用CSS去勉强实现。例如将子菜单放在链接里，通过:hover触发。又比如多列等高布局的实现。这已经是行为层的范畴了，为什么还非要用表现层来实现呢？当然这里并不是说所有CSS 不容易实现的都往js里扔，而是要了解一下双方的技术特点，合理地选用最佳方案。

４、必备的网站样式管理技巧

　　1、规范化的命名与合理的代码重用性，也就是ID和class。对不起，这里又要老生常谈一下，因为昨天刚刚又看到一个通篇没有用一个ID的网站。 ID和class是属于结构层的，不过CSS的调用却几乎都要通过ID和class来实现。但是，ID和class不仅仅是为了调用CSS样式而存在的。恰恰相反，是良好的ID和class构建的结构给了CSS大展身手的舞台。搞反了彼此关系，其实还是表现主导结构的思路，也就和满屏幕的table没有本质区别。理清了ID、class和CSS的关系，再来谈命名，命名其实只有一个基本原则，就是结构化。当然，在结构化之余，body、框架、模块之间的命名如能以某种形式加以区别（我个人习惯是加不同前缀），会让代码更加清晰。
　　2、样式文件的管理，也就是如何存储网站的样式文件。如果是一个很小的网站，把所有样式存在一个文件中也是没有问题的。但大网站的CSS往往几十上百 k，全部存在一个文件里不但影响网页加载，也不利于修改维护。如何分割CSS，需要事先做好规划，无论是按栏目按功能还是按层级，要根据自己网站的特点。

５、其他

　　期待大家继续补充……

Web页面优化 减小页面对内存及CPU的占用

由 七彩crystal 撰写  |  2008/03/04 12:14 发表在 xhtml+css  |  评论 (0)

有的网页看起来并不大但打开会很卡，有的网页虽然很长但使用流畅，占用用户电脑的内存与CPU就影响这些。
浏览器问题，有各自的浏览器处理内存问题会影响到，但几乎没办法控制得了，Windows上的：

　　· IE系列，刷新回收的量不大，但最小化会释放内存。
　　· Firefox2据说也会在最小化回收，可我从没见过最垃圾，用多少是多少，基本不回收。据说prototype的ajax还会引起内存一直增加。
　　· Opera最好。一直控制得很好。不存在什么问题。
　　· Linux的内存分配机制与Win的不一样，有多少用多少，如果浏览器占光时说不定会干掉系统。

　　页面问题，浏览器渲染页面会消耗内存和CPU，能减少一点就减少点。

结构
　　使用DocType，告诉浏览器你在用什么，html4也有DTD。也许Transitional更适合你
　　如果使用的是XHTML并能保持良好结构的话，记得输出相应的MIME跟XML头1，可以减少浏览器的代码检查，
　　保持结构的完整，不要让浏览器帮你补全代码。
　　控制页面的文件大小，可以通过程序把为了看代码比较舒服的缩进去掉。2~3K也是大小。
　　iframe会产生新的页面，其实有很多方式可以代替iframe
　　引入的JS与CSS可以适当合并，同样背景图片也可以合并，甚至有人连Flash都合并给已知宽高的内容图片/Object加上宽度的属性可以减少页面的局部重渲染

表现
　　质量99跟70的jpg在大多数情况下只有文件有大小不一样。gif的也一样，特别是小图标，256色跟128色的差别是文件大小．
　　flash动得太快吃CPU很大，控制每秒的帧数及动画的效果可以减少一些，如果把品质用中低显示会省很多资源，但这样却牺牲了效果。。quality属性 有时选择Autolow2 或者Autohigh会更适合，没必要一直low 或者best，
　　flash使用矢量图会节省文件大小，但计算复杂的图形跟动画时花的是CPU。复杂的太多滤镜，则会占用大量内存，模糊滤镜有减少些3。
　　IE的滤镜也是比较占用内存，同时也有兼容性问题。全屏的半透明很吃资源的。
　　2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
　　gif动画同样有帧的概念，别把gif当成flash来玩就行。

行为
　　别为了使用一个$()引入整个prototype或jQuery，它们有更多的作用。
　　AJAX很帅。但是用xml会用上XML解析器，有人推荐用JSON，可是这样要eval数据，其实可以直接import已经是对象的script来用。只是要多传个对象名，或者把对象名写死，或者像flickr那样jsonFlickrApi({“xxx”:”xxx”})，直接当函数用，挖哈哈。
　　实现某些效果时能用visibility:hidden解决时就别用display:none来玩。
　　在这里强调js变量要注全局跟局部等等的意义并不大，JS复杂的地方也不是一两句能说得清的，关注大家关注月影的正在出版的新书吧。
　　其实这里有的内容有不少跟如何快速的呈现我们的网页相近，不过那篇是以处理服务端为主，但在很多时候，节省服务端资源消耗的同时也会节省客户端的资源消耗。

Css 换肤js代码 带Cookie记忆功能

由 七彩crystal 撰写  |  2008/02/24 19:15 发表在 xhtml+css  |  评论 (0)

js代码
/* ======= FileName:skinCss.js =======
* Author:Crystal (Feng Fupeng)
* Date:2008-02-24
* Email:8215349[at]qq.com
*/

function GetCookie(sName)
{
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
{
return aCrumb[1];
}
}
return null;
}

function SetCookie(name, value, time, domain)
{
var expdate = new Date();
var expires = time;
if(expires!=null){
expdate.setTime(expdate.getTime() + ( expires * 1000 ));
expd = "expires="+expdate.toGMTString()+";";
}else
expd = "";
if (domain)
{
domain = "domain="+ domain +"; path=/; ";
}
document.cookie = name + "=" + escape (value) + "; " + expd + domain;
}
var cookieTag = "Crystal_skin";
var vSkin = GetCookie(cookieTag);

function setSkinColor(vSkinNum)
{
SetCookie( cookieTag, vSkinNum, 60*60*24*30,"7crystal.com");
document.getElementById("skinCss").href = "css/"+vSkinNum+"/Style.css";
}

if( vSkin && vSkin!="Style" )
{
document.getElementById("skinCss").href = "css/"+vSkin+"/Style.css";
}

html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css 换肤 - 7crystal.com </title>
<style type="text/css">
.skinColorBlue,.skinColorRed,.skinColorPurple{font-size:10px; cursor:pointer;}
.skinColorBlue{ background-color:#77C9F8; color:#77C9F8;}
.skinColorRed{ background-color:#F67272; color:#F67272;}
.skinColorPurple{ background-color:#F675DC; color:#F675DC;}
</style>
<link id="skinCss" href="css/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/skinCss.js"></script>
</head>
<body>
<span class="skinColorBlue" onclick="setSkinColor('blue');" title="Crystal Blue">蓝</span>
<span class="skinColorRed" onclick="setSkinColor('red');" title="Rose Red">红</span>
<span class="skinColorPurple" onclick="setSkinColor('purple');" title="Aristocrat Purple">紫</span>
</body>
</html>

在页面相对的目录下面建立blue,red,purple这3个目录放入自己需要的CSS表，目录结构如下：
css/blue/Style.css
body{background-color:#77C9F8;}
css/red/Style.css
body{background-color:#F67272;}
css/purple/Style.css
body{background-color:#F675DC;}.

展示页面