2.6 在网页中应用超链接
超链接构成了网页与网页、网站与网站之间的桥梁。访问者可以通过超链接从一个网页进入另一个网页，从一个网站进入另一个网站，从而充分体验到网上冲浪的无限乐趣。
2.6.1 超链接概述
超链接是指从一个网页指向一个目标文档的连接关系，这个目标文档可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个Word文档或一个Flash影片文件等，甚至可以是一个应用程序。目标文档与源网页可以位于同一个网站中，也可以分别位于不同网站中。
在一个网页中用做超链接的对象，可以是一段文本或者是一个图片，也可以是一个Flash文本或Flash按钮等。当访问者单击包含超链接的文本或图片时，将在浏览器窗口中打开目标文档，并根据文档类型来显示或运行目标文档。
2.6.2 链接路径类型
链接路径是指作为链接起点的文档到作为链接目标的文档之间的文件路径，分为绝对路径、文档相对路径和站点根目录相对路径。
1.绝对路径
绝对路径给出要链接的目标文档的完整URL，而且包括访问该文档所使用的协议，对于网页通常使用http://。例如，http://localhost/ajax/chap02/page2-11.html就是一个绝对路径。如果要链接到位于其他Web服务器上的文档，就必须使用绝对路径。
2.文档相对路径
文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。使用文档相对路径时，通常有以下几种情况。
● 若要链接的目标文档与当前文档位于同一文件夹中，可直接输入文件名。
● 若要链接的目标文档位于子文件夹中，则应提供子文件夹的名称，后跟正斜杠“/”，然后输入文件名。
● 若要链接的目标文件位于父文件夹中，可在文件名前添加“../”，其中“..”表示文件夹层次结构中向上提升一级。例如，../media/picViewer.swf。
3.站点相对路径
站点相对路径提供从站点的根文件夹到文档的路径。站点根目录相对路径以一个斜线符号（/）开始，该符号表示当前站点的根文件夹。例如，/ajax/media/picViewer.swf。
在Dreamweaver CS3中创建链接时，将根据创建站点时设置的【链接相对于】选项生成适当类型的链接路径。默认设置是使用文档相对路径创建链接。若选择了【站点根目录】选项更改了路径设置，则使用站点相对路径。不论使用哪种类型的路径，查看网页时浏览器都会将链接路径自动转换为绝对路径。
2.6.3 在网页中创建超链接
在HTML语言中，可以使用<a>标记在网页中创建超链接，语法如下：
<a href="URL" target="target_window_or_frame" title="string">文本或图像等</a>
a元素是一个行内元素。除通用属性外，a元素具有以下属性。
● href属性：指定要连接的目标资源的URL地址，可以使用绝对路径、文档相对路径或站点相对路径。
● target属性：指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。
● title属性：指定指向链接时所显示的提示文本。
在Dreamweaver CS3中，创建超链接有多种方法。下面介绍如何使用属性检查器来创建各种类型的超链接。
1 在页面上选择文本或图像。
2 在属性检查器中，通过执行下列操作之一指定链接目标的URL（href属性），如图2-68所示。
● 若要链接到站点内的文档，可以在【链接】文本框中输入文档相对路径或站点相对路径，或者单击【链接】文本框右侧的文件夹图标 ，然后选择要链接的文件。
● 若要链接到站点外的文档，可在【链接】文本框中输入包含协议的绝对路径，例如：http://www.microsoft.com/china/community/default.mspx。
图2-68 在【链接】框中指定目标文件的URL
● 若要创建命名锚记链接，可在【链接】文本框中输入“path#anchor_name”，其中path表示目标文档的路径，anchor_name表示用<a>标记定义的锚记的名称（由name属性指定）。当命名锚记位于当前文档时，path可以省略。
● 若要创建电子邮件链接，可在【链接】文本框中输入“mailto:”，后面跟上电子邮件地址。若要指定邮件的主题和内容，可在电子邮件地址后面添加“?subject=主题&body=内容”。
● 若要创建空链接，可在【链接】文本框中输入“#”、“javascript:;”或“vbscript:”。
● 若要创建脚本链接，可在【链接】文本框中键入“javascript:”，并在后面附上JavaScript代码或函数调用，例如输入“javascript:window.close();”。
3 从【目标】列表框中选择打开目标文档的位置。当前文档中所有已命名框架的名称都显示在此列表中。若指定的框架不存在，当在浏览器中打开文档时，所链接的页面载入一个新窗口，该窗口使用所指定的名称。也可以选用下列保留目标名称：
● 若要把目标文档载入一个未命名的新浏览器窗口中，可选择【_blank】。
● 若要把目标文档载入含有该链接的框架的父框架集或父窗口中，可选择【_parent】。如果包含链接的框架不是嵌套的，则目标文档加载到整个浏览器窗口中。
● 若要把目标文档载入该链接所在的同一框架或窗口中，可选择【_self】。
● 若要把目标文档载入整个浏览器窗口中（这将删除所有框架），可选择【_top】。
4 若要设置a元素的更多属性，可利用标签选择器选取<a>标记，然后在标签检查器中对该元素的属性进行设置，如图2-69所示。
例2-21 在网页中创建各种类型的链接，网页效果如图2-70所示。
图2-69 利用标签检查器设置a元素的属性
图2-70 创建链接示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-21.html，把网页标题设置为“创建链接示例”。
2 创建图像链接。在页面上插入一个图像，并利用属性检查器创建基于该图像的超链接，如图2-71所示。
图2-71 利用属性检查器设置图像链接
● 在【链接】框中，输入“http://www.broadview.com.cn”。
● 在【替换】框中，输入“博文视点有限公司”。
● 从【目标】列表中，选择【_blank】。
● 在【边框】框中，输入“0”。
3 创建指向站点内网页的链接。输入“欣赏视频”并选择这4个汉字，在属性检查器的【链接】框中输入“page2-18.html”，从【目标】列表中选择【_blank】；利用标签检查器将a元素的title属性设置为“欣赏一段精彩视频”。
4 创建指向站点内Flash动画的链接。输入“欣赏Flash动画”并选择这些文字，在属性检查器的【链接】框中输入“../media/benpao.swf”，从【目标】列表中选择【_blank】。
5 创建指向站点外网页的链接。输入“关于我们”并选择这4个汉字，在属性检查器的【链接】框中输入“http://www.broadview.com.cn/about.aspx”，从【目标】列表中选择【_blank】。
6 创建邮件链接。输入“联系我们”并选择这4个汉字，在属性检查器的【链接】框中输入“mailto:editor@broadview.com.cn”。
7 创建脚本链接。输入“关闭窗口”并选择这4个汉字，在属性检查器的【链接】框中输入“javascript:window.close();”。当访问者单击该链接时，会弹出一个对话框，提示是否关闭窗口，单击【是】按钮，即可关闭浏览器窗口。
8 切换到代码视图，可以看到在网页正文部分生成了以下HTML代码：
<div align="center">
<p><a href="http://www.broadview.com.cn" target="_blank">
<img src="../images/broadview.gif" alt="博文视点有限公司" width="458" border="0" /></a>
</p><br />
<p><a href="page2-18.html" target="_blank" title="欣赏一段精彩视频">欣赏视频</a>
<a href="../media/benpao.swf" target="_blank">欣赏Flash动画/a>
<a href="http://www.broadview.com.cn/about.aspx" target="_blank">关于我们</a>
<a href="mailto:editor@broadview.com.cn">联系我们</a>
<a href="javascript:window.close();">关闭窗口</a>
</p>
</div>
9 在浏览器中打开网页，并对网页上的每个链接进行测试。