《Web前端开发》 教案全套-项目1-10 Web前端职业前景与开发初体验-开发果果鲜水果移动端网站

课程思政设计序号项目名称课程思政主题课程思政教学内容学时1Web前端职业前景与开发初体验职业道德；敬业精神培养学生树立良好的职业道德规范及干一行、爱一行、专一行的敬业精神。42制作5G新时代科学知识页面学习意识；创新精神培养学生的主动学习意识、责任担当意识和创新精神，以及遇到困难不放弃、敢于拼搏的精神。83应用表单制作背包客旅行网站注册页面学习意识；执着精神培养学生的学习意识和执着的工匠精神，使学生热爱开发、勇于探索，形成以职业素养、工匠精神贯穿始终的新时代思政教育。44开发今日影评网站页面合作意识；创新精神培养学生的合作意识和创新工匠精神，以及遇到各类问题时解决复杂问题的能力。85设计传统文化主题网页质量意识；执着精神培养学生“执着、团结协作、勇攀高峰”的科学精神，以及工作应该注重质量的职业素养。86优化国学文化网职业道德；敬业精神培养学生坚守本心、忠于职守、勤于奉献的职业道德和敬业精神，时刻牢记自觉遵守软件开发公约和保密制度、具备良好的知识产权保护观念和意识，坚定文化自信。87开发响应式音乐播放界面服务意识；精益精神提升服务意识，培养严谨的学习态度、扎实的职业素养、精益的工匠精神，激发学生的敢于挑战的坚定理想信念88添加网页中的动画效果质量意识；专注精神提升学生严谨踏实的工作作风、注重质量的职业素养和专注的工匠精神。89开发果果先水果电商PC端网站合作意识；专注精神培养学生“业精于勤，荒于嬉；行成于思，毁于随”的专注精神以及在大量代码编写时的合作意识。810开发果果鲜水果移动端网站服务意识；精益精神培养学生热爱网站开发工作、专注于代码编写的职业态度，肩负起新时代青年科技兴国的责任担当，对前端开发职业充满热忱，保证开发的网站质量。8理想信念理想信念职业素养工匠精神职业道德、合作意识、质量意识、服务意识、学习意识敬业、精益、专注、创新、执着热爱祖国、民族自信、文化自信......教案一了解Web前端开发职业前景及相关技术课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学章节项目1Web前端职业前景与开发初体验任务1.1认识Web前端开发工程师、任务1.2熟悉Web前端开发相关技术课程思政职业道德是指从业人员在职业活动中应该遵循的行为准则，良好的职业道德是每一个人都必须具备的基本品质。在校读书的学生在学习生活中应遵循基本的道德规范，学生阶段是学习知识、学习生活、学习做人的阶段，养成良好的道德习惯，终生受益无穷。学生阶段要达到的第二个阶段是要学会敬业，敬业须热爱工作、须勤勉努力。结合自身专业及Web前端职业前景，激发学生的学习兴趣以及对职业前景充满热忱，培养学生树立良好的职业道德规范及干一行、爱一行、专一行的敬业精神。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目1的任务1.1和任务1.2，认识Web前端开发工程师、熟悉Web前端开发相关技术。学情分析互联网时代的学生，上网操作非常熟练，对未知事物的探索意识较强，为本课程的学习提供了认知方面的支持。但学生初次接触此类课程，对于未来的职业规划还不甚明确，对于该课程所涉及到的技术还不清楚。教学目标知识目标能力目标素质目标1.了解前端开发工程师的岗位种类；2.掌握未来前端开发方向；3.熟悉Web前端开发相关技术。1.能够深入认识前端开发的职能及未来发展前景；2.熟悉前端开发工具的安装及使用；3.掌握HBuilder创建项目流程。1.具备爱岗敬业的职业精神；2.具备职业规划意识；3.具备自主获取信息、处理信息的能力。教学重点Web前端开发的岗位设置及工作流程，使用前端开发工具创建简单网页。解决重点：通过播放视频片段、推送学习资源、教师讲解、任务拓展以及梳理思维导图不断巩固强化，突出重点。教学难点搭建网页开发环境，测试简单网页。突破难点：通过教师示范体验、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要采用翻转课堂法、情境体验法、PBL问题导向法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.登录平台，将遇到的问题以及自己的看法评论至学习通的主题讨论中；3.完成测评任务，并上传测评结果。学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（5min）以“雷锋的故事”引入“敬业”的工匠精神。爱岗是敬业、奉献的根本，引导学生树立正确的人生观、价值观，具备正确的职业规划意识。学一学：1.学生分享心得体会；2.学生树立正确的职业规划与发展意识。教学PPT温故知新（6min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；教学PPT夯实基础（30min）任务导入任务效果图1.观察各个网站的网页效果。创设问题情景：如何制作网页，如何搭建网页开发环境，做为一名Web前端开发工程师需要具备哪些技术？2.引出本次课程：Web前端职业前景与开发初体验。3.布置任务：搭建运行环境。思一思：结合实际，思考常见的网页开发工具。教学PPT；浏览器；HBuilder新知讲解知识点1讲授：认识Web前端开发工程师观看视频，了解Web前端的应用领域和开发前景。知识点2讲授：Web前端开发相关技术HTML：HTML全称HyperTextMarkupLanguage，即超文本标记语言。HTML是一种规范，也是一种标准，它是用标记标签来描述网页的一种语言。CSS语言：CSS全称CascadingStyleSheets，即层叠样式表。CSS作为网页设计过程中常用的技术之一，主要用来控制网页上文字、标题、列表、表格、表单的显示样式。JavaScript语言：JavaScript（JS）语言是一种轻量级的编程语言，作为Web开发页面的脚本语言而出名，它能够在不同的浏览器中运行。知识点3讲授：Web前端开发工具浏览器：目前，主流的Web浏览器有很多，国外的浏览器有微软IE、苹果Safari、火狐Firefox、欧朋Opera、谷歌Chrome等；国内的浏览器有360浏览器、QQ浏览器、搜狗浏览器等。网页编辑器：WebStorm、EditPlus、Notepad++、HBuilder等。切图软件：Photoshop、Fireworks。思一思：结合实际，思考Web前端开发工程师必备的职业素养，引导学生树立良好的职业道德规范及干一行、爱一行、专一行的敬业精神。思一思：结合实际，思考主流软件的发展过程，培养学生自主获取信息、处理信息的能力。教学PPT；教学视频；浏览器测试讨论通过学习通发布讨论，检查学生对网页开发工具的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示网页开发工具的应用过程，引导学生理解HTML模板的设置。做一做：1.学生学习通完成讨论。2.理解环境搭建过程。学习通平台知行合一（25min）教师分析环境搭建过程，引导学生完成项目任务。练一练：学生根据教师引导，完成实践作业。教学PPT；HBuilder开发工具拓展提升（18min）教师通过学习通发布各小组拓展任务：安装HBuilder，进行页面测试。做一做：1.学生搭建运行环境，分组完成网页测试。2.各组学生将拓展结果分享到平台中的个人学习空间。学习通平台；HBuilder开发工具总结评价（6min）1.教师总结环境搭建过程；2.评价分析学生在创建页面时普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.认真聆听教师的总结归纳；3.记清课后活动内容。学习通平台；教学PPT课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。学习通平台；Web前端1+X证书编程学习平台课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。学习通平台；Web前端1+X证书编程学习平台板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对Web前端职业前景与开发进行了初体验。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“敬业”精神，学做工匠人物，热爱劳动、勇于创新，形成以文化自信、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。教学评价教案二初识HTML5页面课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学主题项目1Web前端职业前景与开发初体验任务1.3了解Web前端开发基本流程、任务1.4初识HTML5页面课程思政“鲁班奖”自1987年设立以来,迄今已有35年历史,被称为中国建筑行业工程质量最高荣誉奖。始终坚持“高标准、严要求、优中选优、宁缺毋滥”的原则，培养学生亦是如此，在人际协调和沟通、对待工作认真负责的职业素养及敬业的工匠精神；培养学生灵活的知识迁移能力。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目1，任务1.3和任务1.4，认识Web前端开发工程师、熟悉Web前端开发相关技术、了解Web前端开发基本流程、初识HTML５页面。学情分析学生互联网页面浏览经验丰富，已经具备网页开发环境的搭建基础，对于创建网页充满探究兴趣，但由于学生初次接触此类课程，对于网站的规划流程、HTML5页面的基本结构及简单页面的创建还不清楚。教学目标知识目标能力目标素质目标1.熟悉前端开发工作流程；2.了解网页基础模板结构及生成方式；3.掌握基本结构标签的作用。1.能按照Web前端开发工作流程分解网站项目各阶段任务；2.能够完成简单HTML5网页的创建；3.能够根据案例进行变通，制作出其他效果的网页。1.具备敬业的工匠精神；2.具备与项目组人员进行有效的沟通协调能力；3.具备知识迁移能力。教学重点Web前端开发的岗位设置及工作流程，使用前端开发工具创建简单网页。解决重点：通过播放视频片段、推送学习资源、教师讲解、任务拓展以及梳理思维导图不断巩固强化，突出重点。教学难点根据案例进行变通，制作出其他效果的网页。突破难点：通过教师示范体验、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要采用翻转课堂法、情境体验法、PBL问题导向法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.登录平台，将遇到的问题以及自己的看法评论至学习通的主题讨论中；3.完成测评任务，并上传测评结果。学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（5min）“春蚕到死丝方尽,蜡炬成灰泪始干”、“人生自古谁无死,留取丹心照汗青”。通过古诗引导学生在网站代码编写中要秉承敬业的精神进行工作。学一学：1.学生分享心得体会；2.学生关注传统文化，提升文化自信和敬业精神。教学PPT温故知新（6min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；教学PPT夯实基础（30min）任务导入任务效果图1.观察各个网站的网页效果。创设问题情景：如何搭建网页结构？2.引出本次课程：HTML5基础页面创建。3.布置任务：观看效果图，完成网页效果。思一思：结合实际，思考常见的网页结构。教学PPT新知讲解知识点1讲授：Web前端开发基本流程前端项目目录结构及作用：前端项目中包含了图片、样式文件以及脚本文件和网页等，需要分门别类存储方便管理。Web前端开发基本工作流程：在项目实施过程中，需要一个流程规范指导团队，成员如何分工、如何协同配合，以保障开发效率和产品质量。完整的项目从开始实施到完成需要进行以下主要流程：需求分析->策划架构->交互设计（UX）->界面设计（UI)->前端开发->后端开发->运维测试知识点2讲授：初识HTML5页面网页格式：网页文件的后缀为.html格式，可以使用HBuilder创建一个网页项目，网页项目中会自动生成想要的网页结构。网页基本模板分析：下图是html的一个基础模板，后期完成的网页代码都将在这个模板基础上进行扩充。思一思：结合实际，讨论Web前端开发流程，培养学生的语言表达能力及沟通能力，提升学生的职业道德素养。思一思：结合实际，思考如何创建多个Web项目。教学PPT；HBuilder开发工具；浏览器测试讨论通过学习通发布讨论，检查学生对网页开发工具的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示网页开发工具的应用过程，引导学生理解HTML模板的设置。做一做：1.学生学习通完成讨论。2.理解网页创建的过程，培养学生知识迁移能力。学习通平台；教学PPT知行合一（25min）教师分析网页创建过程，引导学生完成项目任务，归纳学生在完成任务时遇到的问题。练一练：学生根据教师引导，完成实践作业。教学PPT拓展提升（18min）教师通过学习通发布各小组拓展任务：创建网页，预览网页效果，引导学生熟悉Web前端开发的整个流程，具备知识迁移能力。做一做：学生使用平台编码，分组完成网页创建。各组学生将拓展结果分享到平台中的个人学习空间。学习通平台；HBuilder开发工具总结评价（6min）1.教师总结网页的创建过程；2.评价分析学生在创建页面时普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.认真聆听教师的总结归纳；3.记清课后活动内容。教学PPT；学习通平台课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。学习通平台课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。Web前端1+X证书编程学习平台；学习通平台板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对Web前端开发基本工作流程有了基本的认识，并创建了一个简单的网站页面。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“敬业”精神，学做工匠人物，热爱劳动、勇于创新，形成以文化自信、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。教学评价教案三规划页面的布局课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学主题项目2制作5G新时代科学知识页面任务2.1规划页面的布局课程思政2022年北京冬奥会残奥会的成功举办，使我们感受到了祖国的日益强大，激发了中国人强烈的爱国热情，为伟大复兴注入强大精神力量。通过冬奥会科技知识，激发学生的民族自豪感和爱国热情，培养学生的主动学习意识、责任担当意识和创新精神。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目2制作5G新时代科学知识页面的任务2.1，规划页面的布局。学情分析学生前期已经了解了Web前端开发的基本流程，掌握了HTML5文档的基础模板，但对于页面基本格式设置过程中出现的问题缺乏分析、解决能力。根据教学平台数据分析及问卷调查，学生对于网页设计兴趣较高，但对于网页元素的布局还不甚了解。教学目标知识目标能力目标素质目标1.了解常见的页面布局；2.理解传统的布局标签；3.掌握HTML5新增的语义化标签。1.理解传统布局标签的应用2.掌握语义化标签布局页面的方法；3.理解传布布局标签和语义化标签的区别。1.具备大局观和责任担当意识；2.具备主动学习的意识；3.具备灵活的思维方式及创新精神。教学重点规划网页布局，构建网页内容。解决重点：通过播放视频片段、推送学习资源、教师讲解、任务拓展以及梳理思维导图不断巩固强化，突出重点。教学难点使用HTML5新增语义化标签进行页面布局。突破难点：通过教师示范体验、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要采用翻转课堂法、情境体验法、PBL问题导向法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.登录平台，将遇到的问题以及自己的看法评论至学习通的主题讨论中；3.完成测评任务，并上传测评结果。学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（5min）1.掌握新技术，要善于学习，更要善于创新。——邓小平。2.以“科技奥运”引入“创新”的工匠精神。以冬奥会上的科技创新，激发学生的民族自豪感和爱国热情，倡导科技报国、实业兴国教育，引导学生要有一定的使命感和责任担当意识。鼓励学生探索未知，具备创新精神。学一学：1.学生分享心得体会；2.学生关注科技创新，激发爱国情怀，提升责任担当意识和创新意识。教学PPT温故知新（6min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；教学PPT夯实基础（30min）任务导入任务效果图1.观察网页的布局及网页元素。创设问题情景：如何规划网页布局、如何嵌入网页元素？2.引出本次课程：规划页面布局、构建网页内容。3.布置任务：观看效果图，分析页面布局。思一思：结合实际，思考常见的网页布局形式。教学PPT；浏览器；HBuilder开发工具新知讲解知识点1讲授：传统的布局标签<div>标签：<div>标签没有语义，是一个块级元素，可以用于网页的规划和布局。<span>标签：<span>标签没有特定的含义，是行内元素，可以用作文本的容器。知识点2讲授：HTML5新增语义化标签<header>标签：<header>标签描述了文档的头部区域，主要用于定义内容的介绍展示区域。<header>标签放在页面或布局的顶部，一般放置导航栏或标题，在页面中可以使用多个<header>标签。<nav>标签：<nav>标签表示页面的导航，用于定义页面的主要导航部分。<nav>不但可以作为页面独立的导航区域存在，还可以在<header>标签中使用。<article>标签：<article>标签使用在相对比较独立、完整的内容区块，可以在一个论坛帖子或者一个用户评论中使用它，一个<article>标签通常包括标题、正文和脚注。<section>标签：section>标签是一个主题性的内容分组，包括的是有一组相似主题的内容，通常用于对页面进行分块或者对文章等进行分段。<aside>标签：<aside>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。<footer>标签：一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。跟<header>标签一样，<footer>标签的使用个数没有限制，可以在任意需要的区块底部使用。思一思：结合实际，思考新增语义化标签的布局方式，引导学生在网页制作中要紧跟市场需求，具备灵活的思维方式和创新意识；在校期间要勤勉学习，具备主动学习的意识。教学PPT；HBuilder开发工具测试讨论通过学习通发布讨论，检查学生对页面布局、文本、图像、超链接、列表标签的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示页面布局，引导学生理解布局标签的应用。做一做：1.学生学习通完成讨论。2.理解布局标签的使用。学习通平台；HBuilder开发工具知行合一（25min）教师分析案例页面实现的结构布局，引导学生完成项目任务。练一练：学生根据教师引导，完成实践作业。浏览器；教学PPT拓展提升（18min）教师通过学习通发布各小组拓展任务：分析页面布局。做一做：1.学生使用平台，分组完成任务。2.各组学生将拓展结果分享到平台中的个人学习空间。学习通平台总结评价（6min）1.教师总结网页的布局；2.评价分析学生在设计页面时普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.认真聆听教师的总结归纳；3.记清课后活动内容。学习通平台课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。学习通平台课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。Web前端1+X证书编程学习平台；学习通平台板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对页面布局知识掌握深入，也已了解布局标签和语义化标签的区别。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“创新”精神，学做工匠人物，热爱劳动、勇于创新，形成以文化自信、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。教学评价教案四构建网页内容（一）课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学主题项目2制作5G新时代科学知识页面任务2.2构建网页的内容课程思政2022年2月，中国女足逆境夺冠，站在了亚洲之巅，永不放弃的女足精神值得我们学习。在生活、学习乃至以后的工作中，都会遇到各种各样的困难，鼓励学生学习女足遇到困难不放弃、敢于拼搏的精神，激励学生在大学期间不断积累知识、具备主动学习的意识；更要具备踏实、严谨、认真的学习态度。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目2的任务2.2，构建网页内容里面文本控制标记、图像和超链接的应用。学情分析学生前期已经了解了Web前端开发的基本流程，掌握了HTML5文档的基础模板，但对于页面基本格式设置过程中出现的问题缺乏分析、解决能力。根据教学平台数据分析及问卷调查，学生对于网页设计兴趣较高，但对于网页元素的布局、网页元素的嵌入方式还不甚了解。教学目标知识目标能力目标素质目标1.理解布局标签的应用；2.掌握文本控制标签的使用；3.掌握文本、图像、超链接标签的使用。1.能够使用文本控制标签定义文本；2.能够自定义图像；3.能够使用超链接定义网页元素。1.具备严谨的学习态度和主动学习的意识；2.具备灵活的思维方式及创新精神；3.具备遇到困难迎难而上的精神。教学重点文本控制标签的应用；图像和超链接标签的应用。解决重点：通过播放视频片段、推送学习资源、教师讲解、任务拓展以及梳理思维导图不断巩固强化，突出重点。教学难点使用超链接标签实现页面跳转。突破难点：通过教师示范体验、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要引采用翻转课堂法、情境体验法、PBL问题导向法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.将遇到的问题以及自己的看法评论发送至学习通的主题讨论中；3.完成测评任务，并上传测评结果。Web前端1+X证书编程学习平台；学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（5min）业精于勤荒于嬉，行成于思毁于随——唐代·韩愈。学业由于勤奋而专精，由于玩乐而荒废；德行由于独立思考而有所成就，由于因循随俗而败坏。结合女足夺冠，激励学生在学习时要严谨认真，贵在坚持，遇到困难不退缩能够迎难而上。学一学：1.学生分享心得体会；2.学生在编写代码的过程中，具备严谨认真的学习态度及遇到困难敢于拼搏的精神。教学PPT温故知新（6min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；教学PPT夯实基础（30min）任务导入任务效果图1.观察网页的布局及网页元素。创设问题情景：如何规划网页布局、如何嵌入网页元素？2.引出本次课程：规划页面布局、构建网页内容。3.布置任务：观看效果图，完成网页效果。思一思：结合实际，思考常见的网页布元素。教学PPT；HBuilder开发工具；浏览器新知讲解知识点1讲授：文本控制标记标题：HTML中共提供了6个等级的标题标签，分别为<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。段落：在HTML文档中，段落标签是最常见的标签，通过段落标签，可以使网页中的文本有条不理地显示出来。段落标签是双标签，<p>和</p>之间的内容形成一个段落。水平线：水平线一般是用于段落与段落之间分隔的作用，使文档更加清晰，文字编排更加整齐，<hr/>标记是单标签。换行：换行标签<br/>是一个单标签，连续的多个标签可以实现多次换行。知识点2讲授：图像和超链接图像：网页中常见的图像格式主要有GIF、JPG和PNG三种格式，在HTML中，图像标签由<img/>进行定义。GIF格式：GIF是一种无损的图像格式，当对图片进行修改之后，图像质量没有损失。GIF格式图像支持背景透明，支持动画，支持图像渐进、支持无损压缩，但GIF只能处理256种颜色。在网页制作中，常常用于小图标、Logo以及色彩单一的图像。JPG格式：JPG是一种有损压缩的图像格式，支持上百种颜色。在网页制作中，色彩丰富的图片可以考虑使用JPG格式，如banner广告、较大的插图等。PNG格式：PNG格式压缩比高，生成文件体积小，支持alpha透明，且颜色过渡平滑。超链接：通过超链接，可以使各个页面联系在一起，从而构成一个完整的网站，超链接标签<a></a>是一个双标签。思一思：结合实际，思考段落标签和标题标签的应用场景；引导学生同一个案例可以有不同的解决方案，培养灵活的思维方式和创新精神。思一思：结合实际，思考网页中不同的超链接形式，查找资料、总结并应用与网页，引导学生主动学习的意识。教学PPT；HBuilder开发工具；谷歌浏览器测试讨论通过学习通发布讨论，检查学生对页面布局、文本、图像、超链接、列表标签的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示页面布局及页面元素的嵌入过程，引导学生理解标签属性的设置。做一做：1.学生学习通完成讨论。2.理解页面元素的嵌入过程。学习通平台；教学PPT知行合一（25min）教师分析案例页面实现的结构布局及涉及到的网页元素，引导学生完成项目任务。练一练：学生根据教师引导，完成实践作业。学习通平台；HBuilder开发工具拓展提升（18min）教师通过学习通发布各小组拓展任务：添加图片，设置图片的对齐方式。做一做：学生使用平台编码，分组完成网页设计。各组学生将拓展结果分享到平台中的个人学习空间。学习通平台；HBuilder开发工具总结评价（6min）1.教师总结网页元素的嵌入过程；2.评价分析学生在设计页面时普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.认真聆听教师的总结归纳；3.记清课后活动内容。学生通过平台课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。Web前端1+X证书编程学习平台课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。Web前端1+X证书编程学习平台板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对已讲授知识掌握深入，对拓展知识的具体应用理解到位。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“创新”精神，学做工匠人物，热爱劳动、勇于创新，形成以文化自信、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。教学评价教案五构建网页内容（二）课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学主题项目2制作5G新时代科学知识页面任务2.2构建网页的内容课程思政凡事长远考虑，以得与失的辩证关系原理看待问题。结合专业特点，培养学生主动学习的意识及新时代的责任担当精神；培养学生的大局观念和职业素养。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目2的任务2.2，构建网页内容里面的表格和列表。学情分析学生前期已经了解了网页的布局，掌握了页面中文本标签、图像的使用，掌握了超链接标签实现页面跳转的设置过程，但对于表格和列表的使用还不甚了解。教学目标知识目标能力目标素质目标1.理解表格标签的作用；2.掌握表格标签的使用；3.掌握列表标签的作用。1.能够使用表格标签进行简单页面的布局；2.能够使用超链接标签定义网页元素；3.能够使用列表标签定义网页元素。1.具备大局观和扎实的职业素养；2.具备主动学习的意识；3.具备灵活的思维方式及创新精神。教学重点使用列表标签修饰网页。解决重点：通过播放视频片段、推送学习资源、教师讲解、任务拓展以及梳理思维导图不断巩固强化，突出重点。教学难点嵌入列表标签，呈现网页最佳显示效果。突破难点：通过教师示范体验、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要采用翻转课堂法、情境体验法、PBL问题导向法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.登录平台，将遇到的问题以及自己的看法评论至学习通的主题讨论中；3.完成测评任务，并上传测评结果。学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（5min）学而不思则罔，思而不学则殆--《论语》一味读书而不思考，就会因为不能深刻理解书本的意义而不能合理有效利用书本的知识，甚至会陷入迷茫。而如果一味空想而不去进行实实在在地学习和钻研，则终究是沙上建塔，一无所得。引导学生在学习时要善于思考、灵活运用，将理论知识应用于实践，培养学生的创新思维。学一学：1.学生分享心得体会；2.学生在学习时将理论灵活运用于实践，具备主动学习的意识。教学PPT温故知新（6min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；教学PPT夯实基础（30min）任务导入任务效果图1.创设问题情景：如何实现网页效果？2.引出本次课程：表格和列表。3.布置任务：观看效果图，完成网页效果。思一思：结合实际，思考如何创建列表？教学PPT；浏览器新知讲解知识点1讲授：表格在网页制作时，可以使用表格对网页进行排版，使页面中的内容能够清晰地显示出来。表格标签的语法格式如下：知识点2讲授：列表无序列表：无序列表是一种不分先后顺序的列表形式，各个列表项之间没有顺序级别之分，无序列表采用标签<ul>进行定义。有序列表：有序列表是一种区分排列顺序的列表形式，使用标签<ol>进行定义。定义列表：定义列表不仅仅是一列项目，而是项目及其注释的组合。思一思：结合实际，思考网页中表格的应用场景；使用表格进行简单的页面布局，培养学生的大局观。思一思：浏览网页，整理网页中列表的应用场景，培养学生处理信息、主动学习的能力；使学生具备扎实的职业素养。教学PPT；HBuilder开发工具测试讨论通过学习通发布讨论，检查学生对列表标签的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示列表标签的设置过程，引导学生理解列表标签的应用。做一做：1.学生学习通完成讨论。2.理解列表标签在页面中的应用。学习通平台知行合一（25min）教师分析案例页面实现的结构代码及样式设置，引导学生完成项目任务。练一练：学生根据教师引导，完成实践作业。教学PPT；HBuilder开发工具拓展提升（18min）教师通过学习通发布各小组拓展任务：为页面添加列表，完成页面布局设置。做一做：1.学生使用平台编码，分组进行不同设备下的网页设计。2.各组学生将拓展结果分享到平台中的个人学习空间。学习通平台总结评价（6min）1.教师总结表格和列表标签的设置过程；2.评价分析学生在设计页面时普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.认真聆听教师的总结归纳；3.记清课后活动内容。教学PPT；学习通平台课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。学习通平台课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。Web前端1+X证书编程学习平台；学习通平台板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对已讲授知识掌握深入，对拓展知识的具体应用理解到位。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“创新”精神，学做工匠人物，热爱劳动、勇于创新，形成以文化自信、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。教学评价教案六美化网页的样式课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学主题项目2制作5G新时代科学知识页面任务2.3美化网页的样式课程思政通过冬奥会科技知识，培养学生自主获取信息、处理信息的能力。学生在整理资料的过程中，感受到祖国的快速发展、日益强大，能够激发学生的民族自豪感。培养学生主动学习的意识及灵活的思维方式，引导学生要有砺能笃行勇担当的责任担当意识和创新精神。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目2的任务2.3，美化网页的样式。学情分析学生前期已经了解了网页的布局，掌握了网页元素的嵌入方式，但对于页面样式的设置还不甚了解。根据教学平台数据分析及问卷调查，学生对于网页结构代码的应用已经基本掌握，对于CSS样式的设置急需了解。教学目标知识目标能力目标素质目标1.掌握使用CSS样式表的方式；2.掌握CSS选择器的使用；3.理解CSS样式表的特征。1.能够使用CSS选择器定义标签样式；2.能够运用CSS文本样式属性定义文本样式；3.能够使用CSS样式美化网页。1.具备弘扬中华传统文化意识，增强大国文化自信；2.具备责任担当意识；3.具备灵活的思维方式及创新精神。教学重点使用CSS选择器定义标签样式。解决重点：通过播放视频片段、推送学习资源、教师讲解、任务拓展以及梳理思维导图不断巩固强化，突出重点。教学难点使用CSS样式美化网页，呈现网页最佳显示效果。突破难点：通过教师示范体验、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要引采用翻转课堂法、情境体验法、PBL问题导向法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.登录平台，将遇到的问题以及自己的看法评论至学习通的主题讨论中；3.完成测评任务，并上传测评结果。学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（5min）以视频“北京冬奥会开幕式中的美学”引入“创新”的工匠精神，提升学生在设计网页时的美感和创新意识。学一学：1.学生分享心得体会；2.创新和传承文化内涵，提升文化自信。教学PPT；教学视频温故知新（6min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；教学PPT夯实基础（30min）任务导入任务效果图1.观察网页的布局及网页元素。创设问题情景：如何美化网页布局、修饰网页元素？2.引出本次课程：美化网页样式。3.布置任务：观看效果图，完成网页效果。思一思：结合实际，思考如何修饰网页元素效果？结合案例“5G科技创新”，引导学生肩负起新时代的责任，具备创新意识。教学PPT新知讲解知识点1讲授：使用CSS样式表的方式行内式：行内式也称为“内联样式”，是所有样式中比较简单、直观的方法，是通过标签的style属性对标签的样式进行设置。内嵌式：内嵌式是将CSS的样式代码添加到HTML文档的<head>标签中，并且使用<style></style>进行定义。外链式：外链式是将所有的样式放在一个或者多个扩展名为.css的外部样式文件中，同一个样式表可以被不同的HTML文件使用，是CSS中使用频率较高、较为实用的方法。导入式：导入式与外链式基本相同。知识点2讲授：CSS选择器标签选择器：标签选择器是指使用HTML标签名称作为选择器。类选择器：类选择器使用“.”进行定义，使用类选择器可以为一系列标记定义相同的显示效果。id选择器：id选择器与类选择器类似，可以设置特定属性的属性值。id选择器使用“#”作为标识，后面紧跟id名称。知识点3讲授：CSS样式表的特征CSS样式表又称为层叠样式表，具有层叠、继承、优先级三大特征。继承性：继承性是指被包含在内部的标签可以拥有外部标签的样式，如：color、text-*、font-*、line-height，但有些属性不能继承，如：border、padding、margin。层叠性：层叠性是指对一个元素多次设置同一个样式，将使用最后一次设置的属性值。优先级：单个选择器的优先级关系如下：内联样式>ID选择器(#id)>类选择器(.class)=属性选择器[type等]=伪类选择器(:hover等)>标签选择器(p等)=伪元素选择器(:after/:before/::selection等)。知识点4讲授：文本格式化在HTML中，文本是最为常见的网页元素，可以使用font属性对字体样式综合设置，其语法格式如下：思一思：结合实际，思考网页中常见CSS样式表的使用方式。通过CSS样式的使用方式，引导学生在页面设计时要具备创新思维，同一个问题可以有不同的解决方案。思一思：结合实际，思考哪种选择器可以设置网页的统一样式？教学PPT；HBuilder开发工具；谷歌浏览器测试讨论通过学习通发布讨论，检查学生对CSS样式设置的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示页面结构代码及样式代码的设置过程，引导学生理解CSS选择器。做一做：1.学生学习通完成讨论。2.理解CSS样式的设置过程。学习通平台知行合一（25min）教师分析案例页面实现的结构代码及样式设置，引导学生完成项目任务。练一练：学生根据教师引导，完成实践作业。教学PPT；HBuilder开发工具拓展提升（18min）教师通过学习通发布各小组拓展任务：为页面添加列表及超链接，完成页面布局及样式设置。做一做：1.学生使用平台编码，分组进行不同设备下的网页设计。2.各组学生将拓展结果分享到平台中的个人学习空间。学习通平台总结评价（6min）1.教师总结CSS样式的设置过程；2.评价分析学生在设计页面时普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.认真聆听教师的总结归纳；3.记清课后活动内容。教学PPT；学习通平台课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。学习通平台课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。Web前端1+X证书编程学习平台；学习通平台板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对已讲授知识掌握深入，对拓展知识的具体应用理解到位。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“创新”精神，学做工匠人物，热爱劳动、勇于创新，形成以文化自信、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。教学评价教案七创建旅行网站注册页面课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级虚拟现实1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学主题项目3应用表单制作背包客旅行网站注册页面任务3.1创建注册页面课程思政东汉时，有一个叫孙敬的年轻人，孜孜不倦勤奋好学，闭门从早读到晚也很少休息，有时到了三更半夜的时候很容易打瞌睡，为了不因此而影响学习，孙敬想出一个办法，他找来一根绳子，一头绑在自己的头发上，另一头绑在房子的房梁上，这样读书疲劳打瞌睡的时候只要头一低，绳子牵住头发扯痛头皮，他就会因疼痛而清醒起来再继续读书。最终，孙敬成为当时有名的太学生。这就是孙敬“头悬梁”的故事，告诉我们具备良好的学习意识，执着下去就会得到好成绩。教学内容将Web前端开发“1+X”职业技能等级证书的职业技能要求、“职业道德、合作意识、质量意识、服务意识、学习意识”五大职业素养及“敬业、精益、专注、创新、执着”的工匠精神引入课堂，依据Web前端开发的实际工作流程和操作技巧构建模块化课程体系。本教学单元选自项目3的任务3.1，应用表单创建背包客旅行网站的注册页面。学情分析学生前期已经掌握了网页内容制作的方法和美化页面样式的技能，但不了解用户和浏览器之间是如何进行交互的，网页中的数据是如何传递给后台服务器的，缺乏实际网页制作中的工作经验以及遇到各类问题时解决复杂问题的能力。同时，根据教学经验、问卷调查以及Web前端1+X证书编程平台数据分析，本专业学生对Web前端开发的学习兴趣浓厚，思维活跃，课下能够积极的在平台主动进行知识拓展，但在遇到具体问题时，解决问题的思维过于狭窄。教学目标知识目标能力目标素质目标1.进一步了解表单的作用；2.熟悉页面表单的实现方法；3.会分析页面表单的构成元素。1.能够在单个网页中灵活创建单个或多个表单；2.能够创建具有相应功能的表单控件；3.能够梳理思维导图。1.具备主动学习、终身学习、积极探索的品质；2.具备理论联系实际，对科学知识的认知日益深刻的能力；3.具备愚公移山和“千里之行，始于足下”的执着精神。教学重点理解表单的构成，可以快速创建表单，熟练掌握表单标签和样式的应用。解决重点：通过运行所设计的案例、教师讲解、任务驱动以及梳理思维导图不断巩固强化，突出重点。教学难点将CSS样式属性运用到实际项目之中，创新设计表单，能够分析页面组成，熟练编写出相关的表单标签。突破难点：通过教师示范体验、案例对比示范、学生创新尝试不断深入剖析，破解难点。教学策略教学组织本单元采用线上+线下教学模式，将整个教学过程分为“课前自主学习、课中教师导学+实施、课后练习拓展+闯关测验”三个教学环节。学生首先利用教师在平台中发布的立体化资源进行自主学习，同时教师通过平台数据了解学生课前活动完成情况，及时调整授课安排；接着利用线上教学平台互动的形式完成课堂教学；最后进行本次项目任务完成及针对Web前端1+X的拓展练习与闯关，教师再次通过学习平台了解学生课后活动的完成情况，给与专业指导以及客观评价。教学方法本次课主要采用启发式教学法、暗示教学法、课堂讨论法、任务驱动法，创设情境，项目实战，学做一体，让学生多体验、多交流、多实践，提升文化素养与职业能力。教学资源与手段学习通平台发布课前活动Web前端1+X证书编程学习平台统一播放思考讨论上传视频反复学习推送拓展学习资料教学准备学生准备发布学情调查问卷，结合项目经验、往届教学经验、师生互动及学生表现统计数据分析学情；以“组内异质、组间同质”的分组原则建立学习小组，学生按照职业素养、工匠精神、文化自信的内涵分为敬业、精益、专注、创新、自信、科学6个队。环境准备微信小程序工坊，调试电子屏幕、书写白板、WIFI信号、教学平台。资料准备学情调查问卷、课前活动任务及配套资料、教材、PPT课件、教案、平台视频、思维导图、任务书、评分表、拓展学习资料、课后活动任务及配套资料。教学过程课前导预习教学环节教师活动及教学内容学生活动技术手段课前线上活动1.调查问卷数据分析；2.发布讨论贴；3.学习通中发布测评任务，查看平台记录，进行知识短板回顾；4.根据学情分析、学生提出的问题及课前任务完成情况，修正教学设计。1.认真思考作答，完成并提交学情调查问卷；2.登录平台，发布信息；3.完成并上传测评任务结果。学习通平台课中导学习教学环节教师活动及教学内容学生活动技术手段精神引领（7min）1.通过战国时期思想家列子创作的一篇寓言小品文《愚公移山》和“千里之行，始于足下”引出“执着”的工匠精神。2.孙敬和苏秦的“刺股悬梁”，双目失明的美国作家海伦·凯勒。通过伟人勤奋学习的例子引导学生在网站搭建过程中要具有学习意识，树立终身学习的理念。学一学：1.学生关注伟人刻苦学习的例子，树立学习榜样；2.学生分享“执着”的心得体会。教学视频及PPT温故知新（8min）1.组织学生回顾上节课知识点；2.通过学习平台大数据分析学习效果，总结课前任务完成情况，表扬突出同学。答一答：回顾知识点，回答老师提问问题。Web前端1+X证书编程学习平台；夯实基础（30min）任务导入任务效果图思一思：结合实际，思考不同的网页注册页面显示的效果。Hbulider/VisualStudioCode编辑器新知讲解知识点1讲授：表单的构成表单域：相当于一个容器，用来容纳所有的表单控件和提示信息。表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。知识点2讲授：创建表单<form></form>标签用来创建表单。<formaction="url地址"method="提交方式"name="表单名称">各种表单控件</form><form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单标签action属性：action属性用于指定接收并处理表单数据的服务器程序的url地址。method属性：method属性用于设置表单数据的提交方式，其取值为get或属性：name属性用于指定表单的名称，以区分同一个页面中的多个表单。知识点3讲授：表单控件学习表单的核心就是学习表单控件，HTML语言提供了一系列的表单控件，用于定义不同的表单功能，如密码输入框、文本域、下拉列表、复选框等。大致可分为input控件、textarea控件、select控件三大类。<input/>元素是表单中最常见的元素，网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。<textarea>控件定义一个多行文本输入控件，文本区可容纳无限数量的文本内容，默认字体为等宽字体。<select>控件用于实现下拉菜单框，常常配合<option>标签使用，<select>代表整个下拉菜单，<option>代表下拉菜单中的每一项。列一列：学生根据项目效果展示及案例示范，列出注册页面中包含的表单控件和CSS样式。画一画：学生根据经验，做出常见网页注册页面。噢易全屏广播/窗口广播测试讨论通过学习通发布讨论，检查学生对表单内容的掌握情况。1.教师分析学习通讨论结果，进行总结。2.教师通过案例导入法演示表单的使用及代码实现，引导学生实现包含不同表单控件的注册页面。做一做：1.学生学习通完成讨论。2.理解表单在网页注册页面中的作用。学习通APP知行合一（35min）教师分析《背包客旅行网站注册页面》网站页面用到的表单控件，引导学生完成项目任务，并及时答疑解惑。练一练：学生动手实践完成任务。前端开发规范总结评价（10min）1.教师总结本节课的重难点；2.评价分析学生普遍存在的问题及需要注意的技能点；3.安排课后活动。1.学生通过平台空间“点赞+评论”进行拓展互评。2.记清课后活动内容。学习通APP课后导复习教学环节教师活动及教学内容学生活动技术手段课后线上活动1.教师通过学习通发布闯关任务；2.教师通过学习通发布预习任务。1.学生通过平台完成闯关测验；2.学生自主复习。学习通APP课后线上拓展教师通过学习通发布课后拓展活动要求。学生完成课后拓展活动，发布至平台个人空间。学习通APP板书设计教学反思教学效果1.层层递进达成教学目标。通过课堂互动、网站任务完成、课后拓展可以看出，学生对表单相关知识掌握深入，也已掌握表单在网页中的具体应用。2.创新创业意识显著提高。通过教师示范、视频、任务驱动、闯关、小组协作，调动了学生对网站开发的兴趣，调动了创新创业的积极性，提高了参与度。特色创新1.文化引领，贯穿始终。把大国工匠人物引入课堂，使学生向工匠学习，领悟工匠“执着”精神，感受伟人学习意识的品质，学做工匠人物，热爱开发、勇于探索，形成以职业素养、工匠精神贯穿始终的新时代思政教育，培养更专业更精益的复合型技能人才。2.模式创新，学生主导。教学中引入“胡格模式”，以学生为中心，以工作岗位为目标，以项目案例作为教学内容，学生学习兴趣高，效果好。诊断改进反思1：个别学生互动参与性不佳。诊改1：教师课下及时沟通，课上加强监督和个性化指导，使每位学生融入课堂当中。反思2：学生课上学习内容较多，属性参数的英文识记量较大，学生不易掌握。诊改2：教师将用到的英文词汇进行总结，学习通发给学生识记，下节课测验。反思3：理解能力与动手能力强的学生提早完成，无事可做。诊改3：教师可以给学习能力突出的同学分享一些学习的资料和第三方网站做项目的视频，让提前完成任务的同学进一步学习更深层次的知识点；或者成立学习互帮互助小组，营造“先进带后进”的良好互助学习氛围，从而逐步提高学生的实践技能。教学评价教案八美化旅行