HTML5CSS3Web前端设计基础教程（吴丰 第3版）教案全套-教学设计 任务1 Web前端工程师职业前景与开发流程-任务22 Web App页面的设计与实现

课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解Web前端工程师的行业前景；认识网页构成的基本元素，掌握相关专业术语；掌握“表现与结构相分离”的重要理念；熟悉Web前端开发的工作流程；了解常用的开发软件，能够简单创建一个HTML5页面。技能目标通过课堂教学，初步掌握创建简单HTML5页面的方法。素质目标引导学生既要学习专业技能知识，也要逐步树立职业理想；坚持德育为先，培养良好的职业道德（责任感）和个人品德；教学重点Web前端开发的相关专业术语与工作流程教学难点表现与结构相分离学情分析初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产生倦怠。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)Web前端行企业调研（查找网络资料）、预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]通过让同学分享Web前端企业调研结果，引入Web前端工程师的行业前景，激发学生学习兴趣。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[40分钟]1.Web前端开发的必要认知与发展前景2.认识网页的构成元素3.了解专业术语4.认识Web标准5.Web前端开发基本流程6.常用开发软件介绍理论讲授知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[35分钟]1.围绕“表现和结构相分离”等内容，通过互联网查找资料，进一步强化学生对课堂知识的理解。2.使用记事本创建HTML5页面。3.查找有关“网页设计”“网页UI”的资料，欣赏优秀的网页设计作品。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展为巩固课堂学习效果，有计划、有重点的安排拓展知识学习与训练，培养学生学习习惯，进一步提升专业技能和综合素养。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握Dreamweaver的基本使用方法；掌握站点的相关概念及其基本操作；掌握HBuilderX的基本使用方法；技能目标掌握Dreamweaver和HBuilderX的基本使用方法。素质目标培养学生的实践思维，提升勇于探索实践的能力；培养学生积极研究探索的科学习惯；教学重点工具栏、CSS面板、属性检查器教学难点创建与管理站点学情分析初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产生倦怠。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]回顾上节课基本知识，引出“工欲善其事，必先利其器”，引导学生树立任何代码编辑器仅是解决问题的工具，Web前端的学习重点应放在代码编写逻辑的学习。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[40分钟]1.Dreamweaver界面介绍2.DW常用工具栏和面板3.创建和管理站点4.各类面板的使用方法5.HbuilderX基本操作6.标签、元素、属性和值案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[35分钟]1.学生熟悉Dreamweaver环境，上机演练创建与管理站点。2.安装与启动HBuilderX，创建并保存一个项目，熟悉环境。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展为巩固课堂学习效果，有计划、有重点的安排拓展知识学习与训练，培养学生学习习惯，进一步提升专业技能和综合素养。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握HTML5文档结构，认识HTML5中常见的标签含义；技能目标能够创建简单的HTML5网页，并实现简单的控制；素质目标培养学生的实践思维，提升勇于探索实践的能力；培养学生积极研究探索的科学习惯；教学重点HTML5的文档结构和编写规范教学难点HTML5常见元素学情分析初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产生倦怠。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，通过展示一些有趣的HTML5应用实例，如互动游戏、动画效果等，激发学生的学习兴趣。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[40分钟]1.DOCTYPE文档类型与基本结构元素2.HTML5常见元素（标题、段落、img、a、列表、div、span、table、视频音频）案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[35分钟]1.使用Dreamweaver或HbuilderX，上机演练各个示例。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展推荐学生阅读一些HTML5相关的书籍、教程和文章，以拓宽知识面和了解最新的HTML5应用趋势。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解CSS的基本概念；掌握CSS的基本语法格式及其引入方法；掌握CSS盒模型的相关概念；技能目标能够使用CSS的基本知识完成简单页面的排版素质目标提升学生规矩意识，强化学生诚信精神；引导学生从“细”“小”做起，重点培养学生新时代工匠精神和爱岗敬业的操守精神。教学重点CSS的引入方式教学难点盒模型学情分析学生能够使用HTML标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.展示淘宝首页和小红书首页。介绍CSS的作用，给网页“化妆”，重申“表现与结构相分离”的理念，引出CSS基本知识。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.通过案例引入CSS的基本语法与注释。2.CSS引入方式（1）内联样式（2）内部样式（3）外部样式3.分析盒模型的组成并通过案例让学生熟悉盒模型。案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.使用Dreamweaver上机演练各个示例。体会CSS的作用，了解它是如何与HTML协同工作的。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展分享CSS的技术平台，让同学们关注并观看CSS优秀的作品。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS初级选择器的使用方法技能目标能够使用CSS的基本知识完成简单页面的排版素质目标提升学生规矩意识，强化学生诚信精神；引导学生从“细”“小”做起，重点培养学生新时代工匠精神和爱岗敬业的操守精神。教学重点选择器的使用方法教学难点ID选择器、类选择器学情分析学生能够使用HTML标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.通过案例中字体样式不生效的结果，引入CSS的选择器优先级知识。2.引导学生学习CSS选择器的最佳方式，不单要理解CSS选择器的含义，还要不断的实践测试代码。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]以多个案例形式，讲解各类选择器对页面元素的影响。1.通配符选择器需要特别提醒：在大型复杂网页应用中，通配符选择器会导致性能问题，应谨慎使用，尽量限制其使用范围。2.类型选择器3.类选择器4.ID选择器5.群组选择器案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练各个示例，理解不同类型的选择器的功能用法。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS高级选择器的使用方法技能目标能够使用CSS的基本知识完成简单页面的排版素质目标提升学生规矩意识，强化学生诚信精神；引导学生从“细”“小”做起，重点培养学生新时代工匠精神和爱岗敬业的操守精神。教学重点选择器的使用方法教学难点子元素选择器、相邻兄弟选择器学情分析学生能够使用HTML标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，通过复杂案例引出CSS中有高级内容。CSS中有些高级选择器使用起来会让页面的实现更方便。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]通过案例的方式展示下面的内容，总结多个选择器使用的场景和语法。1.子元素选择器2.相邻兄弟选择器3.属性选择器4.页面简易美化案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练各个示例。发布课堂任务：创建一个简单的网页，使用这些选择器为元素设置样式。2.开展课堂讨论，如何有效地使用这些选择器来提高CSS代码的可维护性和性能。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握有关字体和文本的CSS知识技能目标能够实现文字版面的基本排版素质目标进一步培养学生精雕细琢、精益求精的职业素养；引导学生体会理论知识转变为直接生产力的成就感，使学生领略专业魅力。教学重点字体属性与文本属性教学难点使用@font-face实现在线字体学情分析学生能够使用HTML标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.观察校园网网页，观察页面字体种类和特征。任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，引导学生树立实践是学习CSS选择器的最佳方式，不单要理解CSS选择器的含义，还要不断的实践测试代码。2.展示同学们课前预习成果，引导学生总结网页字体除了颜色和大小属性外，还有样式、粗细、外形等属性，文本还有首行缩进、行高、阴影等属性。3.明确本次课程的学习目标为掌握字体和文本属性设置，预期结果为会灵活使用这些属性完成网页字体和文本设置，让学生对学习路径有一个清晰的认识。1.简要总结上次课内容和常见问题；2.组织学生展示预习成果，帮助学生总结字体和文本常见属性。1.在教师的引导下展示预习成果；2.总结字体和文本常见属性，明确本次课任务。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.DW中插入、替换和查找介绍网页文本输入过程中常用的插入、替换和查找操作，帮助学生提升网页文本编辑熟练度。2.CSS字体属性将学生总结的字体属性归纳后，引入对应的具体属性名称，并举例讲解具体属性值。3.CSS文本属性将学生总结的文本属性归纳后，引入对应的具体属性名称，并举例讲解具体属性值。4.WebFont与@font-face根据实际工作，介绍特殊字体美化用到的属性。1.案例教学展示基本知识；2.对于难点WebFont与@font-face，先展示使用效果，引起学生兴趣，然后介绍具体设置方式，并及时总结流程。观看教师演示，简单实践操作。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练文字和文本相关案例。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。1.组织分组；2.鼓励学生积极讨论并提供实践指导；3.组织学生换组点评，总结实现流程。1.分组讨论后实践操作；2.相互点评并及时总结。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识：超级链接。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.推荐学生阅读一些HTML5相关的书籍、教程和文章，以拓宽知识面和了解最新的HTML5应用趋势。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS样式中有关伪类的知识技能目标能够使用伪类实现简易动态效果素质目标进一步培养学生精雕细琢、精益求精的职业素养；引导学生体会理论知识转变为直接生产力的成就感，使学生领略专业魅力。教学重点文本链接、邮件链接、锚链接教学难点CSS伪类学情分析学生能够使用HTML标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.观察淘宝网，分析超级链接在点击前，鼠标经过，点击后有什么变化。任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，演示常见问题解决方法。2.头脑风暴提问学生预习成果。3.明确课程的学习目标使用CSS控制超链接和预期成果制作《页面常用网址导航》，让学生对学习路径有一个清晰的认识。1.简要总结上次课内容和常见问题；2.头脑风暴提问学生，帮助学生观察超链接在不同的状态下的变化。1.反馈预习结果；2.明确本次课学习任务；3.知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.文本链接演示使用DW可视化快速创建文本链接；2.邮件链接演示使用DW可视化快速创建邮件链接；3.锚链接演示使用DW可视化快速创建锚链接；3.CSS伪类讲解常见伪类名称和使用方法，以及注意事项。1.通过DW演示文本链接、邮件链接、锚链接的可视化创建；2.展示网页中，鼠标动作不同时，文本链接的不同效果对应的伪类名。称；3.总结伪类使用注意事项1.观察教师操作，熟悉DW可视化操作超链接，实现简单模仿；2.理解动作和伪类之间的对应关系；3.掌握伪类使用场景和注意事项。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练《页面常用网址导航》示例，理解伪类的使用场景和具体用法。2.鼓励学生在上机演练时学思结合，相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。1.观察学生整体进度，总结学生遇到的具体问题；2.实践指导结合课本代码实践训练；智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点：伪类的使用方法，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识：使用CSS控制图像。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.推荐学生阅读一些HTML5相关的书籍、教程和文章，以拓宽知识面和了解最新的HTML5应用趋势。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称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创建一个简单的个人博客页面。帮助自己巩固基本的网页布局和样式设计。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数4授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标理解浮动的基本概念，掌握创建浮动和清除浮动的方法；重点掌握相对定位和绝对定位的使用方法；技能目标掌握纵向导航和横向导航的实现方法掌握图文混合列表的实现方法素质目标培养学生的相互沟通能力和团队协作精神；培养学生沉稳的学习习惯，进一步培养在工作中执著钻研、精益求精的职业精神；教学重点CSS定位教学难点浮动学情分析学生能够熟练搭建HTML网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[10分钟]1.回顾上节课基本知识。访问学校首页，引导学生观察动态飘窗效果，引入浮动和定位的知识。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[60分钟]1.浮动通过案例讲解浮动的工作原理和现象。2.清除浮动的3种方法介绍Clear属性和伪元素清除浮动的概念，以及如何使用它们来避免浮动元素对后续元素的影响。3.CSS定位（1）静态定位和固定定位相对定位和绝对定位（3）相对于某一容器的绝对定位案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[90分钟]1.根据教材内容上机演练各个示例。2.课堂提出一个具体的布局问题，引导学生思考如何使用浮动来解决问题，并分享他们的解决方案。3.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。4.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[20分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.创建一个在线简历页面，包含个人资料、教育背景等，并使用CSS进行美化。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标认知列表元素；技能目标掌握纵向导航和横向导航的实现方法掌握图文混合列表的实现方法素质目标培养学生的相互沟通能力和团队协作精神；培养学生沉稳的学习习惯，进一步培养在工作中执著钻研、精益求精的职业精神；教学重点图文信息列表教学难点纵向、横向导航学情分析学生能够熟练搭建HTML网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.在互联网上查找5种布局样式具有明显差异的导航。任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识。组织分组讨论导航在网页设计中的作用，以及它对用户体验的影响。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.以案例形式讲解有关列表的CSS样式内容2.提出一个具体的导航设计问题，让学生思考如何使用CSS来解决（纵向导航）。3.简易横向导航4.复杂横向导航（含Logo与二级菜单）5.图文信息列表案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练各个示例。让学生跟随老师的步骤一起创建导航菜单，并及时提问和解答。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.让学生尝试在不同设备和屏幕尺寸下调整导航样式，以实现响应式设计。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称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相关的书籍、教程和文章，以拓宽知识面和了解最新的HTML5应用趋势。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解表格的基本知识技能目标掌握细线表格、隔行换色表格的实现方法素质目标培养学生坚持问题导向，科学分析问题、深入研究问题的能力；增强问题意识，既要见思想，更要见行动，从而指导自己的学习和工作。教学重点细线表格教学难点隔行换色表格学情分析学生能够熟练搭建HTML网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.收集网页中不同样式的表格任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，强调表单整体性，集中讲解作业批改中的共性问题。2.结合Office表格的创建，综合学生收集的表格样式，引导学生思考在网页上如何创建表格，美化表格。3.明确课程的学习目标和预期成果会在网页中创建表格，美化表格，让学生对学习路径有一个清晰的认识。1.知识回顾，强调共性问题；2.结合office中的表格，引入网页中表格的创建和美化后的最终效果。1.关注表单中的共性问题；2.反馈预习时收集的网页表格；智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]表格的基本概念及其简易操作介绍网页中表格的组成部分，引入表格中的常用标签，演示基本表格的创建及单元格拆分、合并。2.细线表格 将创建的基本表格和学生收集到的表格进行对比，引导学生发现表格边框双线问题，进而提出表格细线化，并具体演示如何实现。3.隔行换色表格教师演示两种方法进行隔行换色：标签选择器和伪类选择器1.演示表格的创建和拆分、合并2.引导学生思考、实现细线表格和隔行换色1.观看教师演示；2.思考、总结表格美化流程智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练表格案例，掌握常用表格美化流程。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。1.鼓励学生积极讨论并提供实践指导；2.组织学生开展随机点评，总结实现流程。1.分组讨论后实践操作;2.自我点评并及时总结。智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.推荐学生阅读一些HTML5相关的书籍、教程和文章，以拓宽知识面和了解最新的HTML5应用趋势。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数3授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSSSprite技术的原理技能目标掌握CSSSprite技术的使用方法，能在实际项目中根据需求选择合适的优化方案素质目标进一步提升学生规范编写代码和独立分析问题的能力培养学生自主学习，探究问题的思维认知教学重点CSSSprite技术教学难点CSSSprite技术学情分析对Web前端有一定学习基础，但遇到问题，自身解决问题的能力不足。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[10分钟]1.回顾上节课基本知识，以体验访问图片类网站的形式，引入站点是如何优化网页HTTP请求数量的。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[45分钟]1.通过展示一个网页，让学生观察网页中图片的加载过程，引导学生思考如何优化网页中的图片加载速度。2.讲解CSSSprites技术介绍CSSSprites技术的概念、作用和实现原理，让学生了解CSSSprites技术的优势和应用场景3.制作和使用CSSSprites图片讲解如何使用Photoshop等工具制作CSSSprites图片，并使用CSS的背景定位属性显示所需部分。案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[55分钟]1.分组进行练习，尝试使用CSSSprites技术优化一个网页中的图片。在此过程中，教师巡回指导，解答学生遇到的问题2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[25分钟]1.观察学生在课堂上的表现，了解他们对CSSSprites技术的兴趣和掌握程度。2.课堂小结，强调CSSSprites技术在网页优化中的重要性，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展使用本节所掌握知识，仿照“太平洋电脑网”部分板块内容，使用CSSSprites技术，完成页面布局，做到温故而知新课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS3有关渐变和动画的知识技能目标掌握CSS3有关渐变的实现方法；掌握CSS3动画设计的方法；素质目标进一步提升学生规范编写代码和独立分析问题的能力培养学生自主学习，探究问题的思维认知教学重点CSS3（transform属性和transition属性）教学难点CSS3选项卡学情分析学生能够熟练搭建HTML网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，通过展示一些网页中运用了transform属性和transition属性的实例，让学生观察并思考这些效果是如何实现的。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.讲解CSS3渐变和CSS3动画（transform属性、transition属性），通过示例演示如何使用这些函数对元素进行旋转、缩放、倾斜和移动。2.CSS3动画的应用——“幽灵按钮”3.CSS3选项卡案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.学生分组进行练习，尝试使用transform属性、transition属性等内容，对一个元素进行旋转、缩放、倾斜、移动和平滑过渡效果。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.深入阅读你所学习的编程语言或框架的官方文档，以获得最准确和权威的信息。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数1授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解HTML5绘图技能目标能够使用Canvas绘制简单图形；素质目标进一步提升学生规范编写代码和独立分析问题的能力培养学生自主学习，探究问题的思维认知教学重点HTML5Canvas基本概念教学难点Canvas绘制圆形学情分析学生能够熟练搭建HTML网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1.回顾上节课基本知识，展示一些使用Canvas制作的网页实例，让学生观察并思考这些效果是如何实现的。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[35分钟]1.讲解HTML5Canvas的概念和作用介绍HTML5Canvas的概念、作用和发展历程，让学生了解Canvas在网页设计和制作中的重要性。2.创建画布并绘制简单图形3.讲解CanvasAPI的基本用法：Canvas坐标、线条与圆案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[40分钟]1.根据教材内容上机演练各个示例，尝试使用CanvasAPI绘制一个简单的图形或图像。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师巡回指导，解答学生遇到的问题。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[10分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.深入阅读你所学习的编程语言或框架的官方文档，以获得最准确和权威的信息。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数8授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握Photoshop切片并输出的操作方法巩固导航和图文列表的实现方法技能目标掌握从效果图到Web页面的整个工作过程素质目标引导学生树立崇高的理想信念，促使学生不断提升思维能力引导学生打开思路，践行创新精神和创新思维方式教学重点页面布局规划分析教学难点页面的实现学情分析学生已经能够使用HTML+CSS搭建基本页面，但缺乏对岗位工作流程的认知。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.在互联网上，查找界面设计类网站，阅读1篇网页设计类文章，并下载10张网页设计优秀作品。（推荐网站：优设、花瓣、UI中国等）2.预习微课视频3.发布讨论话题任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[20分钟]1.回顾上节课基本知识。2.挑选1-2位同学，上台分享课前优秀网页设计作品。3.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[150分钟]1.引入企业案例，对照即将完成制作的效果图，阐述背景和意义。按照网页开发流程，以边讲边练的形式，讲解Photoshop在Web前端的常见操作（1）创建空白文档（2）标尺与参考线（3）吸管工具及其简单操作（4）切片输出2.课堂提问：Web前端开发中，图片常用的格式有哪些？3.以UI设计师角色，对拟进行实现的效果图进行页面布局规划分析，重点引导学生对项目实践进行整体构思。（1）分析效果图版面布局（2）首页的实现（3）列表页的实现（4）内容页的实现案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[170分钟]1.认真聆听教师的演示操作讲解，上机操作Photoshop和DW，进行实践演练。对于出现的问题，首先复看微课视频，自行动脑思考，再进行同学间帮助，解决不了的，由教师进行指导答疑。2.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[20分钟]1.回顾本节知识点，对本章节的重点难点进行归纳和总结。2.点评同学在自主演练过程中大家的表现情况，对于出现较多的共性问题，再次统一讲解和演示。3.强调“讲诚信，强规范，保质量”的核心职业素养。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.布置拓展任务，完成某站点首页设计与制作。2.线上线下完成学生重难点巩固与答疑。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称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.关注行业新闻和技术博客，了解响应式设计的最新趋势和最佳实践。3.阅读W3C对HTML5和CSS3的官方文档，以了解最新的标准和特性。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数4授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解Bootstrap框架的基础概念；掌握Bootstrap框架中栅格系统的基础知识及其使用方法；掌握Bootstrap框架中表单、图片、导航栏等组件的使用方法；技能目标能够使用Bootstrap框架搭建简单页面。素质目标启发和培养学生合作共赢的职业精神；增强开源文化下的人文社会科学素养和社会责任感。教学重点Bootstrap框架基本知识教学难点Bootstrap导航栏学情分析学生已经能够使用HTML+CSS搭建基本页面，对于复杂页面布局和不同设备间的响应式设计缺乏知识储备。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.预习微课视频2.访问Bootstrap中文网站，查阅相关资料，了解Bootstrap基本知识。任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[10分钟]1.回顾上节课基本知识，由演示Bootstrap官方网站实例，引出使用Bootstrap框架的发展历程和特点，让学生对Bootstrap框架有一个整体认识。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[60分钟]1.讲解Bootstrap框架的基本概念、布局原理、响应式设计等理论知识，操作演示Bootstrap的环境配置。2.理论讲解与案例教学并行，讲解Bootstrap框架的栅格系统、表格、表单、图片和导航栏等原理，让学生掌握Bootstrap框架的布局方法。案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[90分钟]1.根据教材内容上机演练各个示例，提示学生遵循代码编写规范。2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。4.教师指派优秀学生作为课堂教学小助手，帮助同学解答疑难。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[20分钟]课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.访问Bootstrap中文网站，欣赏优秀的网页案例，并通过在浏览器中按下F12键进入开发者模式，观察页面结构与应用。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标能够使用Bootstrap框架搭建简单页面技能目标能够使用Bootstrap框架搭建简单页面素质目标启发和培养学生合作共赢的职业精神；增强开源文化下的人文社会科学素养和社会责任感。教学重点Bootstrap框架教学难点Bootstrap框架学情分析学生已经能够使用HTML+CSS搭建基本页面，对于复杂页面布局和不同设备间的响应式设计缺乏知识储备。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[5分钟]1