在网页中插入各种超级链接

在网页中插入各种超级链接

第四章在网页中建立各种超链接

上一讲回顾：（5分钟）

回顾上一讲内容，展示、交流、评价上次课布置的课题“制作一个简单的网页”，让大家评比一下谁做的最好，并掌声鼓励。通过点评作品让学生增强荣誉感。

课程导入：（5分钟）

进入本校网站，告诉学生什么是超链接，让同学们在浏览本校网站的同时，提出问题。

提问：让学生把在本校网站上见过的超链接指出来，让老师分析这是什么超链接。活跃学习气氛，让同学们对新课内容产生兴趣。

介绍本节课素材及设计目标：（5分钟）

说明素材所在路径，并确立设计目标。

4.1超链接应用实例4.1.1 设计目标

制作一个具有超链接的网页。其浏览效果如图4.1所示。

4.1.2 页面分析

（1）内部超链接

（2）外部超链接

（3）空链接和脚本链接

（4）E-mail超链接

（5）设置超链接颜色

4.1.3 实训引导

制作网页前素材的准备。

4.1.4 制作步骤

（1）创建内部超链接

（2）创建外部超链接

（3）创建空链接和脚本链接

（4）创建E-mail超链接

（5）设置链接颜色

重点：（10分钟）

讲解锚点的含义、制作步骤、返回首链接。边讲解边演示，在让学生自己动手制作锚点链接及返回顶部时，可把课件里制作步骤那一部分投影到大屏幕上；让学习能力差的学生照着步骤制作。

4.3 创建锚点链接

锚点(也称作锚记、书签)常用于包含大量文本信息的网页，通过在网页上设置锚点，再通过锚点链接，就可以直接浏览到相应的网页内容。大大加快了浏览速度。

锚点链接：同一网页或不同网页的指定位置的链接。

4.3.1 锚点链接应用实例

1、设计目标、

制作一个如图2所示的锚点链接。

2、实训引导

制作网页前素材的准备。

3、制作步骤

（1）在页面中插入锚点

（2）为锚点建立链接

4.3.2 插入命名锚点

命名锚点简称为锚点，在网页中用于标记和链接的跳转位置，以便引用。

●在菜单栏中选择“插入”→“命名锚记”命令

●在“锚记名称”文本框中，输入锚记的名称，单击“确定”按钮。

4.3.3 链接锚点

●在“属性”面板中的“链接”文本框中，输入“#”和锚点名称。

4.3.4 设置返回首链接

●选中正文中“Go Top”文本。

●在“属性”面板的“链接”文本框中输入“#top”。

重点：（10分钟）

先用中国地图举例：

当我们在中国地图上点陕西省时，页面就转到陕西

4.4 制作图像地图4.4.1 热区链接应用实例

1.设计目标

制作一个如图3所示的热区链接。

2.页面分析

在图3页面中使用了“图像地图”，其中各个组成部分分别对应一个热区。

3.实训引导

制作网页前素材的准备。

4.制作步骤

（1）制作热区

（2）制作超链接

省地图的页面了。

让学生对热区链接有一定的了解，再提出设计目标。4.4.2 制作热区

单击“图像”，此时“属性”面板上显示的是图像的有关属性，在“属性”面板的左下方有选取工具，单击“选取工具”，在图像上拖动鼠标可绘制出热区。

4.4.3 为热区添加说明文字和制作超级链接.

1．单击“热区”

2．在热区“属性”面板上，做普通链接。

4.4.4 编辑热区

1.同时选中多个热区

2.移动热区

3.调整热区大小

4.删除热区

重点：（5分钟）

把事先制作好的导航条让同学们看看，知道设计目标完成后，网页应该达到什么样的效果。然后利用投影仪带着同学们一步一步制作完成。

4.5 制作导航条

4.5.1 导航条实例

1、设计目标

制作一个如图4所示的导航条。

2、页面分析

在这个导航条中共有4个元素，每个元素由4个图

像构成，其中一个图像用于正常显示状态，另一个图像

用于鼠标移上时的状态，还有两个图像分别用于单击元

素后的状态及鼠标移到被单击过的元素上时的状态，为此制作这个导航条一共需

要16个图像。

3、实训引导

制作网页前素材的准备。

4.5.2 制作导航条

方法1：在菜单栏中选择“插入”→“图像对像”→“导航条”命令。

方法2：在“插入”工具栏的“常用”类别中，单击“图像”菜单并选择“插

入导航条”。

注意：一个网页只能设一个导航条，可以只设置第一个状态。

4.5.3修改导航条

“修改—导航条”，调整顺序、删除、修改间距、改变方向

小结：（4分钟）

教师和学生一起总结和归纳知识点，师生互动。

小结

本章详细介绍了网页中链接的应用和各种链接的创建方法。在Dreamweaver中不仅可以把文本制成超链接，还可以把图像制成超链接。被链接的对象不仅是网页，还可以是其他图像、多媒体文件、E-Mail、可供下载的软件以及其他网站等。超链接有以下几种：内部链接：在同一网站文件之间的链接。

外部链接：不同网站文件之间的链接。

锚点链接：同一网页或不同网页的指定位置的链接。

E-mail链接：电子邮件的链接。

理解绝对路径、文档相对路径、根相对路径的含义。

通过本章学习，我们可以将本地站点下的网页有机地链接在了一起。