第六 章 没有图片 ？没有 ？也没 问题！

确保内 容在图片 或 缺失的 情况下仍 然易读。

本书的头几章我们是从一个组件设计的角度来讨论灵活性的问题，并强调了无论内容的大
小多少，设计样式都能适应于内容的重要性。你可以应用一些其他的方法来检验你的设计是
否无懈可击，使它在任何网页解析环境下，都有良好的灵活性。如果不支持 或它是不可用
的，那么页面还仍然可读吗？如果图片载入的很慢，或通过用户的自定义把图片屏蔽了，
那么还能够看见和了解内容吗？当你在建立一个网站的时候，这些都是需要回答的问题。

为最差的状况做好准备可以增强网站在不同环境下的可读性与可用性。这章，我们将探讨两
种在缺失图片和或 情况下仍可确保设计无懈可击的简单策略。

普通 方法

几个月前，我收到了一封读者的 ，他是我个人商业网站和网志（）的忠实读者。在 中，他

提到他非常喜欢浏览我的网站，通常浏览 时都把图片屏蔽掉，因为他是通过很慢的拨号连
接上网的，他想要的是站点的内容，而不是一个劲的等图片的载入。他并不是唯一一个以此
来改善原本迟钝浏览过程的人，许多浏览器的使用者都把图片设置为禁用，让页面只载入
内容与背景色（图 ）。

图 ：在 中不选中 （载入图片）复选框即可禁用图片。

我们一会再回过头来探讨读者刚才解释的他为什么要以这种方式浏览。但是，首先了解一下
在 内容的背后，平铺的图片是如何设置的，这将对我们会很有帮助。

利用 和 属性是常用的一种方法。在文本后面使用一张图片来增添颜色、样式等等。那时候，
上的竖栏和被装饰的边框都是由背景图片在整个页面平铺实现的。由一张图片来生成侧边条
纹、白色内容区域和淡灰色侧栏（图 ）。

图 ：一张 图片垂直平铺于深灰色背景之上，构成了站点的竖栏状背景。

一张图片从上到下垂直平铺，在深灰色背景上创建了竖栏与侧边框，深灰色的背景是为 元
素设置的（图 ）。

图 ：图片 的平铺，在页面文本内容后生成了白色与灰色的竖栏。
所以，为 声明一个深灰色的背景，也就是为整个页面设置了一个默认的背景色，不过这颜
色可被它内部的元素所覆盖。

body {
background: #666;
}

平铺的图片是设置给一个内部的 ，所有的页面内容都包含在其中；因此，它将位于灰色的
背景之上，为文本生成了白色和灰色的竖栏效果。它的效果真的不错。通过在背景色上设置
平铺图片，我们在这图片上开辟了一片易读的文本空间（图 ）。

图 ：深灰色的文本将置于平铺图片之上。

问题是当图片消失了，站点的瑕疵（，这是我自创的一个新词）就会显露出来了。

为什 么它不 是无懈 可击的

回到那位热心读者的 上来，你知道的，就是那位通过低速的拨号连接上网，并聪明的将图
片禁用的人。他所提到的原因使我意识到，我网站上的内容是不易读的，或者根本就看不到。

因为内容的文字颜色是两种灰色调，当我们去掉（或读者自行禁用）平铺的图片后，在默
认背景色上的文字就不见了，因为它也是深灰色。结果就是这么一个只有半面可读的页面；
在较宽的主栏里，仅仅能够辨认出它的文字，更糟的是，较窄的右栏里的文字是完全看不
到的。这个竖栏里的文字拥有与背景相同的灰色，这样便使文字完全被隐藏了。

图 显示的是移除平铺图片后的效果。主栏文字与背景色之间缺乏一个理想的对比度，为阅
读增添了困难。但是，更糟的是，因为与背景同色，右栏里的文字完全消失了。

图 ：阅读起来很费劲，等等，右栏哪去了？

对于那些禁用图片以节省带宽的用户，还有那些因为低速连接导致好象总是在不停的载入
图片的用户来说，这种状况确实令人沮丧。因为你的颜色重叠，导致完全看不到文本。幸运
的是，有一种你应当牢记的简便方法，它可以避免这种不可读的状况。

一种 无懈可 击的方 法

为了确保即使在没有图片的情况下，你的页面上的文本仍然是可读的，有一个相当简便的
无懈可击的补丁。记住，要为任何您可能使用背景图片的地方设置背景色。

比如，拿我们这个不可读的例子来说，如果我只是简单的为页面的内容区域加上背景色，
那么我的那位热心读者就不会存在任何问题的看到文本内容。

既然页面的内容区域位于白色背景之上，我需要为包围竖栏的 <div id="content">添上白

色背景：

同 样 ， 既 然 侧 栏 是 位 于 平 铺 图 片 的 淡 灰 色 背 景 区 域 ， 我 只 需 为 围 绕 右 栏 的 <div
id="sidebar"> 声明一个灰色背景即可：

图 显示的是为样式表添加这两条简单规则后，禁用图片后的效果。你会注意到，当背景平
铺图片去掉后，每一列文字的后面都存在背景色，它们挡住了整个页面的默认深灰色背景。

图 ：通过添加背景色，又能够看到文本了。

为什 么它是 无懈可 击的

通过花一些额外的时间（和我们在这儿讲的这些内容）为所有使用图片作为背景的区域赋
予相应的背景色，那么你离无懈可击就更近了一步。对于那些禁用图片浏览你网页的使用者
来说，他们可以在节省带宽的同时看到页面上的内容。而对那些低速连接的用户，他们会在
图片载入前，就可以看到先载入的文本和背景色。

无懈可击就意味着要为你设计样式的任何状况做好准备。只要这么一个小小的、简单的一步，
就能够确保你的设计样式在没有图片的情况下不被破坏。

再举一个相似的例子，让我们看一下 上的册栏标题（图 ）。

图 ：在 上“和“是被包含在 元素中的。

标题“和“是被包含在 元素中的（也就是说，），在白色文字后面有一张精美的背景褪色
图片。

为了让上面（绿色）标题实现这个效果，它的 如下所示：

#sidebar h3 {
margin: 30px 0 12px 0;
 padding: 5px 10px;
color: #fff;
font-size: 120%;
background: url(../img/sub-h-bg.gif) repeat-x top left;
}

上面的 提供了绿色的渐变背景，它上面的文字是白色的。页面的默认背景色也是白色。我想
你应该能够想到我要做什么了。

如果我们把图片去掉，标题就将彻底消失（图 ）。

图 ：标题文字魔术般的消失了！

白色背景上的白色文字，就是那魔术般消失的内容。

幸运的是，在本章前面所学的一个简单修补法在这里同样适用。选择一个相近的背景色，把
它与图片一起声明，我们就实现了无懈可击的设计效果。

#sidebar h3 {
margin: 30px 0 12px 0;
padding: 5px 10px;
color: #fff;
font-size: 120%;
background: #53 8620 url(../img/sub-h-bg.gif) repeat-x top left;
}

上面的 里，我们在一条规则里同时声明了背景褪色图片和绿色背景。因为背景图片是置于
背景色之上的，所以当图片（被用户自行禁用或载入速度太慢）不能显示的时候，我们也
可以有个安全的保障。

另外，如果用户增大页面的字号，而背景图片还留在盒子的上方，背景色则将扩展到你所
希望的任何区域（图 ）。这点同样确保了标题文字的可读性，因为他总是位于绿色背景之
上。

图 ：这是一个堆放顺序的立体示意图，可以看到白色文本和平铺渐变图片是位于绿色背景
之上的。

图 显示的是去掉图片后的标题效果，这次，它们的背景色又使白色文本显现了出来。

图 ：通过定义绿色与橙色的背景色，即使没有图片，也可以看到标题了。

现在我们已经解决了缺失图片的问题，下面让我们看看缺失 会有什么效果。
有或 没有样 式

这本书讲到现在，我们一直把重点放在利用 来实现无懈可击的设计样式，使其可以应对不
同的状况，并可对那些设计好的内容进行保护。但是，当去掉 后会发生什么？当设计样式
被拿掉，只留下内容自己光溜溜的站在那，这时页面将是什么样子，它会有什么举动？

有一种非常重要而且简单的方法就可以把这个问题解决掉，这也是我想献给所有的 设计师
的一个建议，那就是当创建网站的时候，要使用简洁的标记和 进行设计。通过观察页面的
裸露结构（放心，页面不会轻易难为情的），很快就可以清楚的看到页面在不支持 的浏览
器和浏览设备中的显示效果。当你大量的依靠 来生成漂亮且吸引人的设计样式时，就可以
确保页面在 不被支持或不可用的时候仍然是可读的，这一点很重要。

所以，还有另一种方法可以使你的设计无懈可击：把你的设计样式从页面中完全提取出来 ，
然后再评测一下这个页面的可读性。它还能浏览吗？

秒钟 可用性 测试法

我经常把禁用 来比作一个“ 秒钟可用性测试法”。当然，这不是一个科学的判断站点可用

性的方法，科学的方法通常都采用焦点小组（）法、还要进行调查、花费大量的时间、使用一
些其他有争议的实用测量方法。但是，通过快速的去掉设计样式，你会很轻易的了解页面的
核心是如何对外展现的。大多数使用现代浏览器的人会看到你的漂亮设计，但是有些人却只
能看到原始内容，在设计或开发过程中记住这一点将会很有帮助。

过去，设计师都是用表格和表现类标记（标签、空白图片等等）去构建页面，以实现在每一
个浏览器中的显示效果都精确一致。多数情况下，这都很有效。但是，这些站点相当缺乏灵
活性，就像一群没有亲和力的野兽，在任何非典型 浏览器下都不能够浏览和读取。随着不
同浏览设备和浏览软件数量的增加，对创建使不同类型用户都可访问的站点的认识的加深 ，
测试你的设计是否能适应于不同状况就变得愈加的关键。屏蔽 就是这检验列表中的一项。让
我们看看它可能出现的两种效果。

普通 方法

一种有些危险的状况是站点混用 与标记，用 去处理站点设计的某些方面，同时还结合使

用了一些表现类标记和嵌入页面的背景图片（通常使用嵌套的表格为其布局）。

举个例子，图 显示的是 （这是一个源自真实站点的虚构实例，那个站点意外的拒绝了我

们想要展示它的请求）去掉 后的效果。页面变得无法浏览，在默认的黑色文字和蓝色链接
后面是深蓝色的背景平铺图片。在正常情况下，也就是有 的时候，站点的样子和它的可读
性都很好。

图 ：这是 （一个源自真实例子的虚构站点）关闭 后的显示效果。注意到，很难去看清它的

默认文字颜色和链接。

这种状况就是由表现与结构的混用造成的，一些不必要的图片（比如，平铺的背景图片）
与标记直接绑在了一起。举个例子，如果 想要在整个页面设置一个背景平铺图片，他们需
要在 中加入一个 （背景）属性：

<body background="/img/tile.gif">

但是当我们直接把图片加到标记中，就会产生上面所见的去掉 CSS 后的效果。

只用来设置文本和定位，当它被拿掉后，我们就剩下了一个不可读的混合体。很明显， 并
没有将 与有意义的标记相结合，内容与设计样式的的分离可以帮助站点在任何情况下保持
可读性与可用性。

很可能在建立网站时，采取的是一种过渡方法，使用表格作为框架和布局，仅仅让 作用于
少量的元素。如果做的好，拿掉 仍然会呈现一个可读可用的站点。我强调的就是测试的重要
性，测试的是禁用样式后的状况，看其是使站点变得不可读了（像 一样），还是变成不受
缺失 影响的理想效果。让我们来看下面这个例子。

一种 无懈可 击的方 法

禁用 情况下去浏览一个页面，一个良好页面结构的依据就会立刻呈现在你的眼前。比如，
我们拿著名的反病毒软件厂商 的精美站点（，图 ）来说。当在无样式状态下浏览，清晰的
条理与易读的内容就会显现出来，无论你使用什么浏览器和浏览设备，所用的标记都能被
良好的解析（图 ），这就是它的重点所在。

图 ：显示的是 主页的简洁设计风格，图片截于 年 月。这就是一个良好标记结构与 的产物。

图 ：当去掉 后，呈现出 站点的框架。

当你移动页面的滚动条，可以很清楚看到它是用充满语义的标记去构造的链接标题、描述和
链接列表。就好象是你在为文档拍了一个 光，一下就看到了设计后的骨架（图 ）。

图 ：向下滚动页面你会看到 架构的全貌。

如果浏览器或浏览设备不支持 ，页面的设计样式也不复存在，但是它的内容与功能还没有
消失。想一想：电话、、手持电脑、小屏幕浏览设备、读屏软件和文本浏览器。它们其中一些不
能完全支持甚至许多根本不支持样式表。为了确保页面无论在什么解析环境下都是可读的、
可用的，你们应该尽量使站点变得无懈可击。
无懈 可击的 帮手

很幸运，有一些可用的工具可以帮助你快速而方便的检测页面设计在不同状态下的效果。任
何好用的工具，如果它很容易获得、使用很简单、并且不碍事，那么它就是一个值得使用的
工具。如果在缺失图片和或 的情况下，你想测试页面的可读性，你可以用几种不同的方法
来测试：、 和 浏览器的 工具条或者 的 亲和力工具条（）。

是一些用 写的小应用程序，它可以动态的在网页上触发某些事件。被包含在浏览器的书签
或收藏夹内，可单击调用。这段 其实仅仅是一长串置与超链接中的指令。 可以做一些方便
的事情，比如校验当前页面的 、转换或禁用样式表、重置浏览器窗口的尺寸以模拟不同屏幕
效果等等。

（，图 ）拥有丰富的 资源，里面有一个非常实用的链接列表。把这些小段 放入你的收藏夹

当作书签可让你快速的调用各种测试模式。

图 ： 是一个非常实用站点，上面收藏有许多关于网站亲和力方面的资源与链接。

比如说，图 ，我已经把“（禁用样式表）”拖到了我浏览器的书签栏中。现在如果想对任
何站点禁用 ，只需随时点击一下。这使本章前面提到的 秒钟可用性测试法应用起来更加的
简单。

图 ：在你把 拖入浏览器的书签栏后，它就会保留在那儿，并可随时对你载入的任何网站
采取禁用样式表。

：寻找更多的 可到 和 。

同样地，其他的 也可以以其他的方式改变页面。比如，“（显示所有的 ）” 可以描绘出所

有 的轮廓，立即为你呈现一张页面结构视图（图 ）。

图 ：显示的是 在激活“ 后的效果，所有 元素的轮廓用红色边框表示了出来。

由于它本身的无影响性， 将会成为你日常设计工作中的一部分，使你可以随时检测它是否
无懈可击。

（ 开发者 扩展）

如果你使用的是 或 浏览器，我向你强烈推荐 工具条，是由 （ ）编写的。这个工具条本质

上就是一个动作（）的集合，很像 ，可以作用于当前页面。工具条位于浏览器的上方，其
中的动作也被分了组（图 ）。

图 ：通过工具条上的下拉菜单可看到 包含的几十个动作。

所有可能的测试都包括在里面。比如，在 菜单里，你可以快速的通过去掉图片对页面进行
测试，确保它定义了与相关图片一致的背景色，这在本章的前面我们曾经提到过。

图 显示的是对 应用 （禁用图片）后的效果，点击这个选项可立刻去掉所有图片，以便于
你能够对可读性进行检验。一些选项把不错的 （调整窗口大小、对标记和样式表进行校验，
等等）和其他选项（比如可以在侧栏编辑站点的 ）相结合。这就可以很方便的对一些小的
修改进行快速测试。

图 ：对缺失图片的检验简单到只需点击一下链接，就可立刻知道页面是否无懈可击。

构建了一个“完美工具控制盘”，对任何一位做网页的人来说都是必不可少的。对图片和
的缺失测试，以及对其他一些状况的测试都不存在任何问题。

亲和 力工具 条

很像 ， 亲和力工具条也针对 用户提供了一个实用工具的控制面板（图 ）。

图 ：针对 用户 亲和力工具条来检验页面的亲和力水平。

除了校验、调整窗口大小和 的一些选项，这个工具条还包括了额外的一些亲和力诊断测试，
她们也可随时应用于任何页面。对于 的 用户来说这是一个不错的选择。

把校 验作为 一种工 具

我已经提过了可以使用 或 提供的功能对页面进行自动校验，但是对标记和 的校验来说，

它本身就是一种工具。

依照说明规范（由万维网联盟编写，）对标记和 进行校验，可确保准确快速的对页面进行
解析，为你的设计提供了一个绝佳的机会使其正确的展现出来。校验就好像是对一篇论文进
行拼写检查，确保所有的 都没有落了那一横，所有 都没有落了那个点。

对大型站点来说，即使几个大团队一起去校验相同的文档，要想完成校验有些时候也是很
困难的，否则的话是完全不可能的。更复杂的问题是，内容管理软件会随机的产生一些不规
范的标记，这就给那些好心的设计师带来了更大的挑战。这通常只是一个去争取的目标，但
是完美并不是某一个人所能实现的。
但是我这里所强调的校验重要性是针对网站设计阶段初期而言的，在你想让站点无懈可击
的时候，它是一个可助你一臂之力的工具。当你想创建一个充满灵活性和亲和力的设计时，
在进行的过程中不要忘记了去校验你的标记和样式表；它或许会除去某个令你十分头痛的
未知解析错误。

比如，一个未关闭的 元素会在一个基于 功能布局和被严重破坏了的布局之间有不同的含

义。我可以证明这一点：我花了好几个小时试图去修改一个错误，但是因为我没有校验页面，
我的一个关闭元素的小小疏忽便成了这个问题的明显根源。通过规律性的校验页面，你可以
预防那些可以毁掉你设计的疏忽性错误。并且一个疏忽性错误在不同的浏览器中会产生不同
的效果。一个通过校验的页面无论由什么浏览器解析，它都会被很好的读取。

如何 校验

：更多关于选择文档类型的内容，请参见 。

校验你的 是非常简单，首先在页面顶部申明一个 （文档类型），然后通过校验器来为这

些页面检查错误。 是告诉校验器（和任何其他需要知道文档类型的软件）想要遵守哪个规
则。例如，本书使用的这些无懈可击的例子使用的都是 ，因此在每一页面的顶部都有如下
代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

当然，你可以选择使用不同的文档类型。重要的是你必须选定一种并了解相关的规则，这样
才能正确的完成校验。

一个校验器就是一个应用程序，他可以分析文档的语法并依据 的说明规范来核对错误。页
面顶部的 声明用来告诉校验器使用的是哪种说明规范。

本身就有一个免费的基于 的标记校验器（ ）。它的使用方法非常简单，只要输入 就可以

检查页面规范与否了（图 ）。前面提到的 和 都提供单击校验，通过把当前页面的 直接传
递给 的校验器来实现。

图 ：你可以在 找到 免费的基于 的校验工具。

我经常使用 的“（通过上传文件进行校验）”这个功能，它允许上传本机上的你正处理且
还没有发到公网上的文件。校验器将会接收你的工作文件，并把它看作一个在实际 上发布
的页面进行校验。更简单的方法是使用（前面我们提到过的） 工具条的“（校验本地 ）”
功能。选择这个选项后，它会自动把浏览器正在浏览的本机 文件上传。再唠叨一遍，我发现
在设计初期利用校验来核对错误非常的实用。
除了校验标记，校验你的 也是非常重要（和简单）的。 自身也提供了一个校验器（ ），
它的使用和上面提到的标记校验基本一致。通过 和扩展工具条，校验器的功能也都可以通
过鼠标单击来完成。

总结

考虑你的网页视觉效果方面的灵活性，与确保页面在不同状况下的完整性同等重要，这可
使你的内容无懈可击。通过在缺失图片和 的情况下对页面进行检测，你就可以确保内容在
不可预知情况下仍然具有可读性。

像 、浏览器工具条和校验这类无懈可击的助手都可以使测试的过程简化并提供一个有序、简
便的方法使你的设计适应于多种状况。

以下几点应当牢记：

 经常使用“ 秒钟可用性测试法”去检验页面在缺失图片和或 下的可读性。你要熟悉自

己的设计样式是如何应对其所处的不同状态的。

 记住要为你设计中的每个背景图片设置相应的背景色。让每个禁用图片或连接速度慢的
使用者都能够浏览你的页面。

 用 和或浏览器工具条来使开发过程变得快速、简便；把这一步融入到日常的设计流程
中去。

 在设计阶段，用校验来消除那些令人头痛的错误，去享受美好的午后时光吧！