![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
7.2 创建超链接
前面讲述了超链接的基本概念和创建超链接的方法,通过前面的学习读者应该已经对超链接有了大概的了解,下面将讲述各种类型超链接的创建。
7.2.1 创建电子邮件超链接
电子邮件地址作为超链接的链接目标与其他链接目标不同。当用户在浏览器上单击指向电子邮件地址的超链接时,将会打开默认的邮件管理器的新邮件窗口,其中会提示用户输入信息并将该信息传送给指定的E-mail地址。下面对文字“联系我们”创建电子邮件超链接,当单击文字“联系我们”时效果如图7-1所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00269.jpg?sign=1739290146-mbpFDbDegvJ5KMvNwtTOI8HD6qotNu4H-0-b6dba9d5263fc9e7bd0977d635c29aba)
图7-1 创建电子邮件超链接的效果
★提示★
单击电子邮件链接后,系统将自动启动电子邮件软件,并在收件人地址中自动填写上电子邮件超链接所指定的邮箱地址。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0257_0001.jpg?sign=1739290146-9mqUR29Soao9qkBpnfGXdKCERoExOwHq-0-a158f4a8e56a8eb7976ae8154f9ba660)
01 打开网页文档,将光标置于要创建电子邮件超链接的位置,如图7-2所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00270.jpg?sign=1739290146-vA8MDTQw9Xev2CnG38kabfhhSdARodwF-0-2624f1832e3fd411f6cc2a50d9030251)
图7-2 打开网页文档
02 执行“插入”︱“电子邮件链接”命令,如图7-3所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00271.jpg?sign=1739290146-kESbGdeBNqK4fNtt3Z5QCw96kUXZmJs0-0-ff33fcd75d067a5bdcc9d85b4e8e48e8)
图7-3 执行“电子邮件链接”命令
03 弹出“电子邮件链接”对话框,在对话框的“文本”文本框中输入“联系我们”,在E-mail文本框中输入mailto:sdhzgw@163.com,如图7-4所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00272.jpg?sign=1739290146-TYWjKwdzTAr6umbODzboLcbQg1PebX1U-0-28b677ef48a4a10d328dacefda102b48)
图7-4 “电子邮件链接”对话框
★高手支招★
单击“常用”插入栏中的“电子邮件链接”按钮,也可以弹出“电子邮件链接”对话框。
04 单击“确定”按钮,创建电子邮件超链接,如图7-5所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00274.jpg?sign=1739290146-bhRVPedlekmU0CNX8OfrBZKsQFCb7ynN-0-81cdafaec8404710dba8a97df33b2f2f)
图7-5 创建电子邮件超链接
05 保存文档,按F12键在浏览器中预览,单击“联系我们”超链接文字,效果参见图7-1所示。
★指点迷津★
如何避免页面电子邮件地址被搜索到?经常会收到不请自来的垃圾信,如果拥有一个站点并发布了E-mail超链接,那么其他人会利用特殊工具搜索到这个地址并加入到他们的数据库中。要想避免E-mail地址被搜索到,可以在页面上不按标准格式书写E-mail链接,如yourname at mail.com,它等同与yourname@mail.com。
7.2.2 创建脚本超链接
脚本超链接执行JavaScript代码或调用JavaScript函数,它非常有用,能够在不离开当前网页文档的情况下为访问者提供有关某项的附加信息。脚本超链接还可以用于在访问者单击特定项时,执行计算、表单验证和其他处理任务,如图7-6所示的是创建脚本关闭网页的效果,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0261_0001.jpg?sign=1739290146-xwDZj82Wq85IyKlAkA3TDithh1UINtTI-0-63e5a2aac7b86bddfae0a331ab4ea1be)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00275.jpg?sign=1739290146-UDrfLWMq5isYthPQLtTWawuPckp12Ud0-0-65ddbee515eef7750cabcab47362b0ef)
图7-6 关闭网页的效果
01 打开网页文档,选中文本“关闭窗口”,如图7-7所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00276.jpg?sign=1739290146-UwioXfKRvllrV6RR0riXWGzU3PcEf9Fk-0-4ba04a7fc24a29139ddfafbc43165372)
图7-7 打开网页文档
02 在“属性”面板中的“链接”文本框中输入“javascript:window.close()”,如图7-8所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00277.jpg?sign=1739290146-FUmMtCzIkiTzblKdCZ8F992W8Typ7oBO-0-88366d3949e6179566e6483a6ce4294f)
图7-8 输入链接地址
03 保存文档,按F12键在浏览器中浏览,单击“关闭窗口”文本超链接会自动弹出一个提示对话框,提示是否关闭窗口,单击“是”按钮,即可关闭窗口,参见图7-6所示。
7.2.3 创建下载文件超链接
如果要在网站中提供下载资料,就需要为文件提供下载超链接,如果超级链接指向的不是一个网页文件,而是其他文件,例如zip、mp3、exe文件等,单击超链接的时候就会下载文件。创建下载文件的超链接效果如图7-9所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00278.jpg?sign=1739290146-0VZf53X9ze8Awq0cmWfT3T2It4E25Jmj-0-85796b9240a71debfe1d2888ff65b476)
图7-9 下载文件的超链接
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0264_0001.jpg?sign=1739290146-vqtOavqJ6UgYrHDauCrBZXhd4WdVL4w8-0-163752e84be054d26be4bf2e900081a6)
★提示★
网站中每个下载文件必须对应一个下载链接,而不能为多个文件或一个文件夹建立下载超链接,如果需要对多个文件或文件夹提供下载,只能利用压缩软件将这些文件或文件夹压缩为一个文件。
01 打开网页文档,选中要创建超链接的文字,如图7-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00279.jpg?sign=1739290146-4dF2aJXa30x5qGe74XFqva6cZZ09BvVH-0-cd61fdcae04cd4c9a7c5040f7f0bd5f8)
图7-10 打开网页文档
02 执行“窗口”|“属性”命令,打开“属性”面板,在面板中单击“链接”文本框右边的按钮,弹出“选择文件”对话框,在对话框中选择要下载的文件,如图7-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00281.jpg?sign=1739290146-FrKOJErzvQ12RwrUA3bNwEJcpkQSNSCn-0-bc5fb190bd1be65e0a185d14ab8f5716)
图7-11 “选择文件”对话框
03 单击“确定”按钮,添加到“链接”文本框中,如图7-12所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00282.jpg?sign=1739290146-kK9T1XgtM4zMAuu3vmRD9XA0b5afKv5Q-0-ac3c11b4c933faf8cd57995015363980)
图7-12 添加到“链接”文本框中
04 保存文档,按F12键在浏览器中预览,单击文字“更多产品”,效果参见图7-9所示。
7.2.4 创建图像热点超链接
在创建超链接的过程中,首先选中图像,然后在“属性”面板中选择热点工具在图像上绘制热区,创建图像热点链接后,当用鼠标单击图像“网站首页”时,效果如图7-13所示,会出现一个小手形状,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00283.jpg?sign=1739290146-v9mfWlW5W8dtpNDkfguBR9nZ9tp2QEau-0-f1a9cffe92b67f95f6e76a7f94c12620)
图7-13 图像热点链接效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0267_0001.jpg?sign=1739290146-lAPeNx0KdY68h0Y3cHjvdwLYxh6PknkC-0-802dfe54684a44aef5448b1ebee6401f)
★提示★
当预览网页时,热点超链接不会显示,当将鼠标光标移至热点超链接上时会变为手形,以提示浏览者该处为超链接。
01 打开网页文档,选中创建热点超链接的图像,如图7-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00284.jpg?sign=1739290146-Dv8iJXkGozAusAttXNVMfJwjijqxmjkV-0-2f3b1a3b8f51d6b2b0c0991d7751f424)
图7-14 打开网页文档
02 执行“窗口”|“属性”命令,打开“属性”面板,在“属性”面板中单击“矩形热点工具”按钮,选择“矩形热点工具”,如图7-15所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00286.jpg?sign=1739290146-GQzrKildEBcEuZE52zr56wjbRPgLPROi-0-201f6031e86679db4495032e0d339bb5)
图7-15 “属性”面板
★指点迷津★
除了可以使用“矩形热点工具”外,还可以使用“椭圆形热点工具”和“多边形热点工具”来绘制椭圆形热点区域和多边形热点区域,绘制的方法和绘制矩形热点区域一样。
03 将光标置于图像上要创建热点的部分,绘制一个矩形热点,如图7-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00287.jpg?sign=1739290146-C2J5BTJzn4ii7WayVjXmK8hlTDiAH4FW-0-2c627ee939c125f7be5a3bf1dbe4d903)
图7-16 绘制一个矩形热点
04 按以上步骤绘制其他的热点并设置热点超链接,如图7-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00288.jpg?sign=1739290146-ZWzzTl4viHJ89VAo4O6UKTrFDpKgfFOj-0-d3bac931859fd58e79be7d51fcb79643)
图7-17 绘制其他的热点
05 保存文档,按F12键在浏览器中预览,当单击图像“网站首页”后的效果参见图7-13所示。
★指点迷津★
图像热点超链接和图像超链接有很多相似之处,有些情况下在浏览器中甚至分辨不出它们。虽然它们的最终效果基本相同,但两者实现的原理还是有很大差异的。读者在为自己的网页加入超链接之前,应根据具体的实际情况,选择和使用适合的超链接方式。