在网中插入各种超级链接

1、在网页中插入各种超级链接教学内容总体安排课程名称Dreamweaver网页设计与制作授课教师XXXX课程类别专业必修课课 时2 学 时教学章节第四章 在网页中建立各种超级链接经美赦材网页设计与制 作实用教程 主编：刘艳丽授课班级平面设计1401 班书面作业P71 页-P72 页上机作业配套实训：超级链接教学准备1、课件（超链接.ppt） 2、上课资料（教 材配备的素材，本校网站）教学方法案例式教学，任务驱动，多媒体讲授，讲 练结合。教学设备1、硬件：教师用多媒体计算机1台和学 生用计算机60台、投影仪。2、软件：多媒体网络教学系统、WindowsXP、Dreamweaver 8学生分析1、通过

2、前几讲的学习，学生已经学会了 创建和管理站点的知识，自己可以创建一 个简单的网页。课堂教学目标教教学重点案2、学生经常上网，对于超级链接并不陌 生。所以，概念的引入并不困难，但是， 学生最熟悉的链接类型就是页面和页面 之间的链接，而对于超链接的作用理解的 不深入，对于多种建立超链接的方法也知 之甚少。知识目标：1、文字上建立各种超链接2、图片上建立各种超链接3、电子邮件超链接能力目标：1、通过发现问题来寻找解决问题的 方法，养成勤思考、爱学习的习惯。2、培养学生养成动手动脑的自学能 力。情感目标：1、激发学生合理、合法使用超级链 接组织网络资源的兴趣和意识。2、培养学生的实践能力、审美能力及创

3、新精神。内部超级链接、外部超级链接、脚本 链接、E-mail链接、锚点链接、图像热区第3页共10页案的添加方法、导航栏的制作。教学难点链接路径、脚本链接、设置链接颜色。超级链接是网页的最基本要素，是- web服务得以实现的核心。授课思路及讲解要点9课程起始先以实例的形式展示几种 上网时经常见到的链接形式，让学生了解 学习目标，带着问题来学习，提高了学习 兴趣。采用案例式教学的思路，教学过程 中结合实例，多设问题，让学生积极主动 思考，操作演示时分析不同操作产生的不 同后果，通过分析，加深印象并掌握操作 规律。本次课的讲解要点是各种超级链接 的添加方法及导航栏等。不仅介绍各种超 链接的方法，还要

4、介绍应用的场合、优点C 导航栏实际上是通过自动添加javascipt 代码来实现的。也可以让学生有所认识， 为以后学习行为作铺垫。教学过程上一讲回顾，上次作品点评，课程导入、 设计目标、课程内容讲解、归纳小结、课 后提问、布置课后实训课题第4页共10页鳌第四章 在网页中建立各种超链接回顾上一讲内容，展示、交流、评价上次课布置的课题“制作一个简单的网页”，让大家评比一下谁做的最好，并掌声鼓励。通过点评作品让学生增强荣誉感。顾：(5分钟) 课程 导入：进入本校网站，告诉学生什么是超链接，让同学们在浏览本校网站的同时，提出问题。提问：让学生把在本校网站上见过的超链接指出来，让老师分析这是什么超链接。

5、活跃学习气氛，让同学们对新课内容产生兴趣。(5分钟)介绍 本节 课素 材及 设计 目标：(5分 钟)说明素材 所在路径，并 确立设计目4.1 超链接应用实例4.1.1 设计目标制作一个具有超链接的网页。其浏览效果如图4.1所示。4.1.2 页面分析(1)内部超链接(2)外部超链接(3)空链接和脚本链接(4) E-mail超链接(5)设置超链接颜色4.1.3 实训引导制作网页前素材的准备。4.1.4 制作步骤(1)创建内部超链接(2)创建外部超链接(3)创建空链接和脚本链接(4)创建E-mail超链接(5)设置链接颜色标。第5页共10页教 案重点：(20 分钟)讲解内部和 外部超链接的 含义、制

6、作方 法、应用场合 及优点。举一 些我们平时上 网用到的超链 接的例子，并 让同学们区别 是什么超链 接。先演示一 遍，再带着学 生做一遍，最 后再让学生自 己做一遍。4.2创建超链接4.2.1 创建内部超链接内部链接：在同一网站文件之间的链接。1 .链接网页文件2 .链接到其它文件链接路径：1、绝对路径：被链接文档的完整的URL2、相对路径：以当前文档所在位置为起点，到被链接文档经过的路径。文档相 对路径是最适合用于本地链接的路径。3、根相对路径：从站点根文件夹到被链接文档经过的路径。4.2.2 在新的浏览窗口中打开链接文件在“目标”下拉列表框中，有四个选项：“blank”表示在新的未命名的

7、浏览器窗口中打开链接文档，其余三个选项的具体含义将在后续课程中讲解。4.2.3 创建外部超链接外部链接：不同网站文件之间的链接。如：4.2.4 创建空链接和脚本链接1 .创建空车接：#2. 创建脚本链接： 当单击网页中“关闭窗口”时，窗口即可关闭。操作： 在 链 接” 文本框 中输入 javascript:windows.close()或者javascript:self.close()难点：链接路径，脚 本链接重点：(10 分钟)通过让同 学们自己动 手，创建一个 到自己邮箱的 超链接，使同 学们很有成就 感。难点： 设置链接颜色4.2.5 创建E-mail超链接1 .在网页ex4_1.htm

8、文件中的最下端输入“与我联系”文本。2 .选中“与我联系”文本。3 .在文本“属性面板上的链接”文本框中输入mailto:teach_ie4 .保存网页。练习：为“与我联系”文本创建一个超链接，链接到自己的 QQ邮箱。4.2.6 设置链接颜色文本具有几种颜色状态：未访问过链接的文本颜色、已访问过链接的文本颜色、以及正在访问过链接的文本颜色。在Dreamweaver未访问过和已访问过的链接文本的默认颜色为蓝色和紫红色。设置颜色的办法：利用网页属性对话框来设置链接的颜色。第6页共10页重点：(101.1.2 锚点链接锚点(也称作锚记、书签)常用于包含大量文本信息的网页，通过在网页上设置锚点，再通

9、过锚点链接，就可以直接浏览到相应的网页内容。大大加快了浏览速度。锚点链接：同一网页或不同网页的指定位置的链接。分钟)讲解锚点 的含义、制作 步骤、返回首 链接。边讲解 边演示，在让 学生自己动手 制作锚点链接 及返回顶部 时，可把课件 里制作步骤那 一部分投影到 大屏幕上；让 学习能力差的 学生照着步骤 制作。重点：(10 分钟)先用中国 地图举例：当我们在 中国地图上点 陕西省时，页 面就转到陕西1.1.3 锚点链接应用实例1、设计目标、制作一个如图2所示的锚点链接。2、实训引导制作网页前素材的准备。3、制作步骤(1)在页面中插入锚点(2)为锚点建立链接1.1.4 插入命名锚点命名锚点简称为

10、锚点，在网页中用于标记和链接的跳转位置，以便引用在菜单栏中选择“插入” 一 “命名锚记”命令在“锚记名称”文本框中，输入锚记的名称，单击“确定”按钮1.1.5 链接锚点在“属性”面板中的“链接”文本框中，输入“#”和锚点名称。1.1.6 设置返回首链接选中正文中“ Go Top”文本。在“属性”面板的“链接”文本框中输入“ #top4.4 制作图像地图4.4.1 热区链接应用实例1 .设计目标制作一个如图3所示的热区链接。2 .页面分析在图3页面中使用了 “图像地图”，其中各个组 成部分分别对应一个热区。3 .实训引导制作网页前素材的准备。4 .制作步骤(1)制作热区(2)制作超链接图3*第7

11、页共10页省地图的页面 了。让学生对 热区链接有一 定的了解，再 提出设计目 标。4.4.2 制作热区单击“图像”，此时“属性”面板上显示的是图像的有关属性，在“属性”面板的左下 方有选取工具，单击“选取工具”，在图像上拖动鼠标可绘制出热区。4.4.3 为热区添加说明文字和制作超级链接.1 .单击“热区”2 .在热区“属性”面板上，做普通链接。4.4.4 编辑热区1 .同时选中多个热区2 .移动热区3 .调整热区大小4 .删除热区重点： （5分钟）把事先制作好 的导航条让同 学们看看，知 道设计目标完 成后，网页应 该达到什么样 的效果。然后 利用投影仪带 着同学们一步 一步制作完 成。4.5

12、 制作导航条4.5.1 导航条实例1、设计目标制作一个如图4所示的导航条。2、页面分析在这个导航条中共有 4个元素，每个元素由4个图 像构成，其中一个图像用于正常显示状态， 另一个图像 用于鼠标移上时的状态，还有两个图像分别用于单击元 素后的状态及鼠标移到被单击过的元素上时的状态，为此制作这个导航条一共需 要16个图像。3、实训引导制作网页前素材的准备。4.5.2 制作导航条方法1 :在菜单栏中选择“插入” 一 “图像对像” 一 “导航条”命令。方法2:在“插入”工具栏的“常用”类别中，单击“图像”菜单并选择“插 入导航条”。注意：一个网页只能设一个导航条，可以只设置第一个状态。4.5.3 修

13、改导航条“修改一导航条，调整顺序、删除、修改间距、改变方向小结：（4分 钟）教师和学 生一起总结和 归纳知识点， 师生互动。小 结本章详细介绍了网页中链接的应用和各种链接的创建方法。在Dreamweaver中不仅可以把文本制成超链接，还可以把图像制成超链接。被链接的对象不仅是网页， 还可以是其他图像、 多媒体文件、E-Mail、可供下载的软件以及其他网站等。超链接有以下几种：内部链接：在同一网站文件之间的链接。外部链接：不同网站文件之间的链接。锚点链接：同一网页或不同网页的指定位置的链接。E-mail链接：电子邮件的链接。理解绝对路径、文档相对路径、根相对路径的含义。通过本章学习，我们可以将本地站点下的网页有机地链接在了一起。第8页共10页第9页共10页布置 课题：（5分 钟）要求学生 独立完成；按 时上交作品。 并在下次课点 评本次课的作 品。布置实训课题并提出利用所学知识，继续完善第 3套配套实训中所做的“信乐团”网站，要求如下：1 .打开实训素材index.htm文件，设置超链接。如图4 - 1所示。 为“个人档案”、“新闻讯息”、“作品介绍”和“返回首页” 创建超链接，分别链接到相应的网页。在页面中单击“友情链接”文本将打开搜狐网站的首页。在网页中为“与我联系”文本创建 E-mail链接，其 E-mail 地址为 teach_