Dreamweaver中超链接的应用教案

公开课教案

课程名称《网页制作》教程

课题名称：Dreamweaver中超链接的应用授课班级：

任课教师：

授课时间：

时间分配教学内容及过程

教学方法

及教学内

容的拾漏

补遗

17’

第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用

一、超链接的含义

超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为

源端点，跳转到的页面或对象称为目标端点。

二、超链接的分类

1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表

单链接3种。

文本链接：是指以文字作为超链接源端点的链接。

图像链接：是指以图像作为源端点的超链接。

表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自

动跳转至相应页面。

2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点

链接和电子邮件链接4种。

内部链接：其目标端点是本站点中的其他网页或文件。

外部链接：指链接的目标端点与源端点不在同一个站点中。

锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他

网页中的某一指定位置。

电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发

程序。

三、设置链接属性

在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”

按钮，打开“页面属

性”对话框，首先在

左侧列表中选择“链

接”选项，然后在右

侧设置各项链接属

性。

演示

提问

讨论

讲授、

演示、

讨论

时间

分配

教学内容及过程

教学

方法

及教

学内

容的

拾漏

补遗30’

四、设置常规超链接

常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站

跳转到其他网站。

1．内部超链接

内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以

在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；

也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按

钮，在弹出的“选择文件”对话框中选择链接对象。

2．外部超链接

外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。

五、设置文本超链接

要给某段文本设置超链接，可以先用鼠标选中该文本，然后在“属性”面板上的“链接”编辑框中设置被链接对象的URL地址。

六、设置图像超链接

给整个图像添加超链接，首先用鼠标选定要制作超链接的图像，然后在“属性”面板上的“链接”编辑框中设置被链接对象的URL地址。

知识扩展：给图像局部添加超链接给图像局部添加超链接也称为“图像热点”技术，很多时候都需要为一张图片的不同部位设置不同的链接，这就需要

讲

授、

演

示、

讨论

用热点链接。热点链接又叫图像映射，是使用热点工具将一张图片划分成多个区域，并为这些区域分别设置链接。

七、设置电子邮件链接

很多网页都会在最下方留下作者或公司的E-mail地址，用户可以直接单击E-mail地址，给网站相关人员发送邮件，这就是所谓的电子邮件链接。需要注意的是，电子邮件链接

是将浏览者的本地电子

邮件管理软件“Outlook

Express”的“新邮件”

窗口，而不是向服务器

发出请求。这是一种特

殊类型的链接，又叫电

子邮件链接。

在“属性”面板上

“链接”编辑框中输入

“mailto:电子邮箱地

址”

八、设置命名锚记链接

有些网页的内容非常多，

以致浏览器的滚动条变得很

长，而使得浏览者无法快速找

到所要的内容。为解决这个问

题，我们可以通过命名锚记链

接来为网页添加位于该网页内

部的超链接，单击该超链接，

就跳转到网页中指定的位置。

要设置命名锚记链接，应

首先插入命名锚记，然后创建

跳转到该命名锚记的链接。

九、文件下载链接

文件下载链接的设置方法与文字链接类似，区别在于所链接的文件不是网页文件而是其他文件，如“.exe”“.doc”“.zip”等文件。

十、设置空链接

空链接是一个未指派目标的超链接，设置空链接的目的通常是激活页面上的对象或文本，使其可以应用行为。给页面对象设置空链接的方法很简单，选定对象后，在“属性”面板上的“链接”编辑框中输入符号“#”即可。

第四环节：学生操作、巡回指导

本节在前面操作的基础上对素材网页版的电子书《抗日英雄传》进行进行完善，让学生上机练习设置网页链接属性、设置图像热点链接、设置图像站内链接、给页脚文本添加站外链接，制作一本完整的《抗日英雄传》网页电子书。遇到疑难再向老师提出，老师进行即时解答。

演示、提问、讨论巡视、指导、督促、答疑

35’