在网页中插入各种超级链接.doc

教 案教 学 内 容 总 体 安 排课程名称Dreamweaver网页设计与制作授课教师课程类别专业必修课课 时 2 学时教学章节第四章 在网页中建立各种超级链接参考教材网页设计与制作实用教程主编：刘艳丽授课班级平面设计1401班书面作业P71页-P72页上机作业配套实训：超级链接教学准备1、课件（超链接.ppt）2、上课资料（教材配备的素材，本校网站）教学方法案例式教学，任务驱动，多媒体讲授，讲练结合。教学设备1、 硬件：教师用多媒体计算机1台和学生用计算机60台、投影仪。2、 软件：多媒体网络教学系统、WindowsXP、Dreamweaver 8学生分析1、通过前几讲的学习，学生已经学会了创建和管理站点的知识，自己可以创建一个简单的网页。2、学生经常上网，对于超级链接并不陌生。所以，概念的引入并不困难，但是，学生最熟悉的链接类型就是页面和页面之间的链接，而对于超链接的作用理解的不深入，对于多种建立超链接的方法也知之甚少。课堂教学目标知识目标：1、文字上建立各种超链接2、图片上建立各种超链接3、电子邮件超链接能力目标：1、通过发现问题来寻找解决问题的方法，养成勤思考、爱学习的习惯。2、培养学生养成动手动脑的自学能力。情感目标：1、激发学生合理、合法使用超级链接组织网络资源的兴趣和意识。2、培养学生的实践能力、审美能力及创新精神。教学重点内部超级链接、外部超级链接、脚本链接、E-mail链接、锚点链接、图像热区的添加方法、导航栏的制作。教学难点链接路径、脚本链接、设置链接颜色。授课思路及讲解要点：超级链接是网页的最基本要素，是web服务得以实现的核心。课程起始先以实例的形式展示几种上网时经常见到的链接形式，让学生了解学习目标，带着问题来学习，提高了学习兴趣。采用案例式教学的思路，教学过程中结合实例，多设问题，让学生积极主动思考，操作演示时分析不同操作产生的不同后果，通过分析，加深印象并掌握操作规律。本次课的讲解要点是各种超级链接的添加方法及导航栏等。不仅介绍各种超链接的方法，还要介绍应用的场合、优点。导航栏实际上是通过自动添加javascipt代码来实现的。也可以让学生有所认识，为以后学习行为作铺垫。教学过程上一讲回顾，上次作品点评，课程导入、设计目标、课程内容讲解、归纳小结、课后提问、布置课后实训课题第四章 在网页中建立各种超链接上一讲回顾：（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）设置链接颜色重点：（20分钟）讲解内部和外部超链接的含义、制作方法、应用场合及优点。举一些我们平时上网用到的超链接的例子，并让同学们区别是什么超链接。先演示一遍，再带着学生做一遍，最后再让学生自己做一遍。难点：链接路径，脚本链接4.2 创建超链接4.2.1 创建内部超链接内部链接： 在同一网站文件之间的链接。1.链接网页文件 2.链接到其它文件链接路径：1、绝对路径：被链接文档的完整的URL。2、相对路径：以当前文档所在位置为起点，到被链接文档经过的路径。文档相对路径是最适合用于本地链接的路径。3、根相对路径：从站点根文件夹到被链接文档经过的路径。4.2.2 在新的浏览窗口中打开链接文件在“目标”下拉列表框中，有四个选项：“blank”表示在新的未命名的浏览器窗口中打开链接文档，其余三个选项的具体含义将在后续课程中讲解。4.2.3 创建外部超链接外部链接：不同网站文件之间的链接。如：4.2.4 创建空链接和脚本链接1.创建空链接：# 2.创建脚本链接： 当单击网页中“关闭窗口”时，窗口即可关闭。操作：在“链接”文本框中输入javascript:windows.close() 或者 javascript:self.close()重点：（10分钟）通过让同学们自己动手，创建一个到自己邮箱的超链接，使同学们很有成就感。难点：设置链接颜色4.2.5 创建E-mail超链接1在网页ex4_1.htm文件中的最下端输入“与我联系”文本。2选中“与我联系”文本。3在文本“属性”面板上的“链接”文本框中输入mailto:teach_4保存网页。练习：为“与我联系”文本创建一个超链接，链接到自己的QQ邮箱。4.2.6 设置链接颜色文本具有几种颜色状态：未访问过链接的文本颜色、已访问过链接的文本颜色、以及正在访问过链接的文本颜色。在Dreamweaver未访问过和已访问过的链接文本的默认颜色为蓝色和紫红色。设置颜色的办法：利用网页属性对话框来设置链接的颜色。重点：（10分钟）讲解锚点的含义、制作步骤、返回首链接。边讲解边演示，在让学生自己动手制作锚点链接及返回顶部时，可把课件里制作步骤那一部分投影到大屏幕上；让学习能力差的学生照着步骤制作。4.3 创建锚点链接锚点(也称作锚记、书签)常用于包含大量文本信息的网页，通过在网页上设置锚点，再通过锚点链接，就可以直接浏览到相应的网页内容。大大加快了浏览速度。锚点链接：同一网页或不同网页的指定位置的链接。4.3.1 锚点链接应用实例1、设计目标、制作一个如图2所示的锚点链接。2、实训引导制作网页前素材的准备。3、制作步骤（1）在页面中插入锚点（2）为锚点建立链接4.3.2 插入命名锚点命名锚点简称为锚点，在网页中用于标记和链接的跳转位置，以便引用。l 在菜单栏中选择“插入”“命名锚记”命令l 在“锚记名称”文本框中，输入锚记的名称，单击“确定”按钮。4.3.3 链接锚点 l 在“属性”面板中的“链接”文本框中，输入“#”和锚点名称。4.3.4 设置返回首链接 l 选中正文中“Go Top”文本。l 在“属性”面板的“链接”文本框中输入“#top”。重点：（10分钟）先用中国地图举例：当我们在中国地图上点陕西省时，页面就转到陕西省地图的页面了。让学生对热区链接有一定的了解，再提出设计目标。4.4 制作图像地图4.4.1 热区链接应用实例1.设计目标制作一个如图3所示的热区链接。2.页面分析 在图3页面中使用了“图像地图”，其中各个组成部分分别对应一个热区。3.实训引导制作网页前素材的准备。4.制作步骤（1）制作热区（2）制作超链接4.4.2 制作热区单击“图像”，此时“属性”面板上显示的是图像的有关属性，在“属性”面板的左下方有选取工具，单击“选取工具”，在图像上拖动鼠标可绘制出热区。4.4.3 为热区添加说明文字和制作超级链接.1单击“热区”2在热区“属性”面板上，做普通链接。4.4.4 编辑热区1.同时选中多个热区2.移动热区3.调整热区大小4.删除热区重点：（5分钟）把事先制作好的导航条让同学们看看，知道设计目标完成后，网页应该达到什么样的效果。然后利用投影仪带着同学们一步一步制作完成。4.5 制作导航条4.5.1 导航条实例1、设计目标制作一个如图4所示的导航条。2、页面分析 在这个导航条中共有4个元素，每个元素由4个图像构成，其中一个图像用于正常显示状态，另一个图像用于鼠标移上时的状态，还有两个图像分别用于单击元素后的状态及鼠标移到被单击过的元素上时的状态，为此制作这个导航条一共需要16个图像。3、实训引导制作网页前素材的准备。4.5.2 制作导航条方法1：在菜单栏中选择“插入”“图像对像”“导航条”命令。方法2：在“插入”工具栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”。注意：一个网页只能设一个导航条，可以只设置第一个状态。4.5.3 修改导航条“修改导航条”，调整顺序、删除、修改间距、改变方向小结：（4分钟）教师和学生一起总结和归纳知识点，师生互动。小 结本章详细介绍了网页中链接的应用和各种链接的创建方法。在Dreamweaver中不仅可以把文本制成超链接，还可以把图像制成超链接。被链接的对象不仅是网页，还可以是其他图像、多媒体文件、E-Mail、可供下载的软件以及其他网站等。超链接有以下几种：内部链接：在同一网站文件之间的链接。外部链接：不同网站文件之间的链接。锚点链接：同一网页或不同网页的指定位置的链接。E-mail链接：电子邮件的链接。理解绝对路径、文档相对路径、根相对路径的含义。通过本章学习，我们可以将本地站点下的网页有机地链接在了一起。教学板书：（1分钟） 第四章 在网页中建立各种超级链接（一） 1、文本超链接：内部链接、外部链接、空链接、脚本链接、E-Mail链接、锚点链接。（二） 2、图片超链接：热区链接3、导航栏：导航栏的制作提问：（10分钟）通过提问课后作业来了解学生本次课的学习效果；要因材施教，按学习能力分层次提问，遇到回答不上来的同学，可以让他点名求助其他同学，重点表扬学习有进步的同学。并给予掌声鼓励。提 问 课 后 作 业一、填空题。1、超链接有以下几种类型： 、 、 、 。2、如果要链接到新浪网站，网址为“”，应在文本“属性”面板上的“链接”文本框中输入 。3、为一段文字添加E-mail链接，邮件地址为“teach_”，则应在文本“属性”面板上的“链接”文本框中输入 。二、单选题。1、如果要使超链接目标在新的窗口打开，应在“属性”面板的“目标”下拉列表框中选择（ ）A. _ blandB. _ parentC. _ selfD. _ top2、将网页中“返回首页”文本链接到top锚点，应在文本“属性”面板上的“链接”文本框中输入（ ）A. *top B. topC. # topD. # top三、思考题。1、超链接有几种类型？2、链接路径分为哪几种情况？3、如何使超链接目标在新的窗口中打开？4、如何在页尾设置链接，使单击链接时能返回到页首？5、如何设置链接文本在各种状态下的颜色？布置课题：（5分钟）要求学生独立完成；按时上交作品。并在下次课点评本次课的作品。布 置 实 训 课 题 并 提 出 要 求利用所学知识，继续完善第3套配套实训中所做的“信乐团”网站，要求如下：1打开实训素材index.htm文件，设置超链接。如图4 1所示。l 为“个人档案”、“新闻讯息”、“作品介绍”和“返回首页”创建超链接，分别链接到相应的网页。l 在页面中单击“友情链接”文本将打开搜狐网站的首页。l 在网页中为“与我联系”文本创建E-mail链接