网页设计与制作立体化教程 第2版 项目四 编辑网页中的超链接

三、任务实施
16
（一）插入文本超链接 下面打开“show.html”网页，在网页中插入文本超链接，具体操作如下。
选择文本
选择文件
三、任务实施
17
（一）插入文本超链接
创建超链接 为“关于我们”创建超链接
三、任务实施
18
（一）插入文本超链接
为“新上架”创建超链接
三、任务实施
19
（二）设置超链接CSS样式 创建的文本超链接是默认样式，可以通过设置链接CSS样式来美化文本超链接，具体操作如下。
5
空链接 电子邮件链接 锚点链接
二、相关知识
（一）认识超链接 3．超链接的路径
绝对路径：绝对路径指包括服 务器地址在内的完全路径，常用于 链接到其他站点上的内容。
6
文档相对路径：文档相对路径是本 地站点链接中最常用的链接形式。使用 相 对 路 径 时 无 需 给 出 完 整 的 URL 地 址 ， 可省去URL地址的协议，只保留不同的 部分。
站点根目录相对路径：站点根目录 相对路径适合创建内部链接，与绝对路 径非常相似，只是省去了绝对路径中带 有协议的地址部分，且以“/”开始，然 后是目录下的目录名。
二、相关知识
7
（一）认识超链接
3．超链接的路径
文档相对路径是制作网站时最常用的链接形式，它的基本 思想是省略掉对于当前文档和所链接的文档都相同的绝对路径 部分，而只提供不同的路径部分。假设一个站点的结构如右图 所示，文档之间相对路径的设置方式通常有以下4种形式。
调整热点
二、相关知识
同目录
子目录
父目录
父目录的子目录
二、相关知识
（二）创建超链接 1．创建文本超链接
通过菜单命令
8
指向文件
二、相关知识
（二）创建超链接 1．创建文本超链接
通过“浏览文件”按钮
9
输入HTML代码
二、相关知识
10
（二）创建超链接
2．电子邮件超链接
电子邮件超链接可让访问者启动电子邮件客户端，指定邮箱发送邮件。单击电子邮件超链接， 将打开一个新的空白“邮件（HTML）”窗口，在邮件消息窗口中，“收件人”文本框中将自动 更新显示为电子邮件超链接中指定的电子邮箱地址，如下图示。
二、相关知识
25
（一）直接添加超链接
在Dreamweaver CC 2018中为图像添加超链接的操作方法为：在设计视图中选择需添加超 链接的图像，然后在“属性”面板中的“链接”文本框中输入要跳转的网页地址，如下图所示。
二、相关知识
26
（二）图像地图
1．创建图像地图热点
在创建图像地图热点时，先选择要创建地图热点的图像，再在“属性”面板中选择不同的热 点形状，绘制图像热点区域后，在“属性”面板的“链接”文本框中输入链接路径或名称。
项目四
编辑网页中的超链接
任务一 为“圈粉”网页创建文本超链接
任务二 为“圈粉”网页创建图像超链接
实训一 为“爱尚汽车”车友会活动页面 创建超链接
实训二 为“爱尚汽车”新车展页面创建 超链接
课后练习
一、任务目标
3
超链接犹如一个网站的桥梁，可以将制作好的单个网页链接起来，使其组成完整的网站。本 任务需要为“圈粉”网页创建文本超链接，使用户能够方便地在网站中的网页之间进行跳转。本 任务制作完成后的最终效果如下图所示。
任务二 为“圈粉”网页创建图像超链接
实训一 为“爱尚汽车”车友会活动页面 创建超链接
实训二 为“爱尚汽车”新车展页面创建 超链接
课后练习
一、任务目标
24
为“圈粉”网页插入图像，然后为插入的图像创建超链接，并在展示图像中使用图像地图创 建交互式热点，使访问者能够方便地在单击图像或图像中的某个区域，跳转到指定的网页。本任 务制作完成后的最终效果如下图所示。
二、相关知识
15
（三）设置文本链接属性 2．设置伪类的CSS样式
用户可以在“页面属性”对话框中 设置伪类的CSS 样式来完成，具体操 作方法为：在“属性”面板中单击 “页面属性”按钮，在打开的“页面 属 性 ” 对 话 框 中 单 击 “ 链 接 （ CSS ） ” 选 项 卡 ， 在 其 中 设 置 链 接 （ CSS ） 参 数，如右图所示。
二、相关知识
11
（二）创建超链接
3．锚点超链接 锚点超链接的功能是单击超链接对象后可跳转到本页面或其他页面的指定位置。锚点超链接
的创建分为两步，首先创建锚点，然后链接锚点。
通过ID 创建锚点
通过代码创建锚点
二、相关知识
12
（二）创建超链接 3．锚点超链接
通过“属性”面板链接锚点
通过代码链接锚点
二、相关知识
二、相关知识
27
（二）图像地图
2．编辑图像地图热点
对于图像地图中所创建的热点，可以进行移动热点区域、调整热点大小，或者在绝对定位的 元素（AP 元素）中前后移动热点等编辑操作。还可以将含有热点的图像从一个文档复制到其他 文档，或者复制某图像中的一个或多个热点，然后将其粘贴到其他图像上。
选择多个热点
设置链接（CSS）样式
设置CSS样式后的超链接效果
三、任务实施
20
（三）插入锚点超链接 下面在文档中创建锚点，并创建超链接访问这些锚点，具体操作如下。
创建锚点
输入需要超链接的文本
三、任务实施
（三）插入锚点超链接
创建锚点超链接
Hale Waihona Puke 21创建锚点链接三、任务实施
22
（三）插入锚点超链接
完成后的效果
任务一 为“圈粉”网页创建文本超链接
二、相关知识
4
（一）认识超链接
1．超链接的组成
超链接主要由源端点和目标端点两部分组成，有超链接的一端称为超链接的源端点（当鼠标 指针停留在超链接上时鼠标指针呈状态，如下图所示），单击超链接源端点后跳转到的页面所 在的地址称为目标端点，即URL。
二、相关知识
（一）认识超链接 2．超链接的类型
相对链接 绝对链接 文件链接
13
（二）创建超链接 4．创建其他超链接
除了上述介绍的超链接外，在网页中还可以创建其他类型的超链接。
空链接
下载超链接 脚本链接
二、相关知识
14
（三）设置文本链接属性
1．超链接代码<a>标签
<a> 标签是实现超链接的HTML 代码，主要用于定义超链接，其语法格式为：<a href=“地 址”> 超链接对象</a>。其中href 是a 标签最重要的一个属性，用于指定连接的目标，如果没有 该属性，就不能使用target 、 type 等属性。<a> 标签主要通过4 个伪类定义超链接在不同状态 下的CSS 样式，如下图所示。