HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务1-11 Web前端工程师职业前景与开发流程- 列表

课堂教学设计课程名称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、配套素材等环境资源多媒体教室教学目标知识目标了解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的基本使用方法；能够创建简单的HTML5网页，并实现简单的控制；素质目标培养学生的实践思维，提升勇于探索实践的能力；培养学生积极研究探索的科学习惯；教学重点工具栏、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中常见的标签含义；能力目标掌握Dreamweaver和HBuilderX的基本使用方法；能够创建简单的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.课堂提出一个具体的