基于OBE 理念《Web 前端开发》课程教学改革

靳晓飞

河南工学院，河南 新乡 453003

一、《Web 前端开发》课程的现状

随着国家对“新工科”和“双万计划”建设持续推进和互联网新技术的不断发展以及移动终端设备的普及，各种Web 应用应运而生并呈爆发式增长，为前端开发者提供大量就业岗位，Web前端开发工程师已经成为具有发展潜力且社会需求量大的紧缺人才。Web 前端包含的知识点较多有各种标签和属性以及属性值，内容庞杂而且零碎。这就要求在教学过程中，不能再像以往那样照本宣科、灌输式教学，应该采用OBE 教学理念，以学生为中心，以学习成果为导向，采用任务项目驱动的教学方法，将知识点融入到教学项目案例中，帮助学生完成课程知识的建构。

《Web 前端开发》课程是一门内容丰富，综合性、实践性比较强，提升学生网站前端开发设计能力必修的专业课程，是与实际工作岗位联系密切且实践性较强的课程，也是学生掌握B/S（Browser 浏览器/Server 服务器模式）架构模式项目开发能力的必修课程之一。在传统教学模式中，通常以教师为中心，通过教学设计来进行教学实施，学生被动接受课程知识。这就容易出现以下问题：

（一）大部分学生对知识理解的深度不够，经常不深入思考问题解决的方法，缺乏一个自主加工吸收知识的过程。

（二）课堂教学内容大部由代码构成，代码量普遍较大，为了让学生掌握更多的技能，学生课程练习和作业程式化的填充代码，编写代码流于形式，课程结束后无法对所学知识灵活运用。

（三）学习监督机制缺失。通常教师布置的学习任务，能否及时完成、是否独立完成、完成的效果如何，没有规范的评判标准。

（四）被动接受式学习，不利于学生的学习兴趣的培养。

（五）学生课程达到的职业技能和素养，无法实现企业的需求和实现职业岗位零距离对接。

为了能够提升教学质量，基于OBE（Outcomes-based Education，缩写为OBE）强调课程中的任何教育教学行为，都要依据学生需要最终达成的学习效果进行课程设计和教学实施，采用OBE教学理念以成果导向，根据学生需达到的预期成果，进行逆向课程设计，只有这样才能充分保证课程的教学目标与教育成果的一致，提升教学效果和质量。

二、基于OBE 教学理念课程的教学改革

（一）基于OBE 的教育模式

OBE 教学理念是由美国学者斯派帝于20 世纪80 年代提出的。其内涵可用“学生中心”“产出导向”“持续改进”十二字来进行概括，关注学习成果，整个课程的教学过程始终围绕学习成果进行开展实施［1］。

（二）教学目标

依据学校本科数字媒体专业人才培养目标要求和企业web 前段岗位对人才素质的要求，确定合适教学总目标。OBE 教学理念以教学结果为导向要求目标的制定可以由公司企业、学校教师和学生共同讨论研究提出，全方面结合学校的办学定位、行业需求以及用人要求等因素，必须要有概括性、探究性，具有一定的引领性、创新性，体现Web 前端学科特色和教学的鲜明特征。

（三）教学对象

大学生Web 基础较薄弱，学习兴趣差异也非常明显，接受知识与技能很被动，缺乏学习主动性，对于教师教学过程中提供的代码一般机械地从上到下录入一遍，调试网页运行时，出现问题时不能多角度、多层次理解问题，独立思考去解决问题的能力比较弱，不主动去寻找解决问题的方法，对知识理解的深度不足。

OBE 理念要求“以学生为中心”要求由教师教转向关注学生学，教学过程中注重师生的互动交流，设计交互性强的教学方法，以案例任务驱动法，引导学生自主发现问题，培养学生团队协助能力；通过学习通平台对学生分组，分组采用随机为主，使不同性格、不同技术特点的学生组队合作完成项目任务，探究学习课程。注重学生创新能力、创新思想、发散思维的培养。

（四）教学方法

“施教之功，贵在引路，妙在开窍”，OBE 是以学习产出驱动整个课程活动，［2］结合《Web 前端开发》教学学情，对教学方法进行优化：

1.采用翻转课堂教学方法

改变传统的讲授法课堂教学模式，采用“学习通”教学平台进行翻转课堂教学。在学习通平台上传教学课件、视频、题库、学习资料等资源提供给学生，让学生成为课堂学习的主人，学生上课前进行课程知识预习，在线完成学习任务，课程实施过程中让学生讲解并分享知识技能，锻炼学生的自主学习能力，沟通表达能力、独立解决问题的能力。

2.案例项目驱动法

OBE 理念以学生预期达成的最终学习成果为导向，在教学过程中采用真实的案例项目驱动学生通过案例分析知识点，教师概括知识点对教学内容进行重构与设计使知识结构系统化。通过模拟完成案例项目，产生成就感以此激发学生对web 前端知识产生学习兴趣，从而建立自信心，提高学生解决实际问题的能力。

3.线上线下混合式教学法

线下课堂+虚拟的线上课堂，线下课堂教师和学生在教室中面对面交流有助于线上学习任务完成情况进行指导和评价，对学生学习效果提出建设性意见，又可以进行启发式教学、引导学生对Web 前端知识技能进一步深入理解融会贯通。此外，成长于互联网时代的大学生，非常熟悉网络学习的环境，线上的学习可以让线下课堂学习效果得到延伸。学习通平台中的教案、视频、课件、测试练习、作业等学习资源可以让学生充分利用课下琐碎时间片段进行延伸学习［3］。

（五）教学内容

Web 前端开发技术有三大技术支撑分别是HTML 知识技能、CSS 知识技能、Javascript 知识技能。被喻为前端的框架内容、装饰样式和交互灵魂。

“框架内容”是HTML，中文的意思是超文本标记语言，HTML 内容的学习最主要的是HTML文件的基本结构和HTML5 基本标记的学习，例如标题h1 ～h6、段落p、列表ul ～li、区块div、图片img、字体font 等，以及每个标签的属性和应用。

“装饰样式”是CSS。CSS 在网页设计中称为层叠样式表，主要的功能是用来美化页面，使网站页面变得美观吸引浏览者去看。在网页排版时还要掌握DIV 宽高设置、浮动样式以及内容显示属性等，是网页样式美化的重要技术。

“交互灵魂”是Javascript。它是Web 页面开发设计中的高级脚本语言，在网页设计中被广泛用于Web 应用开发中，例如在网页页面中添加不同样式的动态效果和交互功能，为浏览者展示出更加美观功能良好的网页效果。同时让网页设计中的页面变得活泼灵活。

课程教学内容可设计为两大模块。

1.WEB 基础知识模块：Web 前端开发需要学习的基础知识，包括HTML、CSS、JavaScript以及前端Bootstrap 框架等内容。

2.高级应用开发能力模块：掌握常见的Web前端开发框架/库，熟悉AngularJS、jQuery、React等常用类库的使用，掌握Vue.js、Bootstrap 框架技术的运用［4］。

基于“兴趣→理解→实践→应用”的能力培养过程，“产出导向”教学过程围绕学习成果进行，根据岗位需要设计教学内容：掌握HTML5、CSS3、JavaScript、Ajax、JQuery 核心知识，掌握响应式布局框架、Vue、JS、Bootstrap、Angular等框架技术，熟悉服务器运行环境的搭建等。

优化和建设丰富课程资源，要充分利用好互联网与新媒体平台，依托学习通平台完善课程资源建设，资源包括Web 前端课程内容说明、PPT课件、教学大纲、课程标准、教学日志、实验报告、任务单、学生作品、学习网站等。

（六）课程实施

为有效使学生获得这些学习成果，结合学生特点和知识结构建立新教学体系。

1 个任务项目，以开发一个网站为学习任务项目，项目流程：①确定开发网站主题②收集相关建站素材③网页框架结构设计④网页内容设计与制作⑤网页美化与样式设计⑥网页交互内容设计⑦网站测试发布。通过1 个任务项目构建整个Web 知识学习的框架体系。课程知识融汇于任务项目中，通过完成对应的任务点，系统掌握知识以及如何运用。

2 个学习课堂，即线下与线上课堂相结合。

3 个教学内容模块，分别是：基础知识模块、实践技能模块、应用提高模块，以自主、合作、探究的学习方式分层次、分梯度完成知识的掌握。

在实验上机过程中，教师通过极域教学客户端屏幕广播教学，让学生演示在Dreamwear 软件中编写HTML 网页文档，教师辅助进行讲解常见的HTML 元素和应用。在上机实验课堂上，将项目任务分析的方法和项目制作过程分步骤讲解给学生。在演示过程中渗透开发思想。例如，在讲到网页样式时，使用DIV+CSS 盒子模型来设计并控制网页中的元素布局，让学生举一反三灵活掌握代码的应用技巧，用不同的代码编写方式达到同样的效果，进行“制作河南工学院新闻列表”案例演示。

网站制作设计的过程中，要求整体把握所要制作网站的主题，内容的选择，网站风格，用户群体分析、布局结构样式、网站配色风格、版面设计等因素。

依据OBE 理念：采用“真实项目+任务案例+知识点”相结合的教学方式，在教学过程中改进教学方法案例化、实验作业项目化、作业测试平台化、讨论答疑线上化、课程成果网站化。［5］

（七）课程考核与评价

河南工学院的《Web 前端开发技术》课程，依托学习通平台建设了系统的线上线下相结合课程，Web 前端开发技术的教学上机实验环节共设置了4 个实验，学期末以大作业的形式进行考核。

《Web 前端开发》课程的考核与评价强调学习过程、学习结果的评价，注重过程性评价。例如，在课堂教学中对于教学内容的收获和掌握可以采用小组项目答辩的形式。考核与评价主要由过程性评价50% 和终结性评价50% 组成：

1.过程性评价占比50%，包括任务点知识学习占20%，平时出勤和学习态度占10%，课堂实验任务占20%，前端拓展技能占10%。

2.终结性评价占比50%，包括创新能力占10%，项目实践大作业占40%。

该考核与评价体系已在河南工学院计算机学院8 个班级的课程的中实施，并且达到了预期效果。

三、结语

Web 前端开发工程师就业前景很广，Web 前端开发的就业方向可以是网页设计制作、网站建设开发、移动端APP 开发、软件程序开发、微信小程序开发。同时也是综合性人才，在工作中要有较强的沟通表达能力，要与视觉设计师沟通，又要与Web 后端设计师沟通，要求必备的知识技能很广泛。因而，需要对《Web 前端开发》课程进行改革来满足人才培养的要求。

《Web 前端开发》课程在OBE 理念下创新性地开展教学改革，通过教学实践证明，采用新的教学理念和教学方法后，真实有效地提升了学生的实践能力、创新能力、团队合作能力以及自主学习能力，全面提高了学生培养质量。《Web 前端开发》课程的教学改革，从课程的教学方法、教学内容、实施过程、评价考核等多个方面做出探索与创新。此次教学改革只是抛砖引玉，不是教学改革的最终点，需要教师在教学改革中不断进行改进和完善，有效提高学生的职业素养和就业信心，达到了预期的成果目标。