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

课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标参考教材4HTM1.5KSS3Web前前设计基础教程（第3版（微课版）,人民邮电出版社,2024年专业教学标准<Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/Aw.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标了解Web前端工程新的行业前景；认识网页构成的堪本元素，掌握相关专业术语；掌握“表现与结构相分离”的重要理念：熟悉Web前端开发的工作流程：了解常用的开发软件，能够简单创建一个IITM1.5页面。能力目标初步掌握创建简单HTM1.5页面的方法：具有“表现与结构相分离”的理念认知：素质目标引导学生既要学习专业技能知识，也要逐步树立职业理想；坚持诬育为先，培养良好的职业道德（货任感）和个人品德：教学重点Web前湍开发的相关专业术语与工作流程教学难点表现与结构相分尚学情分析课外拓展初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产牛.倦怠。依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比揖，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动教师学生技术资源教学随记（教学过程中记录）课前准备（提前2-3天发Web前端行企业调研（杳找网络任务下达、课任务获取、课PPT、微课、网络课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标参考教材4HTM1.5KSS3Web前前设计基础教程（第3版（微课版）,人民邮电出版社,2024年专业教学标准<Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/Aw.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标了解Web前端工程新的行业前景；认识网页构成的堪本元素，掌握相关专业术语；掌握“表现与结构相分离”的重要理念：熟悉Web前端开发的工作流程：了解常用的开发软件，能够简单创建一个IITM1.5页面。能力目标初步掌握创建简单HTM1.5页面的方法：具有“表现与结构相分离”的理念认知：素质目标引导学生既要学习专业技能知识，也要逐步树立职业理想；坚持诬育为先，培养良好的职业道德（货任感）和个人品德：教学重点Web前湍开发的相关专业术语与工作流程教学难点表现与结构相分尚学情分析课外拓展初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产牛.倦怠。依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比揖，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动教师学生技术资源教学随记（教学过程中记录）课前准备（提前2-3天发Web前端行企业调研（杳找网络任务下达、课任务获取、课PPT、微课、网络布教学任务）资料）、预习微课视频前准备前准备资源课堂教学（一）情境创设（5分钟通过让同学分享Web前端企业调研结果，引入Web前端工程师的行业前景，激发学生学习兴趣。理论讲授明确任务知识获取智能课堂、微课、PPT.多媒体电脑、互联网资料等。课堂教学（二）知识学习网分钟1.Web前端开发的必要认知与发展前景2 .认识网页的构成元素3 .了解专业术语4 .认识Web标准5 .Web前端开发基本流程6 .常用开发软件介绍理论讲授知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练（35分仲1.围绕”表现和结构相分离”等内容，通过互联网杳找资料，进一步强化学生对课堂知识的理解。2 .使用记事本创建IITM1.5页面。3 .查找有关“网页设计”“网页U1”的资料，欣赏优秀的网页设计作品。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（四）总结评价1。分钟课堂小结，重申课堂盘点难点,明确课题学习任务,针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展为巩固课堂学习效果，有计划、有重点的安排拓展知识学习与训练，培养学生学习习惯，进步提升专业技能和综合素养。课外指导知识技能补充网络资源、即时通信等。诊断改进课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考教材<HTMIJ5+CSS3Web前端设计基即教程（第3版）人民邮电出版社,2024年（微课版）,参考资料专业教学标准<Web前湍开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/Aw.icourse163.org)其他资源媒体资源智能课堂、微课、PPI、配套素材等环境资源多媒体教室知识目标掌握Dreamweaver的基本使用方法：掌握站点的相关概念及其堪本操作：掌握HBui1.derX的基本使用方法：教学目标能力目标掌握Dreamweaver和HBUi1.derX的基本使用方法：能够创建简单的HTM1.5网页，并实现简单的控制：素质目标培养学生的实践思维，提升勇于探索实践的能力：培养学生枳极研究探索的科学习惯：教学重点工具栏、CSS面板、属性检查器教学难点创建与管理站点学情分析初学者对WCb前湍课程的重要性认识不够，对初次接触代码类课程容易产生倦怠。学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组付论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、进而提高综合素养。自主解决问题的意识和习惯，教学环节教学内容教学活动技术资源教学随记时间安排）教师学生教学过程中记录）课前准备（提前2-3天发布教学任务）预习微课视频任务下达、课前准备获课备务'准"取前PPT、微课、网络资源课堂(一)情境回顾上节课基本知识，引出“工欲善其事，必先利其器”，引导学生树立任何代码编辑器仅是理论明确任务智能课堂、微课、PPT,多媒教创设解决问题的工具，Web前端的学讲授知识体电脑、学(5分钟习重点应放在代码编写逻辑的获取互联网资学习。料等。课(二)1.Dreamweaver界面介绍智能课2.DW常用工具栏和面板堂、微课、堂知识3.创建和管理站点案例知识PPT、多媒教学习4.各类面板的使用方法教学获取体电脑、学网分南5.Hbui1.derX基本操作互联网资6.标签、元素、属性和值料等。课(三)1.学生熟悉Dreamweaver环智能课堂、微课、堂仿真境，上机演练创建与管理站点。实践实践PPT、多媒教演练2.安装与启动HBUiIderX,创建指导训练体电脑、学(35分州并保存一个项目，熟悉环境。互联网资料等.课(四)课堂小结，重申课堂重点难点，作业查漏智能课堂、微课、堂总结明确课题学习任务，针对课堂教点评补缺PPT、多媒教评价学内容，互动交流讨论，布置后课程吸收体电脑、续课预习知识。小结整理互联网资学10分钟料等.课后为巩固课堂学习效果，有计划、有重点的安排拓展知识学习与课外知识技网络资源、即时拓训练，培养学生学习习惯，进一指导能补充步提升专业技能和综合素养.通信等。展诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源参考教材W迎5KSS3Web前前设计基础数程（第3版）（微课版），人民邮电出版社，2024年专业教学标准<Web前湍开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOoC(https:/Www.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标教学束点教学难点学情分析知识目标掌握IITM1.5文档结构，认识HTM1.5中常见的标签含义：能力目标掌握DreHmWeaVer和HBUi1.derX的基本使用方法：能够创建简单的HTM1.5网页，并实现简单的控制：素质目标培养学生的实践思维，提升勇于探索实践的能力：培养学生积极研究探索的科学习惯；HTM1.5的文档结构和编写规范HTM1.5常见元素初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产生催怠依据教学标准要求，结合学生.学情，动态调整应用“翻转课堂”模式的教学比盎，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现何巡、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动技术资源教学随记（教华H程中记录）教师学生课前准备（提前2-3天发布教学任务预习微课视频可课备务、准他区前获课备务、准住取前微联1、源Pp课资课堂教学（一）情境创设5分仲1 .回顾上节课基本知识,通过展示些有趣的HTM1.5应用实例,如互动游戏、动画效果等，激发学生的学习兴健。2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（一）知识学习【40分钟】I.D0CTYPE文档类型与基本结构元素2.HTM1.5常见元素（标题、段落、img、a、列表、div,span、tab1.e,视频音频）案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学课堂教学（三）仿真演练35分钟1.使用Dreamweaver或Hbui1.derX,上机演练各个示例“2.鼓励学生在上机演练时相互讨论,分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导,帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等.（四）总结评价UQ分钟课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收推理智能谡堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展推荐学生阅读一些HTM1.5相关的书籍、教程和文章，以拓宽知识面和了解最新的HTM1.S应用趋势.课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材（HTM1.54CSS3Web前端设计基础教程（第3版）（微课版）,人民邮电出版社，2024年专业教学标准Web前端开发课程标准其他资源教学目标职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MoOC(https:/WWw.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标/解CSS的基本概念：掌握CSS的基本语法格式及其引入方法：掌握CSS盒模型的相关概念；能力目标能够使用CSS的基本知识完成简单页面的排版：能够使用属性选齐器根据元素的属性及其值来选择元素，并应用样式：素质目标提升学生规矩懑识，强化学生诚信精神：引导学生从“细”“小”做起，玳点培养学生新时代工匠精神和爱岗敬业的操守精神“教学束点CSS的引入方式教学难点盒模型学情分析课外拓展学生能够使用HTv1.标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比盎，以边讲边练、分组i寸论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提忌综合素养。教学环节时间安机）课前准备（提前2-3天发布教学任务）课（一）堂情境教创设学5分钟教学内容教学活动技术资源教学随记（4k学过程中记录教师学生预习微课视频可课备务、准任心前而深备务、准便叫前微的1.k源Pp课资1 .展示淘宝首页和小红书首页.介绍CSS的作用,给网页“化妆”,全申“表现与结构相分离”的理念，引出CSS基本知识。2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课（二）1.通过案例引入CSS的基本语法案例知识智能课堂教学知识学习【35分钟】与注释。2 .CSS弓I入方式（1）内联样式（2）内部样式（3）外部样式3 .分析盒模型的组成并通过案例让学生熟悉盒模型。教学获取堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（三）仿真演练分锌1 .使用DreamWeaVer上机演练各个示例。体会CSS的作用,了解它是如何与HTM1.悔同工作的。2 .鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3 .教师即时的反馈和指导,帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、,n多媒体电脑、互联网资料等。课堂教学（四）总结评价Uo分钟课堂小结,蓝申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收推理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展分享CSS的技术平台，让同学们关注并观看CSS优秀的作品。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材TM1.5÷CSS3Web前端设计基础教程（第3版）（微课版），其他资源人民邮电出版社，2024年专业教学标准<Web前湍开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MoOC(https:/www.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS初级选择器的使用方法能力目标能够使用CSS的基本知识完成简单页面的排版；能够使用属性选择器根据元素的属性及其值来选择元素，并应用样式：素质目标提升学生规矩意识，强化学生诚信精神：引导学生从“细”“小”做起,重点培养学生新时代工匠精神和爱岗敬业的悚守精神。教学重点选择器的使用方法教学难点【D选择器、类选择涔学情分析课外拓展教学环节（时间安排）课前准备（提前2-3天发布教学任务）学生能够使用HTM1.标冬创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组付论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学内容教学教师活动学生技术资源教学随记教学过程中记录）预习微课视频下课备务、准任达前获课备务、准任取前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授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材（HTM1.5-KSS3Web前端设计基础教程（第3版）（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MooC(httpsuww.icourse1.63.org/)其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS高级选择器的使用方法能力目标能够使用CSS的基本知识完成简单页面的排版：能够使用属性选择器根据元素的属性及其值来选择元素，并应用样式：素质目标提升学生规矩意识，强化学生诚信精神；引导学生从“细”“小”做起，重点培养学生新时代工匠精神和爱岗敬业的操守精神。教学重点选择器的使用方法教学难点子元素选择器、相邻兄弟选择器学情分析学生.能够使用HTH1.标签创建荷单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异.学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程.课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动教师学生技术资源教学随记教学过程中记录）课前准备（提前2-3天发布教学任务）预习微课视频任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设5分怦）1 .回顾上节课基本知识,通过复杂案例引出CSS中有高级内容。CSS中有些高级选择器使用起来会让页面的实现更方便。2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习35分仲通过案例的方式展示下面的内容，总结多个选择得使用的场景和唐法.1.子元素选择罂2 .相邻兄弟选择器3 .属性选择器4 .页面简易美化案例教学知识获取智能课堂、微课、,n多媒体电脑、互联网资料等。课堂教学（三）仿真演练网分钟1.根据教材内容上机演练各个示例。发布课堂任务：创建个简堆的网页，使用这些选择器为元素设置样式.2 .开展课堂讨论,如何有效地使用这些选择器来提高CSS代码的可维护性和性能。3 .教师即时的反馈和指导,帮助学生及时组正错误，加深理解。实践指导实践训练智能课堂、微课、PPT,多媒体电脑、互联网资料等。课堂教学（四）总结评价10分钟）课堂小结，重申课堂重点难点,明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收照理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展加入CSS和前端开发的社区，与其他开发拧交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Wcb前端开发/网页设计与制作授课时数2授课班级授课时间授课地点参考资料其他资源授课形式多媒体教学参考教材UM1.5KJSS3Web前端设计基基教程（第3版）（微课版）,人民邮电出版社,2024年专业教学标准Heb前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MooC(https:/WW.icourse163.org)媒体资源智能课堂、微课、PPT、配隹素材等环境资源多媒体教室教学目标教学重点教学难点学情分析知识目标掌握有关字体和文本的CSS知识能力目标能够实现文字版面的基本排版素质目标进步培养学生精雕细琢、精益求精的职业素养：引导学生体会理论知识转变为直接生产力的成就糕，使学生领略专业魅力.字体属性与文本属性使用®font-face实现在线字体学生能够使用HTM1.标签创建简单的网页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。课外拓展依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比全，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节教学内容教学活动技术资源教学随记演示使用DW可视化快速创建锚链接：3.CSS伪类讲解常见伪类名称和使用方法，以及注意事项.动作不同时，文本陡接的不同效对应的伪美名.林；3.总结伪类使用注惠事项之间的对度关痴3,掌握伪类使用场景和注超事如课堂教学（三）仿真演练分钟1 .根据教材内容上机演练页面常用网址导航示例，理解伪类的使用场景和具体用法。2 .鼓励学生在上机演练时学思结合，相互讨论，分享学习心得和遇到的间题,通过集体的智慧解决问题。3 .教师即时的反馈和指导,帮助学生及时纠正错误，加深理解。1.观察学生整体避度,她结学生遇刎的具体问题:2.实跋指导玷含课本代码实践*智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价10分钟课堂小结，重申课堂重点难点:伪类的使用方法，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识:使用CSS控制图像。作业点评课理小站补艮吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.推荐学生阅读一些HTO1.5相关的书籍,教程和文章，以拓宽知识面和了解最新的HTM1.5应用趋势。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Wcb前端开发/网页设计与制作授课时数2I授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标教学重点教学难点学情分析参考教材0M1.5KJSS3Web前前设计基基教程（第3版）（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准WCb前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MoOC(https:/www.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标掌握有关图像的CSS知识能力目标能够制作图文混排效果素质目标进步培养学生精雕细琢、精益求精的职业素养：引导学生体会理论知识转变为直接生产力的成就感，使学生领略专业魅力-Background基本属性图文混排学生能够使用HTW.标签创建简单的阿页结构，已经逐步适应代码类课程的学习模式，但不同学生的学习进度和兴趣逐步表现出差异。课外拓展依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提裔综合素养。教学环节时间安排）教学内容教学活动技术资源教学随记教学过程中记录）教师学生课前准备（提前2-3天发布教学任务1 .预习微课视频2 .结合平时上网经历，思考网页中的图片和文字布局关系任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设5分仰）1.同颐上节课基本知识，通过教学平台的课前测试，检查学生上节课知识掌握情况并及时进行测试点评。2 .通过提问抽查学生课前预习情况，通过引导学生关注图像和文字的位.置关系，借助图片元素和背景图片的区别，引出背景图片的概念及常用属性。3 .明确课程的学习Ii标：使用CSS控制图像文本，制作具体案例：让学生对学习路径有一个清晰的认识。1.发起课前测试：2.点评测试结果：3.抽杳学生课前预习情况。1.参与课前测试；2.总结测试过程中出现的问题：3.反馈课前预习情况:智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（二）知识学习35分铮1 .background属性结合背景图片的特性，通过具体案例展示背景图片的颜色、内容、大小、平铺、位置等屈性的具体使用场景和方法，在此基础上，引出身合属性的使用规则。2 .图文混排展示图文混排案例，讲解混持原则及具体方法，指出核心知识点：浮动1.案例展示具体屈性使用方法：2.关注学生接受情况：3.及时沟通，解决学生理解误区：1.观察教师演示,实践帮助理解：2.及时回应教师,主动反馈疑惑点。智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（三）仿真演练网分南1.根据教材内容上机演练背景图片和图文混排案例。2 .鼓励学生在上机演练时多观察，多思考，相互对论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3 .教师即时的反馈和指导，帮助学生及时绢正错误，加深理解.1.鼓励学生积极讨论并提供实践指导：2.通过教学平台随机抽查学生成1.分组讨论后实践操作；2.相互点评并及时总结。智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学果，总结常见问题。（四）总结评价UO分钟课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识：元素浮动与清除。作业点评课程小结查漏补缺吸收整理智能谡堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展1 .使用HTM1.和CSS创建一个简单的个人博客贞面.帮助自己巩固基本的网页布局和样式设计。2 .加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Wcb前端开发/网页设计与制作授课时数4授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标参考教材<MM1.5ySS3Web前前设计基础教程（笫3版）（微课版）,人民邮电出版社,2024年专业教学标准<Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MoOC(https:/www.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标理解浮动的基本概念，掌握创建浮动和清除浮动的方法：重点掌握相对定位和绝对定位的使用方法：能力目标掌握纵向导航和横向导航的实现方法掌握图文混合列表的实现方法素质目标培养学生的相互沟通能力和团队协作精神：培养学生沉稳的学习习惯，进步培养在工作中执著钻研、精益求精的职业精神：教学重点教学难点CSS定位浮动学情分析学生能够熟练搭建HTM1.网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经险.学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程.课外拓展教学环节（时向安排）课前准备（提前2-3天发布教学任务）有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学内容教学教师活动学生技术资源教学吟彼竽过程中记录）预习微课视频任务下达、课前准备获课备务、准停收前做络微网、源Pp课资课堂教学（）情境创设10分钟1 .回颐上节课基本知识。访问学校首页，引导学生观察动态飘窗效果，引入浮动和定位的知识。2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识.理论讲授明确任务知识获取智能课堂、微课、PPT.多媒体电脑、互联网资料等.课堂教学（二）知识学习60分钟1.浮动通过案例讲解浮动的工作原理和现象。2 .消除浮动的3种方法介绍C1.ear屈性和伪元素消除浮动的概念,以及如何使用它们来避免浮动元素对后续元素的影响。3 .CSS定位（1）静态定位和固定定位（2）相对定位和绝对定位（3）相对于某一容器的绝对定位案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学课堂教学（三）仿真演练90分铮1.根据教材内容上机演练各个示例。2 .课堂提出一个具体的布局问超，引导学生思考如何使用浮动来解决问翘，并分享他们的解决方案。3 .鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智煞解决问题。4 .教师即时的反馈和指导,帮助学生及时纠正错误，加深理解.实践指导实践训练智能课常、微课、PPT、多媒体电脑、互联网资料等.（四）总结评价20分钟课堂小结，重申课堂重点难点,明确课题学习任务,针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能谡堂、微课、PPT、多媒体电脑、互联网资料等。课后柘展1 .创建一个在线简历页面，包含个人资料、教育背景等，并使用CSS进行美化.2 .加入CSS和前端开发的社区，与其他开发者交流问题和学习经验.课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数