网页设计与制作 计算机

PAGE6PAGE1《美丽风光网页》《美丽风光网页》教案科目《网页设计与制作案例教程》授课班级计算机应用班教学手段多媒体辅助教学教师崔昊昱课题《案例9美丽风光网页》课时1课时课型一体化教学目标知识目标：掌握块元素和行内元素各自的特点；掌握<span>标记的应用；掌握块元素间垂直和水平外边距的计算方式；掌握float属性的使用。能力目标：能够理解并列举常见的块元素和行内元素；能够利用<span>标记设置一行内容中某部分内容的单独样式；能够熟练计算网页中块元素间的外边距；能够利用浮动属性实现网页中块元素水平排列。情感目标：通过美丽风光网页感受祖国河山增强学生民族自豪感；在编辑代码中培养认真细致、精益求精的工匠精神。课前准备依据教材并在网络平台上精选素材、录入微课、多媒体课件教学重点元素的类型块元素的外边距元素的浮动解决方法：提出问题和简单案例演示教学难点利用浮动属性布局网页元素解决方法：观看微课自主练习教材与学情分析“网页设计与制作”是我校计算机专业一门重要的专业课，本节课选材于中国工信出版集团人民邮电出版社《网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）》中模块二【案例9】。该书设置“以学生为主体，以能力为本位，以就业为导向”。教材内容以任务驱动，注重核心技能的训练。通过该课程的学习，使学生熟练使用HTML5+CSS3+JavaScript技术实现网站结构设计、页面样式美化和布局、网站动态效果添加等，从而能独立设计并开发小型静态网站，在网站开发中主要培养学生的工匠精神和团队精神、标准意识和创新思维。因材施教是教学原则，本授课计划的教学对象是中职二年级的学生，学生第一次接触HTML5，专业基础薄弱，充分调动学生学习兴趣，在充分学习教材内容的基础上，对部分学习态度浓厚、想深入学习的同学可以加大项目作业的力度，充分利用网络资源等进行学习深入，拓展知识的深度和广度，加大对学生动手操作能力的培养。对基础稍差的同学要求只要掌握教材内容即可。通过一学期的学习，争取使所有同学都能做出自己的网站作品。因此，本节课从简单案例开始，来增加学生的成就感，让学生成为学习的主体。为此适合于“做中学，学中做”的教学模式。教学设计教法教学中我采用情景教学法引入教学，任务驱动法实施教学，演示教学法突破重难点，让学生通过自主探究培养创新能力。学法以“学生为主”，巧妙设计，让学生通过自主探究、微课学习、小组合作等方式自主学习，很好的实现了知识的传递和融合。教学环节教学活动学生活动设计意图趣味导入（3分钟）【欣赏作品趣味导入】设置情景：展示几组趣味的网页图像，供学生欣赏。学生观看视频，并思考这些网页的共同点?通过作品欣赏，抓住学生的注意力，激发学生的学习兴趣。探索新知（10分钟）【层层设问情景导向】以情景为导向，引发学生思考，讲解块元素与行内元素的特点及应用、块元素的外边距、元素的浮动属性与清除浮动等相关知识点。学生通过观察，了解块元素与行内元素、块元素的外边距、元素的浮动属性与清除浮动等。通过展示样例，明确本节课学习重点自主练习（10分钟）【基础任务】根据以上分析，观看微课尝试制作书中[案例9]美丽风光网页。教师巡回指导学生。学生观看微课自主练习【案例9】激发学生的自我探究欲，通过自主练习培养学生自学的能力，帮助学生循序渐进地完成整个作品。创意拓展（12分钟）【创意任务】利用素材制作自己的相册网页。【展示点评】在自主探究之后进行小组合作，然后小组内选出最佳作品展示点评，鼓励大家互相帮助，互相合作，共同完成任务。小组合作制作个性化的作品，并在同学们间充分交流、合作、分享。创意任务是基本任务的延伸，采用任务驱动方式，让学生进入网页制作自由应用阶段，从而培养学生自我创新能力。评价总结（5分钟）【小结】总结本课的知识点。【作业】布置作业：完成课本课后习题与实训；扫码观看案例10中的微课，学习元素的几种定位方式及具体定位方法。回忆本节课所学知识。欣赏作品并尝试课下完成作业。课后作业让学生对所学知识点进行巩固练习，培养学生自主学习能力。教学反思本节课通过案例教学法，让学生在实际操作中掌握了网页设计与制作的相关知识和技能。在教学过程中，学生对块元素和行内元素的特点、外边距的计算以及浮动属性的使用有了更深入的理解，学生的动手能力和团队合作意识也得到了很好的锻炼。然而，在教学过程中也发现了一些问题。部分学生在理解浮动属性对页面布局的影响时存在困难。此外，由于学生的基础