面向能力培养的《Web技术及应用》课程教学改革

蔚继承+燕飞+王美丽+陈勇

（1.西北农林科技大学 信息工程学院，陕西 杨凌 712100；

2.西安市农业培训中心，陕西 西安 710000）

摘要：Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的概念。在教学中如何将HTML、CSS、JavaScript、DOM和BOM、AJAX等相关技术有机融合起来，以达到Web前端开发工程师的需求，深化课程教学改革就显得十分重要。本文对计算机专业Web 技术的教学改革进行了初步探讨。四年实践证明本文提出的改革方式是行之有效的。

关键词：Web技术；任务驱动；案例教学；团队合作

中图分类号：G642.0 文献标志码：A 文章编号：1674-9324（2016）49-0055-02

Web技術是互联网应用技术最重要的基础技术之一，其涉及的领域越来越广，规模越来越大，需求也趋于多样化与复杂化。互联网行业需要大量从事网站设计、系统开发与运维的Web前端开发人才。Web1.0 时代网站的主要内容都是静态的，用户使用网站的行为也以浏览为主，因此，以Dreamweaver和FrontPage为主的可视化开发工具讲授网页设计与开发，这样的课程存在侧重于界面设计而轻视代码编写的问题，主要通过HTML和CSS等技术构建静态网页呈现给用户。2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量出现，网站的前端发生了翻天覆地的变化，网页不再只是承载单一的文字、图片，人们需要动态的、交互式、多样化的网页，企业网站迫切需要快速进行网站重构以改善用户体验，如新浪、搜狐、网易、腾讯、淘宝等IT企业都亟需大量Web前端开发人才。

因此，本校在制定培养方案时提出将原有的《JSP程序设计》和《网站设计》课程中的与Web前端开发相关内容进行整合，开设了《Web技术及应用》课程。授课内容涉及Web的前端开发技术中的HTML、CSS、JavaScript和Ajax等。目标是使学生通过课程的学习，能够打下Web前端开发基础，具备从事互联网相关行业的基本能力。本文从Web技术的课程建设与提升能力出发，对计算机专业Web技术的教学进行初步探讨。

一、课程建设

1.教学内容。在教学内容安排上，按照Web前端开发所需知识为导向[1]，包含了以HTML、CSS和JavaScript为主的教学内容，增加了AJAX和PHP内容。同时随着HTML技术的发展，适时增加HTML5方面的知识。在内容体系中抽出两个重点内容：①将CSS+DIV技术贯穿全书的每一章节，重点强化CSS+DIV技术融合解决实际工程中的应用问题；②将JavaScript、DOM和BOM技术进行融合，重点培养学生设计动态交互式网页的能力；③通过增加PHP服务器端编程，使学生初步了解Web后端开发，同时也进一步增加对Web前端的认识，并掌握Web前都没与后端异步数据通信的方法。

2.教学方法。采用任务驱动与案例教学法相结合，提高学生学习兴趣，同时注重学生自学能力培养。在教学方法方面，采用学生自学为主、老师从旁指导为辅的方式。首先将整个网站设计任务进行分解，并设计适合各个知识点的小案例，每个阶段有明确的任务要求，老师对其中的关键知识点及案例首先进行讲解，积极为学生提供免费的学习资源平台如www.w3school.com.cn，并讲授查阅资料方法，使学生掌握技术应用的关键点。然后让学生自行完成每个阶段任务，对于实践中普遍出现的问题，老师再统一讲解、更正。使学生达到先模仿制作的要求，然后再进一步加深考核要求。实现任务驱动与案例教学的结合，更大程度的激发学生的学习兴趣，培养学生的自学能力。

3.考核方式。在考核方式上，改变以前以知识点考核为主的考核标准，改为以实践动手能力为主[2]。以往课程的考试形式是教师出卷，学生答卷，这种考试形式拘泥于书本知识，无法了解学生真正的能力。《Web技术及应用》作为理论与实践相结合的课程，除了要求学生了解基本概念，还应当具备一定的知识运用、动手制作和协调能力。因此除了一般的理论知识考察环节，还增加了项目开发的实践考核环节。学生以3～5人为一个小组，经过教师推荐和学生自选，确定项目题目，项目的运行时间贯穿整个授课环节。学生通过对所学知识的掌握，完成规定的项目内容和相关文档。主要内容应包含网站开发的主要的几个步骤，包括：需求分析、网站规划、美工设计和网站制作等环节。最后通过答辩、互评和自评等考评项目得分。项目成绩比重应不少于的整体课程成绩20%，同时建议和鼓励学生以这些项目为基础参加学校和社会组织的各种竞赛，对于获奖项目给予额外加分。

取消笔试考试，采取上机考试的方式，并将期末考核和过程考核相结合，从而调动学生上课以及完成实验任务、项目的积极性。学生的最终成绩由平时考核（30%）、项目考核（20%）和上机考核（50%）三部分组成。平时成绩主要包括日常考勤、学习态度、实验效果等。

二、能力培养与提升

Web前端开发是一项目易学难精的工作，涵盖的知识面非常广，既有具体的技术又有抽象的概念。通过指导学生编写高质量代码和鼓励团队协作方式来培养和提升学生能力。

1.编写高质量代码。代码编写是Web前端开发者的基本工作，代码的质量体现的开发者的能力。例如：实现一个页面或功能可能有多种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案不仅易于维护，而且性能也较好。这里的关键就是代码质量。前端开发的三种主要语言：HTML、CSS和JavaScript的特点各不相同，对代码质量的要求也不同。针对三种代码语言的特点，指导学生编写高质量代码的技巧与能力。

2.团队合作。团队合作在竞争日益激烈的现代社会中显得尤为重要。对在校大学生加强团队合作教育具有重要的现实意义。大学教育应该全方面培养大学生团队合作的精神和能力，努力提高大学生的团队合作意识，培养高素质综合型人才[3]。

近几年来，Web开发技术发展十分迅速，使得网页的表现能力与交互能力越来越强，我们可以使用Web技术开发惊艳的网页效果，但漂亮的页面背后隐藏着的是越来越难以维护的代码。这其中除了技术层面的原因外，团队合作也是一个重要因素。通过将项目分解，学生协作完成来培养学生的团队合作意识与能力。

三、结束语

四年来教学改革与实践结果表明，教学改革总体思路正确、方向正确、措施得力、策略到位。学生普遍认为学习积极性和参与性有较大提升，学生编程能力有一定提高；综合考核方法更能够调动学生的学习热情，更便于学生有效地开展网络学习与自主探究活动。希望本文对同类高等院校的网页设计课程教学起到抛砖引玉的作用。

参考文献：

[1]刘强，张阿敏，朱文球，等.计算机公共基础课程教学资源建设研究[J].计算机教育，2012，（17）：50-53.

[2]徐利谋，蒋建平.多元化考核方式在Java程序设计课程中的应用研究[J].中国职业技术教育，2014，（23）：8-10.

[3]刘念，李茵莱.论大学生团队合作精神的培养[J].西南民族大学学报：人文社科版，2007，28（4）：224-227.