新工科背景下《Web前端开发技术》的PBL教学改革与实践

刘雅君　袁婷　谢国　李爱民　刘光明　常婉伦

摘要：在新工科背景下，通过分析Web前端开发技术课程传统教学的弊端，提出PBL教学考核方案。本文以“网页页面布局”章节为例，通过导入部分、知识讲解和编程实践三个课堂环节介绍了课程改革实践过程。最后展示了学生的优秀作品及教学反思。

关键词：Web前端开发技术;PBL教学法;教学改革

中图分类号：TP393        文献标识码：A

文章编号：1009-3044（2021）07-0127-02

2017年以来，国家对“新工科”建设的倡导，为计算机专业教学改革提出了新的要求，特别是如《Web前端开发技术》之类的工程专项能力培养类基础课程。新工科建设行动路线（“天大行动”）提出了六个问题导向，其中“问技术发展改内容，更新工程人才知识体系;问学生志趣变方法，创新工程教育方式与手段”对当前《Web前端开发技术》课程改革指引的方向。

1 Web前端开发技术课程传统教学的弊端

《Web前端开发技术》是我校电子与计算机工程专业的专业必修课程，是专业培养计划中网页前台开发方向的工程专项能力培养类基础课程。该课程一般安排在第四学期开设。该课程的学习目标分为三个层次：首先专业目标方面，通过课程的学习，让学生正确理解前台开发的相关概念，熟悉前台开发的基本过程，掌握主流的前台开发技能，为网站后台开发课程的学习奠定基础;其次能力目标方面，合理运用所学各种技术，完成企事业单位各种形式网站的前台开发任务，体现良好的艺术性和实用性;最后素养目标，具有良好的自主学习能力团队协作能力、职业岗位竞争能力和创新能力。

通过对首都师范大学、北京理工大学及陕西高等院校调研发现，86%本科院校的计算机学院均开设了前台网页开发相关课程。然而，网页前端技术的革新速度较快，发展势头迅猛，现有的教学模式已经不能使学生较好地掌握网页设计、开发和发布的全过程。在传统教学中存在以下两方面的弊端：

1）知识体系更新不足

伴随5G时代的到来，网页前端技术经历了多种技术革新。前端开发工程技能要求也越来越综合，不仅要求掌握多种语言的软件开发技术，还对可用性、外观等非功能性技术也有明确要求。然而，新型技术在现有知识体系更新不足。例如，HTML5作为最新的 HTML标准，已经被大部分浏览器支持，但是现有教学中所占比重仍然较少。同时，CSS也晋级到第3版本。该版本不仅减少开发成本与维护成本的同时，也提高了页面性能。但是该版本在现有教材中介绍不足。最后也最重要的是，很多教材和教学都鲜少涉及网页前端开发框架。

因此，如何根据网页前台开发技术的新发展、前台开发岗位对人才培养的新要求引入教学过程和更新教学内容，是《Web前端开发技术》课程改革的亟待解决的问题之一。

2）工程教育模式陈旧

就目前授课情况和学生的学习情况来看，该课程主要采用课内理论教学环节和实践教学环节结合的模式。课内理论教学环节为32～48学时，实验课时一般16～24学时。作为重要的工程技能培养课程，现有重理论轻实践的教学模式难以满足学生理解并掌握工程技能的需求。因此改革传统教学模式，形成新的工程教育模式成为教学改革的重要方向。

2 PBL教学法

PBL（problem-based learning）是一种以问题为基础的教学方法，重点培养学生分析、解决问题的能力。该方法最早应用于医学教育领域[1]。不同于传统以授课为基础的教学法，PBL教学法以问题为导向，以学生为中心。通过采用小组讨论的形式，学生围绕问题独立收集资料，发现问题、解决问题，培养学生自主学习能力和创新能力的教学模式。

3 教学改革及实践

为了更新Web前端开发技术知识体系和改革传统教学模式，我们尝试针对《Web前端开发技术》课程进行PBL教学改革。

首先，针对网络和一线公司进行调研，确认最新技术动向，转化为教学内容。网络方面，我们爬取了主流IT招聘网站前台开发相关岗位的技能要求，统计关键字，分析技术动向。针对当地软件园，设计了有针对性的调查问卷进行地毯式调研。

此外，教学模式方面，《Web前台设计》课程以集中2周的理实一体化形式全程在机房授课。教师进行引导和适度讲解后，提出问题。根据分组，学生在机房讨论、完成并展示作品。通过学生的主动学习，发现问题和解决问题的过程，从而达到提升教学效果的目的。本节以“网页页面布局”章节为例，介绍改革具体实践。该部分课程的技能目标主要包含三个方面：要求学生熟悉各种常见的页面布局类型、掌握主流页面布局类型相应的DIV结构和浮动定位法中CSS规则的编写方法。课程分为三个环节：导入部分、知识讲解和编程实践。

3.1导入环节

课程首先设置了5分钟的引导部分。针对前期课程中CSS盒子模型基础，提问学生思考“padding屬性与margin属性的异同”。之后为了引入新课，展示2个典型网站示例。教师提出“这2个网页有哪些相似的功能区域？”的问题，要求学生讨论。过程中，借助机房教学软件、QQ群、雨课堂等工具请学生提交答案，引导学生理解页面分块。最后，根据学生回答，总结概念“盒子相关位置”和“空间位置”，引入知识点。

3.2知识讲解

根据学情，教师进行适度的知识讲解。首先，展示主流网站，介绍常见的网页布局结构，如国字型、T字型、综合框架型等。然后，介绍三种定位方法，包含绝对位置定位、浮动定位和空间定位，引导学生分析优缺点。此外，根据工程实践推荐使用浮动定位法，现场演示实现一个基本的布局案例。演示中，应采用基于“工作过程”的教学模式，展示布局实现过程。另外，该案例应贴近学生生活，一般选取学校或学院主页进行简化的实操。最后，进行知识点的总结，引导学生查阅网页布局框架，特别是自适应的网页框架，扩展学生视野。

3.3编程实践

教师在讲解结束后立即向学生发布3道具有层次化的实践题目。其中必做题2道，选做题1道。第一题为模仿课堂讲解案例的制作。通过该题的制作，检验学生课程学习的成果。第二题要求学生两两自由组队，模仿知名网站实现一个主页面的布局设置。所模仿的网站由学生自选，教师仅进行简单推荐。最后一个题目要求学生仍以小组形式完成一个自创网页的页面布局。

根据“教学做考”相结合的教学原则，教师在学生实践过程中，观察学生学习情况，以实现“培优扶差”，从而提高课堂教学效果。学生根据自身情况选择当堂提交或邮件提交。一般根据教学软件统计，对当堂提交的前5名同学口头表扬并将此次平时成绩记“A+”，以示鼓励。

4课堂效果及教学反思

通过这样的教学改革，学生的网页实操能力得到普遍的提高。图1所示是两位学生的优秀作品。作为一线教师，我们不仅需要探究适应行业发展的教学内容，而且在教学模式方面进行深度改革实践，如何针对传统工程能力培养方式的弊端，提出并实践符合新工科要求的改革方案，是每位高校教师时下需要深入思考的问题。针对《Web前端开发技术》课程，我们尝试了PBL教学改革实践，希望这些实践能给计算机教师以启发。

参考文献：

[1] 陈英华，胡国栋，张琳，董为人.PBL教学法在我国基础医学教育中的应用及存在问题[J].中国继续医学教育，2015，7（18）：7-8.

【通联编辑：王力】