网站实现——《建立超链接》教学设计
[课 题]建立超链接
[教材分析]
网页超链接包括网页链接、站点链接、书签链接、图片热区链接、 E-mail 链接等，
学生通过学案自主探究学习，掌握网页中超链接实现的方法，培养和增强学生探究学习
的能力。
[学情分析]
在前面的学习中，学生都能独立的完成单个网页的制作，所以对软件的环境已很熟
悉。同时在建站时有过规划，所以学生对站点内各页面以及相互联系也比较熟悉。在这
节课中学生将会学习如何在主页和分栏目页面之间建立超级链接，使之成为一个真正意
义上的网站。
[教学目标]
知识与技能目标：
理解超链接的概念与种类；掌握用 frontpage 制作超链接的方法。
过程与方法目标：
1.能实现几种超链接在网页中的灵活应用；
2.通过设置超链接的操作，使学生掌握网页中超链接的制作方法，总结出
操作的规律，培养学生自主学习和协作学习的能力。
情感态度与价值观目标：
通过利用设置超链接将独立的网页串成一个有机的整体，使学生感受成功的喜
悦。
[教学重点] 创建超链接的方法；
[教学难点] 书签式链接；图片中热区链接
[教学方法] 采用任务驱动、自主探究、合作交流等方式组织课堂教学
[教学时间] 1 课时
[教学环境] 多媒体网络机房 PPT 课件 超链接学案（网页）cljxx 网站（半成品）
[教学过程]
教学
环节
师 生 活 动 设计意图
一、
创设
情境
巧妙
导入
【演示】教师打开超链接学案中“index.htm”,我们同学绝大多数都
是淮安区的，那么大家对自己的家乡知道多少呢？我制作了一个简单的网
站，请大家点击以下图片，一起来浏览这个网站。
【学生讨论】大家在浏览网站时靠什么在各个不同的网页之间跳转
呢？
【回答】超链接
我们今天这节课的任务就是运用超链接将我们做好的零散页面组合
成一个有机的整体，形成一个真正意义上的网站。
通过家乡网站
制作，创设情
景，引发学生的
思考，并由此引
出超链接的学
习。
培养学生热爱
家乡的感情和
对网页制作的
兴趣。
二、
设置
任务
讲授
教学
内容
请学生登录 Ftp，下载超链接学案文件。浏览学案内容。并思考回答：
1、超链接的概念：
2、超链接的组成要素： ____________、
3、超链接的分类： 、 、
【演示】前面我们在规划和设计站点的时候，希望整个站点的网页有
图中所示的链接。
通过自主学习，
能激发他们的
学习积极性，有
利于全面提高
学生动手动脑
的能力。
跟我联系（czzx@163.com）
首页
(index.htm)
景点（jingdian.htm）
历史文化（wenhua.htm）
名人（mren.htm）
美食(meishi.htm)
楚州中学（图片）
（http://www.haczzx.com）
以第一个链接为例：我们希望单击页面中的“首页”这两个字，能够
迅速跳转到“首页”这个页面，这里涉及到两个对象，我们分别称之为“链
接源”、“链接目标”。
【提问】从字面上来理解，这里的“首页”字是 、页
面“main.html”是 ，而中间用来连接链接源和链接目标
的这根线就是超链接。
1、同一站点不同页面的超链接、站点链接、EMAIL 链接
任务一：打开”cljxx”站点中的 index.htm，按如下要求进行链接。
链接源 链接目标
首页（文字） 本网站中的网页 main.htm
景（图片）
本网站中的网页 jindian.htm
楚州中学（图片）
网址 http://www.haczzx.com
跟我联系（文字） 邮箱：czzx@163.com
【学生自主学习】打开学案中 index.htm 页面学习，完成任务一。
【巡回指导】学生操作时教师适当提示，此处链接源和链接目标分别
在任务设计时
以探索问题来
引动和维持学
习者学习的兴
趣和动机，指导
学生带着“任
务”中的问题，
探索交流、小组
互助完成操作
任务。
是什么。
【学生演示操作】让最先做好的同学演示一下操作方法。这激发了学
生的学习兴趣也能兼顾到操作不熟练的同学。
【总结】教师屏幕广播 PPT,总结链接到网页、站点、EMAIL 的操作步
骤。
【过渡】我们仔细观察“名人”这个页面，发现页首列出了五大名人，
下面是具体介绍，如果我想了解“吴承恩”，应该怎么办？
【学生分组讨论】拖动滚动条，拖动滚动条方便么，有没有更快捷的
方法
【引导】可以尝试用我们今天学的超链接解决这个问题
【提问】这里的链接源和链接目标分别是什么？
链接源是：标题“吴承恩”，链接目标是“吴承恩”所在的位置
2、书签式链接
【学生自主学习】打开学案中 index.htm 页面，学习书签式链接的操
作方法，并完成任务二。
任务二：打开”cljxx”站点中的 mren.htm,完成页面中“◇周恩来 ◇
韩信 ◇ 关天培 ◇ 梁红玉 ◇ 吴承恩”的页内链接,并实现“返
回”。
【学生成果演示】转播 2-3 名学生操作成果。
【教师总结】通过书签式链接我们可以实现在同一页面间的跳转。屏
幕广播 PPT,总结书签式的操作步骤。
【引导】刚才我们实现了从页首标题链接到下面的具体内容，如果我
想从页面底部快速返回到页首重新选择，是否也可以利用超链接直接跳转
呢？
学生完成操作
教师巡回指导并请一名同学演示从页面下方跳转到页首。
【过渡】打开 jingdian.htm 这个页面,在这个页面中包括淮安区相关
景点。
【提问】在 jingdian.htm 页面中介绍了景点的情况。当然在地图上
学生自主探究
学习，提高实践
能力，完成意义
建构
也能看到相关的景点我们怎么做才能在地图上打开这些页面？
【学生分组讨论】用鼠标点。
【提问】同样是用超链接来实现。这里的链接源和链接目标分别是什
么？
地图中的某一区域和相关景点页面。
3、热点链接
【演示】如何选中图片中的一部分。提示：在图片工具栏的右侧有三
个按钮可以帮我们实现。分别是：长方形热点、圆形热点和多边形热点。
任务三：打开”cljxx”站点中的 jingdian.htm，完成地图上的热
区链接。
【学生自主学习】打开学案 index.htm 页面，学习热点链接的操作方
法，并完成任务三。
【学生成果演示】屏幕转播一名学生操作过程，不熟练的同学可以
借鉴学习。
【总结】教师屏幕广播 PPT,总结热区链接的操作步骤。
【学生实践】修改完善自己的网站，并将主页与各子页面做好相应的链接。
学生自主探究
学习，提高实践
能力
以小组合作的
形式开展学习，
培养学生的参
与意识
三、
作品
展示
与
评价
1、 过程评价（自我评价）
自主学习“超链接学案内容”，完成整个网站的超链接
2、作品评价（小组评价）
3、总结性评价
教师按照各组评价，对全班进行总结评价。
以学生自我评
价为主要依据，
进一步激发学
习兴趣，为下一
节课形成良好
的情绪基础
四、
课堂
小结
今天这节课，我们设置了很多的超链接，其中涉及到哪几种类型的
超链接？（引导学生回答：不同页面之间的链接、web 链接、email 链接、
同一页面内的链接、热点链接等形式）通过操作，我们还知道链接源可以
是哪些对象？（引导学生总结出：文字、图片甚至是图片中的一部分）。
教师屏幕广播 PPT 与学生一起回顾本节课的内容。
锻炼学生的归
纳概括能力和
语言表达能力
微信/支付宝扫码支付