4.6 网页链接的创建
网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是网页的“链接”。
4.6.1 网页链接的基本类型
链接，又称超链接（Hyperlink），它作为网页间的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”的属性。超链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序。当网站访问者单击超链接时，将根据目标的类型执行相应的操作，即显示在Web浏览器中打开或运行。
要正确创建链接，就必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址，称为统一资源定位符（URL）。然而，当在网页中创建内部链接时，一般不会指定链接文档的完整URL，而是指定一个相对当前文档或站点根文件夹的相对路径。
在网页中的链接按照链接路径的不同可以分为3种形式：绝对路径、相对路径和基于根目录路径。
这些路径都是网页中的统一资源定位，只不过后两种路径将URL的通信协议和主机名省略了。后两种路径必须有参照物，一种是以文档为参照物；另一种是以站点的根目录为参照物。而第一种路径就不需要有参照物，其是最完整的路径，也是标准的URL。
4.6.2 小实例——图像链接
当用户浏览网页，鼠标经过图像时，会出现一个手形图标，提示浏览者这是带链接的图像。此时单击鼠标，会打开所链接的网页，这就是图像超链接。创建图像链接的效果如图4-33所示，具体操作步骤如下。
图4-33 创建图像链接效果
原始文件：原始文件/04/4.6.2/index.html 最终文件：最终文件/04/4.6.2/index1.html
步骤01 打开网页文档，选中要创建链接的图像，如图4-34所示。
图4-34 打开网页文档
步骤02 打开“属性”面板，在面板中单击“链接”文本框右边的“浏览文件”按钮
，弹出“选择文件”对话框，选择链接的文件jiafang.html，如图4-35所示。
图4-35 “选择文件”对话框
步骤03 单击“确定”按钮，文件即可被添加到“链接”文本框中，如图4-36所示。
图4-36 添加链接
★知识要点★
在属性面板中的“链接”文本框中也可以直接输入要链接的内容。
步骤04 保存文档，按F12键在浏览器中预览，效果如图4-33所示。
4.6.3 小实例——E-mail链接
E-mail链接也叫电子邮件链接，电子邮件地址作为超链接的链接目标与其他链接目标不同。当用户在浏览器上单击指向电子邮件地址的超链接时，将会打开默认的邮件管理器的新邮件窗口，其中会提示用户输入信息并将该信息传送给指定的E-mail地址。当单击文字“联系我们”时效果如图4-37所示，具体操作步骤如下。
图4-37 创建电子邮件链接的效果
★提示★
单击电子邮件链接后，系统将自动启动电子邮件软件，并在收件人地址中自动填写上电子邮件链接所指定的邮箱地址。
原始文件：原始文件/04/4.6.3/index.html 最终文件：最终文件/04/4.6.3/index1.html
步骤01 打开网页文档，将光标置于要创建电子邮件链接的位置，如图4-38所示。
图4-38 打开网页文档
步骤02 执行“插入”︱“电子邮件链接”命令，弹出“电子邮件链接”对话框，在对话框的“文本”文本框中输入“联系我们”，在“电子邮件”文本框中输入sdhzgw@163.com，如图4-39所示。
图4-39 “电子邮件链接”对话框
步骤03 单击“确定”按钮，创建电子邮件链接，如图4-40所示。
图4-40 创建电子邮件链接
★高手支招★
单击“常用”插入栏中的“电子邮件链接”按钮
，也可以弹出“电子邮件链接”对话框。
步骤04 保存文档，按F12键在浏览器中预览，效果如图4-37所示。
★高手支招★
如何避免页面电子邮件地址被搜索到？
如果拥有一个站点并发布了E-mail链接，那么其他人会利用特殊工具搜索到这个地址并加入到他们的数据库中，这样经常会收到一些垃圾信。要想避免E-mail地址被搜索到，可以在页面上不按标准格式书写E-mail链接，如yourname at mail.com，它等同于yourname@mail.com。
4.6.4 小实例——下载文件链接
如果要在网站中提供下载资料，就为文件提供下载链接，如果超链接指向的不是一个网页文件，而是其他文件例如zip、mp3、exe文件等，单击链接的时候就会下载文件。创建下载文件的链接效果如图4-41所示，具体操作步骤如下。
图4-41 下载文件的链接效果
★提示★
网站中每个下载文件必须对应一个下载链接，而不能为多个文件或者一个文件夹建立下载链接，如果需要对多个文件或者文件夹提供下载，只能利用压缩软件将这些文件或者文件夹压缩为一个文件。
原始文件：原始文件/04/4.6.4/index.html 最终文件：最终文件/04/4.6.4/index1.html
步骤01 打开网页文档，选中要创建链接的文字，如图4-42所示。
图4-42 打开网页文档
步骤02 执行“窗口”|“属性”命令，打开“属性”面板，在面板中单击“链接”文本框右边的按钮
，弹出“选择文件”对话框，在对话框中选择要下载的文件“新建文本文档.zip”，如图4-43所示。
图4-43 “选择文件”对话框
步骤03 单击“确定”按钮，添加到“链接”文本框中，如图4-44所示。
图4-44 添加到“链接”文本框中
步骤04 保存文档，按F12键在浏览器中预览，效果如图4-41所示。
4.6.5 小实例——脚本链接
脚本链接执行JavaScript代码或调用JavaScript函数。它非常有用，能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。下面利用脚本链接创建关闭网页，效果如图4-45所示，具体操作步骤如下。
图4-45 利用脚本链接创建关闭网页
原始文件：原始文件/04/4.6.5/index.html 最终文件：最终文件/04/4.6.5/index1.html
步骤01 打开网页文档，如图4-46所示。
图4-46 打开网页文档
步骤02 选中文字“关闭窗口”，在属性面板中的“链接”文本框中输入javascript:window.close()，如图4-47所示。
图4-47 输入链接
步骤03 保存文档，按F12键在浏览器中预览，单击“关闭窗口”按钮会自动弹出一个提示对话框，提示是否关闭窗口，单击“是”按钮即可关闭窗口，效果如图4-45所示。