工学一体化课程教学课页NO5
课程
学习任务
项目五:利用盒子模型布局网页
使用学材
任课教师
班级
所属专业
实施地点
实施日期
总课时
周课时
学材处理
采用一体化教学模式,以学生为主体,围绕课程标准、以典型工作任务展开,知识点够用、适用为原则,并配合相关教辅学习资料,同时根据学生特点自行设计的课后补充任务进行强化实践用。在辅助知识和技能点学习时加入一些思政元素(安全、心理健康教育等内容在网页内容中)。
任务分析
明确任务要求,查阅相关教辅学习资料,学习并掌握盒子相关知识和技能点,确定任务完成流程及技术规范;在规定时间内完成网页框架搭建,利用盒子模型进行CSS网页布局,盒子模型和元素的浮动与定位等;完成后进行相关调试检查,完成“西式甜品网”首页面的制作。
盒子模型是CSS网页布局的基础,只有掌握了盒子模型的各种规律和特征,才可以更好地控制网页中各个元素所呈现的效果。
教学目标
(包含知识与技能、过程与方法、情感态度与价值观等三个目标)
知识与技能:
1.掌握盒子的相关属性,能够制作常见的盒子模型效果。
2.掌握背景属性的设置方法,能够设置背景颜色和图像。
3.熟悉CSS控制列表样式的方式,能够运用背景图像定义列表项目符号。
过程与方法:
1.通过自主探究、小组讨论、与老师沟通等制作网页相关模块,培养学生协作解决问题的能力和主动性以及与人交流合作的能力;
2.通过教师对作品的点评与反馈,理解CSS定义要点,培养学生总结归纳能力。
情感态度与价值观:
1.学习资料中融入思政内容,注重加强对学生的世界观、人生观和价值观的教育。
2.在制作网页的过程中,培养学生探索、创新、实践、协作的职业素养。
3.通过学习编写代码,培养学生的信息素养和逻辑思维能力。
4.通过整个项目的完成,让学生感受HTML5与CSS3的神奇魅力,培养学生积极的学习态度。
教学重点
教学难点
重点及突出策略:
教学重点:认识盒子模型、div标记、盒子模型相关属性、背景属性、CSS3渐变属性。
措施:通过教师引导、学生上机操作加强学习和补充案例进行巩固。
难点及解决方法:
教学难点:盒子模型相关属性、背景属性、CSS3渐变属性。
措施:通过教师台上演示与讲解、学生上机操作加强学习和补充案例进行巩固。
教学方法
项目教学,小组讨论,一体化教学
教学条件
准备
计算机、Dreamweaver网页制作软件或VSCode软件、教学PPT
教学组织
(简述并备注每一流程所需课时)
一、明确任务
教师给定任务,引导学生思考,明确任务要求(0.5课时)
二、制定工作计划(4课时)
分析任务后确定以下工作计划
教师引导学习,学生所需知识点学习;
按任务要求,制定工作计划
三、计划实施(6课时)
能正确使用所需的知识:盒子模型相关属性、元素浮动与定位等,并按各模块效果图进行代码编写,并实现效果。
四、检查验收(0.5课时)
检查任务完成情况,正确填写检查报告
五、总结反思与评价(1课时)
以小组为单位,用演示文稿向全班展示、汇报制作成果;教师针对各组任务工作过程及汇报情况分别作评价;工作过程回顾及总结。
教学反思
教学实施(次页)
教学环节
教学内容
学生活动
教师活动
评价点
资源
用时
一明确工作任务
工作任务的阅读与分析;
明确工时、工作内容和人员分组;
1、接收任务并进行阅读分析;
2、根据任务要求进行人员分工;
3、与小组成员讨论网页中所需效果等要求;
1、发放任务并说明要求;
2、指导各小组进行任务分工;
3、察看、记录学生小组讨论情况及所存问题;
4、引导学生讨论所存实际问题(分工明确性)
5.检查学生填写工作页的正确性
1、是否明确任务、工时;
2、小组任务分工是否合理;
3、对任务理解、表达是否到位;
4、工作页完成是否到位;
5、小组积极性。
工作任务
0.5课时
二制定工作计划
盒子模型相关属性、元素浮动与定位的应用方法
设置页面CSS样式的方法、步骤及注意事项
选择合适的CSS选择器及CSS样式属性
工作计划的制定
查阅教辅学习盒子模型相关属性、元素浮动与定位的应用案例
分析效果图,划分模块结构
学习跟效果图各模块有关设计制作方法
讨论编写代码步骤
制定设计计划
1.巡查、记录学生查阅教辅自主学习情况,并给以必要的引导;
2.组织学生讨论,解决遇到的问题、确定编写代码的步骤
3.指导学生制定工作计