级链接 超级链接是的核心技术，通过超级链接将各个独立的网页文件及其他资源链接起来，形成一个网络。
网站往往由多个页面构成，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。
为了建立起网页之间的联系，必须使用超级链接。
本章主要学习超级链接及属性的设置，以及锚记链接、邮箱链接、空链接、下载文件链接等不同链接样式的超级链接的制作方法。
5.1超级链接概述 浏览网页时，某些网页中有些文字是蓝色（也可以自己设置成其他颜色），这些文字下面还可能有一条下画线。
当移动鼠标指针到这些文字上时，鼠标指针就会变成一只手的形状，此时单击，就可以直接跳到与这些文字相链接的网页或WWW网站上去，如图5.1所示。
图5.1超级链接示例 超级链接在本质上属于一个网页的一部分，它是一种允许网页同其他网页或站点之间进行链接的元素，是网页中最重要、最根本的元素之
一。
各个网页链接在一起后，才能真正构成一个网站。
访问者通过单击超级链接对象，就可以从一个网页跳转到目标对象。
这个目标对象可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮件地址、文件、动画甚至是应用程序。
100 网页设计与制作（第3版） 5.1.1超级链接的分类 超级链接中由于单击而引起跳转的对象称为超级链接的载体，跳转到的对象称为链接目标。
超级链接通常有两种分类方式。
方式一：按链接载体的特点，把链接分为文本链接与图像链接两大类。
文本链接：用文本作为链接载体，简单实用。
图像链接：用图像作为链接载体，能使网页美观、生动活泼，它既可以是指向单个模板的链接，也可以是根据图像不同的区域建立的多个链接。
方式二：按链接目标分类，可以将超级链接分为以下几种类型。
内部链接：链接目标是本站点的其他文档，用以实现在本站点内跳转。
外部链接：链接到本站点之外的其他站点或文档，通过这种链接可以跳转到其他站点。
锚点链接：连接到同一网页或不同网页中指定位置的链接，例如网页的顶部、底部或者其他特定位置。
E-mail链接：目标是一个电子邮件地址。
执行文件链接：链接网站中可执行的程序，常用于下载在线执行。
☞提示：超链接还可以分为动态超级链接和静态超级链接。
动态超级链接指的是可以通过改变HTML代码来实现动态变化的超级链接。
例如，可以实现将鼠标移动到某个文字链接上，文字就会像动画一样动起来或改变颜色的效果；也可以实现鼠标移到图片上，图片就产生反色或朦胧等的效果。
而静态超级链接，顾名思义，就是没有动态效果的超级链接。
5.1.2超级链接标签 HTML语言中使用标签来表示一个超级链接，字母标签中的a为英文单词anchor（锚）的首字母。
有了标签的存在，才有了今天丰富多彩的互联网，超级链接标签是HTML语言中非常重要的一个标签。
HTML超级链接标签代表一个链接点，它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，这已众所周知，但关于它的语法结构可能有点鲜为人知，而要用活它则必须了解其语法结构。
标签的基本语法： 产生超级链接的文字 访问者在浏览网页时，单击“产生超级链接的文字”就可以打开属性href设置的“超级链接的目标文件”。
【例5.1】到网页的超级链接。
点击访问首页 第5章超级链接 101 上面的语句将产生一个相同文件夹下的超级链接，链接的文件名为index.html。
没有特定声明的情况下，“点击访问首页”这几个字通常有下画线，并且显示成蓝色的文字，如图5.2所示。
图5.2例5.1的显示效果 对于标签，除了href属性之外，还有很多参数需要根据实际情况加以设置，以实现不同的链接效果。
下面详细介绍超级链接标签的几个常用属性及其用法。
1．href属性href是hypertextreference的缩略词，用于设定超级链接目标文件的地址（即链接地址）。
通常链接地址必须为URL地址，如果没有给出具体路径，则为默认路径，和当前页的路径相同。
2．title属性很多情况下，超级链接的文字不足以描述所要链接的内容，超级链接标签提供了title属性，能很方便地给浏览者做出提示。
title属性的值即为提示内容，当浏览者的光标停留在超级链接上时，会在超级链接的附近显示title属性设置的提示信息，这样不会影响页面排版的整洁。
【例5.2】超级链接的提示信息。
ThinkPadX220 当鼠标移到ThinkPadX220这个链接上时，提示信息为“笔记本参数指标”，如图5.3所示。
3．target属性target用于设置链接对象的显示方式，即指定打开链接的窗口。
在默认情况下，超级链接打开新页面的方式是自我覆盖。
根据浏览者的不同需要，读者可以指定超级链接打开新窗口的其他方式。
超级链接标签提供了target属性进行设置，取值分别为以下5个。
102 网页设计与制作（第3版） 图5.3例5.2的浏览器效果
（1）_self：表示链接的对象在当前窗口打开，为默认设置，一般不需要设置。
【例5.3】在当前窗口打开链接对象。
关于我...... 图5.4为例5.3的初始页面，当鼠标单击超链接文本时，如图5.5所示，将会在当前浏览器窗口打开并显示aboutme.htm页面，覆盖浏览器窗口原来显示的页面。
注意，这时候单击浏览器窗口的“后退”按钮可以返回单击之前的页面，即5-3.htm页面。
图5.4例5.3的初始页面 图5.5超级链接target设置为_self的效果 第5章超级链接 103
（2）_blank：表示链接的对象将在一个新的窗口中打开。
【例5.4】在新窗口中打开链接对象。
修改例5.3的超级链接代码为 关于我...... 当鼠标单击超级链接文本时，将会新打开一个浏览器窗口并显示aboutme.htm页面，如图5.6所示，下面是鼠标单击超级链接之前的浏览器窗口，上面是单击之后的浏览器窗口。
图5.6超级链接target设置为_blank的效果
（3）_new：始终在同一个新的窗口打开链接的对象。

（4）_parent：表示链接的对象在上一级窗口打开，一般使用框架技术的网页会经常使用，具体使用方法请参考第9章的内容。

（5）：表示链接的对象在浏览器的整个窗口中打开，忽略任何框架。
具体使用方法请参考第9章的内容。

4．其他属性 onmouseover：与onclick类似，在鼠标移到链接点上时被触发。
onmouseout：对应的事件在鼠标移出链接点后被触发。
onclick：对应于一个事件，当链接点被单击后将触发这个事件，执行对应的子程序。
【例5.5】设置onmouseover属性。
链接 例5.5设定了onmouseover参数。
当鼠标移到这个链接上时，弹出一个警告对话框，并在对话框中显示“鼠标悬停效果演示！”文字，如图5.7所示。
104 网页设计与制作（第3版） 图5.7超级链接onmouseover属性演示 标签还有许多其他的属性，如name、type等，但一般情况下使用几率比较小，本书不做介绍。
5.2绝对路径与相对路径 网络上每一个文件都有自己的存放位置和路径，理解一个文件与要链接的文件之间的路径关系是创建链接的根本。
根据参考对象的不同，网络资源的路径一般分为绝对路径、相对路径两种。
理解绝对路径与相对路径的概念，对于设计网页中的超级链接是非常有帮助的。
如果设置超级链接时使用了错误的文件路径，就会导致浏览器无法打开指定的文件，或做好的网页在本地机器上可以正常浏览，而把页面上传到其他机器（如服务器）上就会出现无法显示文件或图片等错误。
下面学习什么是绝对路径和相对路径。
5.2.1绝对路径 使用计算机时，如果要找到某个文件，首先必须知道此文件的具体位置（计算机磁盘上的存储路径）。
例如，路径E:/mysite/news/index.html，说明index.html文件是在E盘的mysite目录下的news子目录中。
类似于这样完整地描述文件位置的路径就是绝对路径。
由于网站在本地制作测试完毕后需要发布在Web服务器上，而大多数情况下，发布者并不能选择服务器磁盘位置。
这样，网站发布到Web服务器之后，就会由于路径问题导致无法打开超级链接文件。
这也就是为什么当把A计算机上制作的网站复制到B计算机上的时候，某些页面无法浏览的原因。
因此，制作超级链接时，不建议采用绝对路径。
网页制作时，可以使用一种称为URL的路径表示方法。
例如，在网站中以类似http://www.xxx.xxx的格式来确定文件位置的方式。
这种方式常用于友情链接等需要跳转到其他站点的情况。
5.2.2相对路径 制作网站时，需要访问的文件往往在同一个网站内，由于同一个网站下的每一个网 第5章超级链接 105 页都位于同一个地址之下，因此，不需要为每一个链接输入完整的地址，只需要确定当前文件与站点根目录之间的相对路径就可以了。
相对路径是以当前文件所在路径为起点（参照），进行相对文件的查找。
一个相对路径不包括协议和主机地址信息，它的路径与当前文件的访问协议和主机名相同，甚至有相同的文件夹。
因此，相对路径通常只包含文件夹名和文件名，甚至只有文件名。
可以用相对路径指向与源文件位于同一服务器或同一文件夹中的文件。
此时，浏览器链接的目标文件处在同一服务器或同一文件夹下。
如果链接到同一文件夹下，则只需输入要链接文件的名称。
要链接到下级文件夹中的文件。
只需先输入文件夹名，然后加“/”，再输入文件名。
要链接到上一级文件夹中文件，则先输入“../”，再输入文件名。
相对路径的用法： herf="shouey.html"herf="web/shouey.html"herf="../shouey.html"herf="../../shouey.html" shouey.html是本地当前路径下的文件shouey.html是本地当前路径下Web文件夹下的文件shouey.html是本地当前文件夹的上一级文件夹下的文件shouey.html是本地当前文件夹的上两级文件夹下的文件 下面举例说明：假设newsinfo.html的路径是D:\mysite\news\newsinfo.html。
index.html的路径是D:\mysite\index.html，如图5.8所示。
在index.html中加入newsinfo.html超级链接的代码应该这样写： newsinfo.html 其完整的代码参见例5.6。
【例5.6】相对路径。
图5.8相对路径使用 newsinfo.html 反之，在newsinfo.html中加入index.html超级链接的代码应该这样写： index.html 那么，链接本地机器上的文件时，应该使用相对路径还是绝对路径？在绝大多数情况下使用相对路径比较好。
例如，用绝对路径定义了链接，当把文件夹改名或者移动之后，那么所有的链接都要失效，这样就必须对所有网页文件的链接进行重新编排，而一旦将此文件夹移到Web服务器上时，需要重新改动的地方就更多了，那是一件很麻烦的事情。
而使用相对路径，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。
5.2.3创建超级链接 在DreamweaverCS6中创建超级链接十分简单，首先要确定超级链接的源（起始）， 106 网页设计与制作（第3版） 超级链接的源可以是文字、图像或其他对象。
选定超级链接的源之后，可以通过以下方法设置链接。
方法一：直接在“属性”面板的链接栏输入要链接的目标。
如图5.9所示，链接到搜狐网，则在“链接”栏输入搜狐网的网址。
图5.9在“属性”面板直接输入要链接的对象 方法二：如果要链接本站点的其他文件，还可以单击“链接”栏旁边的文件夹图标，如图5.10所示，这样可以打开图5.11所示的“选择文件”对话框，在此对话框中使用浏览方式选择需要链接到的页面文件。
图5.10通过文件夹图标制作超级链接 图5.11“选择文件”对话框 第5章超级链接 107 方法三：如果要链接本站点的其他文件，还可以通过拖动“属性”面板“链接”栏的“指向文件”图标，直接指向要链接的目标网页文件，如图5.12所示。
这种方法更加形象直观，操作简单。
图5.12在“属性”面板直接拖曳“指向文件”图标指向要链接的对象 5.3使用Dreamweaver制作各种超级链接 本节主要介绍各种典型超级链接的具体制作方法和步骤，链接的设置均可以通过属性面板来完成。
5.3.1内部链接 内部链接指的是在同一个网站内部，不同的HTML页面或者资源之间的链接关系。
在建立网站内部链接时，要明确哪个是主链接文件（即当前页），哪个是被链接文件。
前面介绍了相对路径的概念，内部链接一般采用相对路径链接。
制作内部链接的具体步骤如下。
首先，在设计视图中通过鼠标拖曳选中需要制作超级链接的文本，如图5.13中的“新闻”，在“属性”面板中单击源文件旁边的黄色文件夹图标选择链接文件夹。
这里在“选择文件”对话框中选择news文件夹下的newsinfo.html文件。
完成上述步骤以后，在设计视图中单击超级链接文字，在“属性”面板中可以设置此超级链接的目标，如图5.14所示，在下拉框中选择即可。
最后，保存对网页文件的操作，按F12键在浏览器中预览网页效果。
上述操作所产生的源代码可以在代码视图下查看，超级链接的代码为 新闻 5.3.2外部链接 外部链接指的是跳转到当前网站外部，与其他网站中页面或其他元素之间的链接关系。
例如，常见的“友情链接”就采用了外部链接。
最常用的外部链接格式是。
108 网页设计与制作（第3版） 图5.13制作内部链接 图5.14设置内部链接的目标 制作外部链接时，在设计视图中选择需要制作外部链接的对象，然后在“属性”面板中的“链接”栏直接输入链接目标地址，如图5.15所示。
图5.15制作外部链接