基于案例教学与项目驱动教学的网页设计课程教学改革实践探究

胡娟，汤海林

（广东白云学院 大数据与计算机学院，广东广州 510400)

0 引言

网页设计是计算机科学与技术专业的必修课程，具有较强的实践性。教学内容包含HTML5基础知识、CSS3基础知识和JavaScript前端知识等。该课程采用案例教学+项目驱动教学方法，通过任务案例的导入、分析、实践与总结来讲解和强化知识点，引导学生在学中做、在做中学，把价值观的形成、基础知识的学习以及基本技能的培养和提高进行有机地结合，从而将学生培养成为社会所需的复合型高技能应用型人才[1]。

1 教学现状和存在的问题

1.1 照本宣科地教学

没有经验的网页设计教师在讲授这门课程的时候，通常是将市场上现有的网页设计书籍作为主教材，给学生演示的时候把书上的每一个例子都照抄一遍，但书中有部分标签在制作企业网站的时候并不实用。这种照本宣科、生搬硬套的教学方式，导致学生囫囵吞枣，不知所云，“夹生饭”问题层出不穷。

1.2 学生的基础参差不齐

大部分高校的网页设计课程都开设在大学一年级，很多学生在大一学习的都是基础课程，如高等数学、大学英语等，并没有接触到较多的计算机专业课程，所以大部分学生在学习这门课的时候对于计算机的基础知识并不了解，但是有一部分学生在读大学之前家里就有电脑，因为互联网的普及，这一部分学生很早就学会了上网，有的对网页制作很感兴趣，会花钱买书自学，或者上网看视频自学，这一部分学生在学习本门课程之前，对于HTML5 标签和CSS3 的一些知识点其实已经掌握了。上课的时候老师如果还是只讲浅显的知识点，就会让基础好的学生吃不饱，但如果不讲这些最基本的知识点，那么基础薄弱的学生就有可能跟不上。

1.3 考核评价体系单一

考核评价体系单一，太注重期末考试，期末考试分数在形成性考核中所占比值过大。在布置期末大作业的时候，如果出同一道题目，很难杜绝有些学生进行抄袭，交上来的作业一模一样。为了杜绝这种抄袭现象，改革后重新制定了考核方案，新的考核方案能让每一位同学都独立思考，独立完成期末大作业。

2 教学改革研究与实践

针对上述存在的一些问题，笔者根据最近几年网页设计课程授课心得体会，作出了如下的改进措施。

2.1 教学内容的优化

本门课程共48学时，理论知识讲解24学时，实践操作24学时，全部安排在实验室进行。笔者颠覆了完全按照书本章节进行教学的传统模式。本门课程并没有选择一本书作为主教材。因为教材编排的目的并不是为了直接服务于教学，教材更多的是承载学科知识体系。教材把完整的知识体系分散到了各个章节，而各个章节之间关联不大。现有的网页设计书籍中提到的大部分标签其实在做企业网站的时候是用不到的，学生只要学会一些常用的标签、样式、脚本，基本上就能完成企业网站的制作了。改革后的学习内容极大地激发了学生学习这门课程的兴趣，学生会迫不及待地想学习下一章节的内容。表1将改革前与改革后的课程内容进行了对比，主要是把分散的知识点融入案例和项目中，不再单独讲解一个个标签，而是在综合应用中进行学习。

表1 改革前后课程教学内容对比

2.2 案例教学法

案例教学法起源于美国哈佛大学商学院，是一种以案例为基础的教学方法(Case-based Teaching)。这些案例都是来自商业管理的真实情境或事件。在网页设计课程教学中，笔者将一些经典的案例引入课堂中，带领学生模仿真实的企业官网学习网页设计制作，让学生提前了解企业网站的制作流程和规范，实现产学人才的无缝链接。另一方面，通过微信群等通信工具为学生在学习中碰到的实际问题进行解答，为课程提供了有力的技术支撑。案例教学法有利于学生学习和理解理论知识。表2列出了网页设计课程案例教学的例子。

2.3 项目驱动教学法指导实践

项目驱动教学法是以项目的形式进行教学，在老师的指导下，将一个相对独立的项目交由学生自己处理[2]。项目驱动教学法能让学生有真实的体验，促进学生的参与性和创造性，增加学生的开发技能和学习的成就感。

笔者把理论与实战相结合，将企业的真实网站作为项目融入课堂，选取了四个不同的实战项目向学生进行详细地讲解与分析。笔者对于重要的操作，撰写了实验操作手册，操作步骤详细，手册附加了操作截图，帮助学生轻松完成实战案例。项目式实验教学改革极大地激发了学生的学习兴趣与学习热情，计算机科学与技术专业的学生根据项目式实验内容亲自动手实践，加深了对网页设计的理解。表3列出了改革后新增加的实验项目及内容。

表3 改革后实验项目及内容安排

2.4 课堂教学安排

为了提升课堂教学质量，让学有余力的学生吃得饱，让跑得慢的学生跟得上。笔者重新调整了教学策略，精心设计了学生的学习任务，也研读了很多教育类书籍，试图寻找一种有效的教学途径改变课堂。图1展示了课堂提质增效的教学安排。

图1 课堂提质增效的教学安排

2.4.1 课前阶段

为了解决上述学生基础参差不齐的问题，笔者将HTML5、CSS3 和JavaScript 的基础知识放到了超星学习通网页设计课程中，让基础薄弱的学生先预习掌握最基本的标签和用法。对于已经有一定网页设计理论基础的学生，可以跳过此环节，在课堂上直接听老师讲解案例和项目即可。改革后的课堂教学设计让基础好的学生不用重复学习，为他们节省了宝贵的学习时间，提高了学生的学习效率，同时也照顾到了基础薄弱的学生，让他们在课堂上学习案例的时候可以跟得上。

2.4.2 课中阶段

在课堂上，老师主要进行案例式教学。在案例中把网页设计需要学习的知识点进行讲解，对案例进行演示，让学生对这些经典的网站进行赏析。老师讲解完把主动权交到学生手中，让学生做课堂练习，挑选出1～2名学生展示他们的练习作品，教师对学生的作品进行点评，最后做课堂总结。

2.4.3 课后阶段

基础薄弱的学生需要完成基础题和课后作业。基础好的学生需要完成附加题和课后作业。对于有一些基础但又不是很精通的学生，他们可以选择三种题都做，即基础题、课后作业和附加题，也可以选其中两种题完成作业。

2.5 改革考核标准

建立课程评价体系是教学活动的重要环节之一。经过对该门课程多个学期的教学经验总结，笔者针对这门课程制定了如下的形成性考核方案。该考核方案增加了学生平时分的比例，减少了期末考试分数所占的比例，打破了用一场考试来定义学生的水平，更加注重平时对于学生动手能力的培养，这符合广东白云学院应用型大学的教学目标。表4列出了课程形成性考核方案。

表4 课程形成性考核方案

2.5.1 课前学习的考核

对于基础薄弱的学生需要完成课前学习任务，在超星学习通上教师可以看到学生完成的时间和完成的进度。对于基础好的学生，在上这门课之前就已经完成了自学的功课，所以可以跳过此环节直接得分。在这门课程开学的第一节课，笔者就进行了一场摸底考试，在有限的时间内完成摸底测试并且得分在60分以上的学生，视为有一定的学习基础，其他学生就需要在超星学习通完成课前学习任务，才能获得相应的课前学习积分。

2.5.2 小组汇报答辩考核

安排学生自行组队，每个小组选一名组长，给自己的团队起一个响亮的名字，小组组长作为项目经理，安排3名网页设计师加一名前端工程师，完成一个网站或者项目。团队成员含组长不能超过5人。每次上台汇报或答辩的时候，可以由组长完成，也可以由其他成员汇报。这样安排主要是为了锻炼学生的组织能力、语言表达能力、网页设计能力、沟通协调能力和团队协作能力等，毕竟如今的社会已经不适合单打独斗去完成一件事情。从大一开始培养学生的软技能，可以增加学生日后在社会上的竞争力。

2.5.3 期末考试考核

期末考试虽然是开卷让学生完成一个大作业，但它与之前让学生组队通力合作完成一个网站不同。期末考试需要每一个学生独立思考，综合运用这个学期所学的知识，独立完成一个作品。为了防止学生抄袭其他同学的作品，笔者专门查询了国民经济行业信息，专门给每一个学生布置不同的行业网站作为期末考试题目，单人单题，这样就从根本上杜绝了抄袭的可能。这种出题方式对教师来说，工作量较大，但可以让学生尽早地了解到各行各业，辛苦也是值得的。

3 教学改革效果分析

从2021 年至2022 年，大数据与计算机学院计算机科学与技术专业共三个班自教学改革后，极大地提高了学生的网页设计能力和动手实践能力。笔者分别对B21 计科1、2 班共98 人，B22 计科1 班共49 人的网页设计课程综合能力作了统计分析，如图2所示，从图2教学改革效果分析图中可以看出各班级的学生在课堂表现、设计能力、前端开发能力上都有所提升，教学效果良好。

图2 教学改革效果分析图

4 结论

目前，网页设计课程改革已经在教学中使用了三轮，和改革之前相比取得了良好的教学效果。主要体现在学生对课程的学习态度上。改革之后，学生对于实践内容的理解和认识更加直观，生动且有趣的案例项目式教学激发了学生的学习兴趣和动手实操的欲望，实操的结果又极大地满足了学生的成就感。无论是课堂上的注意力集中程度，还是实践课上的学习氛围，与改革前相比都有大幅度的提升。笔者制作了调查问卷让学生填写，从调查的结果来看，学生普遍认为本课程的学习变得更加有趣，这些案例与项目让他们对于网页设计也有了更加深入的了解。大部分学生在学完本课程后，会主动报名参加梦空间第二课堂活动、学校科技创新节等专业比赛。在做中学，在学中做的方式培养出来的学生有更强的动手能力，为学生将来学习Android App 开发、Java Web 开发、Node.js开发等后续课程打下坚实的基础。