第二十二天：使用真正的清單（或以適當的方法偽造）

假設妳有這三個鏈結的網誌目錄： Slashdot 、 The Register 和 dive into mark ；可是妳不想要用醜陋的黑色項目符號來條列，而想要在每個鏈結前加上華麗無比的圖片。這時候妳能怎麼辦？最常見的解決方法是在每個鏈結前用上 <img> 標籤。這不但可行，而且還可以在每個圖片加上適當的 alt 來增加親和力。

然而妳還可以更進一步，使用真正的清單標記（ <ul> 和 <li> 標籤），再用 CSS 把醜陋的黑色項目符號換成圖片。無論妳在不在乎這種學術熱誠，這個技術不但是「正確的方法」，還能夠帶來額外的親和力。

我將在一分鐘內展示這兩種技術。

誰因此獲益？

  1. Marcus 從中獲益了。因為就跟我們昨天所看到的一樣， Lynx 會在任何圖片未包含有 alt 屬性時，顯示出這些圖片的檔名。

  2. Michael 從中獲益了。因為 Links 從不顯示圖片；但是在預設的情況下，當任何圖片未包含有 alt 屬性時，它也不會顯示任何資訊。昨天當我們想要忽略卡位圖片時，倒可以接受這個結果，但今天我們還希望有些圖片，能夠用來指出那是一份清單，所以我們得用上 alt 文字。

    同樣地，當 Michael 把瀏覽器的圖形選項關閉後， Opera 會在原本出現「缺少圖形」的區塊顯示 alt 文字。如果妳用了進階技術的話， Opera 還可以有更傑出的表現：它會恢復顯示那些醜陋的黑色項目符號，而不是顯示「缺少圖形」的區塊。

  3. Jackie 從中受益了。因為就跟昨天我們所看到的一樣， JAWS 會在任何圖片未包含有 alt 屬性時，念出這些圖片的檔名；最後鏈結就會失落於不規則檔名汪洋之中。 Jackie 可能聽到像這樣的東西：

    fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark

    在 alt 文字裡加上星號能有莫大的幫助。 JAWS 會知道這個圖片是用來當作清單前面的符號用的，於是就不唸出來。然而 Home Page Reader 還是會明確地把星號唸出來，所以使用者就會聽到像這樣的東西：

    asterisk link slashdot, asterisk link the register, asterisk link dive into mark

    使用真正的清單標記纔是最好的方法。因為所有的視覺呈現都會在 CSS 描述理，完全不會打斷妳的頁面，同時 JAWS 和 Home Page Reader 也都會唸出妳的清單當作清單來念。現在聽起來就會像這樣：

    link slashdot, link the register, link dive into mark

怎麼做

如果妳有個網誌目錄，看起來像這樣：

<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

妳應當在清單項目圖片裡提供 alt 屬性。在 alt 文字裡用上星號，模擬成用真的清單標記時所會看到的樣子。（為了要避免在視覺性瀏覽器上跑出工具提示，妳也應該提供空的 title 屬性）。

<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

怎麼做：進階版

進階（也比較好）的技術是使用 CSS 來定義妳的清單項目圖片。

<style type="text/css">
ul.blogroll {
  list-style: url(/images/fancydot.gif) disc;
}
</style>

然後在妳的模版裡，就可以用真的清單標記來列出清單：

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

結果：

  • Modern browsers will display the image as the list bullet.
  • Browsers with images turned off with display the boring black bullet.
  • Netscape 4 will always display the boring black bullet.
  • Text-only browsers always ignore CSS, so they will display the list however they normally display lists (usually rendering the list bullet as an asterisk).

附註：不加項目符號的清單

要建立前面不帶圖片的鏈結清單，還有一個常用的方法，就是把鏈結堆積起來，可能再設定一個向右對齊，就像這樣：

<div align="right">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="http://diveintomark.org/">dive into mark</a><br>
</div>

這也可以用 CSS 和真的清單標記來辦到：

<style type="text/css">
ul.blogroll {
  list-style: none;
  text-align: right;
}
</style>

或者，如果妳想讓鏈結靠左對齊的話，可以改成這樣：

<style type="text/css">
ul.blogroll {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

無論如何，清單標記都不會跟前一個例子裡有所不同：

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

「 list-style: none 」這一列會讓視覺性瀏覽器裡不要出現黑色項目符號。對所有的瀏覽器，甚至是 Netscape 4 來說，這都會有效。在此感謝 Tobias Schmidt 提醒我可以用這個訣竅。

延伸閱讀

 
<< 第二十一天：忽略卡位圖片 | 目錄 | 第二十三天：提供能取代圖片的文字 >>