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

工程科技学院课程类别(模块)前导课程网站开发与管理总学时课程类型理论课是□总学分5实践课是□考核性质理论+实践是口理实一体化计算机应用表2课程标准开发团队名单序号姓名工作单位注':指参与课程标准制定的主要成员，包括校外专家二、课程定位和课程设计(一)课程性质与作用本课程是计算机应用技术专业的职业核心技术模块课程之一，是基于工作过程系统化的课程，是一门实践性和应用性都很强的课程。为计算机应用技术专业学生将来从事职场的web前端开发岗位的发展打下良好基础，并为该专业后续网站开发与管理的学习打下网(二)课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以项目引导，以就业为导向”,打破了传统的按照知识体系教授课程的模式，以学生日后在从事Web前端开发行业中所需的实际技能为目标，进行基于工作项目和工作任务的课程开发与设计，既保证满足从事网站前端开发所必须的专业知识、专业技能，又保持原有知识体系的完整性，既培养了学生(三)课程设计思路(一)工作任务目标(1)掌握web知识，掌握HTML常用标签的语法及使用。(二)职业能力目标(1)能够熟练使用前端设计软件进行网页制作。(3)能够熟练使用DIV+CSS进行网页布局。(4)具有设计与制作CSS网页特效的能力。(5)能够建立“内容”与“表现”相分离的网页。(6)能够使用CSS和脚本语言实现网页交互效果。(三)素质目标(1)培养学生良好的心理品质和职业道德素养；(2)提升学生对社会主义核心价值观的领悟程度；(3)培养学生具有良好的沟通能力、团队协作能力；(4)培养学生具有出色的执行能力和组织能力；(5)培养学生具有自主学习能力和知识应用能力；(6)培养学生能够严守商业秘密的个人品质；(7)培养学生具有一定的知识创新能力。(1)将习近平新时代中国特色社会理论、社会主义核心价值观和中华优秀传统文化(2)培养学生高度的信息社会责任感。在现实世界和虚拟空间中都能遵守相关法律(3)借鉴国内成功实践案例的优秀经验，剖析本行业领军人物的奋斗故事，激发学(4)树立正确的技能观，努力提高自己的技能，为社会和人民造福，绝不利用自己(5)培养学生的软件工匠精神，在潜移默化中培育社会主义核心价值观，提高综合(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:引导学生树立安全保密意识，遵守行业规范，提倡健康的网络(13)项目4/任务2:培养学生在设计前台界面时的审美能力；提高学生综合运用所(14)项目4/任务3:培养学生的计算思维、数字化创新与发展、信息社会责任；(15)项目4/任务4:培养学生的创新思维，融会贯通的能力；培养学生的软件工匠表1课程教学内容、地点、学时安排总表序号任务学习成果地点教师实践学时1项目1基础任务1岗位任知作品机房宋丽萍任务2网站制作流程介绍机房宋丽萍机房宋丽萍机房宋丽萍2项目2任务1CSS盒模型作品机房宋丽萍机房宋丽萍任务3DIV+CSS搭建网页框架机房宋丽萍3项目3作品机房宋丽萍机房宋丽萍机房宋丽萍机房宋丽萍4作品机房宋丽萍任务2CSS3文本与多列机房宋丽萍机房宋丽萍任务4CSS3动画机房宋丽萍注：学时设置应与2021版人才培养方案保持一致。任务1:岗位任知课时：2知识目标素养日标1.了解网站制作的相关岗位。2.了解网站制作相关岗位3.了解网页的基本构成元素5.理解网站、网页的概念6.掌握HTML文档的基本结构1.能够了解网页制作相关岗位及岗位所需技能：2.能够了解网页的基本构成元素和技术构成3.能够正确理解网站、网页的概念及web文档的基本结构培养学生对前端设计师工作岗位及工作过程进行感性认知。通过欣赏各种类型的网站，培养学生的审美观；通过欣赏政府部门的网站，引导学生树立爱国意识；教学重点难点重点：1.网站制作相关岗位所需技能。2.网站、网页的概念；难点：HTML文档的基本结构教学方法备注(如上课地点、授课老师等需特殊注明的)任务2:网站制作流程介绍课时：2知识目标素养目标1.了解网站制作的工作流程2.了解网站开发的工作环境1.能够了解网站制作的工作流程2.能够了解网站开发的工作环境3.会写网站策划书教学重点难点难点：网站策划书的编写教学方法自主探究、任务驱动备注(如上课地点、授课老师等需特殊注明的)知识目标素养目标1.了解Web的由来及其与Internet的关系；2.了解Web的相关概念。1.能够了解Web前端开发所需要掌握的内容；2.能够安装与使用开军人物的奋斗故事，激发学生对社会主义核心价值观的认同感，培养学生诚实、守信、坚忍不拔的性格；教学重点难点难点：HBuilder的使用自主探究、任务驱动备注任务4.HTML基础知识日标素养目标1.了解HTML的历史；2.精通HTML的结构3.精通HTML的元素和属性能够熟练使用HTML标签编写网页通过制作庆祝建党100周年的新闻活动页面，激发学生的爱国热情；教学重点难点重点：HTML标签；自主探究、任务驱动备注教学成果项目二：CSS基础知识目标素养目标1.掌握CSS基本语法2.掌握把CSS样式表应用到网页的方法3.了解CSS盒模型能够掌握并使用盒模型技术学生的职业素质和道德规范；做事认真内边距、外边距和边框的教学重点难点难点：CSS盒模型教学方法备注课时：12知识目标素养目标2.了解CSS定位的基本3.掌握CSS浮动的设置4.掌握CSS绝对定位和相1.能够熟练使用CSS技术对页面元素进行格式化2.能够正确使用CSS定位技术对页面元素进行绝对定位和相对定位在学习的过程中，培养学生的担当精素质和道德规范；教学重点难点教学方法备注任务3DIV+CSS搭建网页框架知识目标素养目标1.了解块级元素、行内元素的区别；2.掌握DIV+CSS进行网页能够利用DIV+CSS技术教学重点难点重点：块级元素、行内元素的特点难点：DIV+CSS搭建网页框架教学方法备注课时：2知识目标素养目标1.了解HTML5中新增的文2.掌握网页布局的方法。能够综合运用HTML5新教学重点难点重点：HTML5新增文档结构标签难点：利用HTML5新增的结构化标签进行网页布局设教学方法任务驱动、主动探究备注课时：2知识目标素养目标1.了解float属性的应用。2.掌握网页中音视频的插入方法。1.能够理解元素浮动引起“塌陷”的原因及解决办法。2.能够利用audio和video标签在网页中插入音视频。教学重点难点教学重点：1.元素浮动引起“塌陷”的原因及解决办2.audio和video标签。教学难点：元素浮动引起“塌陷”的原因及解决办教学方法任务驱动、主动探究备注知识目标素养目标1.掌握创建表单的HTML标记。2.掌握表单的CSS样式控通过利用HTML表单元素制作当前热点制。教学重点难点教学方法备注课时：6知识目标素养目标1.掌握HTML5表单控件新2.掌握表单验证的设置方法。能够对表单页面设置验证属性增强其安全性。教学重点难点重点：HTML5表单控件新增的属性。难点：表单验证设置中正则表达式的定义方法。教学方法备注项目四CSS3技术任务1CSS3边框与背景知识目标素养目标1.掌握CSS3新增的边框属性2.掌握CSS3新增的背景属性能够使用CSS3新增的边教学重点难点教学方法备注任务2CSS3文本与多列知识目标素养目标1.掌握CSS3文本属性的应用2.掌握CSS3字体效果的应用3.掌握CSS3多列1.能够使用CSS3技术实现各种文字特效；2.能够使用CSS3多列实现仿报纸排版效果。培养学生在设计前台界面时的审美能力；提高学生综合运用所学知识的能力。教学重点难点重点：text—shadow属性的应用教学方法任务驱动自主探究备注课时：8知识目标素养目标1.掌握transform属性能够实现的变形类型；能够利用CSS3变形属性和方法实现图形的变换培养学生的计算思维、数字化创新与教学重点难点重点：Transform属性实现平移、旋转、缩放、翻转变形教学方法任务驱动自主探究备注任务4CSS3动画课时：8知识目标素养目标1.掌握CSS3中的transition过渡动画效果的应用animation动画效果的应用能够使用CSS3的变形与动画属性实现炫酷的动画效果培养学生的创新思维，融会贯通的能力；培养学生的软件工匠精神。教学重点难点重点：CSS3中的transition过渡动画效果的应用难点：CSS3中的animation动画效果的应用教学方法任务驱动自主探究备注注：在“项目/任务设计”中，要增加课程思政的案例，课程思政元素的融入应不少(一)教材选用或编写Web前端开发(初级)工业和信息化教育与考试中心主编中国工信出版集团1)适用：教材要以讲解HTML、CSS、javascript