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

在网页中插入各种超级链接
第四章在网页中建立各种超链接
上一讲回顾：（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链接：电子邮件的链接。

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

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

布置课题：（5分钟）
要求学生独立完成；按时上交作品。

并在下次课点评本次课的作品。

布置实训课题并提出要求利用所学知识，继续完善第3套配套实训中所做的“信乐
团”网站，要求如下：
1．打开实训素材index.htm文件，设置超链接。

如图4 – 1所示。

●为“个人档案”、“新闻讯息”、“作品介绍”和“返回首页”
创建超链接，分别链接到相应的网页。

●在页面中单击“友情链接”文本将打开搜狐网
站的首页。

●在网页中为“与我联系”文本创建E-mail链
接，其E-mail地址为“teach_”。

2．打开素材中news.htm文件，创建锚点链接。

如
图4-2 所示，在该网页的开始部分以见面内容的新
闻标题作为链接。

当在浏览器中预览该页面时，单
击页首的某个新闻题目，便会跳转到该新闻的主要内容
处。

在该新闻主要内容的末尾单击“Top”时，又可以返
回到页首处。

3．打开素材中members.htm文件，将网页中的图像制作成
图像地图。

如图4-3 所示，当用鼠标单击某个成员的头像
时，便会链接到相应的成员介绍页面。