纯粹只用 CSS 来处理版面的主要好处之一,是可以轻松的重新编排 HTML 源码中各元件的顺序,而不影响到实际的版面。因此当其它资料还在载入时,主要内容早就已经显示出来了。我发现许多网站仍在使用表格来制作版面,所以我为你撰写了这个技巧。
如果你用表格设计版面,对 陈建国 与 小莉 等失明的使用者来说,放在左侧的浏览列会比主要内容更早显示出来。我不知道怎么形容随之而来的问题,不过你可以自己看看:
- 用表格制作的版面。
- 修改过的版面,这次内文在前面。在图形介面的浏览器上看起来应该一样,但是在 Lynx 上有着明显的差异。
- 原本的版面在 Lynx 下的效果。
- 修改过的版面在 Lynx 下的效果。会先显示主要内文,然后才是导航列。
你不需要从头规划整个模版来避免这个问题。我们可以用一些(相对之下)较简单的技术来让主要内文先显示出来,并且让导航列维持在左侧。我们称这些技术叫“表格秘诀”。
- 陈建国 从中获益了。就跟上面的范例所展示的一样, Lynx 会依照 HTML 源码的顺序显示内容。这代表 陈建国 每次浏览你的网页时都必须要滚动荧幕来跳过导航列。卷页烂透了。
- 小莉 从中获益了。因为 JAWS 跟 Lynx 一样,都会依照 HTML 源码的顺序显示内容;不过 JAWS 的情况会更糟,因为 小莉 必须要坐着等 JAWS 念完整个导航列后才能听到真正的内容,而且还没有保证能直接跳到主要内容的方法。(明天我们就会谈到这个问题。)
- Google 从中获益了。越接近顶端的内容,Google会给予越多的加权。这里的顶端不是指看起来的,而是指 HTML 源码的顶端。实际上许多了解这个技术的人,都参与着搜索引擎最佳化的研究;对他们来说,网站亲和力反倒是其次了。
用 Lynx Viewer 检查你的网站,确定每天的文章都会比导航列先显示。Movable Type 的预设模版就已经是正确的了;如果你用的是预设的模版,大概就不需要再做任何事情了;不过还是用 Lynx Viewer 试试看吧,你会因此对这个议题有更深一层的了解。
如果你使用的是 Radio 的预设模版,也许就需要修改表格,让主要内文放在前面了。这没有办法用复制/贴上的方式做到;你必须钻研自己的模版,并且检视表格的架构。简单版面与修改过的版面展示了基本的技术。
用表格制作的版面:
<table>
<tr>
<td valign="top" align="left" width="25%">
... navigation bar ...
</td>
<td valign="top" align="left">
... main content ...
</td>
</tr>
</table>
我们做了这样的修改:
<table>
<tr>
<!-- spacer GIF in upper-left cell -->
<td><img src="images/1.gif" width="1" height="1" alt=""></td>
<!-- main content cell first, with rowspan=2 -->
<td valign="top" align="left" rowspan="2">
... main content ...
</td>
</tr>
<tr>
<td valign="top" align="left" width="25%">
... navigation bar ...
</td>
</tr>
</table>
- Lynx Viewer.
- A Promotion Guide: The Table Trick.