第十八天：在月曆中加上真的標題

「可是，」我聽到妳在哀嚎了，「我的月曆已經有個標題了啊！看那邊，明明在上面就有年份跟月份了呀，我甚至還用了粗體字耶。」

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

第十八天：在月曆中加上真的標題

誰因此獲益？

怎麼做

延伸閱讀

站內連結