显示器的尺寸与网页设计

显示器的尺寸与网页设计2007年05月26日 星期六 10:09 P.M. 相信在你以前访问的网站中，有的虽然看上去非常舒服，但却有种让人难以接受的感觉。这就说明，它们的布局都是存在瑕疵的。不是说他们设计的不好，而是因为这些精心设计的网页难以适应显示器的尺寸变化。这种情况其实经常会发生。导致这个情况的原因是设计时考虑的不够周全。
网页设计师所面临的最大问题就是：如何使每个网站的布局适应所有人的显示器尺寸和分辨率。因为用户使用的浏览器各不相同，显示器尺寸也存在差异，所以设计师所设计出来的网页就必须适应上述不同的情况。那么，让我们先来看看下面三个典型案例吧：
你觉得这样的尺寸看上去小吗？
我们首先要明白的重要一点就是显示器的分辨率和显示器的尺寸没有绝对的关系。显示器的尺寸是固定的（如：15寸、17寸等等），但是，分辨率的大小是依照显示器的内部设置来决定的。一个15寸显示器的分辨率可以和一个17寸显示器的分辨率相同。这就意味着，尽管17寸显示器比15寸大，但是其显示效果看上去却几乎相同。
分辨率是通过像素来定义的。显示就是显示器上的最小颗粒单元，即：一个基本点。一般的计算机中包含三个基本分辨率的设置：640 x 480 像素、 800 x 600 像素以及1024 x 768像素。640 x 480表示该显示器的水平扫描线上所包含的640个像素，垂直扫描线上包含480个像素，总共307,200个像素；1024 x 768表示该显示器的水平扫描线上所包含的1024个像素，垂直扫描线上包含768个像素，总共786,432个像素。想过吗，这些对你来说意味着什么呢？
你可以设想一下，这就像是对同一张图片进行“放大”或“缩小”。如果你以640 x 480的分辨率查看这张图片，那就意味着你对这张图进行了放大。当然，这张图图看上去是更为清晰一点；但是，这张图很可能无法全屏显示。因此，你需要拖动水平或垂直滚动条来查看页面上的完整图片，这就比较麻烦。
如果你把分辨率改成800 x 600，那等同于你将这张图片在640 x 480分辨率的基础上进行缩小。虽然这样做可能会使原来的文字或图片缩小，但是，你可能无需拖动滚动条便可以浏览全部图片；当你把分辨率设置成1024 x 768时，那就意味着图片将会变得更小。你可以看到整张图片，但是，在图片的周围，可能会出现大片的空白区域。文字和图片都会变得比在640 x 480的分辨率下显示时小很多了
基于这一点，你可能会饶有兴趣地在不同的分辨率下测试页面的显示效果。
这里要指出一个重点：你应该记录原始分辨率下的页面显示效果，以帮助你在页面测试完毕之后改回原样。
Windows用户设置分辨率的方法：
·点击“开始”按钮
·选择“设置”
·选择“控制面板”
·鼠标双击“显示”
·此时，将打开“显示属性”窗口
·点击窗口顶部选项卡中的“设置”选项
·记录原始分辨率
·移动“屏幕分辨率”滚动棒设置你所希望的分辨率
MAC用户设置分辨率的方法：
·点击左上角的“彩色苹果”图标
·选择“控制面板”
·选择“显示器和声音”
·记录原始分辨率
·在“分辨率”窗口中，选择下拉菜单选择器选择你需要的分辨率
网页设计师必须在创建网站时同时考虑网页在上述三种不同分辨率下的显示情况。这并不是件容易的工作。因为在640 x 480分辨率下正常显示的页面，在1024 x 768的分辨率下未必得体，反过来也是一样。所以，要好好画上一番工夫。
你使用了“网络保险色”吗？
虽然Mac 和 PC 使用不同的调色板，但是，其中有216种颜色是二者之间都通用的，我们称之为“网络保险色”。使用“网络保险色”意味着它可以适应不同的电脑平台、不同的操作系统（Windows或Mac）、不同的浏览器（IE 或 Netscape）。这里我要提醒你的是：对于像logo和按钮这样的图形也最好使用“网络保险色”对其进行配色。
那么，你如何确定某个颜色是否是“网络保险色”呢？这里有很多软件，如：Macromedia Dreamweaver（Macromedia公司开发的专门用于网页制作的软件），它带有一个包含所有“网络保险色”的拾色器，你可以根据实际需要从中进行选择。如果你没有类似于这样的软件，你也可以在网上找到免费提供“网络保险色”的软件。
注意：你的浏览器和别人的不是完全一样的！
通过不同的浏览器浏览网站，所看到的效果是不同的。当今最常用的两个浏览器是：IE和Netscape Navigator[网景]。同样的，还有很多其它的浏览器，如：AOL 浏览器、Mosaic、Opera、Lynx 以及 Web TV。
网页设计师不仅要考虑不同浏览器之间的兼容性问题，还要考虑浏览器的版本。举个例子来说，IE3.0和IE5.5支持的是不同的特性或脚本，因此，显示页面的效果也会不同。你过你想检测IE和Netscape Navigator的兼容性问题，你可以运行http://www.netmechanic.com 上面的检验器；同时，该检验器还能对网站中的无效链接、html错误、拼写错误和页面家在的大致时间进行验证或测试。
总而言之，要尽可能地从各个方面来测试一个网站。将网站放在不同的分辨率下、不同的电脑平台上以及不同的浏览器上进行测试，尽最大可能确保网站在各种条件下都能够正常显示。这对于你的用户来说，会是一个很好的网络体验。