购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

4.6 创建超链接

超链接是构成网站最为重要的部分之一,单击网页中的超链接,即可跳转到相应的网页,因此,可以非常方便地从一个网页到达另一个网页,下面讲述各种类型超链接的创建方法。

4.6.1 创建电子邮件链接

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

图4-44 创建电子邮件链接的效果

提示

单击电子邮件链接后,系统将自动启动电子邮件管理软件,并在收件人地址中自动填写电子邮件链接指定的邮箱地址。

01 打开网页文档,将光标置于要创建电子邮件链接的位置,如图4-45所示。

图4-45 打开网页文档

02 执行“插入”︱HTML︱“电子邮件链接”命令,如图4-46所示。

图4-46 执行“电子邮件链接”命令

03 弹出“电子邮件链接”对话框,在“文本”文本框中输入“联系我们”,在E-mail文本框中输入mailto:sdhzgw@163.com,如图4-47所示。

图4-47 “电子邮件链接”对话框

04 单击“确定”按钮,创建电子邮件链接,如图4-48所示。

图4-48 创建电子邮件链接

高手支招

单击HTML插入栏中的“电子邮件链接”按钮 ,也可以弹出“电子邮件链接”对话框。

05 保存文档,按F12键在浏览器中预览,单击“联系我们”电子邮件链接文字,效果如图4-44所示。

指点迷津

如何避免页面中的电子邮件地址被搜索到?

如果拥有一个站点并发布了E-mail链接,那么其他人会利用特殊工具搜索到这个地址并加入到其数据库中,此时就会经常收到垃圾邮件。要想避免E-mail地址被搜索到,可以在页面上不按标准格式书写E-mail链接,如yourname at mail.com,它等同于yourname@mail.com。

4.6.2 创建脚本超链接

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

图4-49 创建脚本关闭网页的效果

01 打开网页文档,选中“关闭窗口”文本,如图4-50所示。

图4-50 打开网页文档

02 在“属性”面板中的“链接”文本框中输入Javascript:window.close(),如图4-51所示。

图4-51 输入代码

03 保存文档,按F12键在浏览器中浏览,单击“关闭窗口”文本超链接会自动弹出一个提示对话框,提示是否关闭窗口,单击“是”按钮,即可关闭窗口,如图4-49所示。

4.6.3 创建下载文件超链接

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

图4-52 下载文件的超链接

提示

网站中每个下载文件必须对应一个下载超链接,而不能为多个文件或者一个文件夹建立下载超链接,如果需要对多个文件或文件夹提供下载,只能利用压缩软件将这些文件或文件夹压缩为一个文件。

01 打开网页文档,选中要创建超链接的文字,如图4-53所示。

图4-53 打开网页文档

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

图4-54 “选择文件”对话框

03 单击“确定”按钮,添加到“链接”文本框中,如图4-55所示。

图4-55 添加到“链接”文本框中

04 保存文档,按F12键在浏览器中预览,单击“公司简介”文字下载文件,效果如图4-52所示。

4.6.4 创建图像热点超链接

在创建超链接的过程中,首先选中图像,然后在“属性”面板中选择热点工具并在图像上绘制热区,创建图像热点超链接后,当单击“首页”图像时,效果如图4-56所示,会出现一个小手形状,具体的操作步骤如下。

提示

当预览网页时,热点超链接不会显示,当鼠标指针移至热点超链接上时会变为手形图标,以提示浏览者该处为超链接。

图4-56 图像热点超链接效果

01 打开网页文档,选中创建热点超链接的图像,如图4-57所示。

图4-57 打开网页文档

02 执行“窗口”|“属性”命令,打开“属性”面板,在“属性”面板中单击“矩形热点工具”按钮 ,选择“矩形热点工具”,如图4-58所示。

图4-58 “属性”面板

指点迷津

除了可以使用“矩形热点工具”,还可以使用“椭圆形热点工具”和“多边形热点工具”来绘制椭圆形热点区域和多边形热点区域,绘制方法与“矩形热点工具”相同。

03 将鼠标指针置于图像上要创建热点的位置,绘制一个矩形热点,如图4-59所示。

图4-59 绘制一个矩形热点

04 按以上步骤的方法绘制其他的热点并设置热点超链接,如图4-60所示。

图4-60 绘制其他的热点超链接

05 保存文档,按F12键在浏览器中预览,单击“首页”图像后的效果如图4-56所示。

指点迷津

图像热点超链接和图像超链接有很多相似之处,有些情况下在浏览器中甚至分辨不清。虽然它们的最终效果相同,但两者实现的原理还是有很大差异的。读者在为网页加入超链接之前,应根据具体的情况,选择和使用适合的链接方式。 19Ebh0fp2Mx8MJzhxV32HTCjTQFhwMSrHxb7IT5LJhXFPnNMXsmIFNhWeoJaIN+b

点击中间区域
呼出菜单
上一章
目录
下一章
×