让网页动起来——制作主页“今日广东”教学设计

课题：

高中《信息技术》（广东教育出版社）第二册第一章第四节：制作主页“今日广东”。

教学方法：

实例讲练法，自学指导法，任务驱动的教学方法。

教学手段：

通过多媒体网络教室的广播、控制等功能，进行网页欣赏，演示操作，作品展示等。

教学目标：

知识目标：掌握制作滚动字幕、横幅广告效果的方法。

能力目标：通过本节的学习，学生能合理运用动态字幕、横幅广告管理器等来增强网页的表现力，培养学生的自学能力，问题分析能力，举一反三能力，综合运用知识的能力和归纳能力等。

过程与方法目标：让学生体验学习软件的过程和自主探索解决问题的过程，感受自主学习、讨论学习、合作学习和实践学习。

德育目标：通过对实际问题的解决，学生进行探索、尝试性学习时，可鼓励学生相互讨论、合作，培养他们的团队协作精神，加强学生的道德情操，提高学生的审美情趣。

情感与价值观目标：培养学生的思维变通性和严密性，培养学生的探索精神和创新精神，帮助学生树立自信心。

教材与学情分析：

本节内容是对网页进行动态修饰，增加网页的表现力，为网页添加一些活力。因为加入了特殊的动态效果，这部分内容相对于前面的内容比较有趣，学生学习的兴趣、积极性会比较高。学生在学习本节内容前，已经掌握了在FrontPage中输入文字、插入图片、表格等操作，并且初步掌握了在FrontPage中制作网页的方法。

教学重点：

掌握制作滚动字幕的方法以及字幕属性的设置和字体格式的设置方法、插入横幅广告效果的方法。

教学难点：

设置字幕属性的方法，如何在横幅广告管理器中链接其他的网页或站点以及设置图片过渡效果。

课时：1课时

教学过程设计：

一、导入新课

浏览欣赏搜狐、网易等网站：通过多媒体教室广播功能向学生展示。

教师提问：

1．欣赏完搜狐网站，你对哪些设计最为满意？

2．网站的信息表达形式主要有哪些？

3．与自己做的“今日广东”网站对比，在信息表达形式上主要有哪些不同的地方？

学生思考并尝试回答：

1．有动画，广告等。（大部分学生的回答）。

2．文字、图片、声音、动画等。

3．搜狐网站有动画广告、移动文本、弹出式窗口等。

教师：

大家对一些动的元素都比较感兴趣，那么这些可以移动的文本、变化的图片、按钮等是不是都必须利用其他软件，如flash制作成动画后插入到网页中呢？其实，我们只要利用FrontPage中的一些工具就可以简单轻松地制作出这些效果，让网页动起来了。利用FrontPage可以在网页中插入特殊效果，为网页添加动画功能，这样大大地增强了网页的表现力，增强了网页的可视性。这些特殊效果包括横幅广告、滚动字幕、悬停按钮、动态HTML等。这一节课先学习如何制作滚动字幕和横幅广告。

[设计意图：以浏览漂亮的网站作为引子，学生在看到了加入很多动态效果的网站会很兴奋。这样激发了学生的学习兴趣，积极性也就随之调动起来。]

二、新课讲授

任务：

对自己已做的网站主页“今日广东”进行加工修饰（以这个任务为例子来讲解）

第一部分：为网页增加“跑马灯”——制作滚动字幕

滚动字幕俗称“跑马灯”：是在网页中循环连续地移动显示某一段文本信息，适宜于在网页中显示时效性强的新闻或欢迎等消息。

问题与方案：

教师讲解插入字幕的方法，然后提出问题让学生自己通过查阅、讨论、探索等方法来思考、操作，然后学生通过操作来掌握字幕属性的设置和字体格式、边框等的设置方法。

讲解演示：

演示在网页中空白处插入滚动字幕“欢迎光临本站”的操作来讲解制作滚动字幕的基本步骤：光标定位，利用“插入/组件/字幕”命令来插入滚动字幕并且设置其表现方式。

小知识点：

在“普通”视图模式下看不到字幕的效果，可以在“预览”视图模式下观看效果。如果不满意，回到“普通”模式后，双击字幕或右单击并选择“字幕属性”进行修改。

问题：

1．如何把现成的文本“今日广东”制作成滚动字幕？

2．怎样修改“欢迎光临本站”的字体，并且为它加上边框？

[设计意图：先讲解演示在空白处插入滚动字幕的方法，这样学生就可掌握插入滚动字幕的基本步骤，锻炼学生的观察能力和记忆力，然后再提出问题让学生思考，锻炼学生的思维能力。]

学生活动：对两个问题思考后进行自主探索实践，然后完成任务。

1．选择已存在的文本“今日广东”，然后执行“插入/组件/字幕”命令，就可把现成的文本转化成滚动字幕。

2．学生在“字幕属性”对话框中，单击“样式”按钮，可以在“修改样式”对话框中对字体、段落等进行设置并为文本加上底色、边框等。

3．改变字幕的大小。

教师小结：

1．字幕的插入方法。

2．字体格式的设置与底色边框等的设置方法。

[设计意图：以学生自主操作为主。学生在掌握基本方法的基础上，自己再探索如何解决问题，自己动手操作的过程中会遇到各种各样的问题，教师巡视指导学生通过观察、类比、讨论、合作等方式来尝试解决自己的问题。在解决问题的过程中，培养学生的动手能力，同时让学生体会到成功的喜悦，让学生自己感受实践学习、自主学习，这样学生的学习兴趣会进一步提高，学习激情、气氛会更加热烈。]

第二部分：为网页加上广告看板——设置横幅广告效果

教师：

浏览网页时经常会见到在网页的某一个位置加入了不时变化的图片，这些图片往往还被加入了某个公司或另一个网站的链接，这些图片事实上起了广告的作用。一般来说这些图片并不是一段动画，而是由“横幅广告管理器”管理的多幅图片组成的。

问题与方案：

学生通过自主学习，实践学习等方法来完成。教师不演示插入横幅广告管理器的方法，先提出问题，让学生思考讨论完成操作，从而掌握网页中插入“横幅广告管理器”的方法，然后教师再通过提问引导学生来回答问题、演示操作步骤等方法来讲解其中的知识点。

问题：

1．不断变化的多幅图片应该怎样添加到管理器中？

2．图片的过渡效果有哪些？（分解、水平遮蔽、垂直遮蔽、盒状收缩、盒状放射）

3．如果需要单击图片时链接到其他的WEB站点或网页，应该怎样操作？

学生活动：

利用“插入/组件/横幅广告管理器”命令在网页中适当的位置插入管理器，然后在管理器中添加图片，并进行其他的设置。

[设计意图：在这过程中，主要体现以创新精神为核心，以学生为主体，教师从旁辅导的教学模式。学生先通过类推的方法或查阅资料或讨论或

合作等方式来找出插入“横幅广告管理器”的方法，在学生的操作过程中提高学生的操作水平，培养他们解决问题的能力和自主学习的能力。]

提问讲解：

教师通过提出的问题提问学生，引导学生，并根据学生的回答来演示操作：在主页的适当位置插入“横幅广告管理器”，并在横幅广告管理器中添加“海内存知己”和“天涯若比邻”两张图片，并对其过渡效果、链接等进行设置。

教师小结：

1．利用“插入/组件/横幅广告管理器”命令来插入广告。

2．在“横幅广告管理器”对话框中可以来设置图片的过渡效果、显示的顺序等。

3．在链接栏中可为图片链接到另一个网站或是网页。

[设计意图：培养学生积极回答问题的习惯，培养学生举一反三的能力，加强锻炼学生归纳的能力，增强学生的课堂主体意识。]

第三部分：进一步完善网站的其它网页——让其它页面也“动”起来

方案：

让学生利用本节学习的内容自己动手来设计其它网页的一些广告或滚动文本，提高信息的表现力，增强网站的可视性。教师巡视指导，最后让学生展示自己的作品。

作品展示（略）

[设计意图：学生不仅要“学会”，更重要是要“会用”。通过学生自己动手设计，积累经验，培养学生综合运用知识的能力，激发学生的创作意识，开发学生的想像力，提高学生的审美情趣。]

三、课堂总结：

对本节的知识点进行小结，重点指出应该注意的问题（略）。引导学生总结归纳自己在学习活动中的收获和体会。