《Dreamweaver中超链接的应用》教案
公开课教案
课程名称《网页制作》教程
课题名称：Dreamweaver中超链接的应用授课班级：
任课教师：
授课时间：
时间
分配教学内容及过程
教学方法
及教学内
17’
第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用
一、超链接的含义
超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为
源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类
1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位
置。
电子邮件链接：
单击电子邮件链接，
将打开系统默认的电演示
提问
讨论
讲授、演示、讨论
时间
分配教学内容及过程
教学
方法
及教
学内
容的
拾漏
补遗
30’
四、设置常规超链接
常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于
站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站
跳转到其他网站。
1．内部超链接
内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以
在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；
也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按
钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接
外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板
上的“链接”编辑框中直接输入要链接网页的网址。
五、设置文本超链接
要给某段文本设置超链接，可以先用鼠标选中该文本，然后在“属性”面
板上的“链接”编辑框中设置被链接对象的URL地址。
讲
授、
演
示、
讨论
六、设置图像超链接
给整个图像添加超链接，首先用鼠标选定要制作超链接的图像，然后在“属
性”面板上的“链接”编辑框中设置被链接对象的URL地址。
知识扩展：给图像局部添加超链接给图像局部添加超链接也称为“图像热
点”技术，很多时候都需要为一张图片的不同部位设置不同的链接，这就需要
用热点链接。
热点链接又叫图像映射，是使用热点工具将一张图片划分成多个
区域，并为这些区域分别设置链接。
七、设置电子邮件链接
很多网页都会在最下方留下作者或公司的E-mail地址，用户可以直接单击
E-mail地址，给网站相
关人员发送邮件，这就
是所谓的电子邮件链
接。
需要注意的是，电
子邮件链接是将浏览者
的本地电子邮件管理软
件“Outlook Express”
的“新邮件”窗口，而不是向服务器发出请求。
这是一种特殊类型的链接，又
叫电子邮件链接。
在“属性”面板上“链接”编辑框中输入“mailto:电子邮箱地址”
八、设置命名锚记链接
演
示、
提
问、
讨
论
巡
35’2’
有些网页的内容非常多，
以致浏览器的滚动条变得很
长，而使得浏览者无法快速找
到所要的内容。
为解决这个问
题，我们可以通过命名锚记链
接来为网页添加位于该网页内
部的超链接，单击该超链接，
就跳转到网页中指定的位置。
要设置命名锚记链接，应
首先插入命名锚记，然后创建跳转到该命名锚记的链接。
九、文件下载链接
文件下载链接的设置方法与文字链接类似，区别在于所链接的文件不是网
页文件而是其他文件，如“.exe”“.doc”“.zip”等文件。
十、设置空链接
空链接是一个未指派目标的超链接，设置空链接的目的通常是激活页面上
的对象或文本，使其可以应用行为。
给页面对象设置空链接的方法很简单，选
定对象后，在“属性”面板上的“链接”编辑框中输入符号“#”即可。
第四环节：学生操作、巡回指导
本节在前面操作的基础上对素材网页版的电子书《抗日英雄传》进行进行
完善，让学生上机练习设置网页链接属性、设置图像热点链接、设置图像站内
链接、给页脚文本添加站外链接，制作一本完整的《抗日英雄传》网页电子书。
遇到疑难再向老师提出，老师进行即时解答。
【学生活动】学生按照操作要求，尝试完成学习任务。
学生间互相交流，
遇到难处可以向教师请教。
【教师活动】教师巡视，指导，督促，答疑。
在巡视过程中，发现学生操作
视、
指
导、
督
促、
答
疑
演
示、
提
问、
讨
论
督促。
第6章 网页中超级链接的应用
6.4 创建各种类型的链接
4. 创建下载链接
如.exe,.zip,.rar等。
网 页 制 作 基 础 教 程
如想提供文件下载 ，只需将浏览器无法识别的文件链接到网页中 ，
选择要创建链接的文本或图像，在“属性窗口”的“链接”文本框
中拖动文件指向按钮，指向一个浏览器无法识别的文件，如rar文件。
1.
管理超链接
在首选参数对话框中设置自动更新 选择“编辑”|“首选参数”命令，打开“首选 参数”对话框，在“移动文件时更新链接”选 项的下拉列表中进行选择。 总是——每当移动或重命名选定文档时， Dreamweaver将自动更新该文档的所有链接。 提示——将显示一个提示对话框，列出更改 影响到的所有文件，以进行进一步选择，系统 默认的选项是“提示”。
5 使用图像与多媒体丰富网页内容
网 页 制 作 基 础 教 程
插入FLV视频
“插入”菜单→“媒体” →FLV “插入”面板→“常用”子面板→“媒体” →FLV
直接将flv视频文件拖动到Dreamweaver的设计窗口
为网页添加背景音乐
在“代码”窗口的<body>后面插入<bgsound src=“…mp3文件 autostart=true loop=-1”/>
每当在本地站点内移动或重命名文件时，Dreamweaver可自动更新 指向该文件的链接。
“编辑”菜单—>“首选参数”，在“常规”中单击展开“移动文件 时更新链接”下拉按钮，选择不同的选项，则进行不同的设置。
2.
在整个站点范围内更改链接
手动更改所有链接，包括电子邮件链接、FTP链接、空链接和脚本
Dreamweaver8网页超链接教学设计
ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计
DreamWeaver网页制作公开课教案
公开课教案授课章节第四单元课型复习名称《DreamWeaver 网页制作——超链接的使用》课时 1课题2006-4-4 04162 班教师授课时红玲授课序号时间星期二第三节班级姓名知识目标：了解超链接的含义、作用及在网页制作中的地位掌握超链接的分类及作用对象熟练掌握超链接的创建方法能力目标：能够创建文字、图像、图像热区、电子邮件、书签超链接教学目标能够运用超链接的创建方法将一个网站中的页网连接起来情感目标：培养学生团结协作的能力培养学生的爱国主义情怀培养学生不断进取的求知精神教学重点超链接的种类超链接的创建方法教学难点电子邮件超链接、书签超链接超链接的实际应用学情处理本教材已基本学完，马上要进入综合实战，但在进行综合实战之前，必须要对超链接和网页布局进行一下复习，这两个知识点的正确掌握与否，对网页设计致关重要。
学生在一个月前已经学习了超链接及其创建方法，但时间比较长了，学生对此知识点有所遗忘，还需要花一节课时间进行充分的复习与巩固。
选用教材教材NIT 的《DreamWeaver 网页出版西安交通大学作教育部考名称制作》社出版社者试中心编教材处理说明课外作业回顾超链接的种类及创建方法上网搜集有关“北京”的相应素材，罗列几个方面，为后面综合实战作准备教学体会无锡立信职教中心校Page 1 of 3教学教学内容教学手段与方法程序课前将 seek 网站文件夹及beijing 网站根文件夹传送到学生机上学生注意接收准备复习本教材已基本学完，马上要进入综合实战，但在进行综合实战之明确本节课的学导入前，必须要对超链接和网页布局进行一下复习，这两个知识点的习目标正确掌握与否，对网页设计致关重要。
我们在一个月前已经学习了超链接及其创建方法，但时间比较长了，学生对此知识点有所遗忘，还需要花一节课时间进行充分的复习与巩固。
试想：如果没有超链接，我们就无法把制作的一个个网页连接起来，就无法让用户通过点击方便的浏览一个又一个页面。
Dreamweaver中超链接的应用教案
公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。
电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。
三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。
演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。
1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。
《Dreamweaver网页制作实训教程》课件 第5章
的文本或图像后，可以在“属性”面板上的“链
接”编辑框中直接输入要链接到的网址或网页名
称；也可以通过单击“属性”面板上“链接”编
辑框后的文件夹图标 ，在弹出的“选择文件”
对话框中选择要链接到的文件。
选择目标 文件所在 文件夹
选择 目标 文件
单击“确 定”按钮
2．外部超链接
外部超链接只能采用一种方法设置，就是在选 中对象后，在“属性”面板的“链接”编辑框 中输入要链接到的网址。
5.2.3 应用“设置状态栏文本”行为
如果为自己的网页设置一些比较有个性的状 态栏文本，那一定很吸引人，下面就来看看 如何设置自己的状态栏文本。
行为外，读者还可以到 Adobe或其他网站去下载并安装第三方行为。
综合实训2——为“macaco”网页制作下拉菜单
5.1.4 设置热点链接
热点链接又叫图像映射，就是使用热点工具将 一张图片划分成多个区域，并为这些区域分别 设置链接。
5.1.5 设置命名锚记链接
要创建命名锚记链接，应首先插入命名锚记， 然后创建跳转到该命名锚记的链接。
5.1.6 使用跳转菜单
我们可以把跳转菜单看作是一种超链接的集合， 它以弹出式下拉菜单的形式在网页中展现出来。 弹出菜单内的链接没有类型上的限制，可以是本 地链接，也可以是到其他网站的链接，还可以是 电子邮件链接或命名锚记链接。
2.应用行为的方法
应用行为时需要先选中要应用行为的对象，然 后单击“行为”面板中的“添加行为”按钮， 在打开的“动作”列表中选择效果，之后在打 开的对话框中设置效果，最后指定设定的动作 在什么情况下发生，也就是指定事件。
5.2.2 应用“打开浏览器窗口”行为
应用“打开浏览器窗口”行为，可实现单击目 标文字或图片，打开固定大小窗口的效果。本 节通过一个实例，来看看“打开浏览器窗口” 行为在网页中的具体应用。
AdobeDreamweaver教程第4章超级链接精品PPT课件
（3）站点根目录相对路径：所有路径都开始于当前站点的根目录。
站点的根目录相对路径都以“/”开始，如/images/loge.gif
javascript:window.close()
设为首页
<a onclick="this.style.behavior='url(#default#hom epage)';this.setHomePage('');" href="#">设为 首页</a>
创建远程登陆链接
在链接地址输入：telnet://站点地址，如 telnet://
javascript:history.back(-1)
javascript:history.go(-1)
2.3创建打印链接：
javascript:window.print()
2.4创建收藏链接：
javascript:window.
external.AddFavorite(‘网址’,’名称’)
2.5关闭窗口：
下载、邮件链接和锚点
1 下载文件 2 下载软件 3 邮件链接 mailto:?subject=咨询问题&cc= &bcc=
下载、邮件链接和锚点
4. 创建命名锚记链接
1．创建命名锚记
2．创建到该命名锚记的链接
空链接和脚本链接
1 空链接 #(或javascript:) 2 脚本链接
2.1创建简单的脚本链接：javascript:alert(‘弹出的内容’) 2.2创建前进和后退链接：javascript:history.go(1)
Dreamweaver项目五 超级链接-制作导航网页-电子教案
备注
5.设置锚记超级链接和空链接的方法
6.设置鼠标经过图像和导航条的方法
重点
难点
设置文本和图像超级链接的方法
设置图像热点超级链接的方法
设置电子邮件超级链接的方法
设置锚记超级链接和空链接的方法
要求掌握
的知识点
设置文本超级链接的方法、设置空链接的方法、设置文本超级链接的状态、超级链接的种类、图像超级链接、图像热点超级链接、鼠标经过图像、导航条、设置电子邮件超级链接的方法、设置锚记超级链接、插入Flash文本、插入Flash按钮
中等职业学校教案
教研室：
课程名称：Dreamweaver 8中文版网页制作基础
任课教师：XXLeabharlann X学校教务处制中等职业学校教案
第5次课讲授2学时实践4学时
章节
项目五超级链接──制作导航网页
讲授主
要内容
1.超级链接的种类
2.设置文本和图像超级链接的方法
3.设置图像热点超级链接的方法
4.设置电子邮件超级链接的方法
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
作业：一～四
主要
参考资料
《网页设计与制作——Dreamweaver 8》，王君学、田明编著，人民邮电出版社
《中文Dreamweaver 8网页制作教程与上机实训》，魏聪等编著，机械工业出版社
Dreamweaver CC实用教程 第7章 网页中的超级链接
部链接，设置内部链接的具体步骤如下。
7.2.1 网站内部链接
网站的外部链接就是指用户将自己制作的网页与Internet建立的链接，比如将页面中的文字与网易网 站的主页建立超级链接，具体的操作方法与建立网站内部链接相同，只需选中网页中需要建立超级链接的
文本，打开“属性”面板，在“链接”文本框中输入即可。完成后单击设置了链接的
7.1.2 超级链接路径
超级链接的方式有相对链接和绝对链接两种。 1．绝对路径 2．相对文档路径 3．相对于站点根目录的路径
2
7.2
网站内部与外部链接
网站链接分为内部与外部链接，下面分别进行介绍。
第7章
网页中的超级链 接
7.2.1 网站内部链接
一个网站通常会包含多个网页，各个网页 之间可以通过内部链接使得彼此之间产生联系。 在Dreamweaver中，可以为文本或图片创建内
第7章
网页中的超级链 接
5
7.4
创建电子邮件链接
第7章
网页中的超级链 接
电子邮件链接是一种特殊的链接，使用mailto协议。在浏览器中单击邮件链接时，将启动默认的邮件发送程序。
该程序是与用户浏览器相关联的。在电子邮件消息窗口中，“收件人”域自动更新为显示电子邮件链接中指定的地 址。创建电子邮件链接的操作步骤如下。
10
7.8 课后习题
7.8.1 课后练习：制作网页提示信息
下面使用脚本链接制作网页提示信息，完成后的效果11
7.8.2课后习题 课后练习：在网页内部跳转 6.6
本例制作在网页内部跳转的效果，如图所示。
第7章
网页中的超级链 接
12
文本，就可以跳转到网易网站的主页。
3
7.3
《用Dreamweaver制作网页六》实现网页间跳转(超链接)学案
《用Dreamweaver制作网页五》学案——实现网页间跳转（超链接）1课时学习目标：1、各小组完善首页和栏目网页。
2、实现网页间跳转（超链接的使用）资源平台：1、Dreamweaver 8.02、上节课收集的图片和文本素材、老师准备的网页素材、网上素材3、老师课前准备的信息技术学科资源网观看老师演示：1、如何实现网页间跳转（超链接的使用）前面我们已经做好了网站首页、栏目网页，并将它们都保存在了小组站点文件夹中，然而一个网站不仅仅只有一张网页，而是有很多张网页组成，并且各网页之间就是通过超级链接连在一起，那么Dreamweaver中如何来建立网页的超链接呢？超链接的标志：在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
操作方法如下：1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击“链接”栏后的黄色文件夹按钮，在弹出的对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
（如下图）3、保存文件，按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
扩展：如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上/那么，单击链接就可以跳转到网站制作教程网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
DreamWeaver网页制作公开课教案精编版
进一步引申出：网站的双层含义：
创设情境：SOHU．COM 网站进行演示说明
观察理解
第一层含义：对．一．个．网．站．浏．览．者．而．言．，．它．是．一．个．网．址．，有了
这个网址你就可以打开这个网站的首页（入口），通过点击超链接
打开一个又一个页面去浏览。
创设情境：打开 seek 网站根文件夹进行演示说明 第二层含义：对．于．一．个．网．站．设．计．者．而．言．，．它．就．是．一．个．文．件．夹．，． 观察明确
教学 程序 课前 准备 复习 导入
复习 内容
教学内容
将 seek 网站文件夹及 beijing 网站根文件夹传送到学生机上
本教材已基本学完，马上要进入综合实战，但在进行综合实战之 前，必须要对超链接和网页布局进行一下复习，这两个知识点的 正确掌握与否，对网页设计致关重要。我们在一个月前已经学习 了超链接及其创建方法，但时间比较长了，学生对此知识点有所 遗忘，还需要花一节课时间进行充分的复习与巩固。试想：如果 没有超链接，我们就无法把制作的一个个网页连接起来，就无法 让用户通过点击方便的浏览一个又一个页面。
2006-4-4 星期二 第三节
授课 04162 班 教师
班级
姓名
时红玲
知识目标：了解超链接的含义、作用及在网页制作中的地位
掌握超链接的分类及作用对象
熟练掌握超链接的创建方法
能力目标：能够创建文字、图像、图像热区、电子邮件、书签超链接
能够运用超链接的创建方法将一个网站中的页网连接起来
情感目标：培养学生团结协作的能力
培养学生的爱国主义情怀
培养学生不断进取的求知精神
超链接的种类
超链接的创建方法
电子邮件超链接、书签超链接