2.2　为什么这样做不是无懈可击的

那么问题出在哪儿？我们绝非是想嘲弄 LanceAarmstrong.com 的设计师—— 他们所使用的方法，其实互联网上千千万万个其他站点也在使用着。我们仅仅想用这个站点 作为一个向导，首先主要是因为它在视觉上很吸引人，其次，用 CSS 和有效的 HTML代码来重构这个站点也相对比较容易。那么现在，就让我们先指出它都有哪些不足吧。

2.2.1　堆积如山的代码

那些使用基于 JavaScript 和图片的导航栏的站点的通病就是过多的代码，这些代码 负责布局和产生动态的效果(比如，用翻转效果表示状态的转换) 。通常，每个选项卡 都是剪切好的图片，再使用一系列的嵌套表格，空白的 GIF 填充图片(用于在页面对象 之间产生空白效果的透明图片)，外加一些不必要的 HTML 代码以达到像素级精确的布 局，这就是当今常见的做法。这样的结果就是产生一大堆冗余代码，造成页面下载时 间的增加、文件体积的增大。

以 LanceArmstrong.com 为例，一张图片包括了四个选项卡，使用了图片映像使图 片中的每一个选项卡部分都是可点击的。这要比每个选项卡都是单独的一张图片，然 后用表单元格和空白 G IF 图片来定位的方法所需要的代码要少。但是，下面的问题， 是这两种方法都存在的。

2.2.2　不方便使用的问题

使用这么多代码的另一个不幸的附带影响，就是它将使那些由残障人士所使用的文 本浏览器以及其他辅助浏览软件变得毫无用处。而且，因为整个导航栏就是一张图片 (参见图 2-3)，大多数设计师并没有对使用了图片映像的可点击区域定义 alt 属性。所 以，对使用屏幕阅读软件或者想通过关掉图片显示以节省下载时间的那些浏览者来说， 在这个站点中的“航行”将是一段痛苦的时光。

2.2.3　可伸缩性的问题

这是一个大问题。因为这些选项卡都是图片，所以对于有视觉障碍的用户，他们 无法通过在浏览器中放大文字以增强可读性。对于这样的需求，图片导航栏总是无能 为力的 。

2.2.4　缺乏灵活性

如果未来的某一天，LanceArmstrong.com 的编辑想改变选项卡中的文字，比如想 把“Ab out  La nce”改成“W hy  La nc e  Rul es ”，那他们可就有大麻烦了。在这些图 片选项卡上编辑、消除和替换文字需要另外裁剪新的图片，或许还要修改标记中定义 的图片映像的尺寸，由此会带来大量的工作。

又因为，整组选项卡都是在一张图片上，作一处改变就得对所有的四张图片都做修改( 每一张都有一处) ，这同样是一个另人头痛的问题。 如您所见，我们可以改进的空间还很大。前面提到的每一个不足之处都给我们以足够的理由去探索一种替代方法。让我们现在就行动吧。