第2天下午 创建超级链接
本章学习流程图
知识导读
超级链接简称链接，是页面与页面之间的关联关系。通过单击链接，可以从一个页面跳转到另一个页面。Dreamweaver提供了多种创建超级链接的方法，网页中的链接可以分为文本超级链接、电子邮件超级链接、图像超级链接、图像热点超级链接、下载文件的超级链接、锚点超级链接等。今天下午我们就来讲述一下如何使用各种超级链接建立各个页面之间的链接。
完成今天下午内容后，您将能够
◎ 掌握超级链接的基本概念
◎ 掌握创建超级链接的方法
◎ 掌握设置文本格式
◎ 掌握管理超级链接
◎ 掌握创建超级链接的实例
实例展示
创建E-mail链接
锚点链接
4.1 超级链接的基本概念
链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序，当网站访问者单击链接时，将根据目标的类型执行相应的操作，即在Web浏览器中打开或运行。
要正确创建链接，就必须了解链接与被链接文档之间的路径，每一个网页都有一个唯一的地址，称为统一资源定位符（URL），然而，当在网页中创建内部链接时，一般不会指定链接文档的完整URL，而是指定一个相对当前文档或站点根文件夹的相对路径。
4.1.1 绝对路径
绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置，都可以非常精确地将其找到，除非目标文档的位置发生变化，否则链接不会失效。
采用绝对路径的好处是，只要网站的地址不变，则无论文档在站点中被如何移动，都可以正常实现跳转而不会发生错误。另外，如果希望链接到其他站点上的文件，就必须使用绝对路径。
采用绝对路径的缺点在于，这种方式的链接不利于测试。如果在站点中使用绝对路径，要想测试链接是否有效，就必须在服务器端对链接进行测试。它的另一个缺点是不利于站点的移植。
4.1.2 相对路径
相对路径对于大多数本地链接来说，是最适用的路径，在当前文档与所链接的文档处于同一文件夹内时，文档相对路径特别有用，文档相对路径还可用来链接到其他文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径，文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。
4.2 创建链接的方法
设计网页时最常见的链接形式是使用选择的网页元素（如文字、图片）创建链接，当访问者浏览网页时，单击该网页元素可以直接浏览到相关内容，非常方便实用，创建链接的方法有很多种，如可以直接拖动网页元素创建链接，或者使用“属性”面板创建链接。
4.2.1 使用属性面板创建链接
如果知道目标网页文档的确切路径名称，可以直接在“链接”文本框中输入该文档的路径名称，如果要创建外部链接，则必须输入绝对路径，或者单击文本框右侧的浏览按钮 
，在打开的“选择文件”对话框中选择要链接的目标文档并单击“确定”按钮，即可创建链接，从“目标”弹出菜单中，选择文档打开的位置，如图4-1所示。
图4-1 属性面板
◎ _blank：在弹出的新窗口中打开所链接的文档。
◎ _parent：如果是嵌套的框架，会在父框架或窗口中打开链接的文档；如果不是嵌套的框架，则与top相同，在整个浏览器窗口中打开所链接的文档。
◎ _self：浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。
◎ _top：在完整的浏览器窗口中打开网页。
4.2.2 使用指向文件图标创建链接
在“属性”面板中，单击“链接”文本框右侧的链接文件图标
，拖动鼠标时会出现一条带箭头的细线，指示要拖动的位置，指向链接的文件后，释放鼠标，即会链接到该文件，如图4-2所示。
图4-2 创建指向文件图标链接
4.2.3 使用菜单命令创建链接
执行“插入”|“超级链接”命令，弹出“超级链接”对话框，在对话框中输入相应的链接，或者单击“插入”栏中的“超级链接”按钮
，也会打开“超级链接”对话框，如图4-3所示。
图4-3 “超级链接”对话框
“超级链接”对话框中主要包含以下参数。“超级链接”对话框中的参数主要有以下设置。
◎“文本”文本框：设置超级链接显示的文本。
◎“链接”文本框：设置超级链接的路径，最好输入相对路径而不是绝对路径。
◎“目标”下拉列表：设置超级链接的打开方式，包括4个选项。
◎“标题”文本框：设置超级链接的标题。
◎“访问键”文本框：设置键盘快捷键，单击键盘上的快捷键将选中这个超级链接。
◎“Tab键索引”文本框：设置在网页中用Tab键选中这个超级链接的顺序。
4.3 管理超级链接
Dreamweaver可以自动更新链接，只要在“首选参数”对话框中进行相关的设置即可， Dreamweaver还可以在站点范围内更改链接、检查站点中的链接。
4.3.1 设置自动更新链接
当在本地站点内移动或重命名文档时，Dreamweaver可更新指向该文档链接，具体方法是执行“编辑”|“首选参数”命令，弹出“首选参数”对话框，如图4-4所示。
图4-4 “首选参数”对话框
“移动文件时更新链接”下拉列表中可以设置如下参数。
◎ 总是：当移动或重命名所选文件时，Dreamweaver将自动更新指向该文档的所有链接。
◎ 从不：当移动或重命名文件时，Dreamweaver不对文件中相应的链接进行更新。
◎提示：在本地站点中对文件进行移动或重命名时，Dreamweaver将显示一个对话框，列出此更改影响到的所有文件。
4.3.2 在站点范围内更改链接
Dreamweaver除了在移动或重命名时可以自动更新链接外，也可以手工修改所有的链接。
1 在“文件”面板的本地视图窗口中选择一个文件，如果更改的是电子邮件链接、空链接或脚本链接，则不需要选择文件。
2 执行“站点”|“改变站点范围的链接”命令，弹出“更改整个站点链接”对话框，如图4-5所示。
图4-5 “更改整个站点链接”对话框
“更改整个站点链接”对话框中可以设置以下参数。
◎ 更改所有的链接：显示所选文件的URL，单击文本框右边的
按钮，选择要更改其链接的文件。如果要更改的是电子邮件链接、空链接或脚本链接，则输入要更改的链接文件。
◎ 变成新链接：单击文本框右边的
按钮，选择要链接到的新文件。
3 在对话框中进行相应的设置，单击“确定”按钮即可。
提示
因为这些修改都是在本地发生的，所以必须手工删除远程站点上对应的孤立文件并上传或登记其链接已被改变的所有文件，否则站点的访问者将看不到所做的改变。
4.3.3 检查站点中的链接错误
一个站点往往包含很多链接，在处理的时候稍微不慎，就可能会导致链接出错，因此在发布站点前有必要为整个站点检查站点中的链接，以避免站点发布出去之后出现无效链接的情况，检查链接具体操作步骤如下。
1 执行“站点”|“检查站点范围的链接”命令，Dreamweaver CS4将自动为站点检查链接，检查结果出来后将显示在“链接检查器”面板中，如图4-6所示。
图4-6 检查结果
2 在“链接检查器”面板中的“显示”下拉列表中选择“外部链接”选项，在下面的列表框中显示出站点中包含外部链接的文件，如图4-7所示。
图4-7 外部链接
3 在“链接检查器”面板的“显示”下拉列表中选择“孤立文件”选项，在下面的列表框中显示出站点中所有的孤立文件，如图4-8所示。
图4-8 孤立文件
4.4 综合练习
超级链接在互联网中起到了联系网络信息的作用，通过超级链接可以从一个站点跳转到另一个站点，也可以从一个页面跳转到另一个页面，从而实现网络的浏览功能。通过超级链接可以在不同的网站或网页中自由地畅游，所以超级链接在网页制作方面非常重要。
使用Dreamweaver CS4创建链接非常简单方便，只要选中要设置为超级链接的文字或图像，然后在“属性”面板的“链接”文本框中输入相应的URL路径即可。
练习1——创建文本链接
文本链接即以文字作为媒介的链接，它是网页中最常用的链接方式，创建文本链接的方法非常简单。下面通过具体实例进行讲述，单击链接前如图4-9所示，单击文本链接后如图4-10所示，具体操作步骤如下。
图4-9 单击链接前
图4-10 单击文本链接后
起始文件：CD-ROM/起始文件/第2天下午/综合练习1/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习1/index1.htm
1 打开网页文档，如图4-11所示。
图4-11 打开网页文档
2 选中要创建链接的文字，执行“窗口”|“属性”命令，打开“属性”面板，如图4-12所示。
图4-12 “属性”面板
3 在“属性”面板中单击“链接”文本框中右边的
按钮，弹出“选择文件”对话框，如图4-13所示。
图4-13 “选择文件”对话框
4 在对话框中选择链接的文档cpzs.html，单击“确定”按钮，将该文档添加到文本框中，如图4-14所示。
图4-14 创建链接
5 保存文档，按F12键在浏览器中预览效果，单击链接前如图4-9所示，单击文本链接后如图4-10所示。
练习2——创建E-mail链接
E-mail链接也叫电子邮件链接，电子邮件地址作为超级链接的链接目标与其他链接目标不同。当用户在浏览器上单击指向电子邮件地址的超级链接时，将会打开默认邮件管理器的新邮件窗口，其中会提示用户输入信息并将该信息传送给指定的E-mail地址。下面对文字“联系我们”创建电子邮件链接，当单击文字“联系我们”时效果如图4-15所示，具体操作步骤如下。
图4-15 创建电子邮件链接的效果
提示
单击电子邮件链接后，系统将自动启动电子邮件软件，并在收件人地址中自动填写上电子邮件链接所指定的邮箱地址。
起始文件：CD-ROM/起始文件/第2天下午/综合练习2/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习2/index1.htm
1 打开网页文档，如图4-16所示。
图4-16 打开网页文档
2 将光标置于要创建电子邮件链接的位置，执行“插入”|“电子邮件链接”命令，弹出“电子邮件链接”对话框，在对话框的“文本”文本框中输入“联系我们”，在“E-mail”文本框中输入mailto：sdhzgw@163.com，如图4-17所示。
图4-17 “电子邮件链接”对话框
3 单击“确定”按钮，创建电子邮件链接，如图4-18所示。
图4-18 创建电子邮件链接
高手支招
单击“常用”插入栏中的“电子邮件链接”按钮
，也可以弹出“电子邮件链接”对话框。
4 保存文档，按F12键在浏览器中预览，单击“联系我们”链接文字，效果如图4-15所示。
练习3——创建下载文件的链接
如果要在网站中提供下载资料，就需要为文件提供下载链接，如果超级链接指向的不是一个网页文件，而是其他文件（如zip、mp3、exe文件等），单击链接时就会下载文件。创建下载文件的链接效果如图4-19所示，具体操作步骤如下。
图4-19 下载文件的链接效果
起始文件：CD-ROM/起始文件/第2天下午/综合练习3/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习3/index1.htm
提示
网站中每个下载文件必须对应一个下载链接，而不能为多个文件或一个文件夹建立下载链接，如果需要对多个文件或文件夹提供下载，只能利用压缩软件将这些文件或文件夹压缩为一个文件。
1 打开网页文档，选中要创建链接的文字，如图4-20所示。
图4-20 打开网页文档
2 执行“窗口”|“属性”命令，打开“属性”面板，在面板中单击“链接”文本框右边的
按钮，弹出“选择文件”对话框，在对话框中选择要下载的文件，如图4-21所示。
图4-21 “选择文件”对话框
3 单击“确定”按钮，将选中要下载的文件添加到“链接”文本框中，如图4-22所示。
图4-22 添加到“链接”文本框中
4 保存文档，按F12键在浏览器中预览，单击文字“下载文件”，效果如图4-19所示。
练习4——创建图像热点链接
在创建过程中，首先选中图像，然后在“属性”面板中选择热点工具在图像上绘制热区，创建图像热点链接的效果后当鼠标单击图像“关于我们”时如图4-23所示，单击图像“关于我们”后的效果如图4-24所示，具体操作步骤如下。
图4-23 单击图像时的效果
图4-24 单击图像后的效果
提示
当预览网页时，热点链接不会显示，当鼠标光标移至热点链接上时会变为手形，以提示浏览者该处为超级级链接。
起始文件：CD-ROM/起始文件/第2天下午/综合练习4/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习4/index1.htm
1 打开网页文档，如图4-25所示。
图4-25 打开网页文档
2 选中图像“关于我们”，执行“窗口”|“属性”命令，打开“属性”面板，在“属性”面板中单击“矩形热点工具”按钮
，选择“矩形热点工具”，如图4-26所示。
图4-26 “属性”面板
3 将光标置于图像上绘制一个矩形热点，如图4-27所示示。
图4-27 绘制一个矩形热点
4 在“属性”面板中单击“链接”文本框右边的
按钮，在弹出的“选择文件”对话框中选择链接的文件，如图4-28所示。
图4-28 “选择文件”对话框
5 单击“确定”按钮，将链接的文件添加到文本框中，如图4-29所示。
图4-29 设置热点链接
6 同以上步骤绘制其他的热点并设置热点链接，如图4-30所示。
图4-30 设置热点链接
指点迷津
除了可以使用“矩形热点工具”外，还可以使用“椭圆形热点工具”和“多边形热点工具”，绘制的方法和“矩形热点工具”一样，
指点迷津
图像热点链接和图像链接有很多相似之处，有些情况下你在浏览器中甚至都无法区分。虽然它们的最终效果基本相同，但两者实现的原理还是有很大差异的。读者在为自己的网页加入链接之前，应根据具体的实际情况，选择和使用合适的链接方式。
7 保存文档，按F12键在浏览器中预览，当鼠标未单击图像“关于我们”时如图4-23所示，单击图像“关于我们”后的效果如图4-24所示。
提示
对于复杂的热点图像可以选择多边形热点工具来进行绘制。
练习5——创建锚点链接
创建锚点链接的过程可分为两步，首先，创建命名锚记，然后创建到命名锚记的链接。下面通过如图4-31所示的实例讲述锚点链接的创建方法，具体操作步骤如下。
图4-31 锚点链接效果
起始文件：CD-ROM/起始文件/第2天下午/综合练习5/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习5/index1.htm
1 打开网页文档，如图4-32所示。
图4-32 打开网页文档
2 将光标置于要插入锚点的位置，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入1，如图4-33所示。
图4-33 “命名锚记”对话框
3 单击“确定”按钮，即可插入命名锚记1，如图4-34所示。
图4-34 插入命名锚记1
4 选中图像“公司简介”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#1，如图4-35所示。
图4-35 创建锚点链接
高手支招
单击“常用”插入栏中的“命名锚记”按钮
，也可以弹出“命名锚记”对话框，插入命名锚记。
5 将光标置于文字“背景概况”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入2，如图4-36所示。
图4-36 “命名锚记”对话框
6 单击“确定”按钮，插入命名锚记2，如图4-37所示。
图4-37 插入命名锚记2
提示
如果链接到当前页面内的某一部分，则可以直接在“属性”面板的“链接”文本框中输入“锚记名称”。
7 选中图像“背景概况”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#2，如图4-38所示。
图4-38 创建锚点链接
8 将光标置于文字“企业文化”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入3，如图4-39所示。
图4-39 “命名锚记”对话框
提示
如果在页面中看不到锚记标记，则可以执行“查看”|“可视化助理”|“不可见元素”菜单命令。
9 单击“确定”按钮，插入命名锚记3，如图4-40所示。
图4-40 插入命名锚记3
10 选中图像“企业文化”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#3，如图4-41所示。
图4-41 创建锚点链接
11 将光标置于文字“物流网络”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入4，如图4-42所示。
图4-42 “命名锚记”对话框
12 单击“确定”按钮，插入命名锚记4，如图4-43所示。
图4-43 插入命名锚记4
知识要点
锚记和文本一样可以进行剪切、复制和粘贴等操作，还可以在网页中随意移动其位置。
13 选中图像“物流网络”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#4，如图4-44所示。
图4-44 创建锚点链接
14 将光标置于文字“人力资源”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入5，如图4-45所示。
图4-45 “命名锚记”对话框
15 单击“确定”按钮，插入命名锚记5，如图4-46所示。
图4-46 插入命名锚记5
16 选中图像“人力资源”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#5，如图4-47所示。
图4-47 创建锚点链接
17 将光标置于文字“合作共赢”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入6，如图4-48所示。
图4-48 “命名锚记”对话框
18 单击“确定”按钮，插入命名锚记6，如图4-49所示。
图4-49 插入命名锚记6
提示
“锚记名称”可以是数字、英文，也可以两者混合，最好要区分大小写。同一个网页中可以有无数个锚记名称，但不能有两个相同的“锚记名称”。
19 选中图像“合作共赢”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#6，如图4-50所示。
图4-50 创建锚点链接
20 保存文档，按F12键在浏览器中预览效果，当单击文字时就会跳转到相应的内容，如图4-31所示。
练习6——空链接
创建空链接的效果如图4-51所示，具体操作步骤如下。
图4-51 空链接效果
指点迷津
空链接用于向页面上的对象或文本附加行为，以便当鼠标指针滑过该链接时，交换图像或显示层。
起始文件：CD-ROM/起始文件/第2天下午/综合练习6/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习6/index1.htm
1 打开要创建空链接的网页文档，如图4-52所示。
图4-52 打开网页文档
2 选中文本，打开“属性”面板，在“链接”文本框中输入#即可，如图4-53所示。
图4-53 输入链接
3 保存文档，按F12键在浏览器中预览，效果如图4-51所示。
练习7——创建脚本链接
脚本链接执行JavaScript代码或调用JavaScript函数。它能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、表单验证和其他处理任务。下面创建脚本链接的网页，效果如图4-54所示，具体操作步骤如下。
图4-54 脚本链接效果
起始文件：CD-ROM/起始文件/第2天下午/综合练习7/index.htm
完成文件：CD-ROM/完成文件/第2天下午/综合练习7/index1.htm
1 打开网页文档，如图4-55所示。
图4-55 打开网页文档
2 选中文字“关闭窗口”，执行“窗口”|“属性”命令，打开“属性”面板，在“属性”面板的“链接”文本框中输入javascript:window.close()，如图4-56所示。
图4-56 创建脚本链接
3 保存文档，按F12键在浏览器中预览，单击“关闭窗口”按钮会自动弹出一个提示对话框，询问是否关闭窗口，如图4-54所示，单击“是”按钮即可关闭窗口。
4.5 本章小结
今天主要学习了创建链接的方法、管理超级链接以及文本超级链接、电子邮件超级链接、图像超级链接、图像热点超级链接、下载文件的超级链接、锚点超级链接等。只有熟练掌握了这些基本功能，才能够做到快速、准确、无误地创建键接。
4.6 课后习题
1.填空题
（1）创建____链接，当用户在浏览器上单击时，将会打开____，其中会提示用户输入信息并将该信息传送给指定的E-mail地址。
（2）创建图像热点链接时，使用的热点形状工具有____、____、____。
2.操作题
给如图4-57所示的网页创建图像热点链接，效果如图4-58所示。
图4-57 起始文件
图4-58 图像热点链接效果
起始文件：CD-ROM/起始文件/第2天下午/操作题/index.htm
完成文件：CD-ROM/完成文件/第2天下午/操作题/index1.htm
1 选中要创建热点链接的图像，在“属性”面板中选择“矩形热点工具”，如图4-59所示。
图4-59 选择“矩形热点工具”
2 在要绘制热点的位置拖动鼠标左键绘制矩形热点，如图4-60所示。
图4-60 绘制矩形热点
3 按照 2 的方法绘制其他的热点，如图4-61所示。
图4-61 绘制其他的热点