第8课 美化网页教案
图片预览
文档简介
第8课 美化网页
一、教学目标
1．学会欣赏网站的整体风格。
2．学会在网页中添加图片。
3．学会设置图片属性，编辑图片。
4．学会设置网页背景，保存网页。
二、教学重点和难点
1．教学重点：插入图片，设置图片属性，编辑图片，设置网页背景。
2．教学难点：感知网站的整体风格，设置图片的替代文本。
三、教学准备
1．教学环境：Windows XP操作系统，FrontPage 2003，多媒体广播控制系统，因特网环境。21世纪教育网版权所有
2．教学资源：教学资源包（插图、优秀网站地址等），课件。
四、教学过程
教学环节 教师活动 学生活动 设计意图
一、创设情境，激发兴趣（4分钟） 1．观看网页：未经美化的“崇文重教”网页与美化后的网页。2．提问：你更喜欢哪一个？3．展示优秀设计风格的实例网站，如三坊七巷、客家魂网站等。4．引言：一个成功的网站给人们留下深刻的 ( http: / / www.21cnjy.com )印象，它是技术与艺术的完美结晶。网页尽管有了文本内容，但还需要进行相应的美化，也就是俗话所说的“提高颜值”，做到内容与形式的统一。同学们，想不想如何把网页美化得更加具有美感呢？5．揭题：美化网页。 观看网页。回答：更喜欢后者，因为前者相对 ( http: / / www.21cnjy.com )比较单调，后者更赏心悦目，浏览后使人耳目一新。 观看教师展示的网站，感知网站的整体风格。倾听、了解成功的网站是技术与艺术的完美结合，跟随老师的引导，进入本课的学习。明确学习任务。 通过对美化前后的网页进行对比，吸引学生眼球。同时设置体验型情境，让学生观察，感受网站界面设计的成功，激发学生学习的欲望。
二、交流讨论，理解新知（6分钟） 1．引言：网站的整体风格，可以通过色彩、版 ( http: / / www.21cnjy.com )式、布局等来表现。2．布置任务：选择一两个设计风格优秀的网站，组内交流讨论：一个优秀的网站应该具备哪些条件。（色彩合理、主题鲜明、版面协调……）（来回巡视）3.请各小组代表汇报自己组内探究、交流、讨论后的想法并加以展示。4．点评、小结：点评学生代表汇报情况，注重发现闪光点，鼓励多探究才有新发现，纠正汇报不完整的地方，及时补缺补漏。加强学习方法的指导，引导学生从色彩搭配、版面编排、布局协调等方面来汇报。 了解网站风格从哪几个方面来体现。学会说出自己对所浏览网站的感受，大致说出网站的整体风格。 倾听小组代表发言，纠正自己错误的见解。 倾听总结，懂得如何从三个方面来评价网站的风格，了解色彩所代表的网站风格。 通过真实的因特网环境，以任 ( http: / / www.21cnjy.com )务驱动为模式，初步让学生学会鉴赏、评价网站风格，重点从色彩、版式、布局等方面对实例网站进行评价，初步形成对网站风格的感性认识。
三、任务引领，自主探究（20分钟） 1．导语：美化网页有许多方法，如常见的有插入与网页文本内容相关的图片，设置合适的网页背景等。2．学习插入图片，设置图片属性，编辑图 ( http: / / www.21cnjy.com )片。(1)引言：我们在Word软件中学习了插入、编辑图片的操作方法，那么如何在网页中插入、编辑图片呢？(2)出示任务：①阅读教材第44～47页的内容，然后打开尚未美化过的“崇文重教”网页(cwzj. htm)，插入“gdcj. jpg”图片，设置图片属性为“右对齐”。②讨论：利用图片工具栏可以做些什么？怎样调整图片的大小？(3)巡视全班，个别辅导，让学生尝试插入图片并对图片属性进行必要的设置，引导学生应用以往在Word文档中插入图片的经验进行迁移学习，必要时进行集体点评。(4)请能顺利完成本任务的同学演示并讲解，其他同学补充和评价。(5)小结。通过演示，强调插入图片的操作要领有两种方法。方法一：①执行“插入”一“图片”一 ( http: / / www.21cnjy.com )“来自文件”命令。②选择图片素材存放的路径，如“images”。 ③选择要插入的图片“gdcj. jpg”。4.单击“插入”按钮。方法二：单击“常用工具栏”的“插入文件中的图片”图标。 在设置图片属性的对话框中，可以设置图片的环绕样式、对齐方式，指定图片大小。(6)如何设置图片的替代文本呢？请 ( http: / / www.21cnjy.com )一位学生演示，并通过多媒体广播系统进行转播。(7)引言：替代文本的作用是，在预览网页时，当把鼠标移动到图片上就会显示提示文本。那么如何进一步编辑图片呢，这就要用到图片工具栏了。3．学习编辑图片。(1)介绍图片工具栏常用工 ( http: / / www.21cnjy.com )具的用法。(2)让学生尝试使用工具栏编辑图片。(3)小结：使用图片工具栏，可以编辑图片，调整图片的对比度、亮度，裁剪图片的大小等等。4．学习设置网页背景。(1)引言：在学习Word ( http: / / www.21cnjy.com )文字处理软件时，我们学习了使用背景颜色来调整“纸张”的颜色，同样在FrontPage软件中也有此功能，可以给网页使用背景颜色。(2)出示任务：阅读教材第48页的内容，并尝试独立完成在“崇文重教”网页中设置网页的背景图片。(3)巡视全班，个别辅导，并及时进行评价激励。(4)成果展示：请能顺利完成本任务的同学演示并讲解自己设置背景颜色或图片的方法，其他同学补充和评价。(5)小结：网页中可以使用图片做背景，但图片一定要与插图以及文字的颜色相协调，才能达到美观的效果，如果色差太大会使网页失去美感。 回顾旧知，思考、讨论、交流Word软件中插入图片的方法。上机操作实践，完成任务。学习有困难时，及时寻求小组成员或者老师的帮助，聆听点评。倾听小结，了解插入图片的两种方法。观看学生代表的演示，了解图片属性对话框，体会替代文本的作用。观看老师的演示，了解图片工具栏的用法，学会编辑图片。阅读教材，完成任务。明确设置网页背景的步骤。 唤起学生在Word软件学习阶段有关插入图片的记忆。提出问题，让学生边操作边思考，能促使学生留心重点内容，多花时间去探究，以突破重难点。通过自学课本、小组合作寻求解决问题的策略，在与他人的交流、讨论中进行知识的互补，获得成功的喜悦，同时培养合作意识。通过学生的演示、教师的强调，化解知识的难点。通过教师的演示以及自己的练习，掌握编辑图片的方法。在原有知识的基础上让学生独立完成任务，通过两次独立操作提升学生对知识的掌握程度。
四、练习巩固，应用迁移（6分钟） 1．出示任务：请学生自主操作完成教材创新活动中的任务。（提供“自动缩略图”相关知识性材料供学生学习选用）2．巡视学生，个别辅导，适时点拨，及时点评学生探究活动过程。3．展示小组完成的创新活动成果，请各小组学生代表边演示边讲解。4．听取学生代表发言并引导全班同学一起评价，对相关拓展知识进行归纳，如“自动缩略图”按钮的作用，鼓励学生在网页中进行应用。5．小结：使用“自动缩略图”按钮对图片进行处理，可以减小网页中图片文件的大小，加快网页的下载速度。 小组合作，上机实践，完成教师布置的任务，进一步熟练插入图片文件、设置网页背景等知识技能，探究“自动缩略图”按钮的使用方法及作用。观察同学的作品，进行点评，并对照自己的作品进行比较分析。 倾听小结。 巩固操作，形成技能，用学到的知识解决问题。创设新的任务情境，能够加深学生对新知识的理解，并在此基础上进行适当的拓展延伸。
五、归纳小结，梳理知识（4分钟） 1．设问：同学们，通过这 ( http: / / www.21cnjy.com )节课的学习，我们学到了哪些新知识？ 2．引导学生回顾归纳小结这节课的主要知识点。(1)网站的整体风格是网页给浏览者的整体感受。(2)美化网页常见的方法有：插入与网页文本内容相关的图片并进行修饰；设置合适的网页背景等。(3)“自动缩略图”按钮可以减小图片文件的大小，加快网页的下载速度。3．让学生填写教材的活动评价表。4．小结：美化网页还有很多方法，比如还可加些动态文字、动画、音乐、视频等，希望同学们在制作网页过程中注意积累方法，不断提高网页的制作水平，下节课我们将继续学习网页制作。 回顾这节课学习的知识技能，与老师一起小结归纳，梳理知识。填写活动评价表。倾听小结。 及时的总结，有助于学生将零散的知识系统化，加深对所学知识的了解，进一步培养学生学会交流、总结学习过程的能力，有效提高学生的语言表达能力。
五、板书设计
六、教学反思
一、教学目标
1．学会欣赏网站的整体风格。
2．学会在网页中添加图片。
3．学会设置图片属性，编辑图片。
4．学会设置网页背景，保存网页。
二、教学重点和难点
1．教学重点：插入图片，设置图片属性，编辑图片，设置网页背景。
2．教学难点：感知网站的整体风格，设置图片的替代文本。
三、教学准备
1．教学环境：Windows XP操作系统，FrontPage 2003，多媒体广播控制系统，因特网环境。21世纪教育网版权所有
2．教学资源：教学资源包（插图、优秀网站地址等），课件。
四、教学过程
教学环节 教师活动 学生活动 设计意图
一、创设情境，激发兴趣（4分钟） 1．观看网页：未经美化的“崇文重教”网页与美化后的网页。2．提问：你更喜欢哪一个？3．展示优秀设计风格的实例网站，如三坊七巷、客家魂网站等。4．引言：一个成功的网站给人们留下深刻的 ( http: / / www.21cnjy.com )印象，它是技术与艺术的完美结晶。网页尽管有了文本内容，但还需要进行相应的美化，也就是俗话所说的“提高颜值”，做到内容与形式的统一。同学们，想不想如何把网页美化得更加具有美感呢？5．揭题：美化网页。 观看网页。回答：更喜欢后者，因为前者相对 ( http: / / www.21cnjy.com )比较单调，后者更赏心悦目，浏览后使人耳目一新。 观看教师展示的网站，感知网站的整体风格。倾听、了解成功的网站是技术与艺术的完美结合，跟随老师的引导，进入本课的学习。明确学习任务。 通过对美化前后的网页进行对比，吸引学生眼球。同时设置体验型情境，让学生观察，感受网站界面设计的成功，激发学生学习的欲望。
二、交流讨论，理解新知（6分钟） 1．引言：网站的整体风格，可以通过色彩、版 ( http: / / www.21cnjy.com )式、布局等来表现。2．布置任务：选择一两个设计风格优秀的网站，组内交流讨论：一个优秀的网站应该具备哪些条件。（色彩合理、主题鲜明、版面协调……）（来回巡视）3.请各小组代表汇报自己组内探究、交流、讨论后的想法并加以展示。4．点评、小结：点评学生代表汇报情况，注重发现闪光点，鼓励多探究才有新发现，纠正汇报不完整的地方，及时补缺补漏。加强学习方法的指导，引导学生从色彩搭配、版面编排、布局协调等方面来汇报。 了解网站风格从哪几个方面来体现。学会说出自己对所浏览网站的感受，大致说出网站的整体风格。 倾听小组代表发言，纠正自己错误的见解。 倾听总结，懂得如何从三个方面来评价网站的风格，了解色彩所代表的网站风格。 通过真实的因特网环境，以任 ( http: / / www.21cnjy.com )务驱动为模式，初步让学生学会鉴赏、评价网站风格，重点从色彩、版式、布局等方面对实例网站进行评价，初步形成对网站风格的感性认识。
三、任务引领，自主探究（20分钟） 1．导语：美化网页有许多方法，如常见的有插入与网页文本内容相关的图片，设置合适的网页背景等。2．学习插入图片，设置图片属性，编辑图 ( http: / / www.21cnjy.com )片。(1)引言：我们在Word软件中学习了插入、编辑图片的操作方法，那么如何在网页中插入、编辑图片呢？(2)出示任务：①阅读教材第44～47页的内容，然后打开尚未美化过的“崇文重教”网页(cwzj. htm)，插入“gdcj. jpg”图片，设置图片属性为“右对齐”。②讨论：利用图片工具栏可以做些什么？怎样调整图片的大小？(3)巡视全班，个别辅导，让学生尝试插入图片并对图片属性进行必要的设置，引导学生应用以往在Word文档中插入图片的经验进行迁移学习，必要时进行集体点评。(4)请能顺利完成本任务的同学演示并讲解，其他同学补充和评价。(5)小结。通过演示，强调插入图片的操作要领有两种方法。方法一：①执行“插入”一“图片”一 ( http: / / www.21cnjy.com )“来自文件”命令。②选择图片素材存放的路径，如“images”。 ③选择要插入的图片“gdcj. jpg”。4.单击“插入”按钮。方法二：单击“常用工具栏”的“插入文件中的图片”图标。 在设置图片属性的对话框中，可以设置图片的环绕样式、对齐方式，指定图片大小。(6)如何设置图片的替代文本呢？请 ( http: / / www.21cnjy.com )一位学生演示，并通过多媒体广播系统进行转播。(7)引言：替代文本的作用是，在预览网页时，当把鼠标移动到图片上就会显示提示文本。那么如何进一步编辑图片呢，这就要用到图片工具栏了。3．学习编辑图片。(1)介绍图片工具栏常用工 ( http: / / www.21cnjy.com )具的用法。(2)让学生尝试使用工具栏编辑图片。(3)小结：使用图片工具栏，可以编辑图片，调整图片的对比度、亮度，裁剪图片的大小等等。4．学习设置网页背景。(1)引言：在学习Word ( http: / / www.21cnjy.com )文字处理软件时，我们学习了使用背景颜色来调整“纸张”的颜色，同样在FrontPage软件中也有此功能，可以给网页使用背景颜色。(2)出示任务：阅读教材第48页的内容，并尝试独立完成在“崇文重教”网页中设置网页的背景图片。(3)巡视全班，个别辅导，并及时进行评价激励。(4)成果展示：请能顺利完成本任务的同学演示并讲解自己设置背景颜色或图片的方法，其他同学补充和评价。(5)小结：网页中可以使用图片做背景，但图片一定要与插图以及文字的颜色相协调，才能达到美观的效果，如果色差太大会使网页失去美感。 回顾旧知，思考、讨论、交流Word软件中插入图片的方法。上机操作实践，完成任务。学习有困难时，及时寻求小组成员或者老师的帮助，聆听点评。倾听小结，了解插入图片的两种方法。观看学生代表的演示，了解图片属性对话框，体会替代文本的作用。观看老师的演示，了解图片工具栏的用法，学会编辑图片。阅读教材，完成任务。明确设置网页背景的步骤。 唤起学生在Word软件学习阶段有关插入图片的记忆。提出问题，让学生边操作边思考，能促使学生留心重点内容，多花时间去探究，以突破重难点。通过自学课本、小组合作寻求解决问题的策略，在与他人的交流、讨论中进行知识的互补，获得成功的喜悦，同时培养合作意识。通过学生的演示、教师的强调，化解知识的难点。通过教师的演示以及自己的练习，掌握编辑图片的方法。在原有知识的基础上让学生独立完成任务，通过两次独立操作提升学生对知识的掌握程度。
四、练习巩固，应用迁移（6分钟） 1．出示任务：请学生自主操作完成教材创新活动中的任务。（提供“自动缩略图”相关知识性材料供学生学习选用）2．巡视学生，个别辅导，适时点拨，及时点评学生探究活动过程。3．展示小组完成的创新活动成果，请各小组学生代表边演示边讲解。4．听取学生代表发言并引导全班同学一起评价，对相关拓展知识进行归纳，如“自动缩略图”按钮的作用，鼓励学生在网页中进行应用。5．小结：使用“自动缩略图”按钮对图片进行处理，可以减小网页中图片文件的大小，加快网页的下载速度。 小组合作，上机实践，完成教师布置的任务，进一步熟练插入图片文件、设置网页背景等知识技能，探究“自动缩略图”按钮的使用方法及作用。观察同学的作品，进行点评，并对照自己的作品进行比较分析。 倾听小结。 巩固操作，形成技能，用学到的知识解决问题。创设新的任务情境，能够加深学生对新知识的理解，并在此基础上进行适当的拓展延伸。
五、归纳小结，梳理知识（4分钟） 1．设问：同学们，通过这 ( http: / / www.21cnjy.com )节课的学习，我们学到了哪些新知识？ 2．引导学生回顾归纳小结这节课的主要知识点。(1)网站的整体风格是网页给浏览者的整体感受。(2)美化网页常见的方法有：插入与网页文本内容相关的图片并进行修饰；设置合适的网页背景等。(3)“自动缩略图”按钮可以减小图片文件的大小，加快网页的下载速度。3．让学生填写教材的活动评价表。4．小结：美化网页还有很多方法，比如还可加些动态文字、动画、音乐、视频等，希望同学们在制作网页过程中注意积累方法，不断提高网页的制作水平，下节课我们将继续学习网页制作。 回顾这节课学习的知识技能，与老师一起小结归纳，梳理知识。填写活动评价表。倾听小结。 及时的总结，有助于学生将零散的知识系统化，加深对所学知识的了解，进一步培养学生学会交流、总结学习过程的能力，有效提高学生的语言表达能力。
五、板书设计
六、教学反思