第十一天:跳过导览列的链结

就算你不想要把模版改成内容在前的样子,至少也该妥协一下,提供跳过导览区的链结。这并不是多完美的解决方案(先把主要的内容放在前面才是王道),但至少是许多站台都愿意采用的权变之策。

这个「跳过链结」就跟其它链结一样,其实就祇是标准的 <a> 卷标;不过我们会用 CSS 把他隐藏起来,所以你在 Internet Explorer 或 Netscape 上完全看不到,也不会影响到你本来的版面设计。

谁因此获益?

  1. Marcus 从中获益了。因为当他浏览这个页面时, Lynx 就会显示出这个链结,让他能够跳过导览列,而直接阅读主要的内容。至于这件事的重要性,请参照第十天:先呈现你的主要内容里所举的例子。
  2. Jackie 从中获益了。因为当他浏览这个页面时, JAWS 就会读出这个链结,让他能够跳过导览列,而直接阅读主要的内容。

怎么做

首先请用 Lynx Viewer 来看看你的主页面是不是会把导览列放在主要内容之前。如果你的主要内容更早出现的话,你就不需要用到今天我们所要探讨的诀窍了;放自己一天假,去玩乐吧!

现在让我们定义这个跳过链结所要用的 CSS 样式,让它在视觉性浏览器上消失不见。如果你用了外部样式表的话,就把这个规则加到最后面(如果你用了多重外部样式表的话,请把这个规则加到适用 Netscape 4 的那一个里)。如果你本来是在模版开头的地方使用 <style> 区段来定义样式的话,就在 <style> 卷标之后加入这个规则。

.skiplink {display:none}

接下来是把这个跳过链结直接插入到站台名称和站台描述之后的地方。找不到吗?也许你该搜寻一下相对应的模版变数。

  • Movable Type: 寻找 <$MTBlogTitle$><$MTBlogDescription$>
  • Greymatter: 没有特定的模版变数;你应该直接搜寻网站的名称和卷标列。
  • Radio: 寻找 <%siteName%><%description%>
  • Manila: 寻找 {homePageLink (siteName)}{tagLine}
  • Blogger: 寻找 <$BlogTitle$>

现在找到了吗?切记要在站台名称和描述的正下方插入这个跳过链结:

<a class="skiplink" href="#startcontent">跳过导览列</a>

好,现在你还需要设立跳过连结所要指到的锚卷标,理论上也就是指到你的主要内容去。你找不到主要内容吗?别著急,模版变数再度拯救了今天的课程。

  • Movable Type: 寻找 <MTEntries>
  • Greymatter: 在你的 Main Index Template 里寻找 {{logbody}} ,然后在你的 Entry Page Templates 里寻找 {{entrymainbody}}
  • Radio: 寻找 <%bodytext%>
  • Manila: 寻找 {bodytext}
  • Blogger: 寻找 <Blogger>

接下来,要使用的锚卷标格式则会因你使用的 HTML 不同而有所出入。检查一下你的 DOCTYPE ,然后从底下选一个合适的来用:

  1. 如果你用的是任何一种 HTML 4 的话,在你的主要内容前面加入这个:

    <a name="startcontent"></a>

  2. 如果你用的是任何一种 XHTML 1.0 的话,在你的主要内容前面加入这个:

    <a name="startcontent" id="startcontent"></a>

  3. 如果你用的是任何一种 XHTML 1.1 的话,在你的主要内容前面加入这个:

    <a id="startcontent"></a>

你应该在网站上的每一页都提供这样的跳过链结,所以在每个模版里都依样画葫芦,加入这些东西吧。