HTML5CSS3Web前端设计基础教程（第3版）教案-教学设计 任务12 表单元素及其控制-2课时-课堂教学设计

课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解表单的基本概念；掌握常用表单的使用方法；技能目标掌握CSS控制表单外观的处理思路素质目标培养学生坚持问题导向，科学分析问题、深入研究问题的能力；增强问题意识，既要见思想，更要见行动，从而指导自己的学习和工作。教学重点常见表单对象（文本字段、复选框、复选按钮、下拉列表、自动验证等）教学难点CSS3按钮、开源样式库按钮学情分析学生能够熟练搭建HTML网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.在智慧校园页面找出登录页和个人信息页中的表单个数及表单对象有哪些？任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，引导学生树立实践是学习CSS布局与优化的关键。2.利用教学平台随机抽查学生预习情况，鼓励学生提出感兴趣的知识点。3.结合学生反馈，明确课程的学习目标：掌握常用表单的使用方法。让学生对学习路径有一个清晰的认识。1.整体回顾上节课知识点；2.抽查学生预习情况，引导学生提出表单对象是具体使用和设置；1.反馈预习情况；2.明确学习任务；智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.表单的基本知识2.常见的表单对象（1）文本字段（2）复选框与复选框组（3）单选按钮与单选按钮组（4）“提交”按钮（5）日期、颜色、滑块等（6）下拉菜单（7）跳转菜单（8）自动验证3.CSS控制表单（1）搜索栏（2）登录页（3）传统按钮、CSS3按钮与开源样式库按钮1.教师演示文本字段、复选框（组）、单选按钮（组）、的具体使用和注意事项；2.鼓励学生自己探索其他表单对象的使用场景和方法；3.引导学生掌握CSS设置表单的思路和方法；1.观察教师演示案例；2.主动探索教师预留表单对象的使用场景和方法；3.学习CSS设置表单的思路和方法；智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练各个示例，掌握CSS美化表单对象的思路，了解实际开发过程中开源样式库按钮。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。1.鼓励学生积极讨论并提供实践指导；2.组织学生开展小组内点评，总结实现流程。1.分组讨论后实践操作;2.相互点评并及时总结。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.推荐学生阅读一些HTML5相关的书籍、教程