校企合作背景下基于项目教学法的WEB前端课程教学改革与实践

孙铭蔚

摘要：随着互联网技术的迅猛发展，从PC到移动端的屏幕上呈现的一切都是由前端实现的，因此IT行业WEB前端市场需求大，就业范围广，传统的教育模式已经不能满足现在的社会需求。为了让我院学生在就业过程中能够脱颖而出，成为独挡一面的WEB前端工程师，笔者提出与企业合作，引入项目教学法这一教学模式对我院WEB前端课程进行教学改革与实践。实验结果验证了该模式的可行性和有效性。

关键词：校企合作;项目教学法;WEB前端

基金项目：2018东软睿道产学合作协同育人项目*校企共建Web前端开发人才培养的教学改革与研究

引言

随着互联网技术的迅猛发展，从PC到移动端的屏幕上呈现的一切都是由前端实现的，因此IT行业WEB前端市场需求大，就业范围广，高校学生在传统的教育模式下所掌握的知识内容已经不能满足现在的社会需求。为了使学生能紧贴企业岗位的实际需求，与企业真正做到无缝对接，就要联合企业协同育人，积极合作，马英英[1]在基于校企合作的网络工程专业《web 前端开发技术》课堂教学模式研究一文中，添加了一系列的教学训练。所以重新规划课程建设，改革教学模式、教学方法，加强实践操作，学生通过在校的学生身份学习理论知识和在企业的学徒身份掌握实践技能二者完美结合，才能在就业过程中脱颖而出，成为独挡一面的WEB前端工程师。《WEB前端课程》是我院计算机专业的专业课、同时也是信管专业的学科基础课。笔者根据自己多年的教学经验，提出与企业合作，应用项目教学法进行任务分配这一教学模式，使学生系统化掌握理论知识内容的同时，通过企业培训，提高并强化实践能力。

1项目教学法的内涵

项目教学法是由美国著名教育家凯兹博士和加拿大教育家查德博士共同创建的一种以学生为本的活动教学法，其突出特点是以项目为主线，教师为引导，学生为主体，改变了以往 “教师讲，学生听”的被动教学模式，创造了学生主动参与、自主协作、探索创新的新型教学模式[2]，该方法在职业教育和高等教育中得到了广泛的应用。

2项目教学法的实施流程

2.1从知识孤岛到内容整合

传统的授课步骤是教师从一本教材的第一章由简到难，按部就班的讲到最后一章。 由于WEB前端开发课程涉及的技术多、内容广、知识点杂和代码多等碎片化信息的特点，所以一如既往的采用传统的授课步骤讲授本门课，即从Html概念、网页元素、布局到CSS基础，再到JavaScript使用过程，由于每部分所介绍的代码及实现的功能小模块与其他章节之间的关联性并不是太强，而且这些碎片化信息很容易形成知识孤岛，所以教学效果不是很好。为了解决这个问题，我们应该把常见的，实用性强的所有知识点都汇集到一个完整的大项目上，完成内容整合，最后通过对此项目的功能分解，由浅入深、由简到繁、查漏补缺的模式完成教与学的愉快过程。

2.2合理设计项目化教学环节

为切实满足企业对实践创新型人才的实际需求，板块化项目的实践训练模式势在必行[3]。 在WEB前端开发课程授课中，笔者和企业事先沟通好，选取一个合适、内容详尽和实用的完整项目“光影世界”为综合案例。该综合案例包含HTML、CSS、Javascript和Ajax等核心技术内容。前台首页布局结构为五行两列，第一行为LOGO和导航菜单，第二行为广告图片区域，第三行为主体部分，分两列，左侧列为最新上传图片，右侧列为最新点评信息;第四行为特色美景制作栏目，该栏目由左侧的拍摄主题和右侧的最新影展两具区域组成。第五行为页面底部版权区域。整个页面全局规则包括页面body、图像、超链接的CSS定义和使用JavaScript技术制作网页的特效。首先对该综合案例的各功能进行演示和讲解，简要介绍的所涉及的技术内容。然后以前台首页为例进行板块化讲解。

2.2.1 HTML5教学环节

由于HTML5具有可以兼容PC与移动端、Windows与Linux、安卓和IOS这一跨平台性的显著优势，所以先简单介绍H5的基本知识，把我们事先录制好有关H5的常用标签、功能、属性和语法结构的相关教学资源通过超星学习通向学生开放，由于我院学生有一定的编程基础，所以学生完全可以课后自学这部分内容，并在Sublime等文本编辑工具中编写代码并在浏览器中观察效果。

2.2.2 CSS教学环节

在介绍完常用的标签使用方法后，重点分析和讲解本项目的前端首页布局方法。在制作页面时，先要学会搭建一个可视的排版框架，然后再向框架中填充排版细节，这是关键过程。当前制作网站的页面布局是使用最流行Div+CSS的技术，所以笔者会结合本首页代码去讲解整体页面如何使用Div标签进行分块，然后讲解页面定位布局的核心内容，即CSS的盒子模型，CSS的边框和内外边距使用方法让学生课前通过MOOC进行学习。在上课中，结合代码重点讲解盒子的浮动与清除功能，对之前Div划分好的各个块进行CSS的定位，最后再向各个块中添加相应的内容。其中，CSS的定义与使用会结合本项目的样式表文件里的代码举例讲解。然后对应首页的导航条内容通过页面结构代码标签中讲解导航菜单的制作方法。在访问该项目的后台管理系统中，首先进入的就是登录页面。通过admin文件夹下的CSS文件夹中的样式表login.css文件和页面结构代码中标签中的标签进行表单内容的讲解。

2.2.3 JavaScript教学环节

CSS样式表可以控制和美化网页的外观，但对于网页的交互行為却无能为力。笔者通过本项目image文件夹和JS文件夹中的player.js和playerslider.js文件对应着首页广告图片区域和页面结构代码标签中标签代码讲解插入JavaScript的三种方法和循环滚动图文字幕技术，制作首页广告图片区域的幻灯片切换广告。而JavaScript做为一名WEB工程师必备的技术，我们会请合作的企业指导老师亲自讲授进阶课程。其中，JavaScript中的基础语法、简单、常用的函数、功能及使用方法已经上传到超星MOOC上，学生可以课后应用HBuilder软件编写JS文件。

3.项目教学法的实施效果

为了验证此方法的实施效果，笔者选取了18级学生的综合实训项目作为19级学生期末测试内容，测试结果显示，接授项目教学法授课的19级学生作品无论从风格版型、内容设计还是细节处理上都胜过传统教学方法的18级学生的作品。

4.结语

通过本次教学改革与实践，学生可以独立完成前端页面的设计工作，为了让所设计的网页无论在何种设备上都能获得最佳体验效果，响应式布局，我院将继续邀请经验丰富的行业教师讲授Bootstrap框架进阶课程，用项目驱动教学，所学也是所用，相信学生通过进阶式学习，用作品说话，成为热门的WEB前端工程师指日可待。

参考文献

[1]马英英.基于校企合作的网络工程专业《web 前端开发技术》课堂教学模式研究[J].环球市场，2017（23）：167.

[2]胡庆芳.《优化课堂教学方法与实践》[M].中国人民大学出版社，2014.

[3]秦艳华.基于Web前端开发技术的课程教学模式创新分析[J].佳木斯职业学院学报，2019（9）：110-111.