第十八天：在月历中加上真的标题

「可是，」我听到你在哀嚎了，「我的月历已经有个标题了啊！看那边，明明在上面就有年份跟月份了呀，我甚至还用了粗体字耶。」

但是如果你有挖掘过你的 HTML 源码的话，你就会发现你的月历并没有真的标题。它可能祇是一个表格的 <td> 格子，占满著整个第一列，然后用了 CSS 规则来让他看起来是粗体字。相较之下，如果你用了真正的 <caption> 卷标的话，反而简单多了。这样不但在模版里读起来更简单，也可以为你的页面多省下几个位元，在视觉性浏览器里看起来效果也相同，同时还更具亲和力。

谁因此获益？

Marcus 从中获益了。因为 Lynx 显示标题时，会在前面再加上「 CAPTION: 」，让他明白这一列是标题，而不是字段标头或表格数据。
Jackie 间接地获益了。因为用了真正的 <caption> 卷标能够奠定使用真正表格标头的良好基础；我们将在明天的诀窍中讨论到 Jackie 到底能从中获益到些甚么。

怎么做

这个诀窍祇能够适用于支持月历的出版工具（所以 Blogger 就被排除掉了），同时这个出版工具还要能让你自订产生月历的 HTML 源码（所以 Manila 也被排除掉了）。

在 Movable Type 中，你的主索引模版里可能有个用来当月历的表格，就像这一个（搜寻「 calendarhead 」就差不多能找到它了）：

<table border="0" cellspacing="4" cellpadding="0"> <tr> <td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td> </tr> <tr> <td align="center"><span class="calendar">Sun</span></td> ...

留著这个表格卷标，但是把表格中第一个 <tr> 列全部代换成真正的 <caption> 卷标，就像这样：

<table border="0" cellspacing="4" cellpadding="0"> <caption class="calendarhead"><$MTDate format="%B %Y"$></caption> <tr> <td align="center"><span class="calendar">Sun</span></td> ...

剩下来的部分留著别动；我们明天再来加以修改。

<caption> 卷标里的 class 属性乃是选用性的；我在这里把他留著，因为这样就可以拿来取代掉预设的 Movable Type 样本，继续用 CSS 规则来让年份及月份采用粗体字。像这样子用 <caption> 卷标之后，你的页面看起来仍旧会跟以前一模一样。

在 Greymatter 中的状况仍旧相同，但是模版卷标却不同：

<caption>{{monthword}} {{yearyear}}</caption>

同样地，祇要你这么做，你就可以用样式表来改变 caption 的视觉样式。

在 Radio 中，整个过程将会比较复杂，但并非不可能（我得感谢 Tony Bowden 提供了这些指引）。

在 Radio 里，开启实际的 Radio 应用程序。如果是在 Windows 的话，从系统列里在小 Radio 图标上按鼠标右键，然后选择「 Open Radio 」。
在「 Tools 」选单里，选择「 Developers 」，然后选「 Jump... 」 (Control+J) 。跳至「 system.verbs.builtins.radio.weblog.drawCalendar 」（不含引号）。
现在到「 Edit 」选单里，选「 Find and Replace 」，然后选「 Find... 」 (Control+F) 并且寻找「 hCalendarTable 」。这样应该会展现出绘制启始 <table> 卷标和假月历标题的源码区块。
把这个区块中最后一列（在 <tr> 卷标中写著 monthYearString 的那一列）改成这样：

add ("<caption>" + monthYearString + "</caption>")
关闭窗口。你会被询问到是否要编译这个变更，请回答是。
如果你想要的话，还可以设定标题的样式。到你的 Home Page Template （在 Prefs 页面中）并且新增一个给 caption 用的样式。以下这个是我自己在用的；在 <style> 区段中原本包含这些东西：
```
body, td, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}
```
现在则是：
```
body, td, p, caption {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }

caption {
  text-align: center;
  font-weight: bold;
}
```

Dive Into Accessibility

第十八天：在月历中加上真的标题

谁因此获益？

怎么做

延伸阅读

站内连结