HTML5CSS3Web前端设计基础教程（第3版）教案-教学设计 任务9 使用CSS控制图像文本-2课时-课堂教学设计

课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握有关图像的CSS知识技能目标能够制作图文混排效果素质目标进一步培养学生精雕细琢、精益求精的职业素养；引导学生体会理论知识转变为直接生产力的成就感，使学生领略专业魅力。教学重点Background基本属性教学难点图文混排学情分析学生能够使用HTML标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.结合平时上网经历，思考网页中的图片和文字布局关系任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，通过教学平台的课前测试，检查学生上节课知识掌握情况并及时进行测试点评。2.通过提问抽查学生课前预习情况，通过引导学生关注图像和文字的位置关系，借助图片元素和背景图片的区别，引出背景图片的概念及常用属性。3.明确课程的学习目标：使用CSS控制图像文本，制作具体案例；让学生对学习路径有一个清晰的认识。1.发起课前测试；2.点评测试结果；3.抽查学生课前预习情况。1.参与课前测试；2.总结测试过程中出现的问题；3.反馈课前预习情况；智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.background属性结合背景图片的特性，通过具体案例展示背景图片的颜色、内容、大小、平铺、位置等属性的具体使用场景和方法，在此基础上，引出复合属性的使用规则。2.图文混排展示图文混排案例，讲解混排原则及具体方法，指出核心知识点：浮动1.案例展示具体属性使用方法；2.关注学生接受情况；3.及时沟通，解决学生理解误区；1.观察教师演示，实践帮助理解；2.及时回应教师，主动反馈疑惑点。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练背景图片和图文混排案例。2.鼓励学生在上机演练时多观察，多思考，相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。1.鼓励学生积极讨论并提供实践指导；2.通过教学平台随机抽查学生成果，总结常见问题。1.分组讨论后实践操作;2.相互点评并及时总结。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识：元素浮动与清除。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.使用HTML和CSS创建一个简单的个人博客页