下载掌阅APP，畅读海量书库
立即打开
“师生作品展示平台”网站首页已经基本做好，但是导航栏还未添加超链接。需要给导航栏添加超链接，使各个分散的网页连成一体，构成一个整体的网站，如图4-1所示。
图4-1 导航栏文字链接
通过本任务的学习，要求掌握文字超链接的创建方法，并为网站首页导航栏添加超链接。
重点要求掌握添加文字超链接的方法。
【技术要领】通过“属性”面板设置链接网页文字。
【解决问题】创建文字链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\练习网站\main.html。
本任务难度较低，通过Dreamweaver的“属性”面板可以轻松完成。
01 打开素材网页“main.html”，选中需要添加超链接的文字，如“专业介绍”。在“属性”面板中设置属性，如图4-2所示。
图4-2 设置属性
02 单击“浏览文件”按钮 1 ，弹出“选择文件”对话框，在“查找范围”下拉列表框中查找到“专业介绍”需要链接到的网页“intro.html”，单击“确定”按钮，如图4-3所示。然后在“属性”面板中的“目标”下拉列表框中选择“_self”选项，这样链接的网页就替换成当前的网页打开了。
图4-3 选择链接文件
03 使用同样的方法，给导航栏上所有文字都添加超链接。制作完毕，按F12键预览效果。
“师生作品展示平台”网站首页中的很多图片还未添加超链接，需要给各种图片添加超链接，如图4-4所示。
图4-4 图片超链接
通过本任务的学习，要求掌握图片超链接的创建方法，并为网站各类图片添加超链接。
重点要求掌握图片超链接的创建方法。
【技术要领】通过“属性”面板设置链接网页图片。
【解决问题】创建图片链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\练习网站\main.html。
图片链接是一种十分常见的超链接形式，单击某张图片可以链接到某个网页或者网页的某个部分等。
创建图片链接的方法与创建文字链接基本一致。
01 打开素材网页“main.html”，选择需要添加链接的图片，如图4-5所示。
图4-5 选中图片
02 选择“窗口”>“属性”命令，打开“属性”面板，单击“链接”后面的“浏览文件”按钮，在弹出的对话框中选择素材网页“design_enjoy.html”，单击“确定”按钮。然后在“属性”面板中的“目标”下拉列表框中选择“_blank”选项（选择该选项，表示单击链接后，将在新的浏览器窗口中打开链接的网页），如图4-6所示。
图4-6 “属性”面板设置
03 设置好图片链接后，选择“文件”>“保存”命令，按F12键浏览，当光标被置于设有链接的图片上时，光标变成小手形状，如图4-7所示。
图4-7 效果图
在前面的任务中，已经制作完成“师生作品展示平台”网站的导入页，但是图片热区链接还未完成。所谓的“图片热区链接”，就是指图片中的某些区域具有链接响应，而不是整个图片，如图4-8所示。
图4-8 矩形热区链接
通过本任务的学习，要求掌握图片热区链接的创建方法，并为网站导入页添加热区链接。
本任务难点是创建不同形状的图片热区链接；重点是掌握各种图片热区超链接的创建方法。
【技术要领】使用热区工具绘制热区，然后通过“属性”面板设置链接网页。
【解决问题】创建热区链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\练习网站\index.html。
为图片添加超链接，选中的是整个图片，如果只想让图片某些区域响应超链接，或者一张图片不同区域分别设置不同的超链接，就需要用到“热区链接”。
01
打开“模块4\素材\练习网站\index.html”网页，单击导入页中间的图片，在“属性”面板中，选择“矩形热点工具”
，如图4-9所示。
图4-9 热区域工具
02
将光标移动到图形上，这时光标为十字形，在图形上绘制出矩形区域，如图4-10所示。绘制出的区域为能够响应超链接的区域，不妨考虑一下区域要多大比较适合。通过“指针热点”工具
，可以更改区域的大小和位置。
图4-10 绘制热区
03
在“属性”面板上单击“浏览文件”按钮
，设置“链接”文件为网站首页“main.html”，设置“目标”为“self”“，替换”文本为“进入首页”，如图4-11所示。属性设_置完毕，按F12键浏览效果。
图4-11 热点区域属性设置
当一个网页的主题或文字较多时，可以在网页内建立多个标记点，将超链接指定到这些标记点上，能够使浏览者快速找到要阅读的内容，这些标记点被称为“锚点”或“锚记”，现需要为“师生作品展示平台”网站首页添加锚点，如图4-12所示。
图4-12 效果图
在网站首页顶部添加锚点，在网页底部添加文字“返回顶端”，单击可以实现从网页的底端跳到顶端的效果。
锚点链接的难点是从一个页面链接到其他页面的某个锚点。重点要求掌握锚点的创建和链接。
【技术要领】设置锚点，通过“属性”面板设置链接网页。
【解决问题】锚点链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\练习网站\main.html。
本任务主要包括两部分，第一部分是在网页顶部适合的地方插入一个锚点，第二部分是在网页的底部做一个链接，链接到这个锚点上。
01 打开素材网页“main.html”，将光标置入网页顶端要插入锚点的位置，然后插入锚点。插入锚点 2 的方法有两种，一种是按Ctrl+Alt+A组合键；另一种是选择“插入”>“命名锚记”命令，如图4-13所示。
02
弹出“命名锚记”对话框，将锚记命名为“main_top”，如图4-14所示，单击“确定”按钮后可出现锚点标记
。
图4-13选择“命名锚记”命令
图4-14“命名锚记”对话框
浏览网页的时候，这个锚点能被看见吗？通常用Dreamweaver打开下载的网页模板，也常常可以看到
标记。
03 在首页底端添加文字“返回顶端”并选中，如图4-15所示，在“属性”面板的“链接”文本框中输入“#main_top”，如图4-16所示。
“#”符号不能省略。
图4-15 选中文字
图4-16 设置链接
04 保存网页文档，按F12键预览网页。
通过以上4个任务的学习，可以知道超链接最常见的链接对象是网页文件。在某些网页中，当访问者单击某个链接后，会自动打开电子邮件的客户端软件（如Outlook或Foxmail等），向某个特定的E-mail地址发送邮件，就是电子邮件链接，现需为“师生作品展示平台”网站“首页”页面底部的E-mail添加电子邮件链接，如图4-17所示。
图4-17 电子邮件链接
通过“属性”面板为“模块4\素材\练习网站”的每个页面底部的E-mail地址添加电子邮件链接。
重点要求掌握电子邮件链接的创建方法。
【技术要领】通过“属性”面板设置链接邮件。
【解决问题】邮件链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\练习网站。
电子邮件链接是一种常见的、实用的链接种类，它可以依附于文字或图片。单击该文字或图片，就可以打开电子邮件软件开始写邮件，十分方便。
01 打开“模块4\素材\main.html”网页。选择网页上的文字“information@pfc.cn”，在“属性”面板上，设置“链接”的属性为“mailto:information@pfc.cn”。
电子邮件前要加“mailto:”，如图4-18所示。
图4-18 设置链接属性
很多网页中有“给我来信”等文字，单击这些文字，可以链接到某个电子邮件上，其制作方法是否与此类似？
02 选择“文件”>“保存”命令，按F12键浏览，效果如图4-17所示。
03 在制作电子邮件链接的时候还可以加入电子邮件的主题，只需在“属性”面板的“链接”文本框中输入语句“mailto:information@pfc.cn?subject=报考咨询”，则在电子邮件中可自动加上主题“报考咨询”
网页中经常有“友情链接”部分，单击链接文字，可以链接到该网页上。单击某个超链接，能够链接到其他网站的链接称之为外部链接。现需要为“师生作品展示平台”网站创建外部链接网页，将其链接到“北大方正软件技术学院”网站中，如图4-19所示。
图4-19 创建外部链接网页
在“师生作品展示平台”网站中，为网页底部的“北京北大方正软件技术学院”这个名称添加链接，单击可链接到该学院主页。
重点要求掌握外部链接创建的方法和注意事项。
【技术要领】通过“属性”面板设置外部链接。
【解决问题】网页的外部链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\练习网站。
外部链接是一种常见的、实用的链接种类，是把自己的网站和别人的网站链接起来的重要方式。在文字或者图片上同样也可以创建外部链接。
01 打开“模块4\素材\练习网站\main.html”网页，选中文字“www.pfc.edu.cn”，在“属性”面板中，设置“链接”属性为http://www.pfc.edu.cn。注意，www前要加“http://”，如图4-20所示。
图4-20设置链接属性为"http://www.pfc.edu.cn"
02 选择“文件”>“保存”命令，按F12键浏览效果。
除了前面介绍的几种超链接类型外，在网页制作过程中，还有文件链接、空链接、脚本链接等。
掌握文件链接、空链接、脚本链接的基本操作。
本任务难点是脚本链接的创建。重点要求了解和掌握空链接和文件链接创建的方法。
【技术要领】通过“属性”面板或脚本进行设置。
【解决问题】其他链接。
【应用领域】个人网站；企业网站。
【素材来源】模块4\素材\文件链接\css1.html。
文件链接用于链接某个图片或者某个压缩文件等，常被用作下载链接；空链接即没有链接任何东西，一般在网页开发过程中使用；脚本链接是结合脚本语言所做的超链接，其功能强大。
01 文件链接的超链接目标不是地址或网页，而是多媒体文件或者可执行文件，常见的是.exe、.rar、.zip文件或图片文件，制作文本链接的时候，先选择链接的文字或图片，然后在“属性”面板中的“链接”文本框中输入文件全称即可，如图4-21所示。
图4-21设置文件链接
02 空链接，顾名思义就是单击该链接后不会打开网页或文件，创建空链接首先选中要链接的图片、图像或对象，然后在“属性”面板中的“链接”文本框中输入“#”符号即可，如图4-22所示。空链接创建完成后，被创建链接的文字或者图片也具有链接效果，如显示手型符号等。
图4-22 输入“#”
03 脚本链接用来执行JavaScript代码或者调用JavaScript函数。脚本链接的作用很大，能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息。详细功能查阅JavaScript相关资料。创建脚本链接，首先选中要链接的文本、图像或对象，然后在“属性”面板中的“链接”文本框中输入“javascript:”，后跟一些JavaScript代码或一个函数调用（在冒号与代码或调用之间不能有空格）。例如，在“链接”文本框中输入“javascript:alert (‘工作室正全面启动！’）”，即可生成一个脚本链接，如图4-23所示。
图4-23 输入JSP代码