企业项目运作式教学法在html5+css3课程中的应用

陈红霞 黄永康

【摘 要】本文论述企业项目运作式教学法在html5+css3课程中的应用，总结高职网页设计类课程的教学现状，提出企业项目运作式教学法包括教师参加培训与顶岗实习，获取最新的教学材料，将企业式项目操作带入课堂，企业项目分段检查与考核，并结合html5+css3课程阐述应用过程。

【关键词】企业项目运作式教学法;html5;css3;web前端;响应式设计

【中图分类号】G;【文献标识码】A

【文章编号】0450-9889（2020）01C-0085-02

响应式web前端设计（html5+css3）是高职软件技术专业的核心课程。如何让学生在有限的课时内掌握更多的技能，如何从掌握简单的静态网页设计，提升到能熟练地运用css3、bootstrap框架等进行响应式web设计，以适应企业对高职软件类专业毕业生的高质量岗位要求，是摆在高职软件类专业教师面前的一个问题。

一、高职网页设计类课程的教学现状

（一）教学环境：网页设计技术的更新换代速度快。基于web前端的网页设计类技术随着“互联网+”的广泛运用而飞速发展。css样式的多样化，以及Google Chrome浏览器增加的功能标签越来越多，设计框架也越来越成熟和多变。一方面日新月异的科技进步使网页设计越来越绚烂和丰富多彩，一个网页上除了文档图片之外，还需要尽可能多地囊括视频、Vlog等新兴的事物。于是，前端设计对于教师与学生的要求越来越高，要求软件专业类教师与时俱进地不断学习新技术，提高自己的专业技能，以适应不断变化的前端开发要求。

（二）教学资源：参差不齐又容易过时。教学资源的获取往往来自教师所选择课本里配套提供的源代码或者其他资源，但编著者从撰写课本到排版印刷，到最后正式出版并到达高职学生手中使用，存在着一定的时间差，导致有些教学资源甚至还没出版就已经过时。

（三）教学方式：难以适应当前的时代要求。网页设计类课程的教学大多采用传统的理实一体化教学，教师按照课本上所提供的源代码和配套资源进行讲解和操作，高职生按照老师的示范复制完成此类操作。一开始高职生都能比较顺利地完成课堂教学的要求，但随着网页设计需求的改变，高职生会不知所措。另外，高职生单纯的模仿难以适应不断变化的前端网页设计，技能在机械式重复中难以得到真正提高。

（四）辅助教学方式：偏向设计而减弱编程能力。高职的网页设计类课程采用了较多教学辅助软件，较常见的是Bracket和Dreamweaver（即DW）。特别是DW因其命令简单又能自动生成源代码，被广泛地运用在网页设计类教学中。DW偏向于设计，大多数高职生只需要简单地完成文档或图片文字的拖动，就可以自动形成网页和生成源代码。但高职生却无法通过DW独立地编写css样式文件;一旦网页样式略微复杂和多样化，高职生又无从下手，难以达到教学的要求。

（五）考核方式：检验标准单一，分数难以真正体现高职生的技能水平。现阶段高职网页设计类课程的考核方式大多采用机试或者提交作品，基本上是教师给出同一个网页设计题目，让全体学生进行设计。在这样的考核形式下，部分学生的作品雷同，甚至有部分高职生只是利用DW软件简单修改图片就完成了网页设计。这样单一的考核与评分标准难以真正体现高职生的专业技能水平，在评分上也难以做到真正的公正。

二、企业项目运作式教学法

（一）教學资源获取：教师参加培训与顶岗实习，获取最新的教学材料。以笔者所在的广西工业职业技术学院为例，首先，教学团队积极地前往北上广等大城市进行专业培训，以掌握最前沿的前端网页设计专业技能，了解网页设计的发展方向和发展趋势，以适应当前的教学要求。其次，教学团队积极地前往校企合作企业进行顶岗实践。一方面了解企业对高职生网页设计方面的岗位需求和要求;另一方面获取企业已完成项目的最新配套资源，并充分运用到课堂教学中来。同时，还可以获得企业的相关培训资料，以企业培训的方式结合高职生的培养模式，将教与学的方式模拟成高职生在企业完成项目的形式。教师相当于项目经理，而高职生相当于企业员工。以完成企业级别项目的方式，对高职生的网页设计完成质量提出了更高的要求。

（二）教学方式：企业式项目操作带入课堂。网页设计对象上的多样性更能体现高职生的专业技能水平。在教学上，将企业完成项目的方式带入课堂中来，教师更像项目经理，高职生类似项目组成员。课堂上采取了“边教边学”的方式，将整个项目分割成各个子任务，配合教学进度，高职生从做简单的子模块开始进行网页设计，而这样的子模块又是整个大网站的一个组成部分。

同时，尽可能地培养高职生的自学能力，高职生获取的知识并不仅仅局限于课本;专业教师可以同时提供多种资源，让高职生选择和组合，也可以提供多种自学资源，让高职生自主学习。为了防止高职生的作品雷同，笔者要求学生完成的网页设计中强调更多的个人特质。比如，网页设计作品以“个人网站”作为标准，其中又包含了“个人电子杂志设计”“个人求职简历”等个性化的元素，强调高职生的自主编程能力，高职生相互之间难以模仿，这要求高职生去自我学习和自我提升。

（三）考核方式：企业项目分段检查与考核。为了适应以上的教学模式，考核模式也转换为企业式的阶段检查与答辩方式。高职生每周就像在企业例会上一样，将自己的阶段性成果当众展示和讲解，而其他同学对该同学的项目进展状况进行集体打分和讨论，指出其在网页设计上的不足和改进的方式方法。这样的实施效果，一是使得课堂互动较生动有趣;二是高职生参与到课堂和项目中去，提高了自身专业素养。

因为有了高职生作品之间的相互对比，高职生的网页设计成绩评定就以“最好的作品”作为参考标准，结合界面、css3样式设计、JavaScript设计，通过相互之间的比较扣分或加分，根据学生各自的作品和水平进行评定。这种评分模式既促进了高职生之间的良性竞争，又培养了学生之间协调合作、共同进步的团队精神。

三、企业项目运作式教学法在html5+css3课程中的应用

以广西工业职业技术学院为例，将企业项目运作式教学法应用到软件技术专业17级的html5+css3课程设计项目“基于html5+css3的电子系成果展示网站”。

（一）项目任务的分派，组建项目小组。由教师下达课程设计任务书（即项目计划书），计划书中详细地描述出电子系有关领导（相当于客户）对该成果展示网站的需求，包括功能性需求（网站需要达到怎样一种展示效果）、性能性需求（網站的响应速度等）。而最终的项目产出物需要同时提交展示网站的源代码和配套的软件文档。

在参与课程设计的42名学生中，由授课教师指派6名学生作为项目小组组长（相当于任命6个项目经理），各项目经理具备人事任免权，可以自由地从另外的36名同学中选出1～7名同学组建自己的项目团队，为了保证各项目组的成员能够充分地行使表决权，每个项目小组的人数必须为单数。这种操作方式一方面培养了学生的团结协作能力，另一方面又提高了学生的团队沟通能力。

（二）WBS项目分解和责权分工。各项目经理通过Project 2013管理软件，以工程结构分解WBS的方式将项目分解成各个子任务（工序），每个子任务有相应的开始时间和结束时间，并进行各个子任务的优先级排序，并标注出各工序之间的衔接关系。这个过程当中，各项目经理需对教师提交进度计划表，由教师根据教学计划，对各进度计划表进行审核和做一些相应的更改，经过确认之后再发还给各项目经理，要求项目经理按此进度计划表组织开发工作。

教师要求项目经理在本项目团队中进行责权分工，有详细的任务分配表和任务书，以书面和口头通知的方式将任务分派给个人。在这个过程中每个同学的任务量不能过多或过少，项目经理有权对本小组各成员的表现进行阶段性评价。

在此过程中由项目经理监管本项目团队的工作进展，每周一各项目小组需组织项目例会，并将项目进展状况以交流的形式向教师汇报，并填写相应的开发日志。教师对照进度计划表，适时地对各项目组进展状况进行监控和调整，并在课堂上对所有学生进行授课和讲解，并解答各项目小组遇到的技术问题。

（四）成果展示和成绩评定。课程后期，各项目小组以PPT+成果网站展示的形式进行答辩，要求项目小组成员分别讲解自己所完成的模块部分，教师将对该学生提出问题，并就该项目组成员具体完成的模块部分做进一步考核和评分。

而最终的成绩评定，一方面通过各项目经理的绩效考评表进行判断，另一方面综合该学生的考勤（30%）、答辩表现（10%）、模块展示及完成效果（60%），给出最终的分数作为该门课程的总评成绩。

在web前端（html5+css3）网页设计课程中，采用了企业项目运作式教学方法，高职生的自主学习能力得到了极大提高。分段式检查提升了学生学习和完成作品的积极性。而以企业项目式的完成标准来要求高职生完成网页设计作品的质量，促进了学生专业技能的提升。

【参考文献】

[1]李文.任务驱动教学法在《HTML5与CSS3编程》教学中的应用[J].计算机产品与流通，2019（4）

[2]张敏，陶建林.HTML5前端开发课程教学改革实践[J].教育现代化，2018（52）

【基金项目】广西教育厅2017年度教育教学研究项目一般项目B类“基于CDIO的《软件工程》课程教学改革研究”（GXGZJG2017B101）;广西工业职业技术学院2017年度科学研究项目“基于CDIO的《软件工程》课程教学改革研究”（桂工业院科研Y2017JG012）

【作者简介】陈红霞（1974— ），女，广西柳州人，广西工业职业技术学院副教授，研究方向：软件工程、高职教育教学。

（责编 丁 梦）