Web程序设计课程中分阶段专题模式教学的改革与实践

张宜浩，刘小洋，董世都

(重庆理工大学计算机科学与工程学院，重庆 400054)

0 引言

随着网络和信息技术的迅猛发展，Web成为当前互联网中信息交换和共享的最有效方式，同时它也提供了Internet上的浏览、检索和查找信息的有效方式。当前阶段，网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式也为用户提供了更好的使用体验。互联网发展前期，单纯的只凭借Photoshop和Dreamweaver就可以制作网页，现在看来只掌握这些工具技术已经远远不够了，Web2.0甚至3.0的发展也对当前的Web前端开发提出了更高的要求。

在现阶段，一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度。很多大公司即使开出高薪也很难招聘到理想的前端开发工程师。鉴于当前的网页制作无论是在开发难度上，还是在开发方式上，都更接近传统的网站后台开发，所以现在更倾向于称其为Web前端开发。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。因此，如何培养适应当前社会需要的优秀Web前端开发工程师，给Web程序设计课程提出了非常严峻的挑战。

1 Web程序设计课程面临的挑战

根据Web程序设计课程的教学要求，学生要了解Web开发的基本概念、开发方法，熟练使用Web前台开发技术、开发工具[1]。重点是要熟练掌握HTML、CSS、JavaScript、AJAX等技术；同时，学生如果想开发出优秀的Web作品，还要学习诸如jQuery、CSS3、Html5、jQuery EasyUI、Angular JS等技术，甚至还要求学生有一定的图片处理基础（如会使用Photoshop、Fireworks等处理图片工具）和美术基础。就Web程序前端开发行业而言，正如许多人说的那样，其入门的门槛很低，但是要成为一名优秀的Web前端开发工程师，要学习和掌握的技术非常多。当前，大多数Web前端开发人员都停留在会用的阶段，而后面的学习曲线会越来越陡峭，每前进一步都非常困难。

就课程教学而言，当前较常使用的教学方法有讲授法、基于问题的教学法、任务驱动教学法、项目教学法等[1]。讲授法[3]是教师通过语言表达向学生传授知识、培养能力、进行教育的方法。基于问题的教学法[3]则是把教学内容巧妙地设计成一个个的问题，由教师引导学生思考问题的起源、探讨问题的解决方法，让学生带着问题学习。任务驱动教学法[3]是由教师把教学内容设计成相应的任务，然后围绕任务展开教学。项目教学法[3]通过“项目”的形式进行教学，由教师指导、学生独立完成一个相对独立项目的全过程，在此过程中学生唱主角，教师唱配角；在教师制定合理的项目后，由学生负责搜集资料、设计并实施项目的全过程。

结合Web程序设计课程的特点以及课程大纲的要求，讲授法和基于问题的教学法显然不能适用Web教学的要求。任务驱动教学法强调由教师指导、学生主导来完成相应的教学任务，比较适合Web程序设计课程中一个个独立专题类技术的学习；而项目教学法则适合于开发一个完整的、综合性强的Web程序，对于初学阶段的本科生而言，要涉及整个Web开发过程中多个知识点的理论与实践，这种教学实践混合体式的项目教学方法也是不能满足要求的。综上，鉴于上述四种教学方法都不太适合该课程的教学和达到培养优秀Web前端开发工程师的目标，提出了Web程序设计课程中结合任务驱动和项目驱动的分阶段专题模式教学与考核的改革与实践。

2 Web程序设计中分阶段专题教学模式探讨

在Web程序设计课程中，根据教学内容，将整个教学过程分为Web设计理论知识和实践、网络的脚本语言、交互式网页开发技术、综合项目开发与实战以及网页开发前沿技术等5个专题模式[4]。本课程的具体专题教学安排如表1所示。

表1 Web程序设计课程的专题教学安排

根据表1的分阶段专题模式教学过程，我们在各教学环节灵活运用多元化教学法，其中理论知识学习、及交互式网页开发技术专题主要采用讲授法，同时针对重要知识点借助网络上的微课或教师自己录制的微课；而在网络脚本语言、综合项目开发与实战、网页开发前沿技术专题以教师辅导、学生自学为主。在实践教学过程中，主要通过任务驱动教学法和项目驱动法，以学生为主体，教师辅导的方式来达到最终的实践目的。整个教学过程注重实践教学，充分体现学生的主体性。具体如下：

⑴ Web设计理论知识和实践专题：以教师讲授和微课的方式，学习Html和CSS基础知识，并在实践环节要求学习独自完成个人简历的Web页面（学生比较感兴趣的主题），来练习Html标签和CSS技术。

⑵ 网络脚本语言专题：以教师辅导学生为主体的方式，学习JavaScript和JQuery编程，通过任务驱动的方法让学生在课后自学相关的语法，并在实践中要求学生完成至少5道以上的JavaScript和jQuery编程题目。

交互式网页开发技术专题：教师讲授AJAX基本原理，并在课堂上编写AJAX实现原理的代码；在实践环节，要求学生完成基于AJAX的姓氏建议、用户名判断、联动下拉菜单等三个项目中的至少二个。

⑶ 综合网站开发与实战专题：教师讲授网站的布局和人机交互中的Web界面设计，并以微课的形式学习Web UI网页界面设计基础和进阶；在实践环节，给学生分发一些上届学习的优秀网站案例，要求每个学生利用实验课和课外时间完成一个有鲜明主题的综合性网站。

⑷ 网页开发前沿技术专题：以教师讲授和微课方法，让学生学习jQuery EasyUI、Angular JS、Css3、Html5等Web开发前沿技术。并结合综合网站开发实战专题，让学生将上述技术用于综合网站开发中。

⑸ 优秀作品展示与讲解专题：在上述五个专题模式基础上，课程特别增加了优秀学生作品展示与讲解专题。通过在学生综合网站项目中开展竞赛与评比，选取出较优秀的Web网站项目，让其开发者在课堂上公开给其他同学演示和讲解，并鼓励在场的学生自评和提问，以达到同学之间交流和学习Web前端开发技术的目的。在此阶段，也让这些优秀作品学生录制视频，让学生互相学习，同时也给后届教学提供优良教案和素材。

3 考核模式探讨与效果

结合Web程序设计课程的特点，本门课程采用考勤、阶段性任务考核、综合项目答辩、项目文档检查、优秀作品展示等相结合的方式进行考核[5]。

⑴ 考勤：以点名和学生在课程上的互动情况为依据。

⑵ 阶段任务考核：完成符合Web设计理论知识和实践专题要求的个人简历Web页面，完成网络脚本语言专题要求的至少五道以上的JavaScript和jQuery编程题目，并完成交互式网页开发技术专题要求的三道AJAX题目中的二道及以上。

⑶ 综合项目答辩：综合利用本门课的所学知识及学生自学为主的网页开发前沿技术，完成一个具有鲜明主题的综合性网站，要求界面美观、内容详实、并尽可能多地应用Web开发技术；答辩阶段，要求每个同学演示作品内容并回答老师提出的问题。

⑷ 项目文档检查：完成上述的阶段任务和综合项目的说明文档，教师针对文档的内容、条理、格式等方面进行打分。

⑸ 优秀作品展示：要求申优的学生或阶段检查过程中发现的优秀作品进行公开答辩，以期达到同学之间交流Web开发技术和辅助教学的目的。

⑹ 经过三年的教学改革，从学生期未成绩和教学反馈情况看，该种考核模式取得了较好的效果。从教学统计数据来看，学生的出勤率显著提高，课堂上学生的学习主动性较强，学习兴趣浓厚；阶段性考核贯穿于整个学期，学生每完成一个学习任务都可以看到自己的成果；及学习效果较好，有70%的学生期终考试成绩是良好以上，且能开发出较优秀的Web作品。

4 结束语

根据Web程序设计课程的特点，本文探讨了一种结合任务驱动和项目驱动的分阶段专题模式教学改革方案，并探讨了相应的教学考核方式。经过多年的实践和反馈，尽管该教学模式达到了较好的效果，但该教学模式比较多的强调学生的参与和自学能力，对自主能动性较差与动手能力不强的学生效果并不好，期望在今后的教学实践中逐步探索并形成针对不同类型学生的多样化教学模式。

参考文献(References):

[1]杨孜茁,方志军,黄勃.《Web程序设计》课程建设策略研究[J].软件导刊教育技术,2017.16(1):18-20

[2]李华,张俊星,谢辉.一种计算机网络课的教学方法设计[J].计算机教育,2012.1:72-74

[3]卢慧,李华.阶段式多元化教学法在Web程序设计课程中的应用[J].计算机教育,2015.22:40-43

[4]郭冬梅.“Web程序设计”案例驱动教学研究[J].安庆师范学院学报(自然科学版),2016.1:146-148

[5]牛文颖.《网页设计与制作》考核模式改革与实践[J].计算机教学,2018.1:98-98