第二十七天：使用真正的標頭

想像一下妳的網站輪廓：最頂層標出了網站的名稱；而在妳的網站上，列出了這幾天的文章，所以第二層標明了日期敘述：「 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

延伸閱讀

站內連結