网页设计与制作 单元6 网页超链接与导航-任务6.1

任务6.1 为网页增加超链接元素
6.1.2 创建各类超链接 HTML中超链接应用的标签是<a></a>，在Dreamweaver CC中可以 通过菜单或面板命令按钮、链接对象的“属性”面板直接设置或拖曳 等方式创建超链接，方法简单、方便。 1．文档链接 网页中应用最多的是以文字或整幅图像为链接源，以某个文档为 目标的超链接。具体操作方法是，首先选定作为链接源的文字或图像， 然后按以下方式之一即可创建文档链接。
单元6 网页超链接与导航 任务6.1 为网页增加超链接元素
任务6.1 为网页增加超链接元素
2020/9/7
2
任务6.1 为网页增加超链接元素
任务目标: （1）认识超链接的概念、种类及超链接路径； （2）掌握各类超链接的作用与创建方法； （3）掌握设置超链接CSS样式的方法； （4）掌握图像地图的创建方法。
提示：超链接多采用相对路径，建议先保存新网页文档，然后再创 建文档中的超链接。因为如果没有一个确切的起点，则文档相对路 径无效。在保存网页文档之前创建超链接，Dreamweaver将临时使用 以“file://”开头的绝对路径；当保存该网页文档时， Dreamweaver将“file://”路径自动转换为相对路径。
任务6.1 为网页增加超链接元素
超链接有以下不同的分类方式。 • 按照链接路径的不同，网页中超链接主要分为内部链接、局部链 接和外部链接。 • 按照目标对象的不同，网页中的超链接可以分为文档链接、锚点 链接、电子邮件链接、脚本链接、空链接等。
2．超链接路径 创建超链接时，超链接路径的设置非常重要，如果设置不正确， 将不能完成跳转功能。 超链接路径分为绝对路径和相对路径两大类。
任务6.1 为网页增加超链接元素
（1）使用菜单或面板命令按钮创建超链接。 选择“插入”→“Hyperlink”菜单命令，或者单击“插入”面 板 “ HTML” 选 项 卡 中 的 【Hyperlink】 图 标 按 钮 ， 打 开 “Hyperlink（超级链接）”对话框，从中设置链接文本、链接目标 和链接目标打开的方式等。
• 标题：设置超链接的标题。在浏览器中，当鼠标置于超链接文本上 时，将在鼠标后出现一个黄色的浮动框，显示超链接标题的名称。 • 访问键：设置可用来在浏览器中选择该链接的等效键盘键（一个字 母）。 • Tab键索引：设置Tab键顺序的编号。
任务6.1 为网页增加超链接元素
（2）在“属性”面板中直接创建超链接。 在文本“属性”面板“HTML”选项卡中的“链接”文本框中直 接输入路径，或者单击“链接”后面的【浏览文件】按钮 ，在打 开的对话框中选择目标文件创建超链接。或者拖动“链接”后面的 【指向文件】图标按钮 ，将出现一条源自 按钮的箭头，将箭头 拖到“文件”面板中的目标文件上也可创建链接。 在“属性”面板中可同时设置超链接的标题和目标。
请在Dreamweaver中完成案例操作。
任务6.1 为网页增加超链接元素
6.1.4 用CSS设置超链接 设置完超链接后，默认超链接的样式为链接文本带有下画线，链 接前文本为蓝色，在浏览器中单击超链接，链接活动过程中链接文本 为红色，之后文本变为暗紫色。 可以通过CSS属性修改超链接的样式，以使其更加美观。操作方 法是： 选择“文件”→“页面属性”菜单命令，或单击“属性”面板上 的【页面属性】按钮，打开“页面属性”对话框，选择“链接 （CSS）”选项卡，在其中设置链接的字体、大小、链接状态的颜色， 以及下画线样式等。
任务6.1 为网页增加超链接元素
• 目标：指定链接目标打开的窗口，其中:
• “_blank”表示在新窗口中打开； • “new”也表示在新窗口中打开； • “_self”表示在当前窗口中打开；Dreamweaver默认在当前窗口中打开。 • “_parent”表示在上级窗口中打开、“_top”表示在顶层窗口中打开（主 要用于框架结构的网页中）。
任务6.1 为网页增加超链接元素
“Hyperlink”对话框各项含义如下： • 文本：设置要创建超链接的文本，Dreamweaver会自动添加选中 的文本，也可以手工输入链接显示的文本。 • 链接：指定链接目标对象的路径，可以直接输入，也可以通过单击 后面的【浏览】按钮 ，打开“选择文件”对话框进行选择。
任务6.1 为网页增加超链接元素
提示：同一页面中命名锚点的名称不能重复，且锚点名称区分大小 写。如果用输入代码<a>的方式添加了命名锚点后，文档“设计”视 图中将出现命名锚点图标 ；如果没有出现该图标，可以选择“编 辑”→“首选项”菜单命令，在“不可见元素”分类中选中“命名锚 记”选项使其显示。
然后，链接回命名锚点。选定要设置锚点链接的文本或图像，在 其“属性”面板的“Biblioteka Baidu接”文本框中，输入一个“#”字符和命名锚 记名称，如“#top”即可。
Step09 保存网页，并按<F12>键在浏览器中预览网页效果。
任务6.1 为网页增加超链接元素
6.1.5 创建图像地图 在Dreamweaver中不仅可以方便地为一幅图像添加超链接，还可 以为图像中不同的区域创建不同的超链接，即图像地图。 图像地图是Javascript中的专业术语，是指已被分为多个区域的图 像，这些区域称为热点。当用户单击某个热点时，会显示其链接的目 标文件。
resources/tips.html ../index.html
目标文件位于当前文件所 在文件夹的下层文件夹中
目标文件位于当前文件所 在文件夹的父文件夹中
catalog.html ../products/catalog.html
目标文件位于当前文件所 在文件夹的父文件夹的其他 子文件夹中
任务6.1 为网页增加超链接元素
任务6.1 为网页增加超链接元素
添加电子邮件链接也可以在链接源的“属性”面板“链接”文本 框中直接输入“mailto:邮箱地址。
任务6.1 为网页增加超链接元素
4．脚本链接 脚本链接能执行JavaScript代码或调用JavaScript函数。它的 作用广泛，能够在不离开当前Web页面的情况下为访问者提供有关项 目的附加信息，还可用于在访问者单击特定项时，执行计算、验证表 单和完成其他处理任务等。添加脚本链接的具体方法如下。 选定页面中的文本或图像，在文档“代码”视图或“属性”面板 的“链接”文本框中直接输入脚本代码。如要实现弹出一个显示 “hello”的窗口，可以输入如下代码。
任务6.1 为网页增加超链接元素
添加图像地图的具体操作方法如下。 首先，选中要设置热点的图像，单击图像 “属性”面板左下角的【热点工具】图标按钮， 具体包括【矩形热点工具】图标按钮 、【圆 形热点工具】图标按钮 、【多边形热点工具】 图标按钮 三种，在图像上拖动创建热点。 创建的热点四周带有控制点，可以选定 【指针热点工具】图标按钮 ，拖动热点区域 的位置或调整热点区域的大小。
任务6.1 为网页增加超链接元素
5．空链接 空链接是未指派目标端点的链接，也可以用于向页面上的对象或 文本附加行为。添加空链接具体操作如下。 选定要设置空链接的文本或图像，在“属性”面板的“链接”文 本框中输入“#”或“javaScript:;”即可。 可以为空链接附加行为，例如可以为空链接添加单击事件行为来 将百度主页加入收藏夹。操作方法是在文档的“代码”视图中，在超 链接标签中直接输入代码，对应代码如下：
<a href="JavaScript:; " onClick="window.external.addFavorite('http://www.baidu.com','百度');"> 收藏百度</a>
任务6.1 为网页增加超链接元素
6.1.3 为腊八节网页添加超链接 下面为腊八节网页添加各类超链接。
提示：锚点链接也可以指向其他页面中的命名锚点处，此时在“链 接”框中以“其他页面的路径#锚点名称”格式输入即可。
任务6.1 为网页增加超链接元素
3．电子邮件链接 使用电子邮件链接，可以方便地打开浏览器默认的邮件处理程序 进行发送电子邮件的操作，收件人地址即电子邮件链接指定的邮箱地 址。添加电子邮件链接的操作步骤如下。 选定要设置电子邮件超链接的文本或图像，选择“插 入”→“HTML”→“电子邮件链接”菜单命令，或者单击“插入” 面板“HTML”选项卡中的【电子邮件链接】按钮，弹出“电子邮件 链接”对话框，其中“文本”文本框中的内容默认为选定的文字； 也可以直接输入，在“电子邮件”文本框中输入收件人的电子邮箱地 址，单击【确定】按钮完成电子邮件超链接的创建。
任务6.1 为网页增加超链接元素
从上述代码可以看出，CSS样式可以设置超链接不同状态的样式， 为此CSS定义了四种伪类:
• “a:link”设置超链接对象正常显示的样式，即未访问前的样式； • “a:visited”设置超链接对象已访问后的样式； • “a:hover”设置超链接对象变换时的样式，即鼠标悬停在超链接 文本上的样式； • “a:active”设置超链接对象活动链接时的样式，即单击超链接 并释放超链接之前的样式，此过程时间非常短，通常效果不明显。
在超链接中，如果链接的对象是Internet上其他站点的内容，必 须使用完整的URL。
对于链接对象是同一站点中内容时，使用绝对路径的优点是当前 网页文件位置改变后，里面的链接还是指向正确的URL，缺点是不利 于站点的移植和本地测试；若使用相对路径，则便于将整个网站进行 移植和本地测试，但当前网页文件的位置发生改变时，链接路径也需 要更新，否则链接会出错。
任务6.1 为网页增加超链接元素
6.1.1 超链接概述 超链接是网页中最重要、最根本的元素之一，各个网页被超链接 联系在一起后，才能真正构成一个网站。 1．认识超链接 所谓超链接是指从某个网页元素指向一个目标的连接关系。在网 页中用来创建超链接的元素，可以是一段文字，也可以是一幅图像。 而超链接的目标可以是另一个网页，也可以是网页上的指定位置，还 可以是一幅图像、一个电子邮件地址、一个文件，甚至是一个应用程 序。当浏览者单击设置了超链接的文字或图像后，链接目标将显示在 浏览器中，并根据目标的类型打开或运行。
任务6.1 为网页增加超链接元素
设置完成后，对应的代码如下。
a:link { color: #2D2B2C; text-decoration: none;
} a:visited {
text-decoration: none; color: #2D2B2C; } a:hover { text-decoration: underline; color: #F90B0F; } a:active { text-decoration: none; color: #F90B0F; }
任务6.1 为网页增加超链接元素
2．锚点链接 锚点链接的功能是：单击超链接对象后，可以跳转到本页面或其 他页面中的指定位置，即命名锚点处。锚点超链接通常用于长篇文章、 技术文档等内容的网页中。 创建锚点链接分为建立命名锚点和创建指向命名锚点的超链接两 部分。 首先，创建命名锚点。在“设计”视图中，选中要设置为锚点的 项目，如文本或图像，在其“属性”面板中为其设置“ID”。或者在 “ 代 码 ” 视 图 中 ， 直 接 在 需 要 插 入 锚 记 的 位 置 输 入 代 码 <a name="[ 命 名 锚 点 的 名 称 ]"></a> 即 可 ， 如 <a name="top"> </a>，其中top即命名锚点的名称。
任务6.1 为网页增加超链接元素
（1）绝对路径。完整地描述文件存储位置的路径就是绝对路径， 如D:\tu\Rose.jpg。在Internet中，绝对路径是指包括服务器协议 和域名的完整URL路径。URL（Uniform Resource Locator，统一 资源定位符）的一般格式如下：
protocol :// hostname[:port] / path / [;parameters][?query]
（2）相对路径。相对路径是指其他文档相对于某文档的存储路 径。在同一个站点内建立链接通常采用相对路径。
任务6.1 为网页增加超链接元素
当前文
件
目标文件
相对路径格式
hours.html hours.html
说明
目标文件与当前文件在同 一文件夹中
tips.html
contents .html index.html