第二十七天：使用真正的标头

想像一下你的网站轮廓：最顶层标出了网站的名称；而在你的网站上，列出了这几天的文章，所以第二层标明了日期叙述：「 Tuesday, July 16, 2002 」之类的。因为每一天你都写了许多文章，所以每篇文章都该有自己的标题。因此第三层就会标明文章的标题。

现在照著刚刚的轮廓，用真的 <h1> 、 <h2> 和 <h3> 等卷标加以标记；屏幕朗读软体必须靠这些卷标来解读你的页面结构。你的网页当然有结构，但是若没有适当的标头卷标，屏幕朗读软体就没办法找到他们了。我马上就会展示给你看，要如何用 CSS 让你的标头看起来跟你现在用 <font> 怪物做出来的一样。

谁因此获益？

Jackie 从中获益了。因为当 Jackie 按下某个页面后， JAWS 就会念出这个页面里链结跟标头的数量。此时 Jackie 可以按下 INSERT+F6 来听到页面上所有的标头；或是按下 CTRL+INSERT+ENTER 来跳到下一个标头的地方。
Michael 从中获益了。因为在 Opera 浏览器里，他可以按下 S 跳到下一个标头、或者用 W 跳到前一个。
Google 从中获益了。因为 Google 欣赏结构良好的页面，并给予标头里的关键词较高的评比（又是另一个撰写好文章标题的原因）。

怎么做： Movable Type

定义站台标识的样式。在你的样式表模版 (styles-sites.css) 里，加入以下这几列：

h1, h2, h3 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 20px;
  font-weight: normal;
}

/*/*/a{}
h1 {font-size: 100%}
/* */

用 <h1> 卷标定义你的站台标识。在你的四个主要模版（主索引、分类汇整、按时汇整、单篇汇整）里，搜寻这些东西：
```
<div id="banner">
<$MTBlogName$><br />
```
然后把他们代换成这样：
```
<div id="banner">
<h1><$MTBlogName$></h1>
```
用 <h2> 卷标定义日期标头。我们已经定义了一个用于此的样式级别了，所以无须再修改样式表，而祇需要修改卷标就好。在你的四个主要样板中，搜寻这些东西：
```
<div class="date"> 
<$MTEntryDate format="%B %d, %Y"$>
</div>
```
然后把他们代换成这样：
```
<h2 class="date"> 
<$MTEntryDate format="%B %d, %Y"$>
</h2>
```
用 <h3> 卷标定义你的文章标题。同样地祇需要修改卷标就好，而不用修改样式表。在你的四个主要样板中，搜寻这些东西：

<span class="title"><$MTEntryTitle$></span>

然后把他们代换成这样：

<h3 class="title"><$MTEntryTitle$></h3>

怎么做： Radio

定义你的标头样式。预设的 Radio 布景主题并没有使用任何的真实标头卷标，所以我们得先在样式表里自己定义出来（这其实得量身订做才行；不过这里的范例应该可以让你的页面在视觉性浏览器里看起来跟以前一样才对）。

事实上在我们开始之前，请先在你的 Home Page Template 里搜寻「 h2 { 」。如果你找到像这样的规则的话，请把它移掉。这个规则实际上没有在任何地方被用到，却会妨碍到我们：

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold }

好，现在在你的 Home Page Template 的 <style> 区段中任何位置，加入这些样式：

h1, h2 {
  margin: 0;
  padding: 0;
}

h1 {font-size: 24px}
h2 {font-size: 13px}

/*/*/a{}
h1 {
  font-size: large;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-large;
}
html>body h1 {
  font-size: x-large;
}
h2 {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body h2 {
  font-size: small;
}
/* */

请注意我们在支持相对字型尺寸的浏览器里使用相对字型，而在 Netscape 4 里则使用绝对字型。这技术看起来应该很眼熟，因为我们昨天才刚做过一样的事情。

定义站台名称的标头。在你的 Home Page Template 中搜寻「 <%siteName%> 」，并寻找像这样的某一列：

<font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

然后把他们代换成这样：

<h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>
定义日期标头。在你的 Day Template 中搜寻「 <%longDate%> 」，并寻找像这样的某一列：

<b><%longDate%></b>

然后把他们代换成这样：

<h2><%longDate%></h2>

Dive Into Accessibility

第二十七天：使用真正的标头

谁因此获益？

怎么做： Movable Type

怎么做： Radio

延伸阅读

站内连结