“产、赛、学”融合下Web前端技术课程建设改革探索

摘  要：针对当前本科院校Web前端开发技术课程教学中存在的教学目标不明确、专业实践能力培养不足、教学过程设计与考评机制不完善等问题，该文基于产学合作协同育人项目指南，探索融合“产、赛、学”为一体的Web前端开发技术课程建设改革重点、策略及有效教学措施，以期为其他院校相关课程建设或教学改革提供借鉴。

关键词：产、赛、学；Web前端技术；网页设计；网站规划；课程建设改革

中图分类号：G642      文献标志码：A          文章编号：2096-000X（2023）13-0006-04

Abstract： In the current teaching of Web Front-end Development Technology course in undergraduate colleges， there exists the problems such as unclear teaching objectives， insufficient cultivation of professional practical ability， imperfect teaching process design and evaluation mechanism. Based on the guidance of industry university cooperation collaborative education project， this paper explores the key points of reform， strategies and effective teaching measures of Web Front-end Development Technology course construction integrating "production， competition and learning"， in order to solve the above problems and provide reference for relevant curriculum construction or teaching reform in other colleges and universities.

Keywords： production， competition and learning; Web Front-end Development Technology; Web design; Website programming; course construction reform

随着我国移动计算、物联网等新兴网络产业与技术的高速发展，互联网产业规模的不断扩大，网络服务质量的持续提升，用户体验至上的时代已经来临。当前，计算机技术向外领域不断拓展，媒体产品人性化的意识逐渐增强，能熟练使用HTML、CSS和JavaScript等Web前端开发技术的专业人员在人才市场上供不应求[1]。除了移动互联网企业，金融、交通、零售等相关行业也开始注重用户界面设计或交互设计等方面的投入，亟需相关人才。

Web前端开发技术是培养网页设计师的入门课程，也是河南中医药大学（以下简称“我校”）信息技术学院和管理学院的一门专业必修课，同时药学院和基础医学院部分专业也将其列为公共选修课程。该课程实践性较强，目前在我校已开设10多年。然而，由于高校对学分有严格的管控，因此，这类课程大多为总36学时的实践课或总54学时的理论与实践课，总体上学时分配较少。在现有教材知识点大而全的情况下，教师们很难将知识点较为系统地、完整地传授给学生，而且，在实际的教学过程中，该课程的理论讲解和实践操作分离较为严重，二者的衔接关系不容易处理[2]。除此之外，针对与Web前端开发技术密切相关的网页设计或网站规划人才培养，多数高校在相关课程授课过程中，其授课内容及效果与社会市场需求明显不一致，学生在学完该课程后，没有真正的实践经验，缺乏就业竞争力；而各用人单位又急需网页设计与网站规划人才，最终导致当前社会需求与人才供给严重脱节[3]。

因此，为了顺应时代和市场需求，提高学生的专业技能及社会创造力，各高校或相关行业非常有必要先对该课程教学工作现状进行调研、分析、探讨及研究，并为该课程体系的构建提供有效的改革措施。

一  当前课程教学存在的主要问题

通过对该课程在我校以及其他同类院校的教学现状进行调研与分析，发现主要存在如下问题。

（一）  教学目标不明确

Web前端开发技术层出不穷，更新换代较为频繁。比如，网页标记语言HTML已发展到HTML5，标记类型达100多种；用于网页样式设置的CSS也发展到了CSS3，拥有上千种的可用属性及其不同取值用于增加网页交互性的脚本语言JavaScript更是经历了技术与工具集的巨变，比如，原有的XML数据交换格式几乎已被新的JSON完全取代。而且，目前该课程相关的大量知识内容，部分是商业常用的，部分几乎被废弃。另外，不同层次学生之间的知识结构体系存在一定的差异，为学生们所设置的学习内容也应存在一定的区别。因此，针对该课程中的大量标记语言、CSS属性使用及JavaScript函数，如何进行知识分层以适应不同层次的求学者，是该课程以及当前大多数课程实施前未经过认真论证的。

尤其是，当前教学过程中的实验教学定位不准确，缺乏商业化需求的目标，没有形成明确的知识结构主线，知识体系松散且庞大，导致学生学无目的，难以将所学知识融入社会商业需求之中。另外，该课程通常在大学一年级下学期或二年级上学期开设，此时，学生学习兴趣虽浓厚，但由于依然采用高中时期紧盯课本的学习方法，且在实验教学上缺乏商业领域流行技术知识，不具备自我学习和查找资料的能力，所以极易形成消极的学习态度。因此，必须合理化该课程的教学内容，对其有明确的定位和培养目标，务必使学生学有所用。

（二）  忽视了专业实践能力培养的重要性

本课程多数相关教材注重于理论知识的讲解与传授，其优势在于可以让学生具备坚实的理论基础。但因该课程知识量大，内容多且零碎，教师教授困难，学生也难以消化，从而很难获得良好的教学及学习效果。其次，实践教学是该课程授课方式的重中之重，实验项目本身过多关注语言本身的练习，缺乏对学生实际开发经验与能力的培养，目前不够完善和系统。比如，在该课程结束后，学生除了应具备实现文字段落、表单、表格等的操作能力，还应掌握如何对网页进行整体布局的能力。但在进行中大型规模的实际项目设计中，多数学生无从下手，不知道怎样才能将所学的知识整合到一个综合项目中。显然，这是目前多数院校在该课程教学中过于强调对语言本身要素的学习，以小知识点为目标，忽视了对知识综合运用和实践能力的培养所造成的。

（三）  教学过程设计与考评机制不够完善

在如Web前端开发技术等多数理工科专业课程的教学过程中，教师通常采用先讲后练、教练分离的模式进行。事实上，经过大量调研发现，这种模式存在很多弊端：第一，不利于依据生源实情进行分层教学。因生源不同，各学生对计算机基础知识和常规操作的掌握程度不同，导致部分以前从未接触过计算机的学生（比如偏远地区生活条件较为落后的学生）学习吃力，跟不上教学进度，从而学习积极性降低；第二，实践环节学习效率低下。在实践教学过程中，学生因寻找素材、规划任务等耗费大量时间，最终导致有难度或困惑的地方未在实验课堂中得到解决，教师的辅导作用也流于形式；第三，学习效果评估方式单一，缺乏有效的评价机制，难以真正掌握学生对知识吸收的程度。目前，多数院校仍然仅采用试卷和验证性实验的形式对学生进行课程考核，缺乏对学生实际动手操作能力的有效评价[4]。

二  课程体系建设改革重点及有效措施

（一）  产学协作下的课程建设改革重点及策略

自2016年以来，每年教育部都会给出两大批次的产学合作协同育人项目申请指南，全国多数知名企业如阿里巴巴、百度和腾讯等均有参与，且开设有金课建设、创新创业教育改革项目等多种类别的项目申请。因此，为了进一步提升本科人才培养质量，深化产教融合、校企合作，针对当前Web前端开发技术课程相关资源繁多且质量差异大、难易程度不清晰等问题，本文认为该课程体系的构建及改革策略应紧密围绕以下几个方面进行研究。

1  课程目标需定位清晰

教学对象定位明确，课程目标清晰合理。该课程开课时间：大学一年级下学期或二年级上学期；学生定位：零基础，或仅对程序语言有初步的认识，或学习过计算机应用基础等操作性前导课程的学生。课程目标包括知识目标、能力目标、就业目标和素质目标。其中，知识目标：通过36或54学时的学习，学生能够掌握网页设计基本操作技术和应用技巧，独立完成站点布局和开发任务；能力目标：能运用所学知识开发一些相关项目；就业目标：初级或中级网页及网站设计师；素质目标：提高学习能力，不断积累，将知识转化为技能，并学会交流沟通和团队协作。

2  教学内容需精简实用

教学内容精简实用，重难点突出。Web前端开发技术课程的学习实际上是如何完成网页元素的添加、位置布局及动作设定的一个过程，通常涉及HTML、CSS和JavaScript 3种基本网页制作技术的学习及应用，所含知识点极为琐碎。因此，该课程的教学内容应以网页设计与网站规划中最实用的基本知识为重点进行详细介绍，采用由浅入深、循序渐进的方式完成对网页的构思、规划、制作以及网站构建全过程的系统性介绍，使学生短时间内高效率地快速掌握网页设计与网站规划相关语言及常用设计工具的使用，培养学生掌握网页与网站规划和制作的能力，为未来进行动态Web网站的建设打下坚实的理论与实践基础。比如，CSS选择器是实现网页有效布局的一个重点学习内容，CSS3标准中选择器的种类已达50种以上，但在有限的学时内，课堂教学内容只需保留较为常用的ID选择器、类选择器和标签选择器等作为主讲知识点，其他的作为课下自主学习内容。

3  教学案例需真实贴切

选择适用于教学且较为系统完整的真实案例。该课程知识点繁多，对应的教学案例也比较充足，但以往教学中的案例组织较为随性，案例之间缺乏一定关联性，导致所学知识点之间的融合性较差，降低了学生对该课程的全局认知性和学习效率。因此，该课程教学中可以以淘宝、京东和亚马逊等知名商业网站案例作为基础，融入相关教学知识点并对其进行提取改造，形成知识点难易程度适合且更接近真实商业活动的教学案例。通过一个完整的商业网站案例先对分散的知识点进行讲解，再融会贯通，使学生对网页设计的局部设计和整体布局有连贯性认知。

4  教学设计需完整有效

构建“案例设计+多样化教学+学情分析”三位一体的完整教学体系设计。课程教学效果的评价结果大比例取决于教学设计是否完整有效。事实上，教学设计首先必须考虑生源的实际学习情况，其次，教学过程中是否将知识点融入已熟知的现实案例，最后需要考虑采取的教学手段是否适用、全面。因此，该课程可以采用“案例设计+多样化教学+学情分析”三位一体的完整有效教学模式。在案例设计中，案例类型可以按照“验证-设计-综合-创新”分层递进的模式进行实验体系设计；教学手段以实际课堂教学为主，借助于慕课、课堂派和雨课堂等线上学习方式[5]，通过课前预习和相关网络资源的学习、课中关键点的讲解、实例演示及课后的进阶练习，实现多样化教学的设计规划；基于课后复习反馈及实验完成情况，对学情进行及时分析与总结，适当调整教学内容、进度或方法等。

5  考核方式需灵活全面

课程成绩评估方式更加注重形成性考核（过程性考核）。形成性考核可采用“4+2”的模式，其结果可根据相应班级实际情况采取多种方式按不同比例组合给定，比如：课程考核成绩=形成性考核成绩=考勤（10%）+小组讨论（15%）+小组汇报（10%）+阶段性测试（25%）+学习笔记（20%）+设计任务（20%）。其中，考勤、小组讨论、小组汇报、阶段性测试是4个必选的考核项目。考勤按照学生的实际出勤情况进行统计计分；小组讨论效果主要从学生参与话题或题目讨论的积极性、发言的准确度及完整性、与其他同学的互动性等方面进行评价；小组汇报结果则是根据汇报人对题目内容是否有正确而具体的认识，以及汇报内容的完成度和质量等评定；阶段性测试成绩主要依据每个学生在完成给定测试题目的过程中应用所学知识点的熟练程度、正确性，以及功能实现的完整性、项目最终的展示效果等指标进行评分。设计任务和学习笔记是从10多个备选考核项目中筛选出的，设计任务结果评定主要根据学生完成相应综合性任务设计的质量情况，学习笔记考核的是学生学习过程中对课程主要知识点的记录质量，这2个考核项目也可根据课程性质、学生学习情况甚至任课教师个人习惯等因素进行替换，比如，可将学习笔记替换为实验报告。总之，为了更大程度地激发学生学习的兴趣和积极性，可以采用多种方式灵活组合的课程评价体系。