第四章在网页中建立各种超链接
上一讲回顾：（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链接：电子邮件的链接。
理解绝对路径、文档相对路径、根相对路径的含义。
通过本章学习，我们可以将本地站点下的网页有机地链接在了一起。
教学板书：（1分钟）第四章在网页中建立各种超级链接
）1、文本超链接：内部链接、外部链接、空链接、脚本链接、E-Mail链接、锚点链接。）2、图片超链接：热区链接
3、导航栏：导航栏的制作
提问：（10分钟）
通过提问课后作业来了解学生本次课的学习效果；要因材施教，按学习能力分层次提问，遇到回答不上来的同学，可以让他点名求助其他同学，重点表扬学习有进步的同学。并给予掌声鼓励。
提问课后作业
一、填空题。
1、超链接有以下几种类型：、、、。
2、如果要链接到新浪网站，网址为“https://www.doczj.com/doc/e95116871.html,”，应在文本“属性”面板上的“链接”文本框中输入。
3、为一段文字添加E-mail链接，邮件地址为“teach_ie@https://www.doczj.com/doc/e95116871.html,”，则应在文本“属性”面板上的“链接”文本框中输入。
二、单选题。
1、如果要使超链接目标在新的窗口打开，应在“属性”面板的“目标”下拉列表框中选择（）
A. _ bland
B. _ parent
C. _ self
D. _ top
2、将网页中“返回首页”文本链接到top锚点，应在文本“属性”面板上的“链接”文本框中输入（）
A. *top
B. top
C. # top
D. # top
三、思考题。
1、超链接有几种类型？
2、链接路径分为哪几种情况？
3、如何使超链接目标在新的窗口中打开？
4、如何在页尾设置链接，使单击链接时能返回到页首？
5、如何设置链接文本在各种状态下的颜色？
布置课题：（5分钟）
要求学生独立完成；按时上交作品。并在下次课点评本次课的作品。
布置实训课题并提出要求利用所学知识，继续完善第3套配套实训中所做的“信乐
团”网站，要求如下：
1．打开实训素材index.htm文件，设置超链接。如图4 – 1所示。
●为“个人档案”、“新闻讯息”、“作品介绍”和“返回首页”
创建超链接，分别链接到相应的网页。
●在页面中单击“友情链接”文本将打开搜狐网
站的首页。
●在网页中为“与我联系”文本创建E-mail链接，
其E-mail地址为“teach_https://www.doczj.com/doc/e95116871.html,”。
2．打开素材中news.htm文件，创建锚点链接。如
图4-2 所示，在该网页的开始部分以见面内容的新
闻标题作为链接。当在浏览器中预览该页面时，单
击页首的某个新闻题目，便会跳转到该新闻的主要内容处。
在该新闻主要内容的末尾单击“Top”时，又可以返回到
页首处。
3．打开素材中members.htm文件，将网页中的图像制作成
图像地图。如图4-3 所示，当用鼠标单击某个成员的头像
时，便会链接到相应的成员介绍页面。