网站设计中图象与速度的联系

　　有位朋友来信，向我提了两个问题：为什么我们的网站用了不少较大的图，而速度依然挺快？他说自己从不用大图做底纹用。另外，为什么我的一幅尺寸比他的作品大了不少的图象，文件倒反而更小？

　　我在网上也经常看到，有的朋友对图象压缩似乎并未太多用心，比如用Photoshop存储JPEG格式吧，我猜想大多数情况下都是直接用Save as或Save a copy as这样的命令。当选择压缩比率时，软件仅提供了十个等级，压缩后的效果也不能马上看到，另外，如果是Photoshop4.0或5.01版，对JPEG的压缩，运用于网络也不算理想。网络图象，较大的也就是接近1024x768。因为显示器目前较大的就是17寸。更多的，则是在600或700点左右，这时，压缩成JPEG格式，弄不好就会把图象搞得模糊。至于GIF格式，它的压缩手段主要在颜色数和颜色表的选择等方面，经常使用GIF的人不一定就对它有很好的控制。而GIF的压缩方式及效果，在不同的软件里往往不同，大家还是应该稍加注意。有位网友在首页上用了一幅图象，也就是页面的五分之一，但首页下载速度相当慢。我把图象存下来一看，居然有85K。我重新把它存了一下，也就是24K左右。我是用Photoshop5.5存储这幅图象的。

　　Photoshop5.5已经发布很长时间了，不过，当中文版的5.01流行之后，许多人不大关心5.5英文版。实际上这是个大失误，尤其对各位网友们更是如此。因为，Photoshop5.5最大的变化，就是对网络的支持。近来，Adobe对网络的关心是大大增加了，Golive的出现、ImageStyler给网页美术带来的方便、ImageReady2.0与Photoshop5.5的捆绑，都能说明问题。

　　在5.5版里，无论是Photoshop还是ImageReady，当你输出JPEG或GIF文件时，你将得到完全的自由控制权。ImageReady2.0还能极容易地制作动画GIF，想了解这方面内容，请看我的《用ImageReady2.0作动画》，这里对ImageReady2.0不作介绍了，反正，这两个软件几乎没什么界面上的差别。

　　至于Photoshop5.5，当你将文件存储时，不论是JPEG还是GIF，建议你用File里的Save for Web命令。会出现一个新的控制板，左侧的大块面积是图象的预览效果，注意请选择左上角的Optimized显示方式，这时你看到的图象就是目前压缩比率下的效果，下方还有文件压缩后的大小及在不同传输速率下的传输时间。右边，是压缩控制区，我已将它剪切下来，请仔细看看，并不复杂。输出JPEG时，你可以控制压缩比率，从1%到100%，随你选择，同时，可以观察压缩效果，Blur是模糊度选择，当图象太硬，也就是说锐化程度过高时，可以稍微加一点模糊度。其它各项大家自己研究一下，不难理解的。需要说明的一点是，当你输出较大的图象时，不要选择Progressive复选框，这样，图象会随着下载过程一部分一部分地显示。如果你选择了Progressive，则只好等图象全部下载后才能显示了。

　　对于GIF，情况与JPEG类似。这时你控制的是颜色数，不再是压缩比率。 Photoshop5.5的GIF压缩很聪明，假如你的图象只用了两种颜色，并且尺寸很大，上面画了些光滑曲线。这时，如果存成JPEG，线条将很容易模糊，大面积的等值色块也将出现色斑。要避免这种问题，必须选择GIF格式。将颜色数选为2或4，你设定的那两种颜色会很好地保留下来，而文件又小，你该满意了，并且感谢Adobe吧。

　　当然，无论是JPEG还是GIF，图象压缩的程度，除了你的控制因素外，还与图象本身的具体情况有关。所谓压缩，是指程序将每一行像素点中相同的连接部分以简单的数字进行记录，JPEG则在这个基础上加入了特殊的算法。比如你画了一条水平线，压缩程序会记录这条线的颜色，长度等内容，而无须按每个像素的方式重复记录，这是压缩的基本原则。所以，当图象的色调变化非常大时，即使只占据了整个画面的一部分，压缩时，那些多色调区必须一点一点地记录，所以，文件也将较大的。编辑图象时须考虑到这一点。

　　最后，谈谈网站速度的问题。朋友说我们的网站下载速度较快，这是可能的，虽然并不总是这样。我们的网站是正式申请的，交了钱，从域名可以看得出来。选择的服务商也较新，先进的技术，先进的设备，无疑起了大作用。这一点，免费站点是作不到的。如果你对自己的网站怀着极大的期望与信心，劝你想点办法，申请一个正式的域名吧，当然，要谨慎选择服务商。

　　将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML 具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。

　　表格在网页设计中的地位非常重要，可以说如果您表格用不好的话，就不可能设计出出色的网页。大多数初学者一开始就接触表格，对表格都有一定的了解，但是要实现真正细致甚至强大的功能，仔细理解table的代码结构至关重要！我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容，你将发现，table原来是这样的亲切易用!

　　一、创建基本的表格

　　一个表由＜table＞开始， ＜/table＞结束，表的内容由 ＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名 称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和 ＜th＞组成的表格。

　　表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。

　　在讲解之前，我们先来看看表格的基本构造。 下图是一个3行3列的表格。

　　这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。 有这样一个概念后，我们学习起来就可能简单些。

　　1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色

　　表格以及单元格的大小是用“width=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，，#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、 绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格，其中第一个单元格的宽为200,高为80，第二个单元格的边框颜色为“0000FF”。