网页设计与制作 计算机.docVIP

PAGE6

PAGE1

《美丽风光网页》

《美丽风光网页》教案

科目

《网页设计与制作案例教程》

授课

班级

计算机应用班

教学

手段

多媒体

辅助教学

教师

崔昊昱

课题

《案例9美丽风光网页》

课时

1课时

课型

一体化

教

学

目

标

知识目标：掌握块元素和行内元素各自的特点；掌握span标记的应用；掌握块元素间垂直和水平外边距的计算方式；掌握float属性的使用。

能力目标：能够理解并列举常见的块元素和行内元素；能够利用span标记设置一行内容中某部分内容的单独样式；能够熟练计算网页中块元素间的外边距；能够利用浮动属性实现网页中块元素水平排列。

情感目标：通过美丽风光网页感受祖国河山增强学生民族自豪感；在编辑代码中培养认真细致、精益求精的工匠精神。

课

前

准

备

依据教材并在网络平台上精选素材、录入微课、

多媒体课件

教学

重点

元素的类型

块元素的外边距

元素的浮动

解决方法：提出问题和简单案例演示

教学

难点

利用浮动属性布局网页元素

解决方法：观看微课自主练习

教材与

学情分析

“网页设计与制作”是我校计算机专业一门重要的专业课，本节课选材于中国工信出版集团人民邮电出版社《网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）》中模块二【案例9】。该书设置“以学生为主体，以能力为本位，以就业为导向”。教材内容以任务驱动，注重核心技能的训练。

通过该课程的学习，使学生熟练使用HTML5+CSS3+JavaScript技术实现网站结构设计、页面样式美化和布局、网站动态效果添加等，从而能独立设计并开发小型静态网站，在网站开发中主要培养学生的工匠精神和团队精神、标准意识和创新思维。

因材施教是教学原则，本授课计划的教学对象是中职二年级的学生，学生第一次接触HTML5，专业基础薄弱，充分调动学生学习兴趣，在充分学习教材内容的基础上，对部分学习态度浓厚、想深入学习的同学可以加大项目作业的力度，充分利用网络资源等进行学习深入，拓展知识的深度和广度，加大对学生动手操作能力的培养。对基础稍差的同学要求只要掌握教材内容即可。通过一学期的学习，争取使所有同学都能做出自己的网站作品。因此，本节课从简单案例开始，来增加学生的成就感，让学生成为学习的主体。为此适合于“做中学，学中做”的教学模式。

教学设计

教法

教学中我采用情景教学法引入教学，任务驱动法实施教学，演示教学法突破重难点，让学生通过自主探究培养创新能力。

学法

以“学生为主”，巧妙设计，让学生通过自主探究、微课学习、小组合作等方式自主学习，很好的实现了知识的传递和融合。

教学

环节

教学活动

学生活动

设计意图

趣

味

导

入

（3分钟）

【欣赏作品趣味导入】设置情景：展示几组趣味的网页图像，供学生欣赏。

学生观看视频，并思考这些网页的共同点?

通过作品欣赏，抓住学生的注意力，激发学生的学习兴趣。

探

索

新

知

（10分钟）

【层层设问情景导向】以情景为导向，引发学生思考，讲解块元素与行内元素的特点及应用、块元素的外边距、元素的浮动属性与清除浮动等相关知识点。

学生通过观察，了解块元素与行内元素、块元素的外边距、元素的浮动属性与清除浮动等。

通过展示样例，明确本节课学习重点

自

主

练

习

（10分钟）

【基础任务】根据以上分析，观看微课尝试制作书中[案例9]美丽风光网页。教师巡回指导学生。

学生观看微课自主练习【案例9】

激发学生的自我探究欲，通过自主练习培养学生自学的能力，帮助学生循序渐进地完成整个作品。

创

意

拓

展

（12分钟）

【创意任务】利用素材制作自己的相册网页。

【展示点评】在自主探究之后进行小组合作，然后小组内选出最佳作品展示点评，鼓励大家互相帮助，互相合作，共同完成任务。

小组合作制作个性化的作品，并在同学们间充分交流、合作、分享。

创意任务是基本任务的延伸，采用任务驱动方式，让学生进入网页制作自由应用阶段，从而培养学生自我创新能力。

评

价

总

结

（5分钟）

【小结】总结本课的知识点。

【作业】布置作业：完成课本课后习题与实训；扫码观看案例10中的微课，学习元素的几种定位方式及具体定位方法。

回忆本节课所学知识。欣赏作品并尝试课下完成作业。

课后作业让学生对所学知识点进行巩固练习，培养学生自主学习能力。

教

学

反

思

本节课通过案例教学法，让学生在实际操作中掌握了网页设计与制作的相关知识和技能。在教学过程中，学生对块元素和行内元素的特点、外边距的计算以及浮动属性的使用有了更深入的理解，学生的动手能力和团队合作意识也得到了很好的锻炼。

然而，在教学过程中也发现了一些问题。部分学生在理解浮动属性对页面布局的影响时存在困难。此外，由于学生的基础水平存在差异，部分学生