网页设计的规则经验谈

dadi0823

  网页设计的规则经验谈

网页设计的规则经验谈

前Internet上有众多提供免费存放网页的服务器，不少网友自己设计网页、在网上发布信息。随着网页设计技术的发展，丰富多彩的个人网页越来越多地出现在网上，但是，网页下载速度受到带宽和通讯线路等因素的制约。网页设计者应该知道，客户是用昂贵的通讯费用在换取您的信息，除了网页的内容要受益于客户外，对下载速度的考虑也应该放在网页设计规划时的重要位置。如果您正在做网页，那么下面的一些规则与技巧或许对您有所帮助。

　　一、控制页面的总规模

----要想把网页做得精彩，内容必定要丰富，但不要把所有的内容都放在一个页面上，应控制页面的总规模。首先统计页面中的每个对象，如文字、图像、ActiveX或Java代码以及HTML文本的大小。用28.8Kbps的Modem粗略地估计一下，按每秒3KB的速度下载整页所需的时间，如果整页有5KB的HTML代码和30KB的图像，下载该页大约需要12秒，这一般能满足访问者的要求。

　　二、分解大型表格

----尽可能避免用大型表格，因为浏览器必须等待整个表格的内容全部到达客户端，才能显示这个表格的内容，而文本或图像则是一边下载一边显示。如果页面中必须使用表格，可将大表格分解成若干小表格，浏览器下载后面的表格时，客户可以阅读已经下载完的前一个表格。用客户浏览信息的时间去代替等待下载的时间，这一技巧在任何时候都适用。

　　三、不用图片来叙述内容

----为了解决不同的语言平台上不能正常显示本国文字的问题（比如简体中文平台不能显示BIG5码的文字信息），有些设计者将本国文字的叙述内容用图像文件来表示，而不用文本，这样虽然解决了因内码不同导致的乱码问题，但却给页面增加了负担，因为同样的文字内容，用文本存储比图片文件小得多。另外，一些文字性的图像按钮也尽量少用，如果必须要用，也应包含Alt解释文本，这样即使客户关闭了浏览器的图像显示功能，也可以明白按钮的意思。

　　四、标记图像的大小

----在HTML代码中，最好标记出图像的显示高度和宽度，在下载页面时，浏览器会按这个高度和宽度留出图像的位置，在图像下载完毕之前及时地显示其周围的文字内容。否则，让浏览器按图像本身的高度和宽度显示，那么只能等待图像全部下载完毕后，才显示图像及其周围的其他文字信息，无疑造成客户的等待。

　　五、重用图像

----如果多次使用同一图像文件，客户端浏览器的Cache对此有所帮助。浏览器将从它的Cache中找出先前下载的那个图像文件并调入显示，而无需再从Web站点上下载，即使它们不在同一页面中，这样调入图像就不受带宽的约束。因此各页面的背景图案可使用同一图像文件，既统一了页面的风格，又可节省图像下载的时间。如果您再次调入的图像文件只有尺寸有点变化，那么使用图像高度和宽度标记（Tags）即可改变图像的大小。
----顺便谈一下客户端，从技术上讲，增大浏览器的Cache，可提高浏览的速度，但是，事实并非如此。有时，我们清除Cache中的内容后下载的速度则快些。原因是每次下载页面文本或图像时，浏览器总要到Cache中去搜索相应的页面或图像，这样Cache中的内容越多，搜索的时间就越长，如果比下载更费时，那么这时应该及时清除Cache中的内容。

  六、选择合适的格式

----JPEG格式是网上非常流行的图像格式，它对于大型图像的压缩率特别高，而GIF格式更适合小图像和艺术线条一类的图像。对于同样内容的4KB以下的图像文件，GIF格式比JPEG格式效果更好，如果不信，您可比较一下两种格式的小图像文件的大小和质量。

　　七、减少图像的数目

----不要使用太多的图像文件。图像文件的数量和大小对页面是很重要的，因为每下载一个图像文件，浏览器都将向Web服务器请求一次连接，所以图像文件越多意味着页面下载的时间越长。可以尝试用一个图像代替多个分散的小图形（如多个按钮），从而尽可能地减少图像文件的数目。

　　八、对大型图像的处理

----当页面必须有大型图像时，有两种处理方案可供参考：其一，建立一个缩图图像文件置于主页中，将它链接到原始的大型图像；其二，先创建一个同原始图像一样大小的但降低了色彩和分辨率的图像文件，使用低源标记，让该图像文件首先下载。这种方法的优点是使客户不需下载大型图像文件，就能快速地了解到图像的大概内容。
  九、使用JavaScript
----能用HTML和JavaScript完成的事情，最好不用JavaApplet和ActiveX来做。很少的JavaScript代码就可在4.0以上版本的Internet Explorer和Navigator浏览器上做出惊人的效果来，它比同样大小的Java/ActiveX或动态GIF文件要节省更多的下载时间。

  十、少用背景音乐

----虽然目前版本的HTML语言具有在网页中加入背景音乐的功能，但奉劝诸位少用为妙，它会降低您的网页下载到客户端的速度，除非您正在创建一个有关音乐的网站，否则只会给人以华而不实的感觉。如果非要加入背景音乐，那么音乐文件最好使用MIDI格式，而不用WAV格式。
----总之，网页设计者应该对自己的页面精雕细刻，尽可能减少每一个字节，以提高网页下载的速度，千万不要用庞大的网页去愚弄客户的耐性。牢记鲁迅先生的名言：浪费别人的时间，无异于谋财害命。

oghuz

[s:16]  [s:15]

dadi0823

  网页设计的规则经验谈

网页设计的规则经验谈

前Internet上有众多提供免费存放网页的服务器，不少网友自己设计网页、在网上发布信息。随着网页设计技术的发展，丰富多彩的个人网页越来越多地出现在网上，但是，网页下载速度受到带宽和通讯线路等因素的制约。网页设计者应该知道，客户是用昂贵的通讯费用在换取您的信息，除了网页的内容要受益于客户外，对下载速度的考虑也应该放在网页设计规划时的重要位置。如果您正在做网页，那么下面的一些规则与技巧或许对您有所帮助。

　　一、控制页面的总规模

----要想把网页做得精彩，内容必定要丰富，但不要把所有的内容都放在一个页面上，应控制页面的总规模。首先统计页面中的每个对象，如文字、图像、ActiveX或Java代码以及HTML文本的大小。用28.8Kbps的Modem粗略地估计一下，按每秒3KB的速度下载整页所需的时间，如果整页有5KB的HTML代码和30KB的图像，下载该页大约需要12秒，这一般能满足访问者的要求。

　　二、分解大型表格

----尽可能避免用大型表格，因为浏览器必须等待整个表格的内容全部到达客户端，才能显示这个表格的内容，而文本或图像则是一边下载一边显示。如果页面中必须使用表格，可将大表格分解成若干小表格，浏览器下载后面的表格时，客户可以阅读已经下载完的前一个表格。用客户浏览信息的时间去代替等待下载的时间，这一技巧在任何时候都适用。

　　三、不用图片来叙述内容

----为了解决不同的语言平台上不能正常显示本国文字的问题（比如简体中文平台不能显示BIG5码的文字信息），有些设计者将本国文字的叙述内容用图像文件来表示，而不用文本，这样虽然解决了因内码不同导致的乱码问题，但却给页面增加了负担，因为同样的文字内容，用文本存储比图片文件小得多。另外，一些文字性的图像按钮也尽量少用，如果必须要用，也应包含Alt解释文本，这样即使客户关闭了浏览器的图像显示功能，也可以明白按钮的意思。

　　四、标记图像的大小

----在HTML代码中，最好标记出图像的显示高度和宽度，在下载页面时，浏览器会按这个高度和宽度留出图像的位置，在图像下载完毕之前及时地显示其周围的文字内容。否则，让浏览器按图像本身的高度和宽度显示，那么只能等待图像全部下载完毕后，才显示图像及其周围的其他文字信息，无疑造成客户的等待。

　　五、重用图像

----如果多次使用同一图像文件，客户端浏览器的Cache对此有所帮助。浏览器将从它的Cache中找出先前下载的那个图像文件并调入显示，而无需再从Web站点上下载，即使它们不在同一页面中，这样调入图像就不受带宽的约束。因此各页面的背景图案可使用同一图像文件，既统一了页面的风格，又可节省图像下载的时间。如果您再次调入的图像文件只有尺寸有点变化，那么使用图像高度和宽度标记（Tags）即可改变图像的大小。
----顺便谈一下客户端，从技术上讲，增大浏览器的Cache，可提高浏览的速度，但是，事实并非如此。有时，我们清除Cache中的内容后下载的速度则快些。原因是每次下载页面文本或图像时，浏览器总要到Cache中去搜索相应的页面或图像，这样Cache中的内容越多，搜索的时间就越长，如果比下载更费时，那么这时应该及时清除Cache中的内容。

  六、选择合适的格式

----JPEG格式是网上非常流行的图像格式，它对于大型图像的压缩率特别高，而GIF格式更适合小图像和艺术线条一类的图像。对于同样内容的4KB以下的图像文件，GIF格式比JPEG格式效果更好，如果不信，您可比较一下两种格式的小图像文件的大小和质量。

　　七、减少图像的数目

----不要使用太多的图像文件。图像文件的数量和大小对页面是很重要的，因为每下载一个图像文件，浏览器都将向Web服务器请求一次连接，所以图像文件越多意味着页面下载的时间越长。可以尝试用一个图像代替多个分散的小图形（如多个按钮），从而尽可能地减少图像文件的数目。

　　八、对大型图像的处理

----当页面必须有大型图像时，有两种处理方案可供参考：其一，建立一个缩图图像文件置于主页中，将它链接到原始的大型图像；其二，先创建一个同原始图像一样大小的但降低了色彩和分辨率的图像文件，使用低源标记，让该图像文件首先下载。这种方法的优点是使客户不需下载大型图像文件，就能快速地了解到图像的大概内容。
  九、使用JavaScript
----能用HTML和JavaScript完成的事情，最好不用JavaApplet和ActiveX来做。很少的JavaScript代码就可在4.0以上版本的Internet Explorer和Navigator浏览器上做出惊人的效果来，它比同样大小的Java/ActiveX或动态GIF文件要节省更多的下载时间。

  十、少用背景音乐

----虽然目前版本的HTML语言具有在网页中加入背景音乐的功能，但奉劝诸位少用为妙，它会降低您的网页下载到客户端的速度，除非您正在创建一个有关音乐的网站，否则只会给人以华而不实的感觉。如果非要加入背景音乐，那么音乐文件最好使用MIDI格式，而不用WAV格式。
----总之，网页设计者应该对自己的页面精雕细刻，尽可能减少每一个字节，以提高网页下载的速度，千万不要用庞大的网页去愚弄客户的耐性。牢记鲁迅先生的名言：浪费别人的时间，无异于谋财害命。