网页的美化与特效制作教案

网页的美化与特效制作

【教学目标】

（一）知识目标

通过学习，使学生了解导航栏和共享边框，给网页设置背景，使网页更加美观。理解导航栏和共享边框的作用。

（二）能力目标

学生能熟练掌握为网站主页设置共享边框，添加主页与下级网页的导航栏；学会为网页设置背景（包括背景图片和背景颜色），增强学生对网页进行合理搭配的观念。

（三）情感目标

培养学生的自学能力、操作能力以及分析和解决问题的能力，通过对网页的美化，培养学生审美能力。

【教学重难点】

重点：1.理解共享边框和导航栏的好处，学习为网站设置共享边框，添加主页与下级网页的导航栏

2.学习给网页添加背景；

难点：为网站设置共享边框，添加主页与下级网页的导航栏，给网页添加背景，网页背景与内容的合理搭配。

【教学安排】

课时安排：一课时。

【教法、学法】

1、教法：以“比较法”和“激趣探知法”引入新课，以强烈鲜明的对比效果激发学生的学习兴趣，推动学生探求新知的强烈欲望，提高学生的学习主动性。适时给表现好的学生表扬，通过学生看书自主学习，培养学生的创新精神和实践能力。

利用任务驱动，引导学生自主学习、动手实践方式完成本节课的教学目标。

2、学法：教学活动是教和学的双边相互促进活动。在浓厚的创设欲望和教师布置任务的驱动下，学生积极主动的参与教学活动。结合课本，自主发现问题、提出问题、解决问题，通过多思考、多交流，学习掌握本节课的重点内容。

通过学生演示作品展示，引导学生相互交流、对作品进行评价，由此增强学生对网页内容和背景图片颜色进行合理搭配的能力。

【活动概述】

本次教学活动是在教师的指导下，学生通过观察、探索、讨论、研究进行自主性学习，学会对网页进行美化（包括：设置共享边框和导航栏，设置网页背景）。

【教学准备】

1.课件

2.上课资料

两份内容相同的网页，（一份是经过美化的，一份是没有美化的，事先在每位学生计算机上都拷上没有美化的网页。）

【教学过程】

组织教学

第一阶段：观察作品，导入新课

1、老师演示出示内容相同的网页《我的家乡》，（一份是经过美化的，一份是没有美化的）让学生观察：

2、看一看，有哪些不同，哪个网站浏览更方便、更能吸引观众？

3、学生活动：观察、思考，发言。

不同点：第二个网页进行了美化，说具体些，就是给网页设置了背景、有目录可以方便、快捷的浏览同一站点的多个网页。第二网页更能吸引观众，浏览更方便。这个网站看起来更漂亮。

4、教师归纳小结。经过修饰的网页更加美观，浏览更方便，更能吸引人，那么怎样才能做到这一点呢？正是我们这节课要解决的问题（学生了解学习任务，激发兴趣）

教师出示课件：美化网页

1、为网站设置共享边框，添加主页与下级网页的导航栏

2、给网页添加背景（包括背景图片、颜色）

第二阶段：讲授，围绕学习任务，整体感知

这节课我们有两个学习任务，下面我们就通过完成这些任务来解决这些问题。相信你们一定能完成好

（老师出示课件）。我们看第一个任务：

任务一：做一做为“我的家乡”网站设置共享边框，添加主页与下级网页的导航栏。

请同学们打开课本学习第77页操作方法，你们告诉我步骤，**作，大家一定要认真学噢！

教师演示讲解并广播给全体学生设置共享边框和导航栏方法。（并提醒学生共享边框可以在页面的上下方、左侧和右侧的任一位置出现。）

学生学习操作方法

1.打开“我的家乡”网站的主页。

2.在网页视图界面中打开“格式”菜单，执行其中的共享边框（D）…命令；

3.在“共享边框”对话框中选中所有网页、上、包含导航按钮，单击确定。在“我的家乡”网页上方出现共享边框区域。

4.单击编辑此导航栏的属性，以便在此处显示超链接，执行“插入”菜单“导航栏”命令，打开“导航栏属性”对话框。

5.在“导航栏属性”对话框的“要添加到网页的超链接”栏中选择主页下面的子页，“其他网页”中选择主页；在“方向和外观”栏中选择水平和按钮。单击确定。

6．预览设置共享边框和导航栏的效果。

教师提问：a. 通过老师刚才的操作和演示，大家学会了吗？请你也来试一试。

我给的时间是有限的。比一比，哪一些同学完成的又快又准确。（操作完成的同学，帮一帮其他同学，自主探究，相互协作。）

教师个别指导，巡视检查完成情况。

通过老师的演示和同学们的操作，请你说一说你学会了什么？

导航栏和共享边框有什么作用？

学生回答：学会了设置导航栏和共享边框。使用导航栏和共享边框的好处。（教师出示课件完整详细归纳导航栏和共享边框）

大家做得真不错，不过，我们的任务还没完成。给网页添加背景会使它变得更漂亮，请同学们看第2个任务

（出示课件）任务二：动动手，做一做将“D：\ 初二5班刘学忠\网络资源\图片”文件夹中的“***.gif”图片设为“我的家乡”网站主页背景。

（教师出示任务，明确操作要求：请同学们参照课本第79—80页操作步骤来自主完成，可以探索多种设置方法。操作过程中请注意80页金钥匙和小博士给我们的提示。）

（1）学生动手完成任务。教师个别指导，巡视（预计学生要进行保存网页的操作时，注意将背景图片保存在“images”文件中。

（2）请一位学生上教师机演示（要求边操作边解说）。

（3）教师提问一：有没有其它设置网页背景的方法，请上教师机演示（这位位同学更棒用其他方法给网页添加背景。）

教师引导：在设置网页背景后，网页更美观了吗？有没有不协调的地方？激发学生积极发现问题的能力，如果没有，老师有两个问题：

1.网页设置背景后，会出现原来网页中的图片背景与网页背景不协调的情况，应怎样解决？（学生演示）

请同学们试试看“将地区图的底色去除”？

2．如果没有合适的背景图片，应该怎么办？具体的做法是什么？（学生思考回答并操作演示）老师及时对学生进行表扬鼓励。

通过大家刚才的操作和演示，请你说说你又什么新的收获？

今天老师非常高兴，同学们任务完成的都很好，充分发挥了集体的智慧顺利完成了任务。但是为了更熟练的操作请同学们打开课本，完成

第三阶段：加强实践，巩固新知（要求小组间相互协作）

（出示课件）巩固练习：打开D盘“锦绣中华”网站中的锦绣中华“主页，完成以下操作。①为“锦绣中华”主页设置共享边框，添加主页与下级网页的导航栏。

②设置网页标题及正文文字格式并将背景色设置为淡蓝色。

学生实践，老师巡视指导

第四阶段：评价小结

1．选出几个小组展示自己的作品（检查学生完成情况），引导学生进行评价。（提醒学生注意主次之分，不能因插入背景图片而使文字失去应用的效果。要合理搭配）

2．老师出示学习评价表学生对所学知识进行评价

学习评价

序号评价内容结果（评价要实事求是）

1 你知道共享边框和导航栏的作用吗？

2 会为网站主页设置共享边框，添加主页与下级网页的导航栏吗？

3 会给网页添加漂亮的背景吗？

4 你对网页的审美标准是：

5 同学们今天表现怎样？

【教学反思】本课教学中充分利用多媒体网络教室来整合各种学习资源，使学生成为课堂的真正主人，老师成为教学的指导者，采用任务驱动下学生自主探究学习的方式，使学生获得了学习的乐趣，体验了美化网页的成就感，掌握的知识也更加牢靠、深刻。