《Web前端开发》教案 第一周 HTML5和CSS3

《Web前端开发》课程第1周教案一、教学基本情况课程名称Web前端开发授课教师卞孝丽授课班级25级信息安全1-2班授课时数2*2学时授课地点第七实训室授课时间2025年10月9日1-2节、3-4节教学章节项目一任务1.1-1.4学情分析授课对象为大一信息安全技术应用专业的学生，对于新接触的课程充满了好奇，充满学习的激情，但普遍会存在注意力集中时间比较短，不喜欢满堂灌的学习方法，吸引学生注意力是非常重要的。因此，在课堂上一方面要严肃课堂纪律，另一方面要在课堂上增加与学生的互动次数。教学目标知识目标1.了解HTML5和CSS3的优势；2.掌握HTML5的基本语法；3.熟练掌握HTML5语义化标签。能力目标能运用HTML5的基本语法完成本次课的项目。素质目标培养Web前端开发人员的职业素养与工匠精神。教学重点HTML5的基本语法教学难点正确书写HTML5文档结构教学资源教材、案例、课件、电子书教学过程设计采用任务驱动法，融入课程思政，结合多种信息化手段，开展三阶段教学活动。1.课前导学：教师将课前讨论主体“你认为什么是响应式网页设计？”推送到学习平台，让学生展开讨论，并在讨论区留言评论。2.课中探究：(1)教师主导。从哪些方面来认识前端开发，揭开响应式网页设计的神秘面纱。（2）共同探讨。三栏布局页面和许愿墙项目的实现。（3）自主总结。内容总结，提升学生融会贯通能力。3.课后拓展：布置课后拓展任务，制定自己的职业规划，更要抓落实，目标具体化。二、教学实施过程一、课前教学环节教师活动学生活动设计意图课前准备1.发布资源。教师将PPT、素材、微课视频等教学资源上传到智慧职教MOOC学院上，并通知学生查看，并告知学生预习的结果作为考评依据。2.布置任务。给学生布置课前任务，对“你眼中的网页是怎么形成的？对Web前端开发了解多少？”进行评论发表至评论区。3.查看情况。查看学生反馈及测试情况，掌握学情，准备教学。对“你眼中的网页是怎么形成的？”发表评论，并将结果上传至评论区。1.激发学习热情，主观认为这是一门有意思的课程；2.培养学生的职业认知。二、课中（包括复习提问、导入新课、新课讲授、归纳总结、布置作业、确定预习内容等环节及各环节的时间分配）教学环节教师活动学生活动设计意图复习提问（5min）分析课前任务的完成情况，并进行总结和点评。分享“你眼中的网页设计”培养自主思考能力新课导入（10min）许愿墙案例：思考案例中使用的专业知识。通过案例展示提高学生对本节知识点的学习兴趣。新课讲授（63min）新课讲授（63min）（一）HTML5和CSS3的优势1.HTML5的优势2.CSS3的优势（二）HTML5的基本使用1.HTML5的基本语法2.HTML5常用的语义化标签3.HTML5语义化标签布局：（三）CSS的基本使用1.CSS的引入方式CSS的引入方式有3种，分别是行内式、内嵌式和嵌入式。行内式是通过标签的style属性来设置元素的样式。2.选择器3.盒子模型盒子模型就是把HTML页面中的元素视为一个矩形区域，即元素的盒子。盒子由margin（外边距）、border（边框）、padding（内边距）和content（内容）4部分组成：学生认真听讲，做好笔记，互动回答，并思考。同时完成课堂随堂检测，及时掌握自身学习状况。通过HTML5和CSS3的讲解让学生明白响应式网页是如何设计并实现的。引导学生努力学习技术，争做国家栋梁。归纳总结（10min）1.引导学生总结本次课知识要点，形成良好的学习习惯。2.发布随堂检测，检验学习效果。1.回顾本次课主要内容，做出思维导图；2.完成随堂检测，实现融会贯通，及时掌握自身的学习情况。1.引导学生进一步学习，便于学生理清思路，提升学生职业素养；2.让学生对比课前预习的结果，让学生总结提升，以便于下次提升。布置作业（1min）1.教学评价。课后对本次课学生的课堂表现情况进行评价。2.发布作业。教师发布课后作业，完成配套平台作业。1.完成配套平台的作业；2.预习下次课内容；3.下载资源并进行学习。1.引导学生进一步学习，提升学生职业素养；2.通过配套练习，巩固学生课堂所学内容。预习内容（1min）发布下次课资源及预习任务。学生记录预习作业。为下节课做好准备。三、课后教学