资源简介

课题 第5课 设置网页内容（3）
课时 2课时（90 min）
教学目标 知识目标： （1）掌握常见超链接的设置方法 （2）掌握行为的设置方法 技能目标： （1）掌握在网页中设置超链接 （2）掌握在网页中应用行为 素质目标： 学习上要肯于钻研，不怕吃苦，能够把深层次的知识全部理解掌握
教学重难点 教学重点：各类链接的含义及其设置方法 教学难点：行为中各类事件和行为的含义及设置方法
教学方法 问答法、讨论法、讲授法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（3 min）→传授新知（28 min）→课堂实训（12 min） 第2节课：问题导入（3 min）→ 传授新知（27 min）→ 课堂实训（10 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】让学生上网查询网页中点击哪些网页元素能够实现网页跳转 【学生】按照要求完成课前任务 通过课前任务，让学生了解网页之间的跳转过程
考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况
问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 在网页中我们有时候点击一个标题、一张图片、一个视频，网页会跳转到另外一个网页，那么网页的跳转是通过什么来实现的呢？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：设置超链接 抛出上网中我们经常遇到的现象，让学生分析其中实现原理，激发其学习兴趣
传授新知 （28 min） 【教师】讲解新知，介绍设置超链接 任务一 设置超链接 一、任务说明 网站是由一个个网页组成的，而连接这些网页的桥梁就是超链接，单击它可以使浏览者从一个网页跳转到另一个网页，或下载某个文件等。超链接包括很多种，最常用的是常规超链接，另外还有热点链接、电子邮件链接等，本任务将分别介绍。 二、预备知识 （一）设置常规超链接 超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。 常规超链接包括内部超链接和外部超链接，内部超链接是指目标端点位于站点内部的超链接；外部超链接是指目标端点位于其他网站中，单击它可跳转到其他网站的超链接。 1．内部超链接 内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在属性检查器上的“链接”编辑框中直接输入要链接对象的相对路径；也可通过单击“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。图3-52（详见教材）显示了为“买肯抠”网站首页“index.html”导航条中的“关于买肯抠”图片设置内部超链接的方法。 此外，也可单击并拖动属性检查器上“链接”编辑框右侧的“指向文件”按钮到“文件”面板中的文件上，前提是此时“文件”面板中显示的是该网页所在网站，如图3-53所示（详见教材）。 属性检查器上“链接”编辑框下方的“目标”表示打开链接文档的方式，默认在当前窗口中打开链接网页。其中，“_blank”和“_new”表示在保留当前网页窗口的状态下，在新窗口中显示被打开的链接网页；“_parent”“_self”和“_top”表示在当前窗口显示被打开的链接网页。 【课堂问答】 【教师】随机邀请学生回答以下问题 设置完超链接，如何取消超链接？ 【学生】聆听、思考、回答 【教师】总结学生的回答 要取消超链接，可在选中已设置超链接的对象后，删除属性检查器上“链接”编辑框中的内容。 2．外部超链接 外部超链接的设置一般是在选中对象后，在属性检查器上的“链接”编辑框中直接输入要链接网页的网址。图3-54（详见教材）是在选中图片后，在“链接”编辑框中输入“http://www.macaco-”来为图片设置外部超链接。 （二）设置热点链接 热点链接又叫图像映射，就是使用热点工具将一张图片划分成多个区域，并为这些区域分别设置链接。 在选中图片后，属性检查器左下角会出现一组工具，如图3-55所示（详见教材）。 可以在单击其中的矩形、圆形或多边形热点工具后，在选中的图片上单击并拖动鼠标绘制热点区域，之后在属性检查器上为热点区域设置链接。依此类推，可以在一张图片上绘制多个热点区域。具体操作可以参考后面的任务实施。 （三）设置电子邮件链接 使用电子邮件链接可以非常方便地给网站管理者发送邮件。很多网页下方的信息区都留有电子邮件地址，单击该地址可打开“Outlook Express”的“新邮件”窗口（参见教材图3-56），这就是电子邮件链接。 选中要设置链接的文本或图像后，在属性检查器上“链接”编辑框中输入“mailto:电子邮箱地址”，即可为文本或图像设置电子邮件链接。另外，也可以在选中文本后，选择“插入”>“电子邮件链接”菜单，打开“电子邮件链接”对话框，然后在“电子邮件”编辑框中输入“mailto:邮箱地址”来设置，如图3-57所示（详见教材）。 【课堂问答】 【教师】随机邀请学生回答以下问题 属性检查器可以为选中的文本或图像设置电子邮件链接，使用“电子邮件链接”对话框是否也可以为选中的文本或图像设置电子邮件链接？ 【学生】聆听、思考、回答 【教师】总结学生的回答 使用“电子邮件链接”对话框只能为文本设置电子邮件链接，而不能为图像设置，在为图像设置时其右侧会出现多余的文本。 （四）设置图片链接和下载链接 所谓图片链接，就是在单击网页中的某个小图片时在新窗口中打开一幅大图片；下载链接是指单击某个超链接时会打开一个“文件下载”对话框（或自动启动下载工具），通过在该对话框中单击“打开”或“保存”按钮，可以打开或下载文件。 实际上，设置这类链接的方法非常简单，选中要设置为链接的文本或图像后，只要在属性检查器上的“链接”设置区中将链接目标设置为图像文件或压缩文件就可以了，如图3-58所示（详见教材）。此外，如果希望在新窗口中打开大图像，还应将“目标”设置为“_blank”。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解为“欧妮雅”网站主页设置超链接 三、任务实施——为“欧妮雅”网站主页设置超链接 【多媒体】演示为“欧妮雅”网站主页设置超链接的具体步骤 步骤1 启动Dreamweaver CS5后，打开“文件”面板，在“站点名称”下拉列表中选择“欧妮雅”，然后双击文件列表中的“index.html”，在文档窗口中将其打开（如果在任务四中没有保存“index.html”，也可以打开“素材与实例\素材\Dreamweaver\cosmetic”中的“index_c.html”）。 步骤2 首先选中网站标志右侧的导航条所在图片，然后单击属性检查器上的“矩形热点工具”，在导航条上文本“首页”所在区域绘制矩形热点。 步骤3 打开“文件”面板，单击并拖动属性检查器上“链接”编辑框右侧的“指向文件”按钮，至“文件”面板中的“index.html”。 步骤4 继续在文本“欧妮雅简介”所在区域绘制矩形热点，并采取同样的方法为其创建到“sub1.html”的链接。可采用同样的方法为导航条中的其他项设置链接。 步骤5 拖动鼠标选择“公告信息”区的第一条，在属性检查器上“链接”编辑框中输入“#”并按【Enter】键，为其设置空链接。 【提示】 在此为文本设置空链接的原因是所要链接的网页尚未制作好。 步骤6 为其后面的日期设置空链接。并采取同样的方法分别为下面两条信息设置空链接。（详见教材） 步骤7 参照为上方导航条设置链接的方法，为网页最下方的网站信息图片设置热点链接。 步骤8 保存网页文档，之后按【F12】键预览网页，单击导航条中的“欧妮雅简介”，在原窗口中打开“欧妮雅简介”网页。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式，让学生认识超链接的作用，了解超链接的组成，掌握超链接的分类：内部超链接和外部超链接，及其设置的方法；在此基础上明确热点链接、电子邮件链接、图片链接、下载链接的相关概念、作用，掌握其设置方法；通过任务实施和实训，为“欧妮雅”网站主页设置超链接，将所学知识运用到实际，查找所学知识的不足，弥补不足，从而真正掌握本节所学
课堂实训 （12 min） 【教师】组织学生完成以下任务 按照上述任务实施中的具体步骤，熟悉超链接的设置方法，完成为“欧妮雅”网站主页设置超链接。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训，练习本节热点链接的设置，使学生熟练掌握其用法
第二节课
问题导入 （3 min） 【教师】随机邀请学生回答以下问题 我们上网浏览网页时，网页中的元素对我们鼠标的移入、移出、点击等有不同的响应，思考这是通过什么实现的？ 【学生】聆听、思考、回答 用问题导入，让学生更加深层次地思考问题，探究问题
传授新知 （27 min） 【教师】讲解新知，介绍应用行为 任务六 应用行为 一、任务说明 使用行为可以制作浮动的广告，状态栏文本，以及可以收缩、放大的图像等效果。下面就来学习行为的应用。 二、预备知识 （一）认识行为 行为由事件和动作两部分组成，事件是指“用户的操作”，如鼠标移到对象上方、离开对象或双击对象等；而动作是指“发生什么”，如打开浏览器窗口、播放声音或弹出信息等。事实上，动作是预先写好的能够执行某项任务的脚本语言代码段。一般的行为都是由事件来激活动作。 【知识库】 脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript，主要用来制作一些特殊效果，以弥补HTML的不足。现在有很多网站都提供网页特效的下载，这些网页特效便是用脚本语言实现的。 要应用行为，首先需要打开“行为”面板。在Dreamweaver CS5中，选择“窗口”>“行为”菜单（或按【Shift＋F4】组合键）可打开“行为”面板，如图3-65所示（详见教材）。 1．事件 onLoad：在浏览器中加载完网页时发生的事件。 onClick：鼠标单击对象（如超链接、图片、图片映像、按钮）时发生的事件。 onFocus：对象获得焦点时发生的事件，如单击表单中的文本编辑框触发该事件。 onMouseDown：单击鼠标左键（不必释放鼠标键）时发生的事件。 onMouseMove：鼠标指针经过对象时发生的事件。 onMouseOut：鼠标指针离开选定对象时发生的事件。 onMouseOver：鼠标指针移至对象上方时发生的事件。 onMouseUp：当按下的鼠标按键被释放时发生的事件。 2．动作 拖动AP元素：利用该动作允许用户拖动AP元素（关于AP元素，请参考本书项目五内容）。 转到URL：发生指定事件时跳转到指定的网页。 打开浏览器窗口：在新窗口中打开网页，并可设置新窗口的宽度和高度等属性。 弹出信息：显示带指定信息的JavaScript警告。用户可在文本中嵌入任何有效的JavaScript功能，如调用、属性、全局变量或表达式（需用“{}”括起来）。例如，“本页面的URL为{window.location}，今天是{new Date（）}”。 设置状态栏文本：在浏览器左下角的状态栏中显示信息。 显示—隐藏元素：显示、隐藏一个或多个AP元素，或者恢复其缺省属性。 （二）设置行为 行为可以应用于HTML标签、图像、链接文本等对象。如果要对某个对象应用行为，需要先选中该对象，然后单击“行为”面板上的“添加行为”按钮，在打开的行为列表中选择动作，并在打开的窗口中设置效果，最后指定设定的动作在什么情况下发生，也就是事件。 下面以“买肯抠”网站中的“index.html”网页为例，通过为其设置状态栏文本，来简单介绍行为的应用。 【多媒体】演示为网页设置状态栏文本的步骤 步骤1 打开“买肯抠”站点中的文档“index.html”。首先选择要应用行为的对象（此处通过单击文档窗口下方状态栏中的“”标签选中整个网页文档内容），然后打开“行为”面板，单击“添加行为”按钮，在弹出的列表中选择“设置文本”>“设置状态栏文本”。 步骤2 打开“设置状态栏文本”对话框，在“消息”编辑框中输入要在状态栏中显示的文本，然后单击“确定”按钮。 步骤3 在“事件”下拉列表中选择“onLoad”，表示网页下载完毕后即显示设置的状态栏文本。 步骤4 保存文档后按【F12】键预览，可以看到状态栏中的文本。 【课堂问答】 【教师】随机邀请学生回答以下问题 纯文本是否能够应用行为？ 【学生】聆听、思考、回答 【教师】总结学生的回答 一般对纯文本是不能应用行为的，如果要对其应用行为，首先需要为其设置链接。 （三）编辑行为 1．修改行为 修改行为的方法非常简单，只需双击“行为”面板中相应的动作名称，比如要编辑前面的“设置状态栏文本”行为，只要双击“事件”右侧对应的动作名称“设置状态栏文本”，就会重新打开“设置状态栏文本”对话框，修改后关闭对话框即可。 【知识库】 如要选择某个行为，需要先选中该行为所附加的对象，比如前面的“设置状态栏文本”行为是附加在“”标签上的，需要先选中“”标签，“行为”面板上才会出现相应的行为。 当“行为”面板中有多个行为时，如要改变某行为的顺序，可先选中该行为，然后单击面板上方的或按钮进行上移或下移。 2．删除行为 如要删除某行为，只需选中该行为，然后单击“行为”面板上方的“删除行为”按钮或直接按【Delete】键。也可用鼠标右键单击行为，在弹出的快捷菜单中选择“删除行为”命令。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解为“欧妮雅”网站主页设置弹出窗口 三、任务实施——在“天音”站点中创建并命名网页 【多媒体】演示为“欧妮雅”网站主页设置弹出窗口的具体步骤 步骤1 打开“欧妮雅”站点中的“index.html”（如果在任务五没有保存“index.html”，也可以打开“素材与实例\素材\Dreamweaver\cosmetic”中的“index_d.html”）。首先单击选择“标签选择器”最左侧的“”标签，然后单击“行为”面板中的“添加行为”按钮，在打开的“行为”列表中选择“打开浏览器窗口”。 步骤2 弹出“打开浏览器窗口”对话框，单击“要显示的URL”编辑框右侧的“浏览”按钮。 步骤3 打开“选择文件”对话框，选择“欧妮雅”站点中的网页文档“ad.html”，然后单击“确定”按钮。 步骤4 回到“打开浏览器窗口”对话框，设置“窗口宽度”和“窗口高度”分别为560和600，窗口名称为“ad”，然后单击“确定”按钮。 步骤5 设置“事件”为“onLoad”，以使网页下载完毕后即显示伴随窗口。 【课堂问答】 【教师】随机邀请学生回答以下问题 上述“事件”中的“onLoad”是网页当中的什么事件？ 【学生】聆听、思考、回答 【教师】总结学生的回答 在浏览器中加载完网页时发生的事件，即网页完整呈现之后触发onLoad”事件。 步骤6 保存网页文档，然后按【F12】键预览，在打开网页的同时打开伴随窗口。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式，让学生认识什么是网页当中的行为，明确事件和动作的概念，以及有哪些可以添加的事件和动作；介绍了如何添加行为，设置完成后，如何修改和删除行为；最后通过任务实施和实训，为“欧妮雅”网站主页设置弹出窗口，实现网页加载完成后，弹出对话框，完成一个完整行为的事件和动作的设置，并实现最终效果，使学生熟练掌握在网页中应用行为
课堂实训 （10 min） 【教师】组织学生完成以下任务 请学生在实训电脑上完成为“欧妮雅”网站主页设置弹出窗口，练习网页中如何应用行为，包括各类事件的含义以及如何添加，各类行为的含义及其行为添加和设置。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训，检验学生所学知识是否扎实，查漏补缺，使其真正掌握本节所学
课堂小结 （3 min） 【教师】简要总结本节课的要点 本次课主要介绍了常规超链接、热点链接、电子邮件链接、图片链接和下载链接等各类链接的含义，链接的设置方法，以及网页中认识行为、设置行为和编辑行为的具体设置方法，希望大家课下能够及时巩固复习，扎实掌握所学内容。 【学生】总结回顾知识点 回顾本次课所学，总结知识点，梳理知识要点，使学生加深印象
作业布置 （2 min） 【教师】布置课后作业 完成项目实训——为欧妮雅网站子页设置内容。打开“欧妮雅”站点中已经创建好布局的子页“sub2.html”，为其设置网页内容。 【学生】完成课后任务 通过课后练习，复习巩固所学知识
教学反思 本节课中完成了在网页中如何设置各类链接，如何为网页添加各类行为。本节课不足之处是没有通过实例详细介绍行为中各类事件、动作的具体应用方法。

展开更多......

收起↑