第二十二天：使用真正的清单（或以适当的方法伪造）

假设你有这三个链结的网志目录： 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 提醒我可以用这个诀窍。

延伸阅读

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