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

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

但是，如果你挖掘过你的 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

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

谁因此获益？

怎么做

延伸阅读

站内连结