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：邮件地址”。
- 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’。