2.4插入超链接

2.4　插入超链接

超链接，简称链接，是网页之间关联在一起的纽带。许多网页存放在一起，之所以能够成为一个网站，就是因为它们之间设置了合适的超链接，成为一个有着“千丝万缕”联系的有机整体。第1章已经学习过超链接(标签a)代码的使用，这一节将学习使用Dreamweaver可视化方式创建超链接的方法。

1. 创建页面链接

(1)选中要创建链接的文本、图片或图片中的一个热点(2.3.1节阐述了图片热点)。

(2)建立链接。在属性面板的“链接”文本框中输入目标文件的路径和文件名称(注意：文本的属性面板如图2-5所示，其“链接”文本框只出现在HTML属性里)，或单击“浏览文件”按钮，在对话框中选择一个文件作为超链接的目标文件，或拖动“指向文件”按钮至文件面板中的某一个文件(先要打开文件面板)。

(3)指定打开链接网页的窗口。属性面板的“目标”属性下拉列表中有_blank、_parent、_self、_top选项。其中“_blank”表示在新窗口中打开链接网页，“_self”表示在当前窗口中打开链接目标网页，“_parent”表示在父窗口中打开链接网页，“_top”表示在最上级窗口中打开链接目标网页。

2. 锚点链接

锚点链接，是应用于同一个网页内的超链接。要在每个需要定位的地方设置一个锚点；然后，给文字或图片等对象设置超链接，让链接的目标指向网页内的某个锚点。

锚点链接建立过程如下。

(1)把光标定位到要插入锚点的区域。

(2)选择菜单“插入”−>“命名锚记”命令，在“命名锚记”对话框中输入锚点的名称，如“No1”。

(3)将光标定位到文档窗口中要跳转到定义锚记的对象，选中文本、图像或图像热点。

(4)在属性面板的“链接”文本框中输入“#”和命名锚点的名称，如“#No1”。

3. 电子邮件链接

(1)选中要创建电子邮件链接的文本、图片。

(2)在属性面板的“链接”文本框中输入mailto:电子邮件地址。

4. 图像热点区链接

2.3.1节学习插入图像时，介绍了图像的热点设置(见图2-24)。在图像中设置多个热点，能够达到在一幅图做多个链接的目的。

在一幅图中设置若干个热点区域，并为每个区域指定一个不同的超链接。浏览网页时，单击不同区域便可以跳转到相应的目标页面。

图像映射在网页上应用非常广泛，最常见的用法有电子地图、页面导航等。

在Dreamweaver中设置热点链接的步骤如下。

(1)把图片插入到合适的位置。

(2)选中图片，在属性面板的左下角的热点工具(矩形、圆和多边形)，在图片合适的地方拖动(多边形是在图像上单击以产生多边形的顶点)以产生矩形、圆或多边形热区域。

(3)选中一个热点区，在属性面板中为该热点区设置链接。

重复第(3)步，直到给每个热点区设置不同的链接目标。

如图2-23所示的热点，切换到“代码”视图，可以看到如下代码。

<img src="iamges/Cs3C60_0.jpg" usemap="#Map" />

<map name="Map" id="Map">

<area shape="rect" coords="130,26,212,104" href="#" />

<area shape="circle" coords="127,202,30" href="#" />

<area shape="poly" coords="194,123" href="#" />

<area shape="poly" coords="202,160,228,174,273,159,270,119"

href="#" />

</map>

可以清楚地看到，图像热点使用<map>……</map>标签，在此标签中再使用<area>标签指定热点的区域属性。图像热点大多使用Dreamweaver等可视化的软件指定热点，很少手工编写热点的代码，href="#"说明尚未为该热点指定链接，请读者留意<map>……</map>标签中的内容和<img>标签的 usemap属性值，以及其他属性的值。

5. 使用CSS伪类改变超链接的显示样式

链接有四种状态：未使用的链接(link)、访问过的链接(visited)、鼠标光标在链接对象上(hover)和链接激活(actived)时使用样式面板定义伪类。HTML对这四种状态有一套默认的显示样式。但是，可以使用伪类定义的方法改变超链接的默认显示样式。

1)伪类定义改变超链接显示样式的一般方法

CSS中使用标签a的四个伪类(a:link、a:visited、a:hover、a:actived)来表示链接的这四种状态，可以通过重新定义这四个伪类来改变超链接的显示样式，其步骤如下。

(1)在CSS样式面中，单击“新建”按钮。

(2)在出现对话框的“选择器类型”下拉列表中选择“复合内容”选项，在“选择器名称”下拉列表中选择“a:link”选项,“规则定义”取默认值，单击“确定”按钮。

(3)在“CSS规则定义”对话框中，设置该伪类的各种属性值，例如，在“类型”下指定Fong-family(字体)、Font-size(大小)、Color(颜色)、Text-decoration(装饰)参数是否要下划线，还可为该伪类设置各种复杂的属性值，单击“确定”按钮。

重复以上3步，再为a:visited、a:hover、a:actived三个伪类分别设置CSS样式，则完成了对超链接四种显示样式的重新定义。这四个伪类重新定义后，网页中的超链接样式自动变为新设置的样式。

2)伪类和类结合定义多组超链接样式

还可以将伪类和类相结合，为网页定义几组超链接的样式。例如，将标签a的伪类与类x相结合，采用上述方法分别为a.x:link、a.x:visited、a.x:hover和a.x:actived定义好CSS样式。

在给网页中的文本对象应用超链接时，要在属性面板的“类”下拉列表中选择“x”，这样就会出现新的一组超链接的显示样式。

3)超链接CSS样式的简单定义法

超链接伪类有一种简单定义方法，就是在网页的“页面属性”中进行。

具体方法是：选择菜单“修改”−>“页面属性”−>“链接(CSS)”选项，如图2-27所示，在对话框中为链接、已访问的链接、活动链接、变换图像链接设置几种简单属性(字体、大小、颜色)。这样也可以改变超链接的样式。

图2-27　在“页面属性”对话框里设置链接CSS