《web前端技术》课程标准.docx

《《web前端技术》课程标准.docx》由会员分享，可在线阅读，更多相关《《web前端技术》课程标准.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web前端技术课程标准【课程名称】【课程类别】专业必修课【授课单位】【教 材】【编写执笔人】【课程编码】【适用专业】【总 学 时】64 （32理论+32实验）【编写日期】1-课程定位和课程设计1.1 课程制定依据近年来，在网络基础设施及5G终端加速普及、互联网技术日趋成熟等利好因素的推 动下，网络在人们的生活中发挥着越来越重要的作用，越来越多的企业开始重视企业网站建 设。一个设计精良的企业网站不仅能够提升企业形象，还可以宣传企业热门服务，拓展企业 业务等。因此，Web前端技术也成了当前比较热门的学科或专业之一。为了培养符合企业 需求的Web前端开发人员，我们参考多所院校的人才培养方案，并结合W

2、eb前端相关岗 位的实际需要开设了本课程。1.2 课程性质与作用课程性质：Web前端技术是软件工程专业培养课程体系中的一门专业必修课程， 其包含了软件行业Web开发领域的关键技术基础知识（HTML5, CSS及JavaScript等）。该 课程的设置充分考虑了其在Web开发领域的关键性作用、目前市场广泛的应用需求和良好 的就业前景，注重学生对理论基础知识、专业技能的理解、掌握。课程作用：通过本课程的学习，使学生理解HTML5、CSS及JavaScript等基本的理论知 识；掌握应用上述理论知识，制作基本网页、设计网页布局、实现多样化及良好客户体验的 页面效果等应用技能；培养学生的创新意识，设计

3、特色网页。1.3 课程设计思路本课程从实际工作出发,通过丰富多彩的案例和实战，系统讲解Web前端的相关知识； 学生可以在课程的学习中顺着知识点的脉络逐渐完善案例的各个模块，过关斩将，最终实现 美观、实用的网页效果。此外，最后以企业网站的建设为例，简明清晰地介绍了网站开发的 实际流程与常见网页的制作方法，既有助于学生理解知识点，又具有启发性和实用性，让学 生能够学有所用。2 .课程目标2.1 知识目标（1）了解本课程内容在Web开发领域的定位与作用；2.2 了解HTML5、CSS及JavaScript技术的发展脉络、趋势及应用前景；（3）掌握HTML5中的基本元素、文字与段落元素、图像元素、列表

4、元素、表格元素、 超链接元素、多媒体元素、框架元素及表单元素的语法、属性和参数等基础知识；（4）掌握CSS中元素的语法、属性和参数等基础知识；2.3 了解网页布局的几种方法，掌握使用CSS进行网页布局、样式设计的基础知识；（6）掌握JavaScript中的基本语法知识；（7）掌握JavaScript进行提交内容校验、生成网页特效等方法。2.4 能力目标（1）具备使用HTML5制作包含基本内容的网页的能力；（2）具备使用HTML5及CSS等技术来设计网页布局的能力；（3）具备使用JavaScript技术来提高网页交互性、体验性的能力；（4）具备综合使用HTML5、CSS与JavaScript的相

5、关知识，来丰富、渲染网页的能力;（5）具备根据具体应用需求，创新性地设计网页的能力。2.5 素质目标（1）培养学生具备克服困难解决问题的意志；（2）培养学生养成严谨认真的科学态度，耐心细致的工作作风；（3）培养学生具备良好的交流沟通素养和创新精神。3 .课程内容与教学要求3.1 课程安排本课程内容分为14个章节，包括Web前端开发基础，HTML5基础，文本、图像、多媒 体和列表，超链接、表格和表单,CSS3基础，CSS3的常用属性，CSS3布局，JavaScript基础， HTML5基础，函数、对象和数组，DOM和BOM,事件，jQuery基础以及创建WJ自制女装 品牌店网站，内容包括其教学要

6、求和课时分配如表1所示。表1Web前端技术课程要求及课时分配表章节课程名称教学内容教学要求课时分配1Web前端 开发基础(1)网站开发基础知识(2) Web前端技术概述(3) Web前端开发工具 实战演练使用HBuilderX创建 “金企鹅 教育”项目(1)了解网站与网页(2)初步了解Web前端 技术(3)熟悉Web前端开发 工具(4)掌握HTML5的基础 知识，培养代码规范意识(5)提升实践动手能力22HTML5基础(1) HTML5的基本语法(2) HTML5的文档结构(3) HTML5的结构标签 实战演练一一创建“金企 鹅教育”网站主页(1)掌握HTML5的基本 语法(2)熟悉HTML5

7、的文档 结构(3)熟悉HTML5的结构 标签(4)加强对互联网信息时 代的了解(5)培养专业技能，夯实 基础23文本、图 像、多媒体 和列表(1)文本(2)图像实战演练一一制作“金企 鹅教育”主页“精品图书” 模块(3)多媒体实战演练一一制作“金企 鹅教育”主页“企业宣传” 模块3.4列表实战演练一一制作“金企 鹅教育”主页“教育资讯” 模块(1)掌握标题和段落标签 的使用方法(2)熟悉文本格式化标签 的使用方法和特殊字符的 表示方法(3) 了解网页中图像格式 和路径的表示方法，掌握图 像、图标和流标签的使用方 法(4)掌握在网页中嵌入音 频和视频文件的方法(5)掌握无序列表、有序 列表和自定

8、义列表标签的 使用方法，熟悉列表嵌套的 实现方法44超链接、表 格和表单(1)超链接(2)表格实战演练制作“云课堂”页面的“精品课程” 模块(3)表单实战演练一一制作“金企 鹅教育”网站的登录页面(1)掌握超链接标签的使 用方法，熟悉不同类型的超 链接(2)掌握表格标签的使用 方法，熟悉表格的常用属性(3)掌握表单标签的使用 方法和表单控件的设置方 法，熟悉表单控件的属性45CSS3基础(1) CSS3的基本语法(2)在网页中引入CSS3(1)掌握CSS3的基本语 法4样式（3） CSS3选择器（4） CSS3的继承性和层 叠性实战演练为“金企鹅教育”网站主页链接 样式表（2）掌握在网页中引入

9、 CSS3样式的方式，包括行 内样式、内嵌样式表和链接 样式表（3）熟悉CSS3选择器的 含义，掌握不同种类选择器 的使用方法（4）熟悉CSS3的特性， 包括继承性、层叠性和优先 级6CSS的常用 属性（1）文本属性（2）图像属性实战演练一一美化“金企 鹅教育”主页“精品图书” 模块（3）列表属性实战演练一一美化“金企 鹅教育”主页“教育资讯” 模块（4）超链接属性实战演练一一美化“金企 鹅教育”网站主页的导航 栏（5）表格属性实战演练一一美化“云课 堂:页面的“精品课程” 模块（6）表单属性实战演练一一美化“金企 鹅教育”网站的登录页面（1）掌握设置字体样式和 文本格式的相关属性（2）掌握设

10、置网页图像和 背景样式的相关属性（3）掌握设置列表、超链 接、表格和表单样式的相关 属性67CSS布局（1）盒子模型（2）元素的排版（3）常见的布局版式实战演练一一布局“金企 鹅教育”网站PC端主页（4）响应式布局实战演练一一布局“金企 鹅教育”网站移动端主页（1）掌握盒子模型的相关 知识，包括盒子模型的基本 结构和属性，以及不同类型 元素的盒子模型（2）掌握元素的排版，包 括标准流排版、浮动排版和 定位排版（3）熟悉常见的布局版式， 包括单列、双列、三列和综 合版式（4）掌握响应式布局的实 现方法48css高级应用（1）变形效果（2）过渡效果（1）熟悉变形效果的相关 知识，包括变形属性、2D

11、变4(3)动画效果实战演练一一制作北极熊走路动画片段形和3D变形(2)熟悉过渡效果的相关 属性，了解常见过渡效果的 应用场景及触发方式(3)熟悉关键帧和动画效 果的相关属性，能够制作动 画片段9JavaScript基础(1) JavaScript 的基本语 法(2 )在网页中引入 JavaScript实战演练 为“金企鹅 教育”网站主页链接js文 件(3)变量(4)数据类型(5)运算符(6)流程控制语句实战演练一一计算银行存 款收益(1)熟悉JavaScript的基本 语法。(2)掌握在网页中引入 JavaScript的方式，包括内嵌 式、外链式和行内式。(3)熟悉变量的声明与赋 值，以及变量

12、的作用域。(4)掌握JavaScript中的数 据类型、运算符和流程控制 语句。610函数、对象 和数组(1)函数实战演练判断某一年是否为闰年(2)对象(3)数组(1)掌握函数的定义和调 用方法，熟悉嵌套函数和递 归函数。(2)掌握对象的创建和访 问方法，熟悉常用的内置函 数。(3)掌握数组的定义和数 组元素的操作，熟悉数组的 属性和方法。611DOM 和BOM(1) DOM(2) BOM实战演练一一实现线上点 菜功能(1 ) 了解DOM ,熟悉 HTML元素操作和 DOM 节点操作的属性和方法。(2 ) 了解BOM ,熟悉 window 对象、location 对 象、history 对象、

13、navigator 对象和screen对象的属性 和方法。412事件(1)事件概述(2)事件绑定(3)事件对象(4)常见事件类型(5)事件优化实战演练一一制作“金企(1)熟悉事件与事件流， 掌握事件绑定方式和事件 对象的常用属性和方法。(2)熟悉常见的事件类型， 包括鼠标事件、键盘事件、 焦点事件和页面事件。6鹅教育”主页的轮播图(3) 了解事件优化方式， 包括事件委托和事件删除。13jQuery(1) jQuery 基础(2) jQuery选择器(3) jQuery操作元素(4) jQuery的事件处理(5) jQuery的动画效果实战演练一一制作自动隐 藏式菜单(1)了解jQuery,熟悉

14、下 载和配置jQuery的方法。(2)熟悉jQuery选择器、 jQuery对网页元素进行的 操作、jQuery的时间处理。(3)掌握jQuery的动画效 果，包括元素的隐藏与显 示、元素的淡入淡出和元素 的滑动效果等。614创建WJ自 制女装品 牌店网站(1)站点规划和创建(2)制作主页(3)制作全部商品页(4)制作购物车页(5)制作登录页(1)熟悉Web前端技术 的应用。(2)锻炼实践能力，提升 工作竞争力。6合计644 .课程实施4.1 教学条件我校十分注重建设和完善本课程的教学设施，如多媒体教室、机房、网络教学平台、网 络数据库等。同时，我校有一支强大的师资队伍，可以为本课程的教学出谋

15、划策。4.2 教学方法建议本课程遵循“教师引导，学生为主”的原则，采用讲解、多媒体演示、场景模拟法、讨 论、翻转课堂等多种方法，努力为学生创设更多知识应用的机会。讲解法：主要用于讲授Web前端技术基础知识、行业岗位知识等理论性较强的知识。多媒体演示法：在讲解过程中，借助音频、视频、图片等直观手段来呈现教学内容，在 激发其学习兴趣和积极性的同时，不断提高其知识储备能力和综合文化素质。场景模拟法：针对所教内容布置任务，引导学生通过情景化的模拟训练来提升知识的实 际应用能力和职业素养。讨论法：根据知识点，鼓励学生运用所学知识进行主题讨论，使其在讨论中逐步提升交 际能力、思辨能力、解决实际问题的能力等

16、。翻转课堂法：坚持学生的主体地位，鼓励学生在课上对自己学到的知识点进行分享和讲 解，并对其讲解进行补充和评价，不断完善学生的知识结构，加深其对所学知识的理解。教师在教学过程中，可根据学生的实际情况灵活选用教学方法，因材施教，尽量照顾到 每一个学生的学习需求。4.3 教学评价与考核要求课程的教学评价由形成性测评（40%）和终结性测评（60%）组成，其考核要求如下:4.3.1 形成性测评形成性测评考核学生在学习本课程过程中的学习情况和实际应用能力的发展情况，包括 出勤考核（10%）、课堂参与程度考核（10%）、作业完成质量考核（20%）等。（1）出勤考核本项考核通过课前点名考核学生的课堂出勤率。迟

17、到15分钟以内每次扣1分，迟到15 分钟以上或无故缺勤一节课每次扣2分，该项考核累计最多扣10分。（2）课堂参与程度考核本项考核主要通过课堂提问和课堂积极发言来评判学生的学习态度、学习主动性、课堂 参与程度，以及学生的思辨能力、问题解决能力及其对课堂教学知识的掌握情况等。只要学 生能按时上课听讲，即可获得5分的基本分。学生上课发言一次，即可另外获得05分，课 堂发言最多可得5分。学生的最后成绩为“5+课堂发言得分”。（3）作业完成质量考核本项考核主要通过学生作业来检测其对教学主体内容的掌握与理解程度、实际应用知识 的能力、自主学习能力、信息收集与处理能力等。每次作业成绩按照相应标准而定，学生作

18、 业质量划分为优秀（10分）、良好（8分）、中等（7分）、及格（6分）和不及格（0分） 五个档次。最后的作业成绩为学生作业完成质量成绩的平均数。4.3.2 终结性测评终结性测评主要考核学生在学完本课程后所达到的水平，通过期末考试进行考核。期末 考试由论文考试（60%）组成，主要评估学生对本门课程基本知识的掌握情况与综合运用能 力。5 .课程资源开发与利用5.1 教材使用（一）建议教材赵敏、刘三满、张振寰，Web前端技术，航空工业出版社，2022年5月。（二）参考书目梁玲、韩迎红、畅玉洁、王冬梅，网站前端技术，航空工业出版社，2022年4月。管西京、张玲玲、陈强，移动Web开发实战，上海交通大学出版社，2021年11 月。5.2 网络资源课程学习网站为学生提供集图、文、声、像于一体的自主学习网络平台。在教学过程中 综合利用该平台，进行灵活的信息化教学。包括在线上进行随堂测试、期末考试、评分等。 还有大量的图书、云课程可供学生进行拓展性学习，有利于学科交叉，为学生营造良好的线 上学习园地。