6.5　创建其他类型的链接

并非只能创建指向其他网页的链接，其实可以创建指向任何URL的链接——RSS源、希望访问者可以下载的文件、电子邮件，等等（参见图6.5.1）。

创建其他类型链接的步骤

  • 输入。

  • 输入URL。

  • 对于指向万维网上任何文件（包括图像、ZIP文件、程序、PDF、Excel电子表格等）的链接，输入http://www.site.com/path/file.ext，其中www.site.com是服务器的名称，path/file.ext是目标文件（含扩展名）的路径。

  • 输入">。

  • 输入链接的标签。标签是默认以下划线和蓝色突出显示的文本，当用户激活它时，会将访问者带到第2步中引用的URL。也可以添加一个img元素替代文本（或同文本一起）作为标签（参见图6.5.1以及本节末尾的“将缩略图链接到图像”）。

提示　如果链接指向的文件是浏览器不知道如何处理的类型（例如Excel文件），浏览器将试着打开一个辅助程序来查看这个文件，或试着将它下载到访问者的磁盘上。

　

提示　对供访问者下载的大文件和文件组进行压缩是个好办法。例如，一套保存为PSD文件的Photoshop模板。在网上搜索“ZIP and RAR”，查找创建和打开使用这些流行的压缩格式的文件存档的工具。

  1. ...
  2. <body>
  3.  
  4. <h1>Other Types of Links</h1>
  5.  
  6. <p>There are lots of different kinds of links that you can create on a Web page. More precisely, there are a lot of different files you can link to on your Web page.</p>
  7.  
  8. <p>You can create links directly to <a href="img/blueflax.jpg">a photo</a> or even make links out of photos.</p>
  9.  
  10. <p>For example, here are Cookie and Woody again, except this time they are linked to other pages. <a href="cookie.html" title="All about Cookie"><img src="img/cookiefora.jpg" width="143" height="131" alt="Cookie" /></a> <a href="woody.html" title="All about Woody"><img src="img/ woodygran.jpg" width="202" height="131" alt="Woody" /></a></p>
  11.  
  12. <p>You can link directly to <a href="http://www.sarahsnotecards.com/catalunyalive/segadors.mov" rel="external">a video</a> file, too, though it's usually better to link to a page with the video embedded in it, such as with the <abbr title="Hypertext Markup Language revision 5">HTML5 </abbr> <code>video</code> element.</p>
  13.  
  14. <p>Although you can make a link to <a href="mailto:someone@somedomain.com">someone's email addresss</a> with the <code>mailto:</code> protocol, I don't recommend it, since spambots pick those up and then bombard them with spam. It's too bad, because they are so convenient. If you activate the link, it opens your email program. It's probably better to offer your email address in a descriptive way, like "someone at somedomain," although that isn't always foolproof either.</p>
  15.  
  16. <body>
  17. </html>

图6.5.1　可以创建指向各种类型URL的链接。这个页面包含五个链接，但两个包围图像的链接可能并不对所有浏览器可见（参见图6.5.2）。（这个例子还频繁使用abbr元素标记缩写词，以及指示内容为代码的code元素。这两个元素均在第4章中讲到过。）

6.5　创建其他类型的链接 - 图1

图6.5.2　无论链接通向哪里，它们在浏览器中的默认样式都是一样的，除非其中包含图像（有的浏览器在图像链接周围添加边框，有的则不会）。注意，我尽量创建与文本主体混在一起的标签，而不是使用“点击此处”（Click me）作为标签

提示　尽管可以链接到PDF和其他非HTML文档（Word、Excel等），但应尽量避免这样做。相反，应链接到包含有关信息的HTML页面。PDF可能要花更长的时间加载，而且有的浏览器和系统（特别是旧的浏览器和系统）在尝试显示它们的时候会变得很慢。当PDF是唯一的选择时，要让用户知道链接指向的是PDF而不是另一个HTML页面，以免让他们感到意外（如果让用户进入耗时的下载，他们是不会领情的）。这条建议对其他非HTML文档也适用。显示给用户的信息可以是简单地用括号包围的文件类型和大小，也可以显示一个图标。例如（不包含图标）：Q2 Sales Report (PDF, 725kb)。还可以在链接中包含title属性（如title="Opens a PDF"），特别是在当你希望把括号说明放在链接外的时候。

　

提示　如果要“创建指向iTunes Store、App Store、iBookstore和Mac App Store上内容的链接”（链接如下），可以使用苹果公司的Link Maker（http://itunes.apple.com/linkmaker）生成URL放在HTML里。如果你是联盟成员（www.apple.com/itunes/affiliates/），人们通过你的链接购买物品时，苹果公司会为你支付佣金。

　

将缩略图链接到图像

你肯定访问过显示几个缩略图（图像的微缩版本）的相册页面，其中缩略图链接到大一些的图像。这样就可以一次看到很多图片，让访问者选择要查看全尺寸版本的图像。

实现其基本版本类似于将Cookie和Woody图像链接到其他页面的示例代码（参见图6.5.1）。这些页面中的每一个都包含一个全尺寸照片。（也可以在单独一个动态页面中实现，但这是超出HTML能力的高级用法。）

注意不要让任何给定页面上的缩略图数量太多。它们可能很小，但每个缩略图都会生成对Web服务器的独立请求，合在一起就会让页面变慢。没有规则规定一个页面放多少缩略图是合适的。这部分取决于页面加载的其他资源的数量和大小，也取决于网站的目标受众。例如，移动设备加载资源通常要慢一些。

因此，如果你有很多缩略图，就要考虑将它们分入多个页面。通常，每页20～30个缩略图是比较合理的，同时也要再次对上述因素进行考虑。可以对页面进行测试，再确定最合适的数量。

最后，推荐使用无序列表（ul，将在第15章讲到）对缩略图列表进行标记。