admin 管理员组文章数量: 1087139
2024年3月30日发(作者：浏览器打开)
网页的美化与特效制作
【教学目标】
（一）知识目标
通过学习，使学生了解导航栏和共享边框，给网页设置背景，使网页更加美观。理解导航栏和共享边
框的作用。
（二）能力目标
学生能熟练掌握为网站主页设置共享边框，添加主页与下级网页的导航栏；学会为网页设置背景（包
括背景图片和背景颜色），增强学生对网页进行合理搭配的观念。
（三）情感目标
培养学生的自学能力、操作能力以及分析和解决问题的能力，通过对网页的美化，培养学生审美能
力。
【教学重难点】
重点：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 同学们今天表现怎样？
【教学反思】本课教学中充分利用多媒体网络教室来整合各种学习资源，使学生成为课堂的真正主
人，老师成为教学的指导者，采用任务驱动下学生自主探究学习的方式，使学生获得了学习的乐趣，
体验了美化网页的成就感，掌握的知识也更加牢靠、深刻。
版权声明：本文标题：网页的美化与特效制作教案 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1711747859a608739.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论