项目教学法在“Web 前端开发”教学中的探索

福建省三明职业中专学校 余明珍

放眼当前传统的“Web 前端开发”教学，其不太注重学生对于实际项目的设计，课本上的知识点都是分散的，教材中设计的案例知识点单一，并且很多知识点理论性强。在传统的教学过程中，教师更多重视理论知识的灌输和制作技巧的传授，学生很少接触项目，所以学习到的理论、技巧很容易脱离实际工作中项目本身的设计。相反，项目教学法能让学生在项目中进行实践，将掌握的知识运用到项目制作上，让学生在实践的过程中掌握与理解知识点，并且可以充分将企业对人才的要求与知识传授相结合。由此可见，项目教学法在“Web 前端开发”教学中的运用具有不可替代的作用。

一、“Web 前端开发”的课程特点

随着社会的进步、科技的飞速发展、新技术的层出不穷，现在的用户对网站页面效果要求越来越高。“Web 前端开发”是一门综合性实践类课程，其中不仅涉及HTML 基础、CSS3运用、JavaScript 基本语法与编程等计算机操作，还对版面设计、色彩搭配等有一定的要求。这门课程不同于Flash、PS 等软件操作类课程，单纯点击操作按钮就能完成相应的操作，它涉及的内容相对复杂、使用的知识面广，而且需要学生耐心地在软件中编辑代码。这门课程不仅要求学生有一定的审美能力，对学生的逻辑思维能力的要求更高。它要求学生拥有良好的编写代码习惯，具有运用色彩搭配、页面布局来设计有较好用户体验的网站页面的能力。

二、中等职业学校学生的特点

中等职业学校的学生是特殊群体，他们大部分在中学时期的学习并不是很理想，在学习上缺乏积极的学习动机，学习目标不明确，学习惰性强，对枯燥的知识点不感兴趣。虽然他们知识基础比较薄弱，但是智力素质却不差，他们对自己的职业和社会期望较高。因此，在中等职业教育过程中要“因材施教”，注重开发学生的职业潜力，强化教学实践环节，培养学生操作能力，将教学与职业挂钩，极大程度提升学生的学习积极性及未来工作应用能力。

三、传统教学方法在“Web 前端开发”教学中的不足

传统的教学方法以教师的知识讲授为主，教师在课堂上讲授知识点，学生在接受知识的基础上进行练习巩固。传统教学法的初衷是教师在课堂上的教学能让学生牢牢掌握知识，而“Web 前端开发”这门课涉及很多标记的使用、CSS的引用、函数的调用等，这些知识点并不需要学生的死记硬背。在实际Web 前端开发过程中，程序员是可以上网查询各种资料的，这门课不仅需要学生记住知识点，更重要的是要让学生掌握实际运用的方法。传统教学方法所体现出来的问题便是教师只顾完成让学生掌握知识点的教学任务，并不太关注学生在实际项目操作的时候是否懂得如何将知识点与实际操作相结合。很多学生是带着一脸茫然上机实操的，对于该如何将所学知识运用到实际案例中这个问题充满疑惑。由于Web 前端开发涉及复杂的代码和复杂的制作流程，教师在表述的过程中如果单纯讲解软件如何运用、每个步骤如何操作，那么，整个教学过程在学生脑海中只是留下没有实际意义的空白操作，甚至有些学生只让知识点在脑中一掠而过。以Dreamweaver 软件的教学而言，教师主要是远程操控学生的电脑，让学生观看操作步骤，在操作的过程中教师的速度比较快，即使学生开始学习的时候充满兴趣，久而久之也会觉得枯燥无聊。学生只能观看视频、跟着步骤操作，学到知识却不懂如何进行整合和运用，与实际联系很少，这便拉远了学生与Web 前端开发的距离。同时传统的教学模式不够注重知识与企业需求的对接，容易造成知识与技能的脱轨，存在教师传授的知识在企业中并不适用的问题。

四、项目教学法在“Web 前端开发”教学中运用的优势

项目教学法在“Web 前端开发”中运用的最大优势就是利用实际企业中的项目，将企业需求与知识传授相结合，教师不再简单依赖教材中的案例，而是结合上课的知识点将项目分解，提取出本次课的项目运用案例，将教学任务分解得更为透彻。案例更加贴合实际运用，让学生学习起来更直观清晰和有目的性，让他们对于知识的掌握也更具实际意义。比如在“Web 前端开发”实践课时，教师发布一个大项目，并且分解为很多子项目，每个项目涉及的知识点不一样，教师根据分解的项目进行知识讲解，有针对性地进行知识传授，再让学生以小组为单位进行组内的分工与协作，让学生在项目中实践。在以完成项目为目标的引导下，课堂上教师不仅完成了对知识的传授，还让学生对知识进行了整合运用，培养了学生运用知识解决实际问题的能力。可以看出，项目教学法不仅有助于高效教学课堂的实现，更有助于学生吃透知识，快速掌握Web 前端开发的项目运用，让每个学生都积极参与进来并且完成好自己的任务，在掌握知识的同时又培养了合作与沟通能力。

五、项目教学法在“Web 前端开发”教学中的探索

（一）课堂项目导入

在“Web 前端开发”课程正式展开时，教师可以通过欣赏优秀的Web 前端开发作品的方式进行课堂导入，以此充分调动课堂气氛。优秀的网页作品本身就具有很大的感染力，当学生欣赏到这些优秀网页时，会激起自身也成为Web 前端开发“大神”的欲望。这种案例展示，能够让学生展望到好好学习的成果，从而能利用学生的敬仰之心调动起他们的学习积极性。

教师在授课过程中，要将企业实际需求项目案例带入课堂，使企业对人才的要求与授课知识点相结合，充分将职业教育与企业需求相结合，摒弃传统课堂中的“闭门造车”，让学生不只是简单地记住知识点，更是要将知识点运用到实际的项目中去，让学生在“项目”中学习，在“项目”中掌握知识点。教学核心在于让学生掌握的不仅是知识，更是一项技能。

（二）合作小组的建立

Web 前端开发项目的完成不可能只凭借一人之力，除了要求学生具有代码编写能力，还要求学生有色彩搭配基础、审美能力、设计能力等，这需要分工合作，因此自然要对学生进行分工。教师在课前可以根据学生的不同特点和知识掌握情况等，将学生分成几个合作小组。有针对性地进行分组，可以避免组内的成员因知识掌握较为薄弱而不能完成实践项目，同时也能扩大学生的人际交往范围，培养学生的协作能力。课上，教师根据授课内容发布相关项目任务，各小组定好组长之后对任务进行合理分配，保障小组成员都能够发挥自己的长项，充分利用学生的团结协作来完成项目的制作。

（三）课堂项目教学实施

课堂项目教学的实施过程与传统课堂有别，不再以教师讲授知识点为主，而是以项目的实现来贯穿整个教学过程。以学生项目实践为主，以教师分析项目、讲解重难点为辅，课本上的知识点多是以微课的形式让学生利用课前时间进行预习而不占用太多的课内时间。

课中教师要首先将项目内容进行分解，提取出本次课涉及的项目内容，对内容进行分析和示范。例如项目可以分为框架搭建模块、CSS 美化模块、JavaScript 模块等，当涉及其中的知识点时，教师提取其中的项目分块为案例进行分析讲解，以一个项目的制作来贯穿整个教学，让学生的知识掌握更具有连续性。然后，学生根据教师布置的要求共同完成项目。在教学过程中，注重学生的知识与技能的转换，将职业教育与企业需求相结合，意在培养学生将知识运用到实际案例中去的能力。在整个教学过程中要给学生传输一种理念：“Web 前端开发”项目进行的过程中不免会遇到问题，我们应该有团结协作的精神，无论是项目设计还是突破环节，都需要组内人员相互配合，只有组内人员都积极转动自己的大脑才能将项目顺利进行下去。

（四）项目评价

“Web 前端开发”教学过程中的评价，不能仅仅局限于教师一人，应该将评价责任落到每位学生身上，甚至是企业身上。学生除了能够对他人进行客观评价之外，还要能对自己进行真实评价。比如，教师在项目回收的时候可以让学生在课堂上对作品进行分享、互评和投票，进行小组间的项目评价。之后便要对小组内部的每个成员进行贡献和能力的评价，评价之后还要进行有效的奖励措施。这样一来，学生便能够找到学习的动力，从而激励学生在小组内多多出力，同时防止不动脑“混”成绩的情况出现。除此之外，学生对自己的评价也是很重要的，定位准确可以让学生找到最客观的自己，从而查缺补漏。当然，学生学到的知识最后要运用到工作中去的，让企业介入评价不仅有助于学生对这门课程的学习，还有利于学生日后对工作岗位的了解。

网络化的发展将“Web 前端开发”这门课程逐渐推向了热点，其实，Web 前端开发很大程度上融合了时代的元素，科技的发展和进步都能够在Web 前端开发的水平上体现出来。Web 前端开发面向的群体很广，网页几乎与人们的日常生活密不可分。针对目前“Web 前端开发”教学效果不佳的状况和学生不爱学的现象，教师应该先从改变自身教学方法入手，项目教学法便是一种实用、有效的，将知识转换为技能并且让课堂不再枯燥的教学方法，它能让学生将知识应用到项目中去，在实践中出真知。