第十天:先呈現妳的主要內容

純粹祇用 CSS 來處理版面的主要好處之一,是可以輕鬆的重新編排 HTML 源碼中各元件的順序,而不影響到實際的版面。因此當其它資料還在載入時,主要內容早就已經顯示出來了。我發現許多網站仍在使用表格來製作版面,所以我為妳撰寫了這個訣竅。

如果妳用表格設計版面,對 MarcusJackie 等失明的使用者來說,放在左側的瀏覽列會比主要內容更早顯示出來。我不知道怎麼形容隨之而來的問題,不過妳可以自己看看:

  1. 用表格製作的版面
  2. 修改過的版面,這次內文在前面。在圖形介面的瀏覽器上看起來應該一樣,但是在 Lynx 上有著明顯的差異。
  3. 原本的版面在 Lynx 下的效果
  4. 修改過的版面在 Lynx 下的效果。會先顯示主要內文,然後才是導覽列。

妳不需要從頭規劃整個模版來避免這個問題。我們可以用一些(相對之下)較簡單的技術來讓主要內文先顯示出來,並且讓導覽列維持在左側。我們稱這些技術叫「表格秘訣」。

誰因此獲益?

  1. Marcus 從中獲益了。就跟上面的範例所展示的一樣, Lynx 會依照 HTML 源碼的順序顯示內容。這代表 Marcus 每次瀏覽妳的網頁時都必須要捲動螢幕來跳過導覽列。捲頁爛透了。
  2. Jackie 從中獲益了。因為 JAWS 跟 Lynx 一樣,都會依照 HTML 源碼的順序顯示內容;不過 JAWS 的情況會更糟,因為 Jackie 必須要坐著等 JAWS 唸完整個導覽列後才能聽到真正的內容,而且還沒有保證能直接跳到主要內容的方法。(明天我們就會談到這個問題。)
  3. Google 從中獲益了。越接近頂端的內容,Google會給予越多的加權。這裡的頂端不是指看起來的,而是指 HTML 源碼的頂端。實際上許多瞭解這個技術的人,都參與著搜尋引擎最佳化的研究;對他們來說,網站親和力反倒是其次了。

怎麼做

Lynx Viewer 檢查妳的網站,確定每天的文章都會比導覽列先顯示。Movable Type 的預設模版就已經是正確的了;如果妳用的是預設的模版,大概就不需要再做任何事情了;不過還是用 Lynx Viewer 試試看吧,妳會因此對這個議題有更深一層的瞭解。

如果妳使用的是 Radio 的預設模版,也許就需要修改表格,讓主要內文放在前面了。這沒有辦法用複製/貼上的方式做到;妳必須鑽研自己的模版,並且檢視表格的架構。簡單版面修改過的版面展示了基本的技術。

用表格製作的版面:

<table>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigation bar ...
  </td>
  <td valign="top" align="left">
    ... main content ...
  </td>
</tr>
</table>

我們做了這樣的修改:

<table>
<tr>
  <!-- spacer GIF in upper-left cell -->
  <td><img src="images/1.gif" width="1" height="1" alt=""></td>
  <!-- main content cell first, with rowspan=2 -->
  <td valign="top" align="left" rowspan="2">
    ... main content ...
  </td>
</tr>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigation bar ...
  </td>
</tr>
</table>

延伸閱讀