10. 配色方案和设计样板

序言

Web 设计师在把网站架构图或线框图提交给客户批准后，下一步的工作是通过配色和添加图形图像，确定网站的外观和整体风格。在本篇文章中，我将示范我如何尽可能简单高效地完成这一阶段的工作。我信奉“简约”的设计理念，原因有两点：首先，生活已经够复杂了，不该再让它更复杂；其次，简约的设计也有有助于提高网站的可用性和可访问性。在本篇文章中，你们将学习以下内容：

 

• 确定大标题、小标题、正文部分的字体，以及其他排版要点。
• 为网站规划不同的色彩组合。
• 为客户构建一个设计样板，以确定配色和图形图像。
• 在网站上线前，如何测试网站。

本篇文章的内容目录如下：

• 第一步：考虑排版
  • 关于字体
  • 关于可读性和易读性
• 第二步：排版
  • 注意对齐方式
• 第三步：配色
• 第四步：测试
• 总结
• 练习题

第一步：考虑排版

在下一篇关于网页排版的文章中，你们将学到更多的有关网页排版的技术知识。这里先了解一些关于排版的知识，对你们还是很有帮助的。

Fonts（字体），又被称为“typefaces”，用于显示文本、数字、文字及其他符号。这些符号、字母和数字依据字体族、风格（如斜体、正常、倾斜等）、变体（如正常或小号大写字母等）、粗细（如加粗等）、字形（高或宽收缩或扩大）、字号（磅数或高或宽的像素）等分类。排版涉及确定文本的外观及摆置，即确定字符呈现出来的外观及它们如何被摆置在页面内（如栏、段落、对齐等等）。控制网页排版最有效的方式是使用层叠样式表（CSS）。

完成 Web 设计的第一步工作，就包括确定在网站每个页面都将使用哪些 fonts（字体）。已有很多研究结果表明，在一个网站内使用很多种字体，可能会把访问者搞糊涂。另一方面，如果整个网站只使用一种字体，似乎也显得呆板乏味。

我的建议是，为大标题和小标题选择一种字体，而为正文部分选择另一种字体，尤其是如果计划在网站上加入广告的话，更是应当如此。仅选用少数几种字体，既可以使各页面保持一致性，同时也可以使访问者在浏览网站的各个页面时，能一眼就看出标题和正文部分在字体上的区别。广告客户在网站上发布的广告，将增添字体的多样性。你不会事先知道广告客户将可能在网幅图像广告或文字广告中使用什么字体（一种或多种）。就我个人的习惯而言，我通常为正文部分选择 Verdana 字体，为标题选择 Times Roman 字体或 Georgia 字体。Times Roman 字体和 Georgia 字体都是衬线字体，而 Verdana 字体是无衬线字体。正如你们马上就要看到的，我决定为示范网站页面的正文部分选择 Verdana 字体，不过由于网站 Logo 选用的字体是 Arial Black，因此我为所有标题选用的还是无衬线字体。有时候你需要打破自己订下的规则，在这个示范网站中，我为正文和标题都选用的是无衬线字体，就是一个打破自己订下的规则的例子。首先还是让我给你们讲述不同字体之间的差别，以及我为什么只选用两三种字体的原因。

关于字体

字体的类型主要有四种，分别为：

1. 衬线字体（Serif）：指在字的笔画末端的地方有额外的装饰，或是有真实的衬线（包括粗截线）的字体。由于衬线字体易于在印刷品上阅读，因此在传统印刷中，衬线字体一直用于正文印刷。但是网页不同于印刷品，一些关于字体可读性的研究显示，一些无衬线字体（如图2所示的Verdana字体）用于网页的正文中时更易于阅读。

   

   图1：衬线字体的一个示例，Times New Roman 字体，正常（非粗体或斜体），大小为18磅

2. 无衬线字体（sans-serif）：指在字的笔画末端的地方没有任何额外的装饰或衬线的字体。尽管一些作者撰文指出关于字体可读性的研究是有错误的，但我注意到发表这些文章的网站，其正文部分就是使用的无衬线字体。就是那些发表主张衬线字体更易于阅读的网站，其正文部分依然使用的是无衬线字体。由于在网页的正文部分使用无衬线字体已成为惯例，我决定从众，使用如图2所示的无衬线字体。

   

   图2：无衬线字体的一个示例，Verdana 字体，正常，大小为18磅

3. 手写或草写字体（Script or Cursive）：手写或草写字体通常看起来像是用手写笔或毛笔写成的，而不像是打印出来的，如图3所示。这类字体可包括那些即使不是草体，但是看起来像是手写体的字体。应避免在网页中，尤其是正文部分使用手写或草写字体，主要原因是它们不易阅读（回想一下你婶婶给你写的手写体信件吧，或是你在博物馆曾看过的12世纪的手抄本，想想它们有多难阅读）。此外，不是所有的浏览器都显示一样的字体，因此如果你在网页中使用手写或草写字体，在其他人的浏览器中可能被显示为一种衬线字体。

   

   图3：草写字体的一个示例，Staccato 字体，大小为18磅

4. 特殊字体，包括等宽字体（Specialty, including monospace）：确定等宽字体的唯一标准是所有字符的宽度都一样，为固定宽度，和打印页面看起来类似。其他一些特殊字体外观可能很有吸引力，如以下图4所示的那种字体，不过它们仅用于装饰目的。网站上有时会使用等宽字体，尤其是在显示程序代码时。由于等宽字体可以清楚地显示代码中所使用的每个字母和符号，因此常用于显示程序代码。

   

   图4：特殊手写字体的一个示例，Jokewood字体，大小为18磅

仔细观察以上图1 至图4 所显示的 4种字体的示例，就会发现即使每种字体的磅数都一样，也不是一样大。字体的磅数指的是字母的高度，在磅数都为 18的字体中，一些字体会比另一些更大。此外不同的字体之间还存在其他差异，如字母和词之间的间距等；还有一些字体，如 Jokewood 字体等，没有小写字体。不过尽管一些手写字体如 Jokewood 字体、 Staccato 字体，因易读性不好一般不在正文部分中使用，它们还是可以在标题、广告等中小范围地使用。

这里有一点值得引起注意，那就是由于不同的浏览器基本上还是不兼容，因此这些字体可能不是在所有浏览器中都显示同样的样子。你们可能会想起我在上面说过的话“不是所有的浏览器都显示一样的字体”。造成出现这个问题的原因是不是所有的操作系统都支持一样的字体；或者它们可能支持一样的字体，但字体的变体、粗细及其他要素在不同的浏览器中显示时可能有差异。由于这个原因，你可以选择一种 generic font（通用字体），或就选择一种“衬线字体”或“无衬线字体”来显示你的网页的文字排版。或者你也可以同时既使用所选定的字体的通用名称和专有名称，以期达到最佳效果，毕竟有时候用户也能更改你选定的字体或其显示方式。

你要使用能在所有浏览器中都显示为一样的特别字体（具有特别的风格、变体、粗细或字形），唯一的办法是使用一个图形程序创作那种字体的图形。但出于很多原因，并不建议你这样做。这些原因包括：屏幕阅读器不能阅读隐藏在图形中的文字；难于缩放（不是所有的浏览器都可以全页面缩放）；难于维护（你每次想更改文字的时候，都不得不重新创作图形字体）。相信我，不要这样做。

也正是出于这个原因，作为一个 Web 设计师，你必须学会去接受 Web 基本上是可变性很高的格式这一事实。在设计网站时，很多事情并不是你能完全控制的。你能在一定程度上控制文字排版，但其前提条件是你要采取尽可能简约的方式排版。这也就是这么多年来，我一直在网页正文内容中使用 Verdana 字体，在标题中使用 Times Roman 字体或 Georgia 字体的原因所在。

字体设计师和编程员一直在努力寻找让字体更易读且更美观的方式。因此，你们不必把我说的话当作金科玉律，还是可以尝试一些运用字体的新方式，只要你认为它们有好的效果的话。你只需在多种浏览器中测试你的网页（这一点我将在以下部分讲述），就可以很快发现所运用的字体方案是否成功。

关于可读性和易读性

当你将你的网页设计提交给客户看时，客户通常并不知道衬线字体和无衬线字体之间的差别。客户所知道的只是他是否能顺畅地阅读网页上的内容。因此，说到底易读性才是关键。为此，你需要确保：

1. 你使用的字体足够大，能在多种不同的浏览器分辨率下能为用户顺畅阅读。尽管用户在一些浏览器中（如 Opera 浏览器）可以改变字体大小，你还是应确保所使用的字体大小能在不同的浏览器分辨率下可调整。要达到这一效果，一个可用的方法是使用 CSS，以百分比或 ems 设定字体大小，而不是用像素高度来设定字体大小。
2. 你为背景和正文部分提供了足够的对比。在背景色为黑色的正文部分中使用白色或亮色字体，可能会让一些用户的眼睛感到疲劳，不过如果你需要使用这种版面效果，可以使用另外一种样式表，将正文部分的背景色设为亮色，并将正文部分的字体设为暗色。
3. 标题部分与正文部分呈现出差别。为大块的正文部分加上标题和小标题，或者编号（如我在这部分这样），便于用户快速浏览整个页面，发现对他们来说是重要的内容。用图像将页面分隔为几部分也是可行的做法，不过你要确定这些图像与页面内的内容是相关的。否则，你就只是在浪费带宽。
4. 避免在使用流动布局时让正文的宽度延伸至整个屏幕的宽度。你可以试试在一个大屏幕显示器上阅读一个宽度延伸至整个屏幕宽度的段落，你很快就会感到疲劳，因为你的眼睛必须不停地从屏幕一端移动到另一端。你可以去看看这个关于易读性的网页,它用例图阐述了易读的正文宽度最好是多宽，这是迄今为止我看到过的关于这个问题最好的阐述（例图见以下图5）。这个网页还详细说明了人们是如何阅读一个页面的，不论是 Web 页面还是印刷页面。以下那个示例图是从一个 24英寸的屏幕（分辨率为1920 x 1200）捕捉的页面截图。将该示例图与你点击上面那个链接时在你的屏幕上显示的图像加以对比。然后查看你的显示器的分辨率，观察这两个图像的差别。有时使用固定宽度布局是很好的选择，因为它定义了正文部分的宽度参数，便于用户阅读。不必担心正文周围的那些空白（如下图所示）。只要设置好适当的背景（不分散用户对设计或正文的注意力），那些使用大屏幕显示器的用户一样会获得满意的用户体验。

一般认为，正文每行包含 40–60 个字是比较合适的，会因为一些因素如字体大小、目标受众等而有所变化。

图5：适宜的行宽的一个示例，在一个大屏幕显示器上的显示效果。

最好，一定记住检查正本部分和标题是否存在文字排版错误和拼写错误。我在本篇文章中提供了一些网页的链接，我在其中约一半的网页中都至少发现了一处文字排版错误和几处拼写错误。尽管人都会犯错，但像拼写错误、排版错误（如文字间距不够等）这样一些低级错误，是应该避免的，它们会损害到公司或个人的可信度。

第二步：排版

在你选定了将在网站中使用的字体后，你需要在页面布局中对大标题、小标题、正文等进行排版。在上一篇文章中，我引入了一家虚构的“Wiki Whatevers”公司，该公司希望在其网站上与用户共享作为开源代码的代码段。我设计好了网站架构供该公司批准，他们很认可我提交的网站架构图，这让我很高兴。我未在线框图内放入任何图形或图像（包括公司 Logo），以避免让客户对后续设计产生先入为主的概念。 这个线框图如以下图6所示：

图6：Wiki Whatevers公司网站的线框图

现在我想在这个线框图中加入公司 Logo 和公司提供的一些正文部分的内容，以确定它们在页面布局中的显示效果。我在此时加入公司 Logo 和一些正文部分的内容，还有另外一个原因，那就是排版可以为我将要进行的配色工作提供帮助。网页上的正文部分、标题和其他一些版面设置，本身即可以为网站加入“颜色”。你可以将图7和图6相对照，看看二者之间的差别:

图7：加入了Logo和正文部分的网站线框图。

以上所示的样本稿为网站加入了“颜色”，虽然唯一加入的颜色只是 Logo 的颜色。样本稿不仅仅为网页加入了内容，而且也加入了黑色、白色和灰色的亮色、灰色调和暗色。我仅仅加入了网站不可或缺的那些要素，包括 Logo、网站名称（也是公司名称）、宣传语（即 Open Source Wikis，开源 Wikis）、链接、订阅新闻组的注册栏或中栏中的Feed订阅、页面底端关于公司的信息、纯文本导航栏、广告样稿。由于搜索框较大，无法仅放置在一栏，因此我把它放置在了页面顶部。

虽然我说我使用了正文稿，实际上我使用的是 Lorem Ipsum 生成器网站提供的模拟正文稿。当你在设计网站时，如果尚未能得到真实的正文稿，可以使用这种模拟正文稿作为代替。

注意对齐方式

在这部分，我将示范我是如何决定网页上各个页面元素的对齐方式的。对齐指页面元素如何摆置在页面的特定区域。你可以选择左对齐方式，把不整齐的地方都放在右边缘，这是一种传统的页面布局。你还可以选择居中对齐方式、两端对齐方式（页面左右两边都是整齐划一的），或右对齐方式，把不整齐的地方都放在左边缘。

我选择使用传统的左对齐方式，即所有的页面元素都整齐一致并且靠左对齐。不过你们可能已经注意到了，相对于其小标题，正文部分向右缩进了一些。我之所以要选择这种对齐方式，是因为 Logo 的原因。请看图8，这个图显示了我为何要采用这种对齐方式：

图8：Logo和正文部分之间的对齐方式示意图

由于这个 Logo 并不是那种获得过设计大奖的 Logo，因此我希望它显示得不要那么大。 此外，这个 Logo 使用的 Arial Black 字体使得它显得较大，与页面其他元素不太成比例。尽管我已将 Logo 的尺寸大大压缩，但我还是希望它的大小要与旁边在 Logo 高度内显示的公司名称和标签行（“Open Source Wikis”）相称。你可以从上图中的红色箭头中看到，公司名称是与倾斜的Logo的顶端对齐的，而标签行是与Logo中黑色“W”的底端对齐的。（请同时回头看看图7，从Logo中第一个“W”往下看，你会发现“The latest Wiki”这个标题是与第一个“W”的左端点对齐的。 由于 Logo 是倾斜的，其最低点可指向位于导航栏之下的标题。实际上由于标题的字体大小与公司名称的字体大小一样，导航栏看起来似乎处于次要位置。）

这时我发现我为博客条目标题选用的 Georgia 字体在这里似乎有点不协调，因此我决定将标题的字体改为 Arial Black，这是一种无衬线字体，与我在正文部分中使用的 Verdana 字体有些不同，但差别也不是很大，不会造成混乱。

使用 CSS 是设置页面内各元素对齐方式简便有效的方法。尽管一些浏览器不一定能完全按你设置的对齐方式显示网页，但在很多情况下使用页面布局中精确的点来对齐页面元素是可行的。例如你可以将搜索框与标签行的底端对齐，或是将该搜索框的右边与位于其下的表单的右边对齐，如同我在以上的示例页面所设置的对齐方式一样。

我本可以将正文部分与 Logo 的左上角及标题对齐的，不过我选择了将正文部分向右缩进了一些，这样可以让用户能快速浏览标题，选择阅读他们认为是重要的文稿。这也就是说，网页是各不相同的，如果选用另外一种 Logo 设计，可能就需要选用完全不同的对齐方式。关键之处在于要让页面上的重要元素对齐，整齐有序地排列和显示。访问网页的人不会注意到你曾为对齐而煞费苦心（客户一般也不会），但是如果你未花费时间将页面上的重要元素对齐，有人就可能会评论说“这个页面总有什么地方不对劲”。

将正文部分向里少量缩进，还产生出所谓“留白”，在正文或其他任何页面元素周围形成一处空白，这样就能让访问者容易地分辨出每一篇正文文稿。 正文部分左边的留白通常应设置为与正文部分（或图像）右边的留白一样，这样才能创造出一种平衡感。设置留白，可以让页面不致显得太拥挤，而是疏落有致。

下一次当你在网上冲浪时，请仔细看看你访问的网页，注意哪些是你觉得设计得很好或感觉还可以的网页，观察这些网页中正文部分、标题、Logo 及其他页面元素的对齐方式。 它们都对齐了吗？还是显得参差不齐？设计师要花时间去注意这些微小的细节，这也许使得网页设计显得没有内容开发那么重要，但是好的设计确实又必须注意这些微小的细节。

此外，网页在不同的浏览器中显示时，也可能会遇到对齐方面的问题。文本可能在 Safari 浏览器中显示为完全对齐，而在 Opera 浏览器或 Firefox 浏览器中又显示为已完全对齐。我将在讲述了为网页配色后，再告诉大家如何解决这个问题。

对我为什么没有为小标题和公司名称也选择 Arial Black 字体，你们当中有些人可能会感到不解。我为小标题和公司名称选择的是 Times New Roman 字体，因为这种衬线字体和其他部分选用的无衬线字体形成了对比，为页面添加了趣味，这是一条设计原则。如果页面内所有标题都使用 Arial Black 字体，会让页面显得呆板乏味。

第三步：配色

在我为客户准备网站样板时，我通常都是在线框图已编制完成后才向客户提交网站样板。如果可能的话，我会选择使用代码而不是图像来编制线框图。这样我就可以把页面元素如 Logo、正文部分，甚至广告样本都包括进线框图中，向客户展示在最终的页面中各个元素将是如何显示的。有了这个完整的页面布局图，客户就会很清楚地知道当所有这些页面元素放置到位后页面会是什么样子，然后就可以决定哪些元素可以增加或移除。此外，当我能在计算机上向客户展示和以后在网上显示时一样的网页之时，客户就能直观地看到网页在以后上线后将呈现出来的样子。

在向客户提交的设计样板中，应添加入颜色。之所以要这样做是因为不同的配色方案可以完全改变一个网站的整体观感，即使所有页面元素都已放置到位。此外，由于太多的颜色样本可能会让客户无所适从，我选择向客户提交尽可能少的颜色样本。在本示例中，由于客户的建站预算很有限，我劝说他们只选择一种配色方案，作为向网页添加颜色的样本。

在前面第8篇文章中介绍配色方案生成器II时，我没有提到你可以将16进制的颜色代码输入这个工具，从一种特定的颜色生成一个配色方案。在色轮的正下方，你们可以看到一个“Enter RGB”（输入 RGB 颜色）的链接。在本示例中，由于 Logo 中的金色是最强烈的颜色，因此我输入金色的16进制颜色代码 #eab304，以看看生成的配色方案会是什么样子。生成的单色方案看起来有些乏味，而对比色方案看起来就很不错。这个互补色方案中包含金色的对比色蓝紫色，可供我选用，实际上 Logo 背后的阴影也是浅蓝色的，如图9所示：

图9：基于16进制颜色代码 #eab304 的对比色方案

根据上图显示的颜色，我决定将 Logo 中的主色金色用作顶部导航栏的背景色。我为有下划线的链接选用颜色代码为 #2b0da4 的暗蓝色（几乎就是蓝紫色），并选用深蓝色作为广告背景色。在下面的图10中，你们可以看到加入颜色后页面外观发生的变化：

图10：应用对比色配色方案后的页面外观

在上图中你们可以看到现在选用的颜色还是太深太暗了。因此，我将导航栏中颜色的暗度调低至75%，将广告栏中颜色的暗度调低至20%。在以下的图11中，你们可以看到页面中的颜色立即就发生了变化：

图11：颜色暗度调低后的页面外观

将导航栏中金色的暗度调低，使它与 Logo 中的金色显得更一致。将广告栏中背景色的暗度调低，使它与链接的颜色显得更一致。由于广告中包含链接，这种让广告栏背景色与链接的颜色更匹配的做法是适当的。加入广告栏的背景色是很好的做法。如果你使用像 Google Adsense 这样的广告服务，你就会知道 Google 一般会要求你让广告在页面中更显眼，而在广告栏中加入背景色就有助于到达这个要求。我还为标签行选用了颜色代码为 #2B0DA4 的深对比色，这样可以让蓝色这种对比色在页面顶部和底部都有显示。

尽管看起来这个页面的设计和配色并不难，但我还是很花费了一些时间，多次配置背景色（使用对比色方案中的颜色）、标题颜色，并改变广告栏的设计。每次改动时，颜色看起来都似乎不够简约，因此我最后决定减少颜色的使用，为标签行以外的文字都选用黑色。尽管我可以设置让已访问过的链接改变颜色，但我认为最佳的选择还是仅使用两种颜色，这样适宜插入彩色图片，不致造成色彩的混乱。

另一方面，你也可以看到预先建立好线框图能怎样简化你的设计工作。一旦你手上有了网站线框图或架构图，向页面中添加颜色的工作基本上就像是在确定的界限内添加颜色。如果你坚持使用你的页面布局，那你就可以使用该页面布局来决定颜色选择。此外，如果你采用简约的设计风格，设计出来的网站不仅更为简洁典雅，还具有更好的可用性和可访问性。

让这个页面布局保持简约的最后一个有力的理由是，在下级页面中将显示代码段，我将遵照最佳习惯为这些代码段选用等宽字体。这也是我为什么在这个页面中只选用两种风格相似的无衬线字体的原因，在下级页面中将出现的等宽字体，以及广告中可能出现的任何其他字体，已经使该网站有了足够丰富的字体。请记住一定为大标题和小标题使用标题元素（h1，h2，h3，等)，而不是为它们加粗（strong）或使用斜体字（em）。使用标题元素可以让你的网站具有更好的可访问性。你可以在样式表（CSS）中改变这些标题将如何显示。

关于以上这个页面，有几点需要注意：

• 我为放置在页面顶部的公司名称选用的是黑色，因为这与旁边的 Logo 中的黑色相衬托和呼应。
• 在中栏的顶部我使用了居中对齐方式，以突出显示注册框。由于用于订阅新闻组的注册框的宽度与中栏的宽度一致，采用居中对齐方式就创造出一种平衡感，使文字看起来“属于”注册框所创造出来的形状的一部分。
• 我为在页面底端显示的公司地址使用了居中对齐方式，这可能看起来有点不平衡，但我希望地址成为衬托正文部分的区域的一部分。随着网站内容的增多，右栏中会有更多的链接， 可能还会有一些图像，我希望这个右栏区域与主正文部分完全分离。这种分离会提示访问者右栏是他们需要去找寻更多的信息的区域。

最后，作为点睛之笔，我将为页面加入图像。除非客户已有要使用的图像，你自己选择的图像必须与页面的配色方案相协调。换句话说，你要寻找能反映你为页面选定的颜色的适当图像。在本示例中，我选择为页面加入一张“极客”（geek）的图片，为页面增添一点幽默元素。我之所以选择这张图片，原因之一是图片中那个男子直视访问网站的人，这意味着访问者一进入这个页面，就会被这张图片吸引住。由于这张图片如此重要，我很高兴地发现图片上这个男子所穿的衬衫的颜色看起来与页面的两种主色（金色和蓝色）接近，而且他戴的黑色眼镜也呼应了网站标题的深黑色色调。我还在 Photoshop 中对这张图片进行了处理，在其阴影部分加入了蓝色，并在其强光部分加入了黄色，以使该图片与页面整个的配色方案更为协调。

我还加入了包含博客已贴标签的标签行和日期/时间标记，这样访问者就可以知道博客条目是什么时候发布的。如你们在下图中看到的那样，所有这些加入的元素都使得页面变得更为复杂，这也是你为什么要使重要和关键的信息以尽可能简约的方式呈现出来的另一个原因。页面的最终显示效果，见图12：

图12：最后的设计稿，供客户检查和批准

Web 设计不同于印刷设计，它是可以不停改动的，而印刷设计则不行。因此，随着公司的发展，网站是可以多次改版的。你可以修正错误，修改配色方案等。尽管如此，最好的选择还是在一开始就争取让网站以最佳的形象呈现在网上，这样既有利于维护你作为设计师的声誉，同时也利于维护客户的声誉。

在我构建起更多的网页后，我会执行最后的步骤即测试，然后再将定稿交给客户批准。

第四步：测试

测试网页意味著设计师将使用各种工具细心地检查所有网页，找出可能有的各种错误，以在网站上线前就修正这些错误。你需要进行多种测试，包括：

1. 测试排版和链接：你可以请你的朋友、职业编辑检查网页中是否存在排版和拼写错误，同时也请他们检查网页中的链接，确保不存在无效链接。这里要提醒一点，大多数客户是不愿看到网站在上线前，就被外人看到的。在这种情况下，你需要预先就在建站预算中包括进聘请职业编辑来校对网页的费用，并要求所聘请的职业编辑签署保密协议（NDA），从而有责任对网站内容严加保密。
2. 测试代码的有效性：在你每一次向网页中加入新代码时，都需使用万维网联盟（W3C）的“校验器”检查 HTML 和 CSS 代码。在执行下一个步骤前，这是必须先执行的步骤，这是因为一个代码错误就可能使整个网页不能在各种浏览器中正常显示。至于广告代码，你不要试图去改动广告代码，尽管它可能不能通过校验。多数设计师都已知道他们必须接受广告代码就是那个样子的事实，基本上没有什么办法去改动它。令人感到欣慰的是，绝大多数广告代码是不会影响到你下一步的页面布局的。
3. 测试浏览器兼容性：你也许会问，要测试网站的浏览器兼容性，是不是就需要购置多台有不同尺寸显示器的计算机，并在各台计算机上安装不同的操作系统呢？答案是你不需要。没有几个设计师负担得起如此高昂的费用，因此他们使用几种选项来测试网站的浏览器兼容性。这些选项包括：把一个操作系统的几种版本下载到一台计算机上，寻求朋友或论坛的帮助，以及使用截屏网站提供的服务。这些截屏网站可提供某一时间一个网页在多台不同的计算机上显示画面的截屏。使用这类截屏服务，你就可以发现你在网页上使用的字体是否在某一分辨率设置下显得过大，而在另一种分辨率设置下又显得过小；或者发现所使用的页面布局是否会迫使一个用户要水平滚动屏幕才能看全，或者是否在某一种浏览器中页面的某一栏完全看不到。我通常使用截屏服务来测试网站的浏览器兼容性，因为前两个测试方法的效果都不是那么好。此外，使用截屏服务进行测试，还可以使客户的网站内容不外泄。互联网上有多个截屏网站，不过一些截屏网站响应时间太慢（排队等待测试的用户太多），而且可提供的测试环境的数量也相当有限。因此，我花了一小笔钱，使用 BrowserCam 提供的截屏服务，这笔钱还是很值得的。这个网站还提供免费的试用服务，因此你可以先免费试用一下他们提供的截屏服务，了解其功能和特性。
4. 测试可用性和可访问性：要测试网站的可访问性，有多种在线工具可用。其中一些需要使用声音，这样你就能听到一个语音机是如何“朗读”你的网页的。另外一些测试结果可能要求你更改一处代码，或更改页面上的颜色，为低视力的用户提供更强的对比度等。至于要测试可用性，也有一些在线工具和检查清单可用，它们可以帮助你确认你设计的网站易于为最大多数的用户使用。

这些测试是烦人的工作。在测试过程中，你可能会发现你设计得很好看的网页在一些浏览器中显示出来的样子也确实很好看，但在另一些浏览器中却可能显得一团糟。不过你们始终要记住，最重要的还是内容，只要内容在所有浏览器中都能被看到且易读，那么一些设计细节在某一浏览器中显示出来的效果不好就不是那么重要。其实只要绝大多数网站的用户能无障碍地访问你设计的网站，获取所需要的信息和材料，那你就已经实现了一个被很多只在意网页设计是否能获得设计大奖的设计师所忽视的一个重要目标。

总结

尽管设计师都很重视配色和页面布局，但同样也需要处理好其他一些设计元素。处理好排版、图像，以及客户的广告需要，都是网站设计中重要的部分。要求设计师既满足客户的要求，又让网站网站保持好的可用性、可访问性和易读性，同时还要创作出非常棒的设计，有时候这会显得像是过高的要求。

更让人感到沮丧的是，不同的浏览器之间还缺乏兼容性。尽管过去十年间在让不同的浏览器更兼容方面取得了一定的进展，但你必须明白一点，离网页在所有浏览器中都一样显示的理想状态还很遥远。此外，你还应当认识到，用户可以在一些浏览器中很容易地改变网站的外观，比如可以不显示网页中的图像，可以更改文本和背景的颜色，可以关闭 Javascript 支持功能等。

另一方面，让不同的浏览器更兼容的努力，以及 Web 功能性的不断改进，对当今的 Web 设计师也构成了激动人心的挑战。想想吧，家庭计算机大规模进入零售市场也才不到30年时间，在未来 10年，对一个希望始终更上所有变化的设计师来说，会面临多少机遇和挑战。

练习题

• 四种主要字体是什么？
• 哪种字体最适合在正文部分使用？为什么？
• 要让正文部分和其背景之间保持足够的对比度，这一点为什么重要？
• 给出至少两种将布满正文内容的网页分割开来的方式。
• 给出为什么在向页面加入图像前，先要排版的一个理由。
• 说出四种类型的对齐方式。
• 说明对齐如何能让网页显得“更清爽”。
• 什么是保密协议，以及你该在什么情况下使用这种法律文件？
• 检查网页上的拼写为什么很重要？
• 给出在网站上线前对网站进行测试的4种方式。