Dreamweaver中超链接的应用教案
DreamWeaver网页制作公开课教案
观察理解
这个网址你就可以打开这个网站的首页（入口） ，通过点击超链接 打开一个又一个页面去浏览。 创设情境：打开 seek 网站根文件夹进行演示说明 观察明确 第二层含义：对于一个网站设计者而言， 它就是一个文件夹， ．．．．．．．．．．．．．．．．．．．． ． 把你所设计的所有网页，所用到的所有素材都分门别类地存放在 这样一个文件夹里。 那么，超链接跟它又有什么关系呢？依据超链接与其关系， 我们将超链接划分成如下几类： 引发思考
公开课教案
授课章节 名称 课题 序号 第四单元 《DreamWeaver 网页制作——超链接的使用》 授课 时间 2006-4-4 星期二 第三节 授课 班级 04162 班 课型 课时 教师 姓名 复习 1 时红玲
教学目标
知识目标：了解超链接的含义、作用及在网页制作中的地位 掌握超链接的分类及作用对象 熟练掌握超链接的创建方法 能力目标：能够创建文字、图像、图像热区、电子邮件、书签超链接 能够运用超链接的创建方法将一个网站中的页网连接起来 情感目标：培养学生团结协作的能力 培养学生的爱国主义情怀 培养学生不断进取的求知精神 超链接的种类 超链接的创建方法 电子邮件超链接、书签超链接 超链接的实际应用 本教材已基本学完，马上要进入综合实战，但在进行综合实战之前，必须要对 超链接和网页布局进行一下复习，这两个知识点的正确掌握与否，对网页设计 致关重要。 学生在一个月前已经学习了超链接及其创建方法， 但时间比较长了， 学生对此知识点有所遗忘，还需要花一节课时间进行充分的复习与巩固。 教材 名称 NIT 的 《DreamWeaver 网页 制作》 出 版 社 西安交通大学 出版社 作 者 教育部考 试中心编
本教材已基本学完，马上要进入综合实战，但在进行综合实战之 明确本节课的学 前，必须要对超链接和网页布局进行一下复习，这两个知识点的 习目标 正确掌握与否，对网页设计致关重要。我们在一个月前已经学习 了超链接及其创建方法，但时间比较长了，学生对此知识点有所 遗忘，还需要花一节课时间进行充分的复习与巩固。试想：如果 没有超链接，我们就无法把制作的一个个网页连接起来，就无法 让用户通过点击方便的浏览一个又一个页面。
Dreamweaver8网页超链接教学设计
ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计
《dw教学课件》第三讲----超级链接
16
2、鼠标经过图像 3、使用导航条
20
上机作业
练习利用各种链接方式创建链接
21
注意：用了“高级”中的a:link a:hover时，则网页中所 有链接都会与之相同的设置
14
方法二:定义“样式表”设置 新建样式中,选”高级”会有4种状态可选.分别为: a:link a:hover a:visited a:active
15
任务三、超级链接的应用
1、在跳转菜单上建立超级链接
11
锚点链接的创建方法 ①定义锚点：用锚点来定义目标 注意:锚点名称只可用字母和数字并以字母开头 ②链接（链接到本文档的指定位置）
可以是本文档之内,也可以是其他文档里面的
本文档之内：链接：＃＋锚点名称 不同文本之间的链接： ⅰ在外部文档的某位置定义锚点 ⅱ链接：插入锚点的文件名＋＃＋锚点名称
6
任务二、创建超级链接
1、超级链接的分类 网站外部链接
普通链接 网站内部链接
锚点链接 电子邮件链接 下载文件链接 空链接
7
2、创建方法
使用属性面板 右击创建超级链接 插入菜单下的超级链接 使用“指向文件”图标链接文档 使用”超链接“命令按钮
8
①普通链接 网站外部的链接（链接到某一个外部文件） 网站内部的链接
5
3、绝对路径和相对路径 绝对路径：是包括服务器的完整路径。主要用于外 部链接，即网站与网站间的链接。 如： 相对路径：只包含当前文档的文件夹的路径。主要 用于网站内部连接，即站内的网页与网页间的链接。
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电子教案课件第4章
4.2.2 设置段落格式
使用属性面板中的“格式”弹出菜单或“文本”｜“段落格式”子菜单可以应用 标准段落和标题标签。对段落应用标题标签时，Dreamweaver自动添加下一行文本 作为标准段落。若要更改此设置，请执行“编辑”｜“首选参数”命令，然后在 “常规”类别中的“编辑选项”下确保取消选中“标题后切换到普通段落”，如图 所示。
4.3 用CSS样式格式化文本
4.3.1 创建CSS样式表
将插入点放在文档中。然后在CSS样式面板中，单击面板右下角区域中的新建 CSS样式按钮。
在弹出的 “新建CSS规则”对话框中选择CSS样式表的类型。
4.3.2 链接外部CSS表
所谓外部CSS样式表，指的是一个包含样式和格式规范的外部文本文件。对一个外 部CSS 样式表进行编辑后，所有同该 CSS 样式表链接的文档都会根据所作的修改自动 进行更新。
4.1.2 插入特殊字符
在HTML中，一个特殊字符有两种表达方式，一种称作数字参考，另一种称 作实体参考。
所谓数字参考，就是用数字来表示文档中的特殊字符，通常由前缀“&#”加上 数值，再加上后缀“;”组成，其表达方式为：&#D;，其中D是一个十进制数值。
所谓实体参考，实际上就是用有意义的名称来表示特殊字符，通常由前缀 “&”加上字符对应的名称，再加上后缀“;”组成。其表达方式为：&name；，其中 name是一个用于表示字符的名称，且区分大小写。
样式；
在“CSS样式”面板中选中要修改的样式，然后单击“CSS样式”面板底部的编辑样
式图标，打开“CSS规则定义”对话框；
执行“窗口”/“CSS样式”命令打开“CSS样式”面板， 单击面板下方的属性值，当属性值区域变为可编辑状态时 ，直接对选中的属性进行修改。
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
DW超级链接
2019/12/12
第五章 超级链接
8
6.2超级链接的路径
1.绝对路径 绝对路径：提供所链接文档的完整 URL，而且包括 所使用的协议（如对于 Web 页，通常使用 http://） ，创建外部链接时必须使用的路径。同 一站点内文档的链接也可使用绝对路径链接，但不 建议采用这种方式，因为一旦将此站点移动到其它 域，则所有本地绝对路径链接都将断开。
2019/12/12
第五章 超级链接
9
6.2超级链接的路径
2.文档相对路径：指以当前文档所在的位置为起点 到链接文档经由的路径，把当前文档与处在同一 文件夹中的另一文档，或同一网站下不同文件夹 中的文档相互链接时，就可以使用文档相对路径。
• 其的基本思想是省略掉对于当前文档和所链接的 文档都相同的绝对 URL 部分，而只提供不同的路 径部分。文档相对路径对于大多数 Web 站点的本 地链接(内部链接)来说，是最适用的路径。
2019/12/12
第五章 超级链接
4
6.1超级链接基础
2：链接目标的打开方式 链接目标的打开方式可以在属性检查器的“目标”弹 出菜单中设置；该弹出菜单中四个选项的含义： _blank 将链接的文档载入一个新的、未命名的浏览 器口。 _top 将链接的文档载入整个浏览器窗 口，从而删除所有框架。
2019/12/12
超级链接的路径
2019/12/12
第五章 超级链接
3
6.1超级链接基础
1：超链接的定义 超链接是指从一个网页指向一个目标的连接关系， 具体是指站点内不同网页之间、站点与Web之间的链 接关系。一个超级链接由两部分组成：链接载体和 链接目标。许多页面元素都可以作为链接载体，链 接目标也可以是任意网络资源。
《用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 网站根文件夹进行演示说明 第二层含义：对．于．一．个．网．站．设．计．者．而．言．，．它．就．是．一．个．文．件．夹．，． 观察明确
学生分组讨论并 实际操作
总结
本节课我们复习了加载在文本和图像上的超链接，有内部链接、 外部链接、锚记链接。复习了它们的创建方法与区别。并运用其 创建方法为一个小型网站创建链接进行实战，学用结合。
学生配合老师进 行归纳
作业 布置
上网搜集有关“北京”的相应素材，为后叙综合实战，为 2008 年奥运会向国内外游客，建立一个宣传“北京”的大型网站做准 备。
掌握超链接的分类及作用对象
熟练掌握超链接的创建方法
能力目标：能够创建文字、图像、图像热区、电子邮件、书签超链接
能够运用超链接的创建方法将一个网站中的页网连接起来
情感目标：培养学生团结协作的能力
培养学生的爱国主义情怀
培养学生不断进取的求知精神
超链接的种类
超链接的创建方法
电子邮件超链接、书签超链接
超链接的实际应用
.
公开课教案
授课章节 名称
第四单元 《DreamWeaver 网页制作——超链接的使用》
课型 课时
复习 1
课题 序号
教学目标
教学重点 教学难点 学情处理
选用教材 教材处理 说明 课外作业 教学体会
第5章_Dreamweaver中的超级链接1
2012-12-3
4
第1篇 网页设计与制作基础
•设置好了目标端点后，用户还需要从“目标”下拉列表框中选择以何种方 式跳转到目标页面。
● _blank：单击文本链接后，目标端点页面会在一个新窗口中打开。 ● _parent：单击文本链接后，在上一级浏览器窗口中显示目标端点页面， 这种情况在框架页面中比较常见。 ● _self：Dreamweaver 的默认设置，单击文本链接后，在当前浏览器窗口 中显示目标端点页面。 ● _top：单击文本链接后，在最顶层的浏览器窗口中显示目标端点页面。
2012-12-3
2
第1篇 网页设计与制作基础
5.1超级Байду номын сангаас接的概念
2.超级链接的路径
◆ 绝对路径链接：主要用于创建具有固定网址的外部链接，如友情 链接等。创建绝对路径链接时，需要给出目标端点完整的 URL 地址， 如 。 ◆文档相对路径链接：主要用于创建站点的内部链接，它使用目标端 点页面相对于当前页面所在的位置来创建链接路径。 如：同一文件夹中， 把exp1.html文件链接到exp3.html文件，那么exp1.html就是相对路径。
2012-12-3
3
第1篇 网页设计与制作基础
5.2基本的超级链接
1.创建文本链接
文本链接是最常见的一种链接形式，创建过程： •首先在页面上选中链接文本对象，然后在其属性检查器的“链接“下 拉列表框中设置目标端点，如果链接的目标端点位于站点内，用户可 以单击右侧的“文件”按钮，打开“选择文件”对话框，从中指定要 跳转到的页面。
2012-12-3
8
第1篇 网页设计与制作基础
5.2基本的超级链接
4.创建电子邮件链接
电子邮件链接，通常会启动机器上安装的电子邮件客户端程序。
Dreamweaver cs5标准实例课件第5章 制作超链接
5.2.5 虚拟链接和脚本链接
虚拟链接也称为空链接，是指没有指定的链接，一般用于向页面上的文本或 对象添加行为。虚拟链接主要包含以下两种格式：
<a href=#>虚拟链接</a> <a href=javascript:;>虚拟链接</a> 第1种格式被单击时将返回到页面顶部，这种格式无法添加行为；第2种格式
5.3 使用热点制作图像映射
简单地说，图像映射就是将一幅图像用热点工具分割为若干个区域，并将这些 子区域设置成热点区域，然后将这些不同的热点区域链接到不同的页面。当用户单 击图像上不同热点区域时，就可以跳转到不同的页面。
在绘制热点区域后，常常需要调整热点区的大小和形状，以满足设计需要。 （1）在属性设置面板左下角单击调整热点工具按钮，然后单击需要调整大小的热 点区域。此时被选中的热点区域周围会出现控制手柄。 （2）把鼠标放在这些小方块上，然后拖拉鼠标即可改变热点区域的大小或形状。 如果是矩形或多边形热点区域，如此操作会改变区域的形状；而对于圆形热点区域 ，上述操作只会改变形状的大小。
5.2 创建、管理超级链接
5.2.1 创建文本超链接
1、在文档窗口中选中需要建立链接的文本。 2、在属性面板的“链接”文本框中输入链接目标；或选择“窗口”/“属性”菜单 命令打开属性面板。在“链接”后的文本框中输入链接目标。
默认情况下，文本链接显示为蓝色，并加有下划线。用户可以选择“修 改”/“页面属性”菜单命令，在“页面属性”面板的“链接”分类页面设置超级 链接在各种状态下的颜色，以及选择是否显示下划线。 如果链接目标是计算上的一个文件或图片，可以单击“链接”文本框右侧的文件 夹图标，打开“选择文件”对话框，查找并选择文件。或者选择“指向文件”图标 ， 并按下鼠标左键拖动到“文件”面板中一个现存的页面。 注意：Dreamweaver不支持扩展字符集（也被称为High ASCII），所以在指定链 接的URL时，不能包含扩展字符集，且完全的URL最多不能超过255个字符。此外， 尽管大多数浏览器可以解释路径名或URL中的空格，但在UNIX应用中，空格会被变为 %20，这将使得URL比较难看。
Dreamweaver网页制作——应用超链接说课稿
今天我说课的内容是计算机专业教材《Dreamweaver网页制作》项目四任务一的内容，主要讲述超链接的相关知识。
下面我将围绕本节课“教什么？”、“怎样教？”以及“为什么这样教？”三个问题，主要从教材分析、教学对象分析、教法分析、学法分析、教学过程设计五个方面逐一加以分析和说明。
一、教材分析主要从教材的地位作用、重点难点、目标分析、教材处理四个方面入手。
1、地位作用：网页制作是计算机专业的主干课程，超链接是网页制作的基础知识，学好本节课内容，可以加深学生对网页结构的理解，为今后的网页制作学习奠定基础。
2、重点难点根据教学大纲的要求，结合网页制作课程的教学实际，在吃透教材基础上，我确立了如下的教学重点、难点。
学习重点：设置图片链接和下载链接学习难点：设置命名锚记链接和设置跳转菜单3、目标分析根据教学大纲的要求和学生现有的知识水平、理解能力，结合本节课的特点，确立学习目标如下：认知目标：掌握各种超链接的含义及使用方法能力目标：培养学生分析问题、解决问题的能力以及理论联系实际的能力。
情感目标：以引导学生努力提高专业素质为切入点，培养学生认真的学习态度和严谨的学习作风；提高学生学习、使用计算机的兴趣和互相合作意识品质。
4、教材处理：(1)采用典型实例导入--以激起学生探知的积极性，为进一步授课奠定基础。
(2)借助媒体演示--以利于学生更形象、更直观、更易于观察、比较、分析、掌握不同类型超链接的使用方法。
二、教学对象分析学生的特点：1、有效的听课时间短2、重实践操作，轻理论说教三、教法分析依据考虑到学生年龄特点，设计本课时，在学生学习基础知识，训练运用技能的基础上，着重考虑了兴趣和能力的培养。
具体表现为以下三方面。
1、情境设计――乐学、想学教师用电脑演示：由于学生在机房的注意力难以长时间集中，多讲无益，对于简单的让学生自己掌握，较难的老师给予适当点拨或演示。
因此，最后在总结时，学生对于刚才自己的劳动一定很在意，无论是发言的同学，还是听讲的同学，都会十分认真，可以很好的达到学习的目的。
Dreamweaver网页设计之：建立超链接
2013-7-26
29
4.2 使用Dreamweaver 8设置超链接
文本链接的状态 一个未被访问过的链接文字与一个被访问过的链 接文字在形式上是有所区别的，以提示浏览者链 接文字所指示的网页是否被看过。 如果要修改超链接的文本颜色： 修改->页面属性
2013-7-26
30
4.2 使用Dreamweaver 8设置超链接
2013-7-26
6
4.1从HTML的角度理解超链接
2．超级链接的分类 （1）按链接载体分类，把链接分为文本链接与图像链接两大类。 文本链接：用文本作链接载体，简单实用。 图像链接：用图像作为链接载体能使网页美观、生动活泼，它既 可以指向单个的链接，也可以根据图像不同的区域建立多个链接。 （2）按链接目标分类，将超级链接分为以下几种类型： 内部链接：同一网站内文档之间的链接。 外部链接：不同网站文档之间的链接。 锚点链接：同一网页或不同网页中指定位置的链接。 E-mail链接：发送电子邮件的链接，可直接点击发送电子邮件。 执行文件链接：链接站点空间里的可执行程序，用于下载在线运 行。
下载文件链接 浏览网站的目的往往是查找并下载资料，下载文 件可利用下载文件链接来实现。建立下载文件链 接的步骤如同创建文字链接，区别在于所链接的 文件不是网页文件而是其他文件， 如.exe、.zip、.rar等文件。
b.使用属性面板的“指向文件”图标创建链接
“指向文件”链接
2013-7-26
在视图中链接其他网页
27
4.2 使用Dreamweaver 8设置超链接
c．使用“超级链接”对话框创建链接 选择菜单 “插入→超级链接”命令，或单击 “常用”插入工具栏上的“超级链接”按 钮，弹出“超级链接”对话框
Dreamweaver CC实例教程(第5版) 第4章 超链接
1．创建ID标记 2．建立ID超链接
4.5 热点超链接
课堂案例——建筑规划网页 创建热点超链接
4.5.1 课堂案例——建筑规划网页
使用热点按钮，为图像添加热点；使用“属性”面板，为热点创建 超链接。
效果图
4.5.2 创建热点超链接
创建热点超链接的具体操作步骤如下。 （1）选取一张图片，在“属性”面板的“地图”项下方单击热 点按钮。 （2）利用“矩形热点工具”按钮 、“椭圆热点工具”按钮 、 “多边形热点工具”按钮 、“指针热点工具”按钮。 （3）在“链接”文本框中输入要链接的网页地址，在“替换” 文本框中输入当鼠标指针指向热点时所显示的替换文字。通过热点功 能，用户可以在图片的任何地方做一个链接。反复操作，就可以在一 张图片上划分很多热点功能，并为每一个热点设置一个链接，从而实 现在一张图片不同位置上单击鼠标左键链接到不同页面的效果。 （4）按F12键预览网页的效果。
4.2 文本超链接
课堂案例——建筑模型网页 创建文本超链接 设置文本超链接的状态 创建下载文件链接 创建电子邮件链接
4.2.1 课堂案例—建筑模型网页
使用“插入”面板的“HTML”选项卡制作电子邮件链接效果；使 用“属性”面板为文字制作下载文件链接效果。
效果图
4.2.2 创建文本超链接
创建文本超链接的方法非常简单，主要是在链接文本的“属性” 面板中指定链接文件。指定链接文件的方法有以下3种。
《Dreamweaver中超链接的应用》教案
公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。
电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。
三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。
演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。
1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。
Dreamweaver中如何应用超级链接
本节课通过实例分析了超级链接的：
要求学生掌握：
– Dreamweaver中超级链接的应用
– 常用超级链接的基本语法格式
模仿课堂中讲解的示例在个人网页添加超级
链接，观察各代码所表示的意义。
要求：
（1）创建页面的锚点链接；
（2）包含一个具有下载效果的超级链接；
（3）包含一个电子邮件的超级链接 （4）创建图片的热点链接
即被指向的目的地
按照链接目标的路径分类：
还可以按照链接目标的对象不同进行分类
常用超级链接的语法格式：
– <a href=“URL”></a>普通连接 – <a href=“mailto:EMAIL”></a>Email链接 – <a name=“NAME”></a> 定义锚点 – <a href=“#NAME”></a>锚点链接
Dreamweaver中如何应用超级链接
超级链接的标记语法格式。
Байду номын сангаас
难点
超级链接的标记语法格式
1. 分析平常上网中的超
级链接现象。
2. 分析按例网站的超级
3. 提出问题：
这种效果是如何制作的哪？
链接现象。
在这种效果下隐含了哪些知识点呢？
丰富页面内容
为页面添加超级链接
超级链接的组成
即指向目标的链接
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
公开课教案
课程名称《网页制作》教程
课题名称：Dreamweaver中超链接的应用授课班级：
任课教师：
授课时间：
时间分配教学内容及过程
教学方法
及教学内
容的拾漏
补遗
17’
第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用
一、超链接的含义
超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为
源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类
1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表
单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自
动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点
链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他
网页中的某一指定位置。
电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发
程序。
三、设置链接属性
在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”
按钮，打开“页面属
性”对话框，首先在
左侧列表中选择“链
接”选项，然后在右
侧设置各项链接属
性。
演示
提问
讨论
讲授、
演示、
讨论
时间
分配
教学内容及过程
教学
方法
及教
学内
容的
拾漏
补遗30’
四、设置常规超链接
常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站
跳转到其他网站。
1．内部超链接
内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以
在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；
也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按
钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接
外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。
五、设置文本超链接
要给某段文本设置超链接，可以先用鼠标选中该文本，然后在“属性”面板上的“链接”编辑框中设置被链接对象的URL地址。
六、设置图像超链接
给整个图像添加超链接，首先用鼠标选定要制作超链接的图像，然后在“属性”面板上的“链接”编辑框中设置被链接对象的URL地址。
知识扩展：给图像局部添加超链接给图像局部添加超链接也称为“图像热点”技术，很多时候都需要为一张图片的不同部位设置不同的链接，这就需要
讲
授、
演
示、
讨论
用热点链接。
热点链接又叫图像映射，是使用热点工具将一张图片划分成多个区域，并为这些区域分别设置链接。
七、设置电子邮件链接
很多网页都会在最下方留下作者或公司的E-mail地址，用户可以直接单击E-mail地址，给网站相关人员发送邮件，这就是所谓的电子邮件链接。
需要注意的是，电子邮件链接
是将浏览者的本地电子
邮件管理软件“Outlook
Express”的“新邮件”
窗口，而不是向服务器
发出请求。
这是一种特
殊类型的链接，又叫电
子邮件链接。
在“属性”面板上
“链接”编辑框中输入
“mailto:电子邮箱地
址”
八、设置命名锚记链接
有些网页的内容非常多，
以致浏览器的滚动条变得很
长，而使得浏览者无法快速找
到所要的内容。
为解决这个问
题，我们可以通过命名锚记链
接来为网页添加位于该网页内
部的超链接，单击该超链接，
就跳转到网页中指定的位置。
要设置命名锚记链接，应
首先插入命名锚记，然后创建
跳转到该命名锚记的链接。
九、文件下载链接
文件下载链接的设置方法与文字链接类似，区别在于所链接的文件不是网页文件而是其他文件，如“.exe”“.doc”“.zip”等文件。
十、设置空链接
空链接是一个未指派目标的超链接，设置空链接的目的通常是激活页面上的对象或文本，使其可以应用行为。
给页面对象设置空链接的方法很简单，选定对象后，在“属性”面板上的“链接”编辑框中输入符号“#”即可。
第四环节：学生操作、巡回指导
本节在前面操作的基础上对素材网页版的电子书《抗日英雄传》进行进行完善，让学生上机练习设置网页链接属性、设置图像热点链接、设置图像站内链接、给页脚文本添加站外链接，制作一本完整的《抗日英雄传》网页电子书。
遇到疑难再向老师提出，老师进行即时解答。
演示、提问、讨论巡视、指导、督促、答疑
35’。