HTML5CSS3Web前端设计基础教程（第3版）教案-教学设计 任务18“响应式”页面的设计与实现-8课时-课堂教学设计

课堂教学设计课程名称Web前端开发/网页设计与制作授课时数8授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解响应式布局的相关知识掌握viewport的使用方法了解响应式页面开发框架的基本知识技能目标掌握mediaquery的基本语法和使用方法素质目标面对日益更新的Web前端技术知识，培养学生以与时俱进的眼光看待问题；培养学生温故知新和勇于探索实践的学习方法。教学重点viewport教学难点mediaquery学情分析学生已经能够使用HTML+CSS搭建基本页面，对于复杂页面布局和不同设备间的响应式设计缺乏知识储备。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[10分钟]1.回顾上节课基本知识，现场展示多设备（台式机、智能手机）访问同一响应式网站，引出CSS的媒体查询（MediaQueries），是实现响应式设计的关键技术。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[150分钟]1.了解“响应式Web设计”2.viewport网页可视区域3.媒体查询详解4.“响应式”页面的设计与实现（1）页面分析（2）确定基本页面5.详细实施过程6.“响应式”框架介绍案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[180分钟]1.根据教材内容上机演练各个示例，理解不同类型的选择器的功能用法。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[20分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.分析其他优秀的响应式网站，了解它们是如何设计和实现的，使用浏览器的开发者工具来检查这些网站的代码。2.关注行业新闻和技术博客，了解响应式设计的最新趋势