第2天下午 创建超级链接

本章学习流程图

知识导读

超级链接简称链接，是页面与页面之间的关联关系。通过单击链接，可以从一个页面跳转到另一个页面。Dreamweaver提供了多种创建超级链接的方法，网页中的链接可以分为文本超级链接、电子邮件超级链接、图像超级链接、图像热点超级链接、下载文件的超级链接、锚点超级链接等。今天下午我们就来讲述一下如何使用各种超级链接建立各个页面之间的链接。

完成今天下午内容后，您将能够

◎ 掌握超级链接的基本概念

◎ 掌握创建超级链接的方法

◎ 掌握设置文本格式

◎ 掌握管理超级链接

◎ 掌握创建超级链接的实例

实例展示

4.1 超级链接的基本概念

链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序，当网站访问者单击链接时，将根据目标的类型执行相应的操作，即在Web浏览器中打开或运行。

要正确创建链接，就必须了解链接与被链接文档之间的路径，每一个网页都有一个唯一的地址，称为统一资源定位符（URL），然而，当在网页中创建内部链接时，一般不会指定链接文档的完整URL，而是指定一个相对当前文档或站点根文件夹的相对路径。

4.1.1 绝对路径

绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置，都可以非常精确地将其找到，除非目标文档的位置发生变化，否则链接不会失效。

采用绝对路径的好处是，只要网站的地址不变，则无论文档在站点中被如何移动，都可以正常实现跳转而不会发生错误。另外，如果希望链接到其他站点上的文件，就必须使用绝对路径。

采用绝对路径的缺点在于，这种方式的链接不利于测试。如果在站点中使用绝对路径，要想测试链接是否有效，就必须在服务器端对链接进行测试。它的另一个缺点是不利于站点的移植。

4.1.2 相对路径

相对路径对于大多数本地链接来说，是最适用的路径，在当前文档与所链接的文档处于同一文件夹内时，文档相对路径特别有用，文档相对路径还可用来链接到其他文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径，文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。

4.2 创建链接的方法

设计网页时最常见的链接形式是使用选择的网页元素（如文字、图片）创建链接，当访问者浏览网页时，单击该网页元素可以直接浏览到相关内容，非常方便实用，创建链接的方法有很多种，如可以直接拖动网页元素创建链接，或者使用“属性”面板创建链接。

4.2.1 使用属性面板创建链接

如果知道目标网页文档的确切路径名称，可以直接在“链接”文本框中输入该文档的路径名称，如果要创建外部链接，则必须输入绝对路径，或者单击文本框右侧的浏览按钮 ，在打开的“选择文件”对话框中选择要链接的目标文档并单击“确定”按钮，即可创建链接，从“目标”弹出菜单中，选择文档打开的位置，如图4-1所示。

◎ _blank：在弹出的新窗口中打开所链接的文档。

◎ _parent：如果是嵌套的框架，会在父框架或窗口中打开链接的文档；如果不是嵌套的框架，则与top相同，在整个浏览器窗口中打开所链接的文档。

◎ _self：浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。

◎ _top：在完整的浏览器窗口中打开网页。

4.2.2 使用指向文件图标创建链接

在“属性”面板中，单击“链接”文本框右侧的链接文件图标，拖动鼠标时会出现一条带箭头的细线，指示要拖动的位置，指向链接的文件后，释放鼠标，即会链接到该文件，如图4-2所示。

4.2.3 使用菜单命令创建链接

执行“插入”|“超级链接”命令，弹出“超级链接”对话框，在对话框中输入相应的链接，或者单击“插入”栏中的“超级链接”按钮，也会打开“超级链接”对话框，如图4-3所示。

“超级链接”对话框中主要包含以下参数。“超级链接”对话框中的参数主要有以下设置。

◎“文本”文本框：设置超级链接显示的文本。

◎“链接”文本框：设置超级链接的路径，最好输入相对路径而不是绝对路径。

◎“目标”下拉列表：设置超级链接的打开方式，包括4个选项。

◎“标题”文本框：设置超级链接的标题。

◎“访问键”文本框：设置键盘快捷键，单击键盘上的快捷键将选中这个超级链接。

◎“Tab键索引”文本框：设置在网页中用Tab键选中这个超级链接的顺序。

4.3 管理超级链接

Dreamweaver可以自动更新链接，只要在“首选参数”对话框中进行相关的设置即可， Dreamweaver还可以在站点范围内更改链接、检查站点中的链接。

4.3.1 设置自动更新链接

当在本地站点内移动或重命名文档时，Dreamweaver可更新指向该文档链接，具体方法是执行“编辑”|“首选参数”命令，弹出“首选参数”对话框，如图4-4所示。

“移动文件时更新链接”下拉列表中可以设置如下参数。

◎ 总是：当移动或重命名所选文件时，Dreamweaver将自动更新指向该文档的所有链接。

◎ 从不：当移动或重命名文件时，Dreamweaver不对文件中相应的链接进行更新。

◎提示：在本地站点中对文件进行移动或重命名时，Dreamweaver将显示一个对话框，列出此更改影响到的所有文件。

4.3.2 在站点范围内更改链接

Dreamweaver除了在移动或重命名时可以自动更新链接外，也可以手工修改所有的链接。

1 在“文件”面板的本地视图窗口中选择一个文件，如果更改的是电子邮件链接、空链接或脚本链接，则不需要选择文件。

2 执行“站点”|“改变站点范围的链接”命令，弹出“更改整个站点链接”对话框，如图4-5所示。

“更改整个站点链接”对话框中可以设置以下参数。

◎ 更改所有的链接：显示所选文件的URL，单击文本框右边的 按钮，选择要更改其链接的文件。如果要更改的是电子邮件链接、空链接或脚本链接，则输入要更改的链接文件。

◎ 变成新链接：单击文本框右边的 按钮，选择要链接到的新文件。

3 在对话框中进行相应的设置，单击“确定”按钮即可。

4.3.3 检查站点中的链接错误

一个站点往往包含很多链接，在处理的时候稍微不慎，就可能会导致链接出错，因此在发布站点前有必要为整个站点检查站点中的链接，以避免站点发布出去之后出现无效链接的情况，检查链接具体操作步骤如下。

1 执行“站点”|“检查站点范围的链接”命令，Dreamweaver CS4将自动为站点检查链接，检查结果出来后将显示在“链接检查器”面板中，如图4-6所示。

2 在“链接检查器”面板中的“显示”下拉列表中选择“外部链接”选项，在下面的列表框中显示出站点中包含外部链接的文件，如图4-7所示。

3 在“链接检查器”面板的“显示”下拉列表中选择“孤立文件”选项，在下面的列表框中显示出站点中所有的孤立文件，如图4-8所示。

4.4 综合练习

超级链接在互联网中起到了联系网络信息的作用，通过超级链接可以从一个站点跳转到另一个站点，也可以从一个页面跳转到另一个页面，从而实现网络的浏览功能。通过超级链接可以在不同的网站或网页中自由地畅游，所以超级链接在网页制作方面非常重要。

使用Dreamweaver CS4创建链接非常简单方便，只要选中要设置为超级链接的文字或图像，然后在“属性”面板的“链接”文本框中输入相应的URL路径即可。

练习1——创建文本链接

文本链接即以文字作为媒介的链接，它是网页中最常用的链接方式，创建文本链接的方法非常简单。下面通过具体实例进行讲述，单击链接前如图4-9所示，单击文本链接后如图4-10所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习1/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习1/index1.htm

1 打开网页文档，如图4-11所示。

2 选中要创建链接的文字，执行“窗口”|“属性”命令，打开“属性”面板，如图4-12所示。

3 在“属性”面板中单击“链接”文本框中右边的按钮，弹出“选择文件”对话框，如图4-13所示。

4 在对话框中选择链接的文档cpzs.html，单击“确定”按钮，将该文档添加到文本框中，如图4-14所示。

5 保存文档，按F12键在浏览器中预览效果，单击链接前如图4-9所示，单击文本链接后如图4-10所示。

练习2——创建E-mail链接

E-mail链接也叫电子邮件链接，电子邮件地址作为超级链接的链接目标与其他链接目标不同。当用户在浏览器上单击指向电子邮件地址的超级链接时，将会打开默认邮件管理器的新邮件窗口，其中会提示用户输入信息并将该信息传送给指定的E-mail地址。下面对文字“联系我们”创建电子邮件链接，当单击文字“联系我们”时效果如图4-15所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习2/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习2/index1.htm

1 打开网页文档，如图4-16所示。

2 将光标置于要创建电子邮件链接的位置，执行“插入”|“电子邮件链接”命令，弹出“电子邮件链接”对话框，在对话框的“文本”文本框中输入“联系我们”，在“E-mail”文本框中输入mailto：sdhzgw@163.com，如图4-17所示。

3 单击“确定”按钮，创建电子邮件链接，如图4-18所示。

4 保存文档，按F12键在浏览器中预览，单击“联系我们”链接文字，效果如图4-15所示。

练习3——创建下载文件的链接

如果要在网站中提供下载资料，就需要为文件提供下载链接，如果超级链接指向的不是一个网页文件，而是其他文件（如zip、mp3、exe文件等），单击链接时就会下载文件。创建下载文件的链接效果如图4-19所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习3/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习3/index1.htm

1 打开网页文档，选中要创建链接的文字，如图4-20所示。

2 执行“窗口”|“属性”命令，打开“属性”面板，在面板中单击“链接”文本框右边的 按钮，弹出“选择文件”对话框，在对话框中选择要下载的文件，如图4-21所示。

3 单击“确定”按钮，将选中要下载的文件添加到“链接”文本框中，如图4-22所示。

4 保存文档，按F12键在浏览器中预览，单击文字“下载文件”，效果如图4-19所示。

练习4——创建图像热点链接

在创建过程中，首先选中图像，然后在“属性”面板中选择热点工具在图像上绘制热区，创建图像热点链接的效果后当鼠标单击图像“关于我们”时如图4-23所示，单击图像“关于我们”后的效果如图4-24所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习4/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习4/index1.htm

1 打开网页文档，如图4-25所示。

2 选中图像“关于我们”，执行“窗口”|“属性”命令，打开“属性”面板，在“属性”面板中单击“矩形热点工具”按钮 ，选择“矩形热点工具”，如图4-26所示。

3 将光标置于图像上绘制一个矩形热点，如图4-27所示示。

4 在“属性”面板中单击“链接”文本框右边的按钮，在弹出的“选择文件”对话框中选择链接的文件，如图4-28所示。

5 单击“确定”按钮，将链接的文件添加到文本框中，如图4-29所示。

6 同以上步骤绘制其他的热点并设置热点链接，如图4-30所示。

7 保存文档，按F12键在浏览器中预览，当鼠标未单击图像“关于我们”时如图4-23所示，单击图像“关于我们”后的效果如图4-24所示。

练习5——创建锚点链接

创建锚点链接的过程可分为两步，首先，创建命名锚记，然后创建到命名锚记的链接。下面通过如图4-31所示的实例讲述锚点链接的创建方法，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习5/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习5/index1.htm

1 打开网页文档，如图4-32所示。

2 将光标置于要插入锚点的位置，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入1，如图4-33所示。

3 单击“确定”按钮，即可插入命名锚记1，如图4-34所示。

4 选中图像“公司简介”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#1，如图4-35所示。

5 将光标置于文字“背景概况”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入2，如图4-36所示。

6 单击“确定”按钮，插入命名锚记2，如图4-37所示。

7 选中图像“背景概况”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#2，如图4-38所示。

8 将光标置于文字“企业文化”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入3，如图4-39所示。

9 单击“确定”按钮，插入命名锚记3，如图4-40所示。

10 选中图像“企业文化”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#3，如图4-41所示。

11 将光标置于文字“物流网络”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入4，如图4-42所示。

12 单击“确定”按钮，插入命名锚记4，如图4-43所示。

13 选中图像“物流网络”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#4，如图4-44所示。

14 将光标置于文字“人力资源”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入5，如图4-45所示。

15 单击“确定”按钮，插入命名锚记5，如图4-46所示。

16 选中图像“人力资源”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#5，如图4-47所示。

17 将光标置于文字“合作共赢”前，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入6，如图4-48所示。

18 单击“确定”按钮，插入命名锚记6，如图4-49所示。

19 选中图像“合作共赢”，执行“窗口”|“属性”命令，打开“属性”面板，在面板的“链接”文本框中输入#6，如图4-50所示。

20 保存文档，按F12键在浏览器中预览效果，当单击文字时就会跳转到相应的内容，如图4-31所示。

练习6——空链接

创建空链接的效果如图4-51所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习6/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习6/index1.htm

1 打开要创建空链接的网页文档，如图4-52所示。

2 选中文本，打开“属性”面板，在“链接”文本框中输入#即可，如图4-53所示。

3 保存文档，按F12键在浏览器中预览，效果如图4-51所示。

练习7——创建脚本链接

脚本链接执行JavaScript代码或调用JavaScript函数。它能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、表单验证和其他处理任务。下面创建脚本链接的网页，效果如图4-54所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第2天下午/综合练习7/index.htm

完成文件：CD-ROM/完成文件/第2天下午/综合练习7/index1.htm

1 打开网页文档，如图4-55所示。

2 选中文字“关闭窗口”，执行“窗口”|“属性”命令，打开“属性”面板，在“属性”面板的“链接”文本框中输入javascript:window.close()，如图4-56所示。

3 保存文档，按F12键在浏览器中预览，单击“关闭窗口”按钮会自动弹出一个提示对话框，询问是否关闭窗口，如图4-54所示，单击“是”按钮即可关闭窗口。

4.5 本章小结

今天主要学习了创建链接的方法、管理超级链接以及文本超级链接、电子邮件超级链接、图像超级链接、图像热点超级链接、下载文件的超级链接、锚点超级链接等。只有熟练掌握了这些基本功能，才能够做到快速、准确、无误地创建键接。

4.6 课后习题

1.填空题

（1）创建____链接，当用户在浏览器上单击时，将会打开____，其中会提示用户输入信息并将该信息传送给指定的E-mail地址。

（2）创建图像热点链接时，使用的热点形状工具有____、____、____。

2.操作题

给如图4-57所示的网页创建图像热点链接，效果如图4-58所示。

起始文件：CD-ROM/起始文件/第2天下午/操作题/index.htm

完成文件：CD-ROM/完成文件/第2天下午/操作题/index1.htm

1 选中要创建热点链接的图像，在“属性”面板中选择“矩形热点工具”，如图4-59所示。

2 在要绘制热点的位置拖动鼠标左键绘制矩形热点，如图4-60所示。

3 按照 2 的方法绘制其他的热点，如图4-61所示。