《web前端技术》课程标准

《Web前端技术》课程标准【课程名称】 【课程编码】【课程类别】专业必修课 【适用专业】【授课单位】 【总学时】64（32理论+32实验）【教材】赵敏、刘三满、张振寰，《Web前端技术》，航空工业出版社,2022年5月【编写执笔人】 【编写日期】 1．课程定位和课程设计1.1课程制定依据近年来，在网络基础设施及5G终端加速普及、互联网技术日趋成熟等利好因素的推动下，网络在人们的生活中发挥着越来越重要的作用，越来越多的企业开始重视企业网站建设。一个设计精良的企业网站不仅能够提升企业形象，还可以宣传企业热门服务，拓展企业业务等。因此，Web前端技术也成了当前比较热门的学科或专业之一。为了培养符合企业需求的Web前端开发人员，我们参考多所院校的人才培养方案，并结合Web前端相关岗位的实际需要开设了本课程。1.2课程性质与作用课程性质：《Web前端技术》是软件工程专业培养课程体系中的一门专业必修课程，其包含了软件行业Web开发领域的关键技术基础知识（HTML5，CSS及JavaScript等）。该课程的设置充分考虑了其在Web开发领域的关键性作用、目前市场广泛的应用需求和良好的就业前景，注重学生对理论基础知识、专业技能的理解、掌握。课程作用：通过本课程的学习，使学生理解HTML5、CSS及JavaScript等基本的理论知识；掌握应用上述理论知识，制作基本网页、设计网页布局、实现多样化及良好客户体验的页面效果等应用技能；培养学生的创新意识，设计特色网页。1.3课程设计思路本课程从实际工作出发，通过丰富多彩的案例和实战，系统讲解Web前端的相关知识；学生可以在课程的学习中顺着知识点的脉络逐渐完善案例的各个模块，过关斩将，最终实现美观、实用的网页效果。此外，最后以企业网站的建设为例，简明清晰地介绍了网站开发的实际流程与常见网页的制作方法，既有助于学生理解知识点，又具有启发性和实用性，让学生能够学有所用。2．课程目标2.1知识目标（1）了解本课程内容在Web开发领域的定位与作用；（2）了解HTML5、CSS及JavaScript技术的发展脉络、趋势及应用前景；（3）掌握HTML5中的基本元素、文字与段落元素、图像元素、列表元素、表格元素、超链接元素、多媒体元素、框架元素及表单元素的语法、属性和参数等基础知识；（4）掌握CSS中元素的语法、属性和参数等基础知识；（5）了解网页布局的几种方法，掌握使用CSS进行网页布局、样式设计的基础知识；（6）掌握JavaScript中的基本语法知识；（7）掌握JavaScript进行提交内容校验、生成网页特效等方法。2.2能力目标（1）具备使用HTML5制作包含基本内容的网页的能力；（2）具备使用HTML5及CSS等技术来设计网页布局的能力；（3）具备使用JavaScript技术来提高网页交互性、体验性的能力；（4）具备综合使用HTML5、CSS与JavaScript的相关知识，来丰富、渲染网页的能力；（5）具备根据具体应用需求，创新性地设计网页的能力。2.3素质目标（1）培养学生具备克服困难解决问题的意志；（2）培养学生养成严谨认真的科学态度，耐心细致的工作作风；（3）培养学生具备良好的交流沟通素养和创新精神。3．课程内容与教学要求3.1课程安排本课程内容分为14个章节，包括Web前端开发基础，HTML5基础，文本、图像、多媒体和列表，超链接、表格和表单，CSS3基础，CSS3的常用属性，CSS3布局，JavaScript基础，HTML5基础，函数、对象和数组，DOM和BOM，事件，jQuery基础以及创建WJ自制女装品牌店网站，内容包括其教学要求和课时分配如表1所示。表1《Web前端技术》课程要求及课时分配表章节课程名称教学内容教学要求课时分配1Web前端开发基础网站开发基础知识Web前端技术概述Web前端开发工具实战演练——使用HBuilderX创建“金企鹅教育”项目（1）了解网站与网页（2）初步了解Web前端技术（3）熟悉Web前端开发工具（4）掌握HTML5的基础知识，培养代码规范意识（5）提升实践动手能力22HTML5基础（1）HTML5的基本语法（2）HTML5的文档结构（3）HTML5的结构标签实战演练——创建“金企鹅教育”网站主页（1）掌握HTML5的基本语法（2）熟悉HTML5的文档结构（3）熟悉HTML5的结构标签（4）加强对互联网信息时代的了解（5）培养专业技能，夯实基础23文本、图像、多媒体和列表（1）文本（2）图像实战演练——制作“金企鹅教育”主页“精品图书”模块（3）多媒体实战演练——制作“金企鹅教育”主页“企业宣传”模块3.4列表实战演练——制作“金企鹅教育”主页“教育资讯”模块（1）掌握标题和段落标签的使用方法（2）熟悉文本格式化标签的使用方法和特殊字符的表示方法（3）了解网页中图像格式和路径的表示方法，掌握图像、图标和流标签的使用方法（4）掌握在网页中嵌入音频和视频文件的方法（5）掌握无序列表、有序列表和自定义列表标签的使用方法，熟悉列表嵌套的实现方法44超链接、表格和表单（1）超链接（2）表格实战演练———制作“云课堂”页面的“精品课程”模块（3）表单实战演练——制作“金企鹅教育”网站的登录页面（1）掌握超链接标签的使用方法，熟悉不同类型的超链接（2）掌握表格标签的使用方法，熟悉表格的常用属性（3）掌握表单标签的使用方法和表单控件的设置方法，熟悉表单控件的属性45CSS3基础（1）CSS3的基本语法（2）在网页中引入CSS3样式（3）CSS3选择器（4）CSS3的继承性和层叠性实战演练————为“金企鹅教育”网站主页链接样式表（1）掌握CSS3的基本语法（2）掌握在网页中引入CSS3样式的方式，包括行内样式、内嵌样式表和链接样式表（3）熟悉CSS3选择器的含义，掌握不同种类选择器的使用方法（4）熟悉CSS3的特性，包括继承性、层叠性和优先级46CSS的常用属性（1）文本属性（2）图像属性实战演练——美化“金企鹅教育”主页“精品图书”模块（3）列表属性实战演练——美化“金企鹅教育”主页“教育资讯”模块（4）超链接属性实战演练——美化“金企鹅教育”网站主页的导航栏（5）表格属性实战演练——美化“云课堂”页面的“精品课程”模块（6）表单属性实战演练——美化“金企鹅教育”网站的登录页面（1）掌握设置字体样式和文本格式的相关属性（2）掌握设置网页图像和背景样式的相关属性（3）掌握设置列表、超链接、表格和表单样式的相关属性67CSS布局（1）盒子模型（2）元素的排版（3）常见的布局版式实战演练——布局“金企鹅教育”网站PC端主页（4）响应式布局实战演练——布局“金企鹅教育”网站移动端主页（1）掌握盒子模型的相关知识，包括盒子模型的基本结构和属性，以及不同类型元素的盒子模型（2）掌握元素的排版，包括标准流排版、浮动排版和定位排版（3）熟悉常见的布局版式，包括单列、双列、三列和综合版式（4）掌握响应式布局的实现方法48CSS高级应用（1）变形效果（2）过渡效果（3）动画效果实战演练——制作北极熊走路动画片段（1）熟悉变形效果的相关知识，包括变形属性、2D变形和3D变形（2）熟悉过渡效果的相关属性，了解常见过渡效果的应用场景及触发方式（3）熟悉关键帧和动画效果的相关属性，能够制作动画片段49JavaScript基础（1）JavaScript的基本语法（2）在网页中引入JavaScript实战演练——为“金企鹅教育”网站主页链接js文件（3）变量（4）数据类型（5）运算符（6）流程控制语句实战演练——计算银行存款收益（1）熟悉JavaScript的基本语法。（2）掌握在网页中引入JavaScript的方式，包括内嵌式、外链式和行内式。（3）熟悉变量的声明与赋值，以及变量的作用域。（4）掌握JavaScript中的数据类型、运算符和流程控制语句。610函数、对象和数组（1）函数实战演练——判断某一年是否为闰年（2）对象（3）数组（1）掌握函数的定义和调用方法，熟悉嵌套函数和递归函数。（2）掌握对象的创建和访问方法，熟悉常用的内置函数。（3）掌握数组的定义和数组元素的操作，熟悉数组的属性和方法。611DOM和BOM（1）DOM（2）BOM实战演练——实现线上点菜功能（1）了解DOM，熟悉HTML元素操作和DOM节点操作的属性和方法。（2）了解BOM，熟悉window对象、location对象、history对象、navigator对象和screen对象的属性和方法。412事件（1）事件概述（2）事件绑定（3）事件对象（4）常见事件类型（5）事件优化实战演练——制作“金企鹅教育”主页的轮播图（1）熟悉事件与事件流，掌握事件绑定方式和事件对象的常用属性和方法。（2）熟悉常见的事件类型，包括鼠标事件、键盘事件、焦点事件和页面事件。（3）了解事件优化方式，包括事件委托和事件删除。613jQuery（1）jQuery基础（2）jQuery选择器（3）jQuery操作元素（4）jQuery的事件处理（5）jQuery的动画效果实战演练——制作自动隐藏式菜单（1）了解jQuery，熟悉下载和配置jQuery的方法。（2）熟悉jQuery选择器、jQuery对网页元素进行的操作、jQuery的时间处理。（3）掌握jQuery的动画效果，包括元素的隐藏与显示、元素的淡入淡出和元素的滑动效果等。614创建WJ自制女装品牌店网站（1）站点规划和创建（2）制作主页（3）制作全部商品页（4）制作购物车页（5）制作登录页（1）熟悉Web前端技术的应用。

（2）锻炼实践能力，提升工作竞争力。6合计644．课程实施4.1教学条件我校十分注重建设和完善本课程的教学设施，如多媒体教室、机房、网络教学平台、网络数据库等。同时，我校有一支强大的师资队伍，可以为本课程的教学出谋划策。4.2教学方法建议本课程遵循“教师引导，学生为主”的原则，采用讲解、多媒体演示、场景模拟法、讨论、翻转课堂等多种方法，努力为学生创设更多知识应用的机会。讲解法：主要用于讲授Web前端技术基础知识、行业岗位知识等理论性较强的知识。多媒体演示法：在讲解过程中，借助音频、视频、图片等直观手段来呈现教学内容，在激发其学习兴趣和积极性的同时，不断提高其知识储备能力和综合文化素质。场景模拟法：针对所教内容布置任务，引导学生通过情景化的模拟训练来提升知识的实际应用能力和职业素养。讨论法：根据知识点，鼓励学生运用所学知识进行主题讨论，使其在讨论中逐步提升交际能力、思辨能力、解决实际问题的能力等。翻转课堂法：坚持学生的主体地位，鼓励学生在课上对自己学到的知识点进行分享和讲解，并对其讲解进行补充和评价，不断完善学生的知识结构，加深其对所学知识的理解。教师在教学过程中，可根据学生的实际情况灵活选用教学方法，因材施教，尽量照顾到每一个学生的学习需求。4.3教学评价与考核要求课程的教学评价由形成性测评（40%）和终结性测评（60%）组成，其考核要求如下：4.3.1形成性测评形成性测评考核学生在学习本课程过程中的学习情况和实际应用能力的发展情况，包括出勤考核（10%）、课堂参与程度考核（10%）、作业完成质量考核（20%）等。（1）出勤考核本项考核通过课前点名考核学生的课堂出勤率。迟到15分钟以内每次扣1分，迟到15分钟以上或无故缺勤一节课每次扣2分，该项考核累计最多扣10分。（2）课堂参与程度考核本项考核主要通过课堂提问和课堂积极发言来评判学生的学习态度、学习主动性、课堂参与程度，以及学生的思辨能力、问题解决能力及其对课堂教学知识的掌握情况等。只要学生能按时上课听讲，即可获得5分的基本分。学生上课发言一次，即可另外获得0.5分，课堂发言最多可得5分。学生的最后成绩为“5+课堂发言得分”。（3）作业完成质量考核本项考核主要通过学生作业来检测其对教学主体内容的掌握与理解程度、实际应用知识的能力、自主学习能力、信息收集与处理能力等。每次作业成绩按照相应标准而定，学生作业质量划分为优秀（10分）、良好（8分）、中等（7分）、及格（6分）和不及格（0分）五个档次。最后的作业成绩为学生作业完成质量成绩的平均数。4.3.2终结性测评终结性测评主要考核学生在学完本课程后所达到的水平，通过期末考试进行考核。期末考试由论文考试（60%）组成，主要评估学生对本门课程基本知识的掌握情况与综合运用能力。5．课程资源开发与利用5.1教材