摘要：为了在《Web开发》课程中培养学生在Web前端领域解决复杂工程问题的能力，首先定义Web开发中解决复杂工程问题需要的几种能力，然后提出了一种组件化Web开发的方法，最后介绍将团队开发方案引入Web开发课程教学的方案。

0 引言

Web开发是高校计算机类专业普遍开设的一门专业课程，该课程起源于网页制作课程，课程的基础内容以网页及网站开发技术为主，但广义上的Web开发（俗称“大前端”）还包括移动APP、微信小程序等任何互联网产品的开发[1]，可见Web开发是对网页制作课程的继承和拓展。

Web开发同时又是计算机类专业学生的一项基本技能，就业市场对Web开发的人才需求量很大。Web开发技能之所以重要，主要是因为：首先，Web开发需要一定的编程能力，学生通过学习Web开发能加强并巩固程序设计能力；其次，Web开发比一般编程语言更容易制作出一些具有实用价值的作品，从而适合用来激发学生学习编程的乐趣；再次，Web开发的技术与现在流行的移动APP、微信小程序等的开发技术有很多共通之处，通过学习Web开发能为学生进一步学习移动APP、微信小程序的开发打下良好的基础[2]。因此，我校计算机学院将熟练掌握Web开发的技能作为提高学生编程能力第一阶段的目标，可见Web开发这门课程在专业培养方案中，具有承前启后、融会贯通的重要作用。

1 Web开发课程教学方法的演变

早期，Web开发这门课程常采用传统的讲授式方式上课，将Web开发领域的各个知识点逐一传授给学生，这种教学模式下学生往往会觉得都听得懂，知识点也都比较容易理解，但是学生却往往很难将这些知识点灵活运用，而将知识点综合运用才是独立制作网页的核心技能。学生无法制作完整的网页作品必将导致学生无法理论联系实际，教学的结局是：学生无法将这些知识点运用到实践中，一段时间后，学习到的大部分知识点都被遗忘。经过实践证明，Web开发课程如果采用传统讲授法教学的话，由于缺乏对知识点综合运用能力的有效训练，教学效率是非常低下的。

为此，许多教师纷纷探索案例教学法，即每堂课布置一个案例作为任务，让学生自己独立完成案例的制作，教师在旁边辅导并总结，通过案例将知识点传授给学生。实践表明，这种方法比讲授法的效果明显要好，因为通过案例能将许多知识点联系起来达到融会贯通的效果，学生通过案例实践能更牢固地记住相关知识点，但是案例教学法的实施效果与案例的选择有极大的关系。一般来说，案例应具有趣味性，难易适中，能覆盖多个知识点等要求。但目前，实际工程领域的网页越来越复杂，如果案例选择得较简单，容易与实际工程领域相脱节，而案例选择得过于复杂，学生又无法在一堂课甚至几堂课中完成。为此，只能在复杂性和易完成性之间进行折衷。

大多数案例教学法为了教学方便，选择的案例还是以简单的案例为主，这样无形中造成了Web开发的教学与Web开发的工程实践的相脱节。

为了让学生在学完这门课程之后能尽快适应实际工程领域对Web开发人才的要求，我们提出了基于组件式的Web开发案例教学方法。该教学方法符合我院计算机专业为实施工程教育专业认证，为了使学生具备解决复杂工程问题的能力，在教学中重视复杂工程问题及其解决能力的培养，这样能加强专业核心能力的培养。因为学生具备解决复杂工程问题的能力，是工程教育认证的最核心能力目标。

2. 组件式网页制作的基本原理

所谓基于组件式的网页制作技术，是指将网页中可能需要的各个组件（如导航条、栏目框）先制作出来，然后将这些组件装配进网页的布局框架中以形成网页[3]。就好比生产汽车，先把汽车的发动机、变速箱、底盘等零件生产出来，再将这些零件整装成汽车。

基于组件的Web前端开发技术，其基本步骤如图1所示。

图1基于组件的Web前端开发技术的步骤

传统的网页制作方法，是自顶向下的，这种方法先将网页的总体布局代码设计出来，然后设计各个栏目（区域）的布局代码，最后实现每个栏目中各个网页元素的布局和显示效果。可见传统的网页制作是一个自顶向下，逐步细化的过程。

与之相反，基于组件的网页制作方法，是一种自底向上的设计方法，与传统的网页制作方法相比，虽然在制作单个网页时，其花费的时间并不比传统网页制作方法少，但是如果经常需要制作网站，这种方法就能够快速地重用已经做好的各种组件，使得开发效率大大提高。而传统的网页制作方法，如果要重用以前制作的网页，只能在原有的网页基础上改，随着网页越来越复杂，原有的网页在设计时又没有遵循任何标准，使得这种修改会变得很难。

基于组件的网页制作方法可分为如下几个步骤：

1. 设计标准组件库

对于任何网页来说，常见的网页元素大致有导航条、栏目框、搜索框、图片轮显框、Tab面板、图片滚动栏以及页头和页尾等。开发者可以将各种样式的组件分门别类地保存到标准组件库中，以后还可以对组件库中的组件进行扩展。

以导航条为例，各种网站上的导航条，无非可以分为以下几种：导航条背景是单色的、导航条背景是图片平铺的。导航项背景是单色的，导航项背景是图片的，导航项背景是图片结合滑动门技术的，导航项背景是采用图片翻转技术的。

以栏目框为例，典型的栏目框有以下几种：①栏目新闻不带日期的，②栏目新闻带日期的；③带头条新闻的栏目框；④带图片和头条新闻的栏目框。从栏目框的样式来看，又可分为：①带边框的栏目框；②不带边框的栏目框；③栏目框头部是图片的，④栏目框头部是单色背景的。

将以上每种导航条和栏目框都分别制作一个组件原型（注意每个组件原型的类名和id名不要重复），并为每个组件原型写上完整的注释（如设置宽度、高度、背景、文字样式的方法），分门别类地保存在一个文件夹中，就形成了标准组件库。

2. 组件的制作

以组件原型为基础，就可进行组件的制作，制作的基本步骤如下：①在组件库中寻找最接近组件的组件原型；②设计组件的通用外观，包括定义组件最外层元素的宽和高；③定义元素的边框和背景样式；④定义子元素的内容；⑤定义子元素的样式。

3. 组件的重用

基于组件的网页制作方法关键是组件的重用。组件重用的原则是让页面元素的布局和美化都调用相应类名的方法来实现，这些类名是组件库中已存在的，从而尽量避免对CSS样式代码的单独修改。要实现组件重用，需注意以下几点：

（1）将样式划分为一级样式、二级样式和组件级样式。一级样式是网页布局样式，二级样式是组件的布局样式，组件级样式是组件内部元素的样式。一级样式和二级样式预置很多种，用户制作网页时可在相应网页元素上自由调用需要的类名。二级样式提供设置组件宽和高的接口。组件级样式提供设置背景、字体等样式的接口。设置网页版式时，尽量不修改组件级样式。

（2）将定义样式的类选择器中的代码尽量拆分，使每个类选择器零件化。通过让一个HTML元素同时应用多个类名，提升样式设置的灵活性。同时，利用CSS值变量技术增加设置元素大小的便利性。

CSS的优点是结构代码和样式代码相分离，但这个优点对于开发人员来说也是一种缺点，因为结构代码和样式代码不在一起，开发人员需要频繁地在结构代码和样式代码之间切换，如果代码很长，这样频繁切换和查找相关样式代码是很耗时的。

通过应用类名的方式应用CSS样式，就只要在HTML结构代码中添加类名即可，无需在样式代码中修改样式。

4. 建立网页布局代码库

目前网页设计的趋势是扁平化。扁平化网页设计的布局更加简洁规范，其网页布局一般通过矩形分块，而不会出现弧线等不规则分块线条。扁平化网页样式也更加简单朴素，不推荐使用阴影、高光等立体化效果。扁平化网页布局的版式常见的有以下几种，如1-2-1式、1-3-1式，可变宽度布局、固定宽度布局等，只要将每种网页布局的代码分别保存成一个网页模板文件，写上注释，保存在一个文件夹中，就形成了网页布局代码库。

5. 组装网页

根据网页效果图在网页布局代码库中选择合适的网页布局代码，再从标准组件库中选择合适的各种组件，将它们的HTML代码和CSS代码分别插入到网页布局代码的对应区域中，就完成了一个基本网页的制作，再根据网页效果图，对网页元素的细节进行美化和修改。如果发现新做的网页中有较好的比较典型的网页组件，可以把这些组件添加到组件库中去。这样组件库将不断完善，使新网页制作时可供选择的组件也越来越丰富。

目前，也有很多开源的网页组件库，如vue.js、Bootstrap等[4]，在组装网页时，也可充分利用这些开源网页组件库来完善自己的网页组件，从而加快组件库和新网页的更新速度。

3. 基于组件化的Web开发案例教学法

在Web开发的工程领域，复杂工程问题可定义为：网页越来越复杂，传统的从头开始制作网页的方法已无法适用实际的网站工程开发需要。为此，必须将网页根据其组成进行分解，拆分成组件之后再分别开发，并能对这些组件进行重用。同时，网站的复杂性也必然导致无法一个人独立开发，学生必须掌握团队化网页开发的方法[5]。

在Web开发的长期实践中，课程负责人发现基于组件化的Web开发方法能显著加快网站开发的速度，因此，提出了基于组件化的Web开发方法，并将这种方法贯穿于Web开发课程教学的始终。

过去，Web开发课程的案例教学一般每次课安排一个简单的网页案例，但现在随着网页越来越复杂，每堂课安排制作一个完整的案例已经变得不切实际。

为此，按照组件化网页开发的思想，在一学期的Web开发课程教学中，将课程教学案例的设置划分为如图2所示的四个阶段，并在各个阶段引入团队化Web开发方法。

图2 组件化Web开发的各个阶段

第一阶段：每堂课安排一个组件的制作，如页头、栏目框、导航条、轮播图、图片滚动栏等。这一阶段的主要教学目标是让学生掌握CSS样式美化和网页局部布局方法。这一阶段既能让学生发现网页制作过程中很多的细节问题，又让学生具备了独立地制作一个网页组件的能力，从而激发学生的学习成就感，为学生开发完整的网页打下基础。

第二阶段：每堂课安排几种常见的CSS网页布局效果的实现，这一阶段的教学目标是让学生熟练掌握CSS网页整体布局的方法。由于网页布局是网页制作的核心关键问题之一，也是Web开发课程教学的重点和难点，这一阶段学生的学习目标是能够独立编写和实现若干种典型网页的布局和布局代码。

第三阶段：将第一阶段已制作好的组件组装进第二阶段设计好的网页布局代码中，并对网页的细节进行调试，从而制作出完整的网页。这一阶段一般安排几个真实的网页案例，每节课安排一个完整网页的制作，因为前期已经将网页的组件和布局代码制作完成，故这些网页案例都是能够在一节课的时间完成的。

第四阶段：每堂课安排一个真实的网页案例，要求通过将组件进行重构的方法，实现不同风格和样式的网页作品。这一阶段将采用团队式开发模式，将学生分成若干小组，每个小组就是一个团队。在团队内部，先选出一名系统分析师，负责对网页项目的任务进行分解。其任务是将网页分解成多个组件，然后分配给每个小组成员完成一个组件的任务，另外再分配一位成员进行网页布局的设计。

将Web开发的教学过程按如下阶段划分后，既遵循了先易后难、问题驱动的原则，又能有效激发学生的学习兴趣，很多学习兴趣高的学生在第一阶段后，就会迫不及待地想将制作好的各种网页元素组装成网页。

为了有效培养学生的学习兴趣，兼顾传授必要的知识点。本课程采用以案例教学为主的教学模式，精心选择教学案例，将网页制作的理论知识点循序渐进，均匀分布在各个案例当中。将基于组件的Web网页开发步骤贯穿与所有案例的教学中。每节课采用：①案例演示；②提出问题；③讲解知识点；④ 学生实践操作；⑤ 讨论与反馈问题的五步教学法。

4. 团队化Web开发模式

基于组件的Web开发方法适合与团队化开发模式结合起来，团队化软件开发的核心思想是由系统架构师将软件拆分成函数，每个团队成员负责若干个函数的编写[6]。借鉴此思想，将团队化Web开发模式定义为：将网页拆分成组件，每个团队成员负责若干组件的制作，再由一个团队成员负责网页的组装。

具体来说，对于较复杂的网页，要求学生将其分解成一个个的组件，然后由团队成员每人完成一个组件的开发。这样，学生就初步掌握了软件项目开发中团队化开发的基本方法。

在课程的实践教学中，由学生通过自由组合形成若干个小组，每个组扮演一个团队。在团队内部，先选出一名系统架构师，负责对网页项目的任务进行抽象和分解。系统架构师的任务是将网页合理地分解成许多个组件，在分解中要考虑组件的相对独立性和可完成性，并设计网页的布局。然后分配给每个成员（组件制作员）完成一个组件制作的任务，另外再分配一位成员（布局代码员）将网页的布局设计用代码实现。最后安排组件组装员将所有的组件组装进网页的布局代码中，形成完整的网页。在网页开发完成后，系统架构师负责将该网页中通用性较强的网页组件加入到标准组件库中。

在团队化Web开发中，强有力的规范化是很有好处的。因为对于很多未接触过团队化开发的学生来说，会有抵触心理。在初期，要让学生认识到“软件=程序+文档”，强迫按照一定的流程文档规范（初期流程和文档不能太多）进行开发，坚持一段时间后效果将逐渐显现。在每个阶段的任务开始时时，都要给出相应的开发文档。成员严格按照开发文档的要求开发，并在每个阶段开发完成时，给出开发设计的详细文档，便于以后对网页进行维护修改。这样，学生将初步掌握软件项目管理的技能，如项目进度管理、项目变更管理等，这些对Web开发的工程实践来说，都是具有重要价值的能力。

图2 团队化Web开发模式

5 结语

实践表明，采用基于组件技术的Web开发教学方法，能够很好地训练学生综合运用所学知识点的能力，从而使学生逐步具备在Web开发领域解决复杂工程问题的能力。这非常契合Web开发课程的教学目标，也为培养更高层次的软件开发人才打下了很好的基础。

参考文献：

[1]陈苹.基于任务+项目驱动的《网页设计与制作》课程教学研究[J].绿色科技,2021,23(15):266-268..

[2]王姝,苏志东.基于能力本位的反向课程设计方法应用研究[J].微型电脑应用,2020,36(09):77-78+82.

[3] 唐四薪.HTML5+CSS3 Web前端开发[M].清华大学出版社,2018,5:41-48.

[4]马歌.SPOC在网页设计与制作课程教学中的应用[J].福建电脑,2021,37(02):140-142.

[5] 唐四薪,郑光勇.程序设计课程体系的维度与层次划分及其教学实践[J].计算机教育,2019(11):161-164.

[6]刘仲驰.混合式教学在计算机网页设计与制作课程中的应用[J].电脑知识与技术,2021,17(18):141-142.