《Web前端开发》课程标准（含课程思政）

《Web前端开发》课程标准一、课程基本信息表1课程信息表课程名称Web前端开发授课单位工程科技学院课程编码1019350课程类别（模块）职业核心技术模块前导课程计算机基础、图形图像处理后续课程网站开发与管理总学时90课程类型理论课是□总学分5实践课是□考核性质考试理论+实践是□理实一体化是适用专业计算机应用表2课程标准开发团队名单1序号姓名工作单位职称/职务注1：指参与课程标准制定的主要成员，包括校外专家二、课程定位和课程设计（一）课程性质与作用本课程是计算机应用技术专业的职业核心技术模块课程之一，是基于工作过程系统化的课程，是一门实践性和应用性都很强的课程。为计算机应用技术专业学生将来从事职场的web前端开发岗位的发展打下良好基础，并为该专业后续网站开发与管理的学习打下网页前端设计基础。（二）课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以项目引导，以就业为导向”，打破了传统的按照知识体系教授课程的模式，以学生日后在从事Web前端开发行业中所需的实际技能为目标，进行基于工作项目和工作任务的课程开发与设计，既保证满足从事网站前端开发所必须的专业知识、专业技能，又保持原有知识体系的完整性，既培养了学生的职业能力，同时也为学生的可持续发展奠定了基础。（三）课程设计思路本课程是以“基于工作过程”为指导，通过对Web前端开发所涉及到的岗位群进行工作任务和职业能力分析，以项目引导，以就业为导向，以培养学生的职业技能为目标、以学生为主体、以项目为载体，将知识、理论和实践一体化的课程设计思路。在宏观教学设计上突破以知识点的层次递进为体系的传统模式，而是将职业工作过程系统化，以工作过程为参照系，按照工作过程来序化知识，培养学生规范、高效率、高质量地应用能力，使学生既学习岗位知识又培养学生职业素质，锻炼学生的方法能力与社会能力。每个项目的学习以“做”为中心，教和学都围绕着做，在做中学，在学中做，做到“教、学、做”一体化，达到理论与实践的统一，同时注重培养学生的自主学习能力和职业素养的提升。本课程思政内容及单元的知识、技能按照相应的专项能力在实际职业工作中出现的频度、内容的难度和要求掌握的程度进行排序，如下所示：课程思政内容：1.信息社会责任；2.树立正确的技能观；3.软件工匠精神培养。三、课程目标本着以项目引导，以就业为导向，以培养学生的职业技能为目标、以学生为主体、以项目为载体，将知识、理论和实践一体化的课程设计思路。根据《1+X认证Web前端开发的职业技能等级认证标准》，确定本课程的知识目标、能力目标和素质目标。（一）工作任务目标（1）掌握web知识，掌握HTML常用标签的语法及使用。（2）掌握CSS语法，CSS盒模型。（3）掌握使用DIV标签与CSS进行网页布局的方法与技巧。（4）掌握HTML5新增元素、CSS3新特性知识；（二）职业能力目标（1）能够熟练使用前端设计软件进行网页制作。（2）能够熟练使用HTML标签编写制作网页。（3）能够熟练使用DIV+CSS进行网页布局。（4）具有设计与制作CSS网页特效的能力。（5）能够建立“内容”与“表现”相分离的网页。（6）能够使用CSS和脚本语言实现网页交互效果。（三）素质目标1.职业态度和素质要求（1）培养学生良好的心理品质和职业道德素养；（2）提升学生对社会主义核心价值观的领悟程度；（3）培养学生具有良好的沟通能力、团队协作能力；（4）培养学生具有出色的执行能力和组织能力；（5）培养学生具有自主学习能力和知识应用能力；（6）培养学生能够严守商业秘密的个人品质；（7）培养学生具有一定的知识创新能力。2.思政育人目标（1）将习近平新时代中国特色社会理论、社会主义核心价值观和中华优秀传统文化教育内容融入到本课程的教学要求中，注重“术道结合”；（2）培养学生高度的信息社会责任感。在现实世界和虚拟空间中都能遵守相关法律法规，信守信息社会的道德与伦理准则；具备较强的信息安全意识与防护能力，能有效维护信息活动中个人、他人的合法权益和公共信息安全；关注信息技术创新所带来的社会问题，对信息技术创新所产生的新观念和新事物，能从社会发展、职业发展的视角进行理性的判断和负责的行动。（3）借鉴国内成功实践案例的优秀经验，剖析本行业领军人物的奋斗故事，激发学生对社会主义核心价值观的认同感，培养学生诚实、守信、坚忍不拔的性格，提高学生在沟通表达、自我学习和团队协作方面的能力；（4）树立正确的技能观，努力提高自己的技能，为社会和人民造福，绝不利用自己的技能去从事危害公众利益的活动，包括构造虚假信息和不良内容、黑客行为和攻击网站等，提倡健康的网络道德准则和交流活动，鼓励学生利用自己的所学的专业知识，积极参与社会科学普及活和应用推广活动；（5）培养学生的软件工匠精神，在潜移默化中培育社会主义核心价值观，提高综合职业素养，树立社会主义职业精神。3.项目/任务的思政目标（1）项目1/任务1：培养学生对前端设计师工作岗位及工作过程进行感性认知。通过欣赏各种类型的网站，培养学生的审美观；通过欣赏政府部门的网站，引导学生树立爱国意识；（2）项目1/任务2：理解并敬重工匠精神，在学习中努力发扬工匠精神。（3）项目1/任务3：通过介绍Web相关知识，剖析本行业领军人物的奋斗故事，激发学生对社会主义核心价值观的认同感，培养学生诚实、守信、坚忍不拔的性格；（4）项目1/任务4：通过制作庆祝建党100周年的新闻活动页面，激发学生的爱国热情；（5）项目2/任务1：让学生了解CSS盒模型的重要性，培养学生的职业素质和道德规范；做事认真负责，一丝不苟，每一条语句都经过周密思考，培养学生的软件工匠精神。（6）项目2/任务2：在学习的过程中，培养学生的担当精神，弘扬奋斗的精神，培养学生的职业素质和道德规范；（7）项目2/任务3：通过DIV+CSS框架搭建，引导学生了解职业生涯规划的重要性，培养学生做事有条理，有规划，培养学生的软件工匠精神。（8）项目3/任务1：通过网页布局引导学生充分认识人生规划的意义与重要性，引导学生做好人生规划。同时引导学生追求技术创新，服务国家技术发展。（9）项目3/任务2：通过素材案例引领，激发学生的爱国热情。（10）项目3/任务3：通过利用HTML表单元素制作当前热点“华为事件”的调查问卷页面，激发学生的科技报国的理想信念，并勉励同学们要开阔眼界、提升境界、放眼未来做一个有大格局大情怀的时代新青年。（11）项目3/任务4：引导学生树立安全保密意识，遵守行业规范，提倡健康的网络道德准则和交流活动。（12）项目4/任务1：树立正确的技能观，努力提高自己的技能，为社会和人民造福；加深学生对专业知识技能学习的认可度与专注度。（13）项目4/任务2：培养学生在设计前台界面时的审美能力；提高学生综合运用所学知识的能力。（14）项目4/任务3：培养学生的计算思维、数字化创新与发展、信息社会责任；软件行业规划解析，培养学生的软件工匠精神。（15）项目4/任务4：培养学生的创新思维，融会贯通的能力；培养学生的软件工匠精神。四、课程内容与要求高职院校主要以培养高技能人才为办学定位思想，结合我校具体情况，以现代职教理念为指导，以培养应用型人才为目标，通过采用项目教学法，通过六个项目渐进式教学，培养学生扎实、系统的web前台页面开发能力。最终培养的人才应该具有扎实的基本功，一定的相关专业知识，较强的应用和开发能力，较高的职业素养，以及获取知识的能力，独立思考的能力和创新能力。基于项目的实施工程，进行项目的任务分解，为每个项目确定技能点与知识点。表1课程教学内容、地点、学时安排总表序号项目任务学习成果授课地点授课教师学时/实践学时1项目1Web页面制作基础任务1岗位任知作品机房宋丽萍2/1任务2网站制作流程介绍机房宋丽萍2/1任务3Web相关知识机房宋丽萍4/2任务4HTML基础机房宋丽萍20/102项目2CSS基础任务1CSS盒模型作品机房宋丽萍4/2任务2CSS属性机房宋丽萍12/6任务3DIV+CSS搭建网页框架机房宋丽萍6/33项目3HTML5技术任务1HTML5新增结构化标签作品机房宋丽萍2/1任务2.浮动及媒体元素的插入机房宋丽萍2/1任务3HTML5表单机房宋丽萍4/2任务4HTML5表单表单验证机房宋丽萍6/34项目4CSS3技术任务1CSS3边框与背景作品机房宋丽萍4/2任务2CSS3文本与多列机房宋丽萍4/2任务3CSS3变形机房宋丽萍8/4任务4CSS3动画机房宋丽萍8/4注：学时设置应与2021版人才培养方案保持一致。表2教学内容与教学实施安排表项目一：Web页面制作基础任务1：岗位任知课时：2知识目标技能目标素养目标1.了解网站制作的相关岗位。2.了解网站制作相关岗位所需技能。3.了解网页的基本构成元素4.了解网页的技术构成5.理解网站、网页的概念6.掌握HTML文档的基本结构1.能够了解网页制作相关岗位及岗位所需技能；2.能够了解网页的基本构成元素和技术构成3.能够正确理解网站、网页的概念及web站点的工作原理4.能够熟练编写HTML文档的基本结构培养学生对前端设计师工作岗位及工作过程进行感性认知。通过欣赏各种类型的网站，培养学生的审美观；通过欣赏政府部门的网站，引导学生树立爱国意识；教学重点难点重点：1.网站制作相关岗位所需技能。2.网站、网页的概念；难点：HTML文档的基本结构教学方法案例教学法备注（如上课地点、授课老师等需特殊注明的）任务2：网站制作流程介绍课时：2知识目标技能目标素养目标1.了解网站制作的工作流程2.了解网站开发的工作环境1.能够了解网站制作的工作流程2.能够了解网站开发的工作环境3.会写网站策划书理解并敬重工匠精神，在学习中努力发扬工匠精神。教学重点难点重点：网站制作的工作流程难点：网站策划书的编写教学方法自主探究、任务驱动备注（如上课地点、授课老师等需特殊注明的）任务3.Web相关知识学时：4知识目标技能目标素养目标1.了解Web的由来及其与Internet的关系；2.了解Web的相关概念。1.能够了解Web前端开发所需要掌握的内容；2.能够安装与使用开发软件。通过介绍Web相关知识，剖析本行业领军人物的奋斗故事，激发学生对社会主义核心价值观的认同感，培养学生诚实、守信、坚忍不拔的性格；教学重点难点重点：web的相关概念难点：HBuilder的使用教学方法自主探究、任务驱动备注任务4.HTML基础课时：20知识目标技能目标素养目标1.了解HTML的历史；2.精通HTML的结构3.精通HTML的元素和属性能够熟练使用HTML标签编写网页通过制作庆祝建党100周年的新闻活动页面，激发学生的爱国热情；教学重点难点重点：HTML标签；难点：HTML属性教学方法自主探究、任务驱动备注教学成果项目二：CSS基础任务1CSS盒模型课时：4知识目标技能目标素养目标1.掌握CSS基本语法2.掌握把CSS样式表应用到网页的方法3.了解CSS盒模型4.掌握使用CSS样式设置内边距、外边距和边框的方法能够掌握并使用盒模型技术让学生了解CSS盒模型的重要性，培养学生的职业素质和道德规范；做事认真负责，一丝不苟，每一条语句都经过周密思考，培养学生的软件工匠精神。教学重点难点重点：CSS基本语法难点：CSS盒模型教学方法任务驱动自主探究备注任务2CSS属性课时：12知识目标技能目标素养目标1．掌握使用CSS属性设置背景、文本、列表、表格、表单和链接的方法2.了解CSS定位的基本概念3.掌握CSS浮动的设置4.掌握CSS绝对定位和相对定位的方法1.能够熟练使用CSS技术对页面元素进行格式化2.能够正确使用CSS定位技术对页面元素进行绝对定位和相对定位在学习的过程中，培养学生的担当精神，弘扬奋斗的精神，培养学生的职业素质和道德规范；教学重点难点重点：CSS常用属性难点：CSS浮动、定位教学方法任务驱动自主探究备注任务3DIV+CSS搭建网页框架课时：6知识目标技能目标素养目标1.了解块级元素、行内元素的区别；2.掌握DIV+CSS进行网页框架搭建的方法能够利用DIV+CSS技术进行网页框架搭建通过DIV+CSS框架搭建，引导学生了解职业生涯规划的重要性，培养学生做事有条理，有规划，培养学生的软件工匠精神。教学重点难点重点：块级元素、行内元素的特点难点：DIV+CSS搭建网页框架教学方法任务驱动自主探究备注项目三：HTML5技术任务1HTML5新增结构化标签课时：2知识目标技能目标素养目标1.了解HTML5中新增的文档结构标签。2.掌握网页布局的方法。能够综合运用HTML5新增的结构化标签进行网页布局设计，学会自主发现、自主探索的学习方法，学会正确评价作品。1.充分认识人生规划的意义与重要性，引导学生做好人生规划。2.引导学生追求技术创新，服务国家技术发展。教学重点难点重点：HTML5新增文档结构标签难点：利用HTML5新增的结构化标签进行网页布局设计。教学方法任务驱动、主动探究备注任务2浮动及媒体元素的插入课时：2知识目标技能目标素养目标1.了解float属性的应用。2.掌握网页中音视频的插入方法。1.能够理解元素浮动引起“塌陷”的原因及解决办法。2.能够利用audio和video标签在网页中插入音视频。通过素材案例引领，激发学生的爱国热情。教学重点难点教学重点：1.元素浮动引起“塌陷”的原因及解决办法。2.audio和video标签。教学难点：元素浮动引起“塌陷”的原因及解决办法。教学方法任务驱动、主动探究备注任务3HTML5表单课时：4知识目标技能目标素养目标1.掌握创建表单的HTML标记。2.掌握表单的CSS样式控制。能够设计制作表单页面。通过利用HTML表单元素制作当前热点“华为事件”的调查问卷页面，激发学生的科技报国的理想信念，并勉励同学们要开阔眼界、提升境界、放眼未来做一个有大格局大情怀的时代新青年。教学重点难点重点：创建表单的HTML标记。难点：表单的CSS样式控制。教学方法任务驱动自主探究备注任务4：HTML5表单验证课时：6知识目标技能目标素养目标1.掌握HTML5表单控件新增的属性。2.掌握表单验证的设置方法。能够对表单页面设置验证属性，增强其安全性。引导学生树立安全保密意识，遵守行业规范，提倡健康的网络道德准则和交流活动。教学重点难点重点：HTML5表单控件新增的属性。难点：表单验证设置中正则表达式的定义方法。教学方法任务驱动法、实践演示法。备注项目四CSS3技术任务1CSS3边框与背景课时：4知识目标技能目标素养目标1.掌握CSS3新增的边框属性2.掌握CSS3新增的背景属性能够使用CSS3新增的边框属性创建美化边框。树立正确的技能观，努力提高自己的技能，为社会和人民造福；加深学生对专业知识技能学习的认可度与专注度。教学重点难点重点：CSS3新增的边框属性难点：CSS3新增的背景属性教学方法任务驱动式自主探究备注任务2CSS3文本与多列课时：4知识目标技能目标素养目标1.掌握CSS3文本属性的应用2.掌握CSS3字体效果的应用3.掌握CSS3多列1.能够使用CSS3技术实现各种文字特效；2.能够使用CSS3多列实现仿报纸排版效果。培养学生在设计前台界面时的审美能力；提高学生综合运用所学知识的能力。教学重点难点重点：text—shadow属性的应用难点：CSS3多列属性教学方法任务驱动自主探究备注任务3CSS3变形课时：8知识目标技能目标素养目标1.掌握transform属性能够实现的变形类型；2.掌握平移、旋转、缩放、翻转四种变形属性能够利用CSS3变形属性和方法实现图形的变换培养学生的计算思维、数字化创新与发展、信息社会责任；软件行业规划解析，培养学生的软件工匠精神。教学重点难点重点：Transform属性实现平移、旋转、缩放、翻转变形难点：3D转换教学方法任务驱动自主探究备注任务4CSS3动画课时：8知识目标技能目标素养目标1.掌握CSS3中的transition过渡动画效果的应用2.掌握CSS3中的animation动画效果的应用能够使用CSS3的变形与动画属性实现炫酷的动画效果。培养学生的创新思维，融会贯通的能力；培养学生的软件工匠精神。教学重点难点重点：CSS3中的transition过渡动画效果的应用难点：CSS3中的animation动画效果的应用教学方法任务驱动自主探究备注注：在“项目/任务设计”中，要增加课程思政的案例，课程思政元素的融入应不少于每门课程总学时的20%。五、课程实施（一）教材选用或编写1.推荐教材Web前端开发（初级）工业和信息化教育与考试中心主编中国工信出版集团2.教学参考资料职教云平台的资源库课程资源3.教材编写体例建议教材编写应遵循“适用、实用、够用”的原则1）适用：教材要以讲解HTML、CSS、javascript、jQuery技术为主，符合课程能力要求及本课程的培养目标；2）实用：教材应以真实项目为载体，按照实际开发过程组织编写内容，强调理论与实践结合的项目化教材，便于实现“理实一体”教学，符合高职学生培养要求。3）够用：教材应选择难度适宜，内容符合本课程标准要求的教材。（二）教学方法与手段建议教学方法：在本课程教学中，教学方法的选取应强调突出现代高等职业教育的特色，把现德育思想和课程的具体内容相结合，创造性的开展教学，根