Chapter 03 超链接
网络中的每个网页都是通过超链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之一。浏览者可以通过单击网页中的某个元素，轻松地实现网页之间的转换或下载文件、收发邮件等。要实现超链接，还要了解链接路径的知识。下面对超链接进行具体的讲解。
3.1 超链接的概念与路径知识
超链接的主要作用是将物理上无序的内容组成一个有机的统一体。超链接对象上存放某个网页文件的地址，以便用户打开相应的网页文件。在浏览网页时，当用户将鼠标光标移到文字或图像上时，光标的形状或颜色会改变，这就是在提示浏览者：“此对象为链接对象”。用户只需单击这些链接对象，就可完成打开链接的网页、下载文件、打开邮件工具收发邮件等操作。
要创建链接就必须了解链接对象与链接文件间的路径。网页中的链接路径主要有以下三种。
绝对路径
绝对路径提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web 页，通常使用http://）。主要用于描述Internet上的信息资源，包括所使用的传输协议、主机地址、文件地址三部分。例如http://www.sina.com/news/default.htm就是一个绝对路径。其中，http表示http协议，www.sina.com表示www服务器，/news/default.htm表示文件地址。一般情况下，创建外部链接（从一个网站的网页链接到其他网站的网页）时用绝对路径表示。
文档相对路径
文档相对路径对于大多数 Web 站点的本地链接来说，是最适用的路径。指定文档相对路径时，省去了当前文件和被链接文件的URL中相同的部分。如果当前文件和要链接的文件在同一个文件夹内，则只需输入文件名，如zt.htm；如果当前文件和要链接的文件在同一个文件夹的某个子文件夹下，则只需输入子文件夹名/文件名，如news/zt.htm；如果当前文件和要链接的文件在同一个上层文件夹内，需输入．./文件名，如．./zt.htm。
站点根目录相对路径
站点根目录相对路径提供从站点的根文件夹到文档的路径。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹，如/news/zt.htm是文件 (zt.htm) 的站点根目录相对路径，该文件位于站点根文件夹的new子文件夹中。
通常，网站设计者使用站点根目录相对路径的链接方式，因为这样做兼容性比较好，移植性强。当移动包含站点根目录相对路径链接的文件时，无需对原有的链接进行任何修改。
根据链接对象和链接方式可将链接分为9种，它们是文本链接、图像链接、邮件链接、锚点链接、多媒体文件链接、可下载的文件链接、图像映射链接、空链接和脚本链接。下面介绍它们的用途和使用方法。
3.2 文本超链接
文本链接是以文本为链接对象的一种常用的链接方式。作为链接对象的文本带有标识性，它标识链接网页的主要内容或主题。
3.2.1 创建文本链接
创建文本链接的方法非常简单，主要是在链接文本的【属性】面板中指定链接文件。指定链接文件的方法有三种。
1．直接输入要链接文件的路径和文件名
在文档窗口中选中作为链接对象的文本，执行菜单【窗口】→【属性】命令，弹出【属性】面板，如图3-1所示。在【链接】选项的文本框中，直接输入要链接文件的路径和文件名。
图3-1
提 示
要链接到本地站点中的一个文件，可直接输入文档相对路径或站点根目录相对路径；要链接到本地站点以外的文件，可直接输入绝对路径。
2．使用浏览文件按钮
在文档窗口中选中作为链接对象的文本，在【属性】面板中单击【链接】选项右侧的【浏览文件】按钮
，弹出【选择文件】对话框。选择要链接的文件，在【相对于】选项的下拉列表中选择【文档】选项，如图3-2所示，单击【确定】按钮。
图3-2
提 示
在【相对于】选项的下拉列表中有两个选项。选择【文档】选项，表示使用文档相对路径来链接；选择【站点根目录】选项，表示使用站点根目录相对路径来链接。在【URL】选项的文本框中，可以直接输入网页的绝对路径。
一般要链接本地站点中的一个文件时，最好不要使用绝对路径，因为如果移动文件，文件内所有的绝对路径都将被打断，会造成链接错误。
3．使用指向文件图标
使用【指向文件】图标
，可以快捷地指定站点窗口内的链接文件，或指定另一个打开文件中命名锚点的链接。
在文档窗口中选中作为链接对象的文本，在【属性】面板中，拖曳【指向文件】图标
指向右侧站点窗口内的文件，如图3-3所示。松开鼠标左键，【链接】选项被更新并显示出所建立的链接。
图3-3
完成链接文件后，【属性】面板中的【目标】选项变为可用，其下拉列表中各选项的作用如下。
【_blank】选项：将链接文件加载到未命名的新浏览器窗口中。
【_parent】选项：将链接文件加载到包含该链接的父框架集或窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
【_self】选项：将链接文件加载到链接所在的同一框架或窗口中。此目标是默认的，因此通常不需要指定它。
【_top】选项：将链接文件加载到整个浏览器窗口中，并由此删除所有框架。
3.2.2 文本链接的状态
一个未被访问过的链接文字与一个被访问过的链接文字在形式上是有所区别的，以提示浏览者链接文字所指示的网页是否被看过。下面讲解文本链接状态的设置，具体操作步骤如下。
（1）执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，如图3-4所示。
图3-4
提 示
如果在【编辑】→【首选参数】对话框中勾选【使用CSS而不是HTML标签】复选框，那么【页面属性】对话框所提供的界面将会发生改变，如图3-5所示。
图3-5
（2）在对话框中设置文本的链接状态。选择【分类】选项框中的【链接】选项，单击【链接颜色】选项右侧的图标
，打开调色板，选择一种颜色，来设置链接文字的颜色。
单击【已访问链接】选项右侧的图标
，打开调色板，选择一种颜色，设置访问过的链接文字的颜色。
单击【活动链接】选项右侧的图标
，打开调色板，选择一种颜色，设置活动的链接文字的颜色。
在【下划线样式】选项的下拉列表中设置链接文字是否加下划线，如图3-6所示。
图3-6
3.3 命名锚记超链接
若网页的内容很长，为了寻找一个主题，浏览者往往需要拖动滚动条进行查看，非常不方便。Dreamweaver提供了锚点链接功能可快速定位到网页的不同位置。
锚点也叫书签，顾名思义，就是在网页中作标记。每当要在网页中查找特定主题的内容时，只需快速定位到相应的标记（锚点）处即可，这就是锚点链接。建立锚点链接要分两步实现，首先要在网页的不同主题内容处定义不同的锚点，然后在网页的开始处建立主题导航，并为不同主题导航建立定位到相应主题处的锚点链接。
1．创建锚点
（1）打开要加入锚点的网页。
（2）将光标移到某一个主题内容处。
（3）通过以下几种方法打开【命名锚记】对话框如图3-7所示。
图3-7
◎ 按快捷键【Ctrl+AIt+A】。
◎ 执行菜单【插入】→【命名锚记】命令。
◎ 单击【插入】→【常用】面板中的【命名锚记】按钮
。
在【锚记名称】选项中输入锚记名称，如“ZJ1”，然后单击【确定】按钮建立锚点标记。
（4）根据需要重复步骤（1）～（3），在不同的主题内容处建立不同的锚点标记，如图3-8所示。
图3-8
提 示
勾选菜单【查看】→【可视化助理】→【不可见元素】命令，可在文档窗口显示锚点标记。
2．建立锚点链接
（1）在网页的开始处，选择链接对象，如某主题文字。
（2）通过以下几种方法建立锚点链接。
◎ 在【属性】面板的【链接】选项中直接输入“#锚点名”，如“#ZJ2”。
◎ 在【属性】面板中，用鼠标拖动【链接】选项右侧的【指向文件】图标
，指向需要链接的锚点，如“ZJ2”锚点，如图3-9所示。
图3-9
◎ 在【文档】窗口中，选中链接对象，按住【Shift】键的同时将鼠标从链接对象拖向锚记。
（3）根据需要重复步骤（1）～（2），在网页开始处为不同的主题建立相应的锚点链接。
3.4 图像超链接
所谓图像超链接就是以图像作为链接对象。当用户单击该图像时打开链接网页或文档。建立图像超链接的操作步骤如下。
（1）在文档窗口中选择图像。
（2）在【属性】面板中，单击【链接】选项右侧的【浏览文件】按钮
，为图像添加文档相对路径的链接，具体内容参见3.2.1节。
（3）在【替代】选项中可输入替代文字。设置替代文字后，当图片不能下载时，会在图片的位置上显示替代文字；当浏览者将鼠标指向图像时也会显示替代文字。
（4）按快捷键【F12】预览网页的效果。
提 示
图像链接不像文本超级链接那样，会发生许多提示性的变化，只是当鼠标经过图像时光标呈现手形。
3.5 热区链接
前面介绍的图片链接是指一张图只能对应一个链接，但有时需要在图上创建多个链接去打开不同的网页，Dreamweaver为网站设计者提供的热区链接功能，就能解决这个问题。
创建热区链接的具体操作步骤如下。
（1）选取一张图片，在【属性】面板的【地图】选项下方选择热区创建工具，如图3-10所示。
图3-10
各工具的作用如下。
【指针热点工具】
：用于选择不同的热区。
【矩形热点工具】
：用于创建矩形热区。
【圆形热点工具】
：用于创建圆形热区。
【多边形热点工具】
：用于创建多边形热区。
（2）利用【矩形热点工具】、【圆形热点工具】、【多边形热点工具】、【指针热点工具】在图片上建立相应形状的热区。
将鼠标放在图片上，当鼠标光标变为“十”字时，在图片上拖曳出相应形状的蓝色热区。如果图片上有多个热区，可通过【指针热点工具】
，选择不同的热区，并通过热区的控制点调整热区的大小。例如，利用【矩形热点工具】
，在图3-11上建立多个矩形链接热区。
图3-11
（3）此时，对应的【属性】面板如图3-12所示。在【链接】选项的文本框中输入要链接的网页地址，在【替换】选项的文本框中输入当鼠标指向热区时所显示的替换文字，详细内容参见3.2.1节。通过热区，用户可以在图片的任何地方做一个链接。反复操作，就可以在一张图片上划分多个热区，并为每一个热区设置一个链接，从而实现在一张图片上单击鼠标链接到不同页面的效果。
图3-12
（4）按快捷键【F12】预览网页，效果如图3-13所示。
图3-13
3.6 电子邮件超链接
网页只能作为单向传播的工具，将网站的信息传送给浏览者，如果网站建立者想要接收使用者的反馈信息，最有效的方式就是让浏览者给网站发送E-mail。在网页制作中使用电子邮件超链接就可以实现。
当浏览者单击包含电子邮件超链接的网页对象时，就会打开邮件处理工具（如微软的Outlook Express），并且将收信人地址自动设置为网站建设者的邮箱地址，方便浏览者给网站发送反馈信息。
1．利用属性面板建立电子邮件超链接
（1）在文档窗口中选择对象，一般是文字，如“请联系我们”。
（2）在【链接】选项的文本框中输入“mailto：地址”。例如，网站管理者的E-mail地址是wmaster@taste.net，则在【链接】选项的文本框中输入“mailto:wmaster@taste.net”，如图3-14所示。
图3-14
2．利用电子邮件链接对话框建立电子邮件超链接
（1）在文档窗口中选择需要添加电子邮件链接的网页对象。
（2）通过以下几种方法打开【电子邮件链接】对话框。
◎ 执行菜单【插入】→【电子邮件链接】命令 。
◎ 单击【插入】→【常用】面板中的【电子邮件链接】工具
。
在【文本】选项的文本框中输入要在网页中显示的链接文字，并在【E-Mail】选项的文本框中输入完整的邮箱地址，如图3-15所示。
图3-15
（3）单击【确定】按钮，完成电子邮件链接的创建。
3.7 下载文件链接
浏览网站的目的往往是查找并下载资料，下载文件可利用下载文件链接来实现。建立下载文件链接的步骤如同创建文字链接，区别在于所链接的文件不是网页文件而是其他文件，如．exe、.Zip等文件。
建立下载文件链接的具体操作步骤如下。
（1）在文档窗口中选择需添加下载文件链接的网页对象。
（2）在【链接】选项的文本框中指定链接文件，详细内容参见3.2.1节。
（3）按快捷键【F12】预览网页。
3.8 鼠标经过图像链接
鼠标经过图像是一种常用的互动技术，当鼠标经过图像时，图像会随之发生变化。一般鼠标经过图像效果由两张大小相等的图像组成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标经过时更换的另一张图像。鼠标经过图像经常应用于网页中的按钮上。
建立鼠标经过图像的具体操作步骤如下。
（1）在文档窗口中将光标放置在需要添加图像的位置。
（2）通过以下几种方法打开【插入鼠标经过图像】对话框，如图3-16所示。
图3-16
◎ 执行菜单【插入】→【图像对象】→【鼠标经过图像】命令。
◎ 在【插入】→【常用】面板中，单击【图像】展开式工具按钮
，选择【鼠标经过图像】选项
。
【插入鼠标经过图像】对话框中各选项的作用如下。
【图像名称】选项：设置鼠标经过图像对象时的名称。
【原始图像】选项：设置载入网页时显示的图像文件的路径。
【鼠标经过图像】选项：设置在鼠标指针滑过原始图像时显示的图像文件的路径。
【预载鼠标经过图像】选项：若希望图像预先载入浏览器的缓存中，以便用户将鼠标指针滑过图像时不发生延迟，则勾选此复选框。
【替换文本】选项：设置替换文本的内容。设置后，在浏览器中当图片不能下载时，会在图片位置上显示替代文字；当浏览者将鼠标指向图像时会显示替代文字。
【按下时，前往的 URL】选项：设置跳转网页文件的路径，当浏览者单击图像时打开此网页。
（3）在对话框中按照需要设置选项，然后单击【确定】按钮完成设置，按快捷键【F12】预览网页。
3.9 添加文本链接
案例效果：Ch03\效果\文本链接和锚记链接\ index.htm。
制作要点：通过页面属性对话框改变链接文字的颜色，使用锚记链接文本。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch03\素材\文本链接和锚记链接\index.htm”文件，如图3-17所示。在左侧的目录表格中选中文字“鲜嫩珍珠鸡腿肉”，如图3-18所示。
图3-17
图3-18
02执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，如图3-19所示。选择【分类】选项框中的【链接】选项，将【链接颜色】选项设置为“黑色（#000000）”, 【变换图像链接】选项设置为“绿色（#99C C33）”, 【已访问链接】选项设置为“黑色（#000000）”,【活动链接】选项设置为“蓝色（#66FFFF）”，在【下划线样式】选项的下拉列表中选择【始终无下划线】，单击【确定】按钮，完成设置。
图3-19
03 保持文字的选取状态，在【属性】面板【链接】选项的文本框中输入"#a"，按【Enter】键，如图3-20所示。
图3-20
04将鼠标光标置入到文档“鲜嫩珍珠鸡腿肉”之前，如图3-21所示。单击【插入】→【常用】面板中的【命名锚记】按钮
，弹出【命名锚记】对话框，如图3-22所示。在【锚记名称】选项中输入“a”，单击【确定】按钮，效果如图3-23所示。
图3-21
图3-22
图3-23
05使用相同的方法，为其他文字制作锚记链接。
06保存并预览网页，单击链接文字，如图3-24所示，页面会自动跳转到链接文字所链接的段落上，如图3-25所示。
图3-24
图3-25
3.10 添加图像链接
案例效果：Ch03\效果\图像链接\index.htm。
制作要点：通过属性面板中的浏览文件按钮为图像加入链接。
01按快捷键【Ctrl+O】，打开光盘中的“Ch03\素材\图像链接\index.htm”文件，如图3-26所示。选择需要链接的图片，如图3-27所示。
图3-26
图3-27
02在【属性】面板中单击【链接】选项右侧的【浏览文件】按钮
，弹出【选择文件】对话框，如图3-28所示。在光盘目录下的“Ch03\素材\图像链接\image”文件夹中选择图片“11s.jpg”，单击【确定】按钮，完成链接设置，【属性】面板如图3-29所示。
图3-28
图3-29
03保存并预览网页，单击链接图片，如图3-30所示，弹出链接窗口，如图3-31所示。
图3-30
图3-31
3.11 添加电子邮件超链接
案例效果：Ch03\效果\电子邮件链接\index.htm。
制作要点：使用电子邮件链接按钮为文字加入邮件链接。
01按快捷键【Ctrl+O】，打开光盘中的“Ch03\素材\电子邮件链接\index.htm”文件，如图3-32所示。在文档窗口中选中需要添加邮件链接的文字，如图3-33所示。
图3-32
图3-33
02 单击【插入】→【常用】面板中的【电子邮件链接】按钮
，弹出【电子邮件链接】对话框，如图3-34所示。在【E-Mail】对话框中输入完整的邮箱地址，单击【确定】按钮，电子邮件链接设置完成。
图3-34
03 保存并预览网页，单击链接文字，如图3-35所示，弹出电子邮件的链接页面，如图3-36所示。
图3-35
图3-36
3.12 添加下载文件链接
案例效果：Ch03\效果\下载文件链接\index.htm。
制作要点：应用链接命令为网站下载文件加入链接。
01按快捷键【Ctrl+O】，打开光盘中的“Ch03\素材\下载文件链接\index.htm”文件，如图3-37所示。
图3-37
02在页面的左下方选中文字“瑞星下载”，如图3-38所示。在【属性】面板中单击【链接】选项右侧的【浏览文件】按钮
，弹出【选择文件】对话框，如图3-39所示。在光盘目录下的“Ch03\素材\下载文件链接\image”文件夹中选择图片“瑞星下载”，单击【确定】按钮，为文字添加链接。
图3-38
图3-39
提 示
所链接的文件是扩展名为“rar”的压缩文件，而下载链接的创建方法与普通链接的创建方法是一样的。
03 按快捷键【F12】预览网页，单击文字“瑞星下载”，弹出【文件下载】对话框，如图3-40所示，单击【保存】按钮，将下载的文件保存到本地计算机中。
图3-40
3.13 插入轮换图像
案例效果：Ch03\效果\轮换图像\index.htm。
制作要点：使用鼠标经过图像按钮制作轮换图像效果。
01按快捷键【Ctrl+O】，打开光盘中的“Ch03\素材\轮换图像\index.htm”文件，如图3-41所示。
图3-41
02 将鼠标光标置入到右下方的空白单元格中，如图3-42所示。
图3-42
03在【插入】→【常用】面板中，单击【图像】展开式工具按钮
，选择【鼠标经过图像】按钮
，弹出【插入鼠标经过图像】对话框，如图3-43所示。单击【原始图像】选项右侧的【浏览】按钮，弹出【Original Image】对话框，选择光盘目录下“Ch03\素材\轮换图像\image”文件夹中的“01.jpg”，单击【确定】按钮，完成设置。使用相同的方法，设置【鼠标经过图像】选项的连接图像“02.jpg”，单击【确定】按钮，完成设置，效果如图3-44所示。
图3-43
图3-44
04 按快捷键【F12】预览轮换图像，效果如图3-45所示。当鼠标经过图片上方时，图片切换为另一幅图片，效果如图3-46所示。
图3-45
图3-46
小结
本章介绍了网页中各种与链接有关的元素，如文本超级链接、图像超级链接、电子邮件链接、锚点、下载文件链接等，并在此基础上讲述了鼠标指针经过图像功能。