6.3 网页链接

链接（Link）是HTML文档中最主要的组成部分之一，正因为有了链接，才使得互联网上不计其数的HTML文档能够相互联系起来。本节介绍在HTML文档中如何处理链接。

6.3.1 文字链接

文字链接是HTML文档中最常见的一种链接类型。所谓文字链接是指文档中单击之后能够打开另外一个界面的文本。在Dreamweaver中创建文字链接的步骤如下。

step 1 新建一个空白HTML文档，保存为linkdemo.html。在文档中输入几行文本，如图6-43所示。

step 2 鼠标选中文档中的“新浪”文本，在“属性”面板的HTML属性里面，设置“链接”属性为http://www.sina.com，“目标”属性设置为“”“”“_blank，标题属性设置为新浪网站”，如图6-44所示。

在图6-44中，“链接”属性设置的是链接到的网址。“目标”属性指的是链接打开的方式，该属性可以取以下值。

◆ _blank： 在新窗口中打开链接。

◆ _new： 在新窗口中打开链接，与_blank不同之处在于如果在某个HTML文档中存在着多个目标为“_blank”的链接，当单击每个链接的时候，都会在一个新的浏览器窗口中打开链接到的网页；而对于_new来说，无论在网页中单击多少个链接，都在同一个新窗口中打开。

◆ _parent： 通常在框架网页的子框架中使用，表示在父框架中打开链接。

◆ _self： 通常在框架网页中使用，表示在子框架中打开链接。

◆ _top： 指在顶层框架中打开链接。

“标题”属性是指a标签的title属性。在浏览网页的时候，如果把鼠标移动到链接上面，则会显示“标题”属性中所设置的文本。

step 3 依次按照步骤2所示的方法为后面的文字设置相应的链接。保存文档之后，按F12快捷键，在IE中预览效果，如图6-45所示。

在上面的例子中，每个文字链接的下面都有一条下画线，这是文字链接的默认效果。如果觉得不太美观，可以使用CSS来修饰一下，去掉下画线。至于如何修饰，本书在CSS一章中会详细介绍。

6.3.2 锚点链接

锚点链接是指链接HTML文档的某个部分的链接。当一个文档的内容太多的时候，经常会在文档的最前面做一个目录，单击其中的目录项的时候，会跳转到相应的部分。下面介绍在Dreamweaver中创建锚点连接的方法，假设某个文档中包含一篇小说，其目录如图6-46所示。小说的每一章都放在该文档的后面。为了便于浏览者阅读该小说，可以为每一章做一个锚点链接，步骤如下。

step 1 把光标移动到第一章的开始位置，选择“插入”菜单中的“命名锚记”命令，弹出“命名锚记”对话框，输入“第一章”，如图6-47所示。

step 2 依次在第二章~第十一章的起始位置，按照同样的方法插入命名锚记，其名称分别为“第二章”、“第三章”等。

step 3 设置好命名锚记之后，下面开始创建锚点链接。在设计视图中，选中“第一章 血掌”，在属性面板中的“链接”文本框里面输入“#第一章”，表示当单击这些文本时候，跳转到名称为“第一章”的命名锚记处。

step 4 按照同样的方法，为后面的目录设置锚点链接“”“，分别链接到名称为第二章~第十一章”的命名锚记处。

通过以上步骤，就为该文档的内容设置好锚点链接了。单击目录，可以很方便地跳转到正文中对应的位置。

6.3.3 电子邮件链接

在浏览网站的时候，经常会遇到网页中的一些链接，单击它们之后可以自动调用电子邮件客户端，这种链接就是电子邮件链接。在Dreamweaver中创建电子邮件链接的方法如下。

step 1 新建一个空白的HTML文档，以email.html的文件名保存。在文档中输入一行文本，如“发送电子邮件”，如图6-48所示。

step 2 在设计视图中，选中前面输入的文字，选择“插入”→“电子邮件链接”命令，弹出“电子邮件链接”对话框，如图6-49所示。在对话框中的“电子邮件”文本框里面输入收件人的电子邮件。单击“确定”按钮，关闭对话框。

step 3 完成以后，在设计视图中可以看到被选中的文字已经添加了下画线。按F12快捷键在IE中预览，如图6-50所示当单击图”。6-50中的“发送电子邮件链接时，会自动调用默认的电子邮件客户端，并且在收件人处自动添加了刚才设置的电子邮件地址，如图6-51所示。

6.3.4 图像热点链接

前面介绍过，图像本身可以做超链接。除此之外，还可以把一个图像对象划分成几个区域，每个区域可以链接到不同的网址，这种区域叫做热区。热区中的超链接称为热点链接。在Dreamweaver中，创建图像热点链接的方法如下。

step 1 新建4个空白文档，分别命名为map.html、eye.html、ear.html和hand.html。

step 2 在map.html中插入一个图像，如图6-52所示。

step 3 |选中刚才插入的图像，在“属性”面板的左下角有3个浅蓝色的按钮，分别是矩形热点工具、圆形热点工具和多边形热点工具。这3个工具是用来在图像上面创建热点区域的，热点区域的形状分别对应矩形、圆形和多边形，如图6-53所示。

step 4 单击圆形热点工具，在图6-52中的猴子的左边耳朵上面绘制出一个圆形的热区。选中该热区，单击“属性”面板的“链接”属性右边的“浏览文件”按钮，选中ear.html文件。在猴子的右边耳朵上面，按照同样的方法绘制出另外一个圆形热点区域，也链接到ear.html-，如图654所示。

step 5 按照同样的方法，依次在猴子的眼睛上面绘制出两个圆形的热点区域，并链接到eye.html，在两只手上面绘制出两个多边形热点区域，链接到hand.html。注意在绘制多边形热点区域的时候，要首先单击一下，画出一个顶点，然后在画出其他的顶点。绘制完成后，多边形会自动封闭。在绘制的过程中，也可以用鼠标拖动顶点来调整形状。

完成后，如图6-55所示。保存所有文档之后，按F12快捷键预览map.html，如图6-56所示。当单击猴子的耳朵的时候，会跳转到ear.html。单击眼睛的时候，会打开eye.html。