211041464_Web_前端开发课程教学模式改革

I

互联网+技术

nternet Technology

Web前端开发课程教学模式改革

文|陈少燕

摘要：以首批“1+X”证书中的Web前端开发试点院校深圳市华强职业技术学校为例，分析试点培训过程中存在的问

题，分享我校教学团队如何改革教学模式实现课证融合，探讨如何提高考证通过率，增加学生项目实战经历。

关键字：“1+X”；课政融合；Web前端开发；教学模式创新

一、Web前端开发人才需求现状分析

随着我国网民数量的递增和手机的普及，越来越多

的人使用电脑和手机进行搜索数据，网站和手机app出

现爆发性的增长。网站和手机软件的开发和推广，都需

要用到Web前端开发技术。在各种软件的高速发展中，

出现了极为明显的人才短缺与发展不均衡现象。中等职

业教育是培养技术技能人才的摇篮，因此给中职生开展

Web前端开发课程很有必要。

随着社会的发展，学历证书难以体现学生的技能水

平，职业技能证书就产生了，其中Web前端开发课程

作为首批“1+X”证书在各个学校试点开展。我校是首

批试点院校之一，也在不断探索，力争以证促教

[1]

，提

高学生的网页开发能力，满足市场需求。

二、Web前端开发课程的现状

（一）课程内容陈旧

前端技术日益更新，高速发展，部分中职学校在课

程设置方面，还是停留在以前的html+css的基础教学，

因此开发出来的是静态网页。其实网页不再是单独的文

字和图片，还可以实现用户交互，让用户有更好的体验。

而这些都是需要新兴技术如html5+css3、Jquery等来实

现。教学内容缺乏多样性，在很大程度上制约了Web

前端开发课程的推进。以前的教材已经无法满足“1+X”

证书制度的需要，学生的综合能力无法得到提升。

这就对Web前端开发人员提出了更高的要求，需

要不断地学习新的技术，才能给用户更好的体验。而作

为传道授业解惑的老师需要重新了解行业需求，提高学

生的开发能力。

（二）学生缺乏实践机会

学生只是单一地学习每个模块的知识，很难将所学

到的知识运用到实际的案例实践中，没法检验学生的学

习效果。目前授课过程还有一个困惑是教学内容多，涉

及4门课，教学时长是三个学期，学生存在学了后面忘

记前面知识的现象。导致这个现象的原因是学生对知识

点的还没牢固掌握，知识点之间没有通过案例联系起来。

因此，采用案例教学很有必要。不仅可以让学生体验学

习效果，还可以起到温故知新的好处。

（三）部分职业学校没有转换办学模式

“1+X”证书制度，对学生的职业技能提出更高要

求，这是一项重大的创新。但是部分学校还停留在教师

授课的教学模式，忽略了行业培训。少了校企合作，教

师不能及时了解企业的需求，没有更新授课内容。校企

合作是学生学习的途径之一，加强校企合作教师的教学

能力也能得以提升，教学才有效。

（四）师资水平不够

随着国家大力推进职业技能等级证书，越来越多

的学校开展了“1+X”证书认证。但是一些中等职业学

陈少燕（1989-），女，广东潮州，学士，中学一级，研究方向：计算机应用。

（上接第47页）

参 考 文 献

[1]叶奕莉. 小批量多品种服装定制信息化平台设计方案[D]. 广东工业大学, 2016.

[2]裘玉英. 服装吊挂系统在生产流水线上的应用[J]. 嘉兴学院学报, 2008, 20(6):123-126.

[3]杨楠. 制造业技术型员工高流失率之分析[J]. 经济视角,2013(9):57-58.

[4]李辉. 5G核心网MEC和UPF研究与实践[J]. 电信工程技术与标准化, 2022,35(4):67-74.

[5]黄澈, 葛隽, 郑金渭,等. 一种基于AGV的脉动式生产系统:CN2.5[P]. 2020-11-03.

[6]赵博, 房向阳, 赵风松,等. 一种基于人工智能技术的人员物资调度系统:, CN110287859A[P]. 2019.

[7]郭鑫. 基于5G通信的无线网络智能抗干扰技术分析研究[J]. 数字通信世界, 2021(10):101-102,5.

[8]李雪霞, 张志斌, 褚建立. 基于智能化缝制单元的服装柔性生产线的构建[J]. 毛纺科技, 2020,48(10):77-80.

51

Copyright©博看网. All Rights Reserved.

I

互联网+技术

nternet Technology

面的功能和效果，该部分授课时间是高二第一学期。

由于手机的普及，网页不再是只有在PC端显示，

这给前端开发人员提出了新的要求：开发的网页需要同

时兼容手机和PC端。所以我们的教学内容还涉及教学

生使用DIV CSS为不同浏览器提供前端页面解决方案。

每一章配有案例，通过案例启发学生独立思考，建

立每个知识点的联系，让知识点变得通俗易懂。学生在

实践中温故知新，也在实践中检验学习效果。

（三）开发工具的更新[3]

在开发工具上，以前的网页设计课程都是用

Dreamweaver（简称DW）。重设计、轻代码，所见即所

得是DW的特点。显然DW是针对网页设计初学者、爱

好者的网页开发工具。作为计算机专业的学生，编程能

力是基本技能。而编程，因为都是英语，一直都是学生

最怕的课程。而HBuilder作为一款支持HTML5的Web

开发工具，它最大优势有语法提示、代码块等,不仅提

升HTML、javascript、css的开发效率,同时也减少了学

生的编程难度。因此HBuilder作为Web前端开发课程

的开发工具，学生不再恐惧学习编程。

（四）改变教学模式和学习方法

1.思维导图建立知识点联系

Web前端开发课程的知识点繁多，在教学过程中要

避免填鸭式教学，需根据学生实际情况，引进先进的技

术性内容，如加上思维导图建立知识点的联系，帮助学

生记忆。

2.蓝墨云班线上线下教学

在课堂组织方面突破常规的课堂教学，在蓝墨云班

平台，上传PPT、微课等教学资源，让学生线上线下同

步学习。在上课过程中，老师用它开展小测试、头脑风

暴等互动活动，还可以用举手、抢答功能让学生参与到

课堂问答中来。学生参与课堂互动、预习学习资料、完

成作业等学习活动都可以获得经验值。所以采用蓝墨云

班不仅是学生学习的帮手，教师教学评价的小助手。

3.案例教学法

在学习过程中始终坚持以学生为主体，教师为主导

的作用。采用案例教学法，引导学生学以致用，培养学

生分析问题、解决问题的能力。学生在拿到案例后，在

教师的指导下,学生对呈现的典型案例进行讨论分析,

归纳总结, 提出解决问题的方法。在案例的学习过程中，

培养学生小组合作能力和动手操作能力。

（五）兼职做网站，增加实战经验

借鉴我校的PPT课程教学，授课老师收集所有学生

的作品，有PPT模板的需求都可以购买学生的作品以获

得使用权。我校每年有十几支教师队伍参加教学能力大

赛，有些参赛队伍需要网站或是手机网页等信息化技术。

校却忽略了对“双师型教师”队伍的建设，授课老师出

现技能不熟练现象。很多学校没有引入校企合作，企业

人才没能有效参与到课程教学中，教学与企业脱轨。一

些教师的专业技能需要提高，一方面需要学校领导支持

“1+X”制度的推进，另外一方面是大力提升教师的教

学能力。

三、Web前端开发课程的教学模式创新

我校的计算机应用和计算机网络专业都开设了Web

前端开发课程，截至目前共完成5次培训和考试，通过

率从84%提升到97%。对比其他中职学校的成绩，我

校的成绩尤为突出。每一次的进步都有赖于团队的老师

的集体智慧，老师们从每次考证中不断总结经验，对课

程理念、课程实施和组织、学生的学习模式等方面进行

大胆突破和创新。下面是主要采用的措施：

（一）确定课程目标

根据各个招聘网站对Web前端开发人员的技能要

求，我们总结Web前端开发课程的课程目标为：

第一，掌握相关前端开发技术。熟悉一个网站开发

流程，懂得使用HTML5、CSS3、JavaScript等知识点完

成PC端和移动端网页。

第二，培养学生具备审美的能力。美观的界面能让

网页变得有个性、有品位，提高我们的用户的体验。因

此我们的课程还着重培养学生对网页界面的设计、编辑、

美化等工作。

第三，培养学生具备独立思考能力和团队协作能力。

从客户的需求再到最后网页的验收，后期的维护，都需

要整个团队的集体合作，要求开发人员有良好的工作习

惯、沟通能力和良好的执行能力。

第四，培养学生能够举一反三的可持续发展能力。

学生能够融会贯通把知识用到每个案例中。

（二）课程内容与时俱进

根据《web前端开发职业技能等级标准》（初级）

中涵盖的实践技能，结合我校学生实际情况，修改人才

培养方案

[2]

。根据web前端开发的考试大纲给教学内容

安排不同的课时，以职业资格考试为导向，确定如下的

教学内容。

第一，web页面制作基础，介绍简单网页的制作，

网页布局和css样式美化页面等内容，授课时长是一个

学期。

第二，HTML5+CSS3开发基础及应用，介绍

HTML5+CSS3的新特性和新增元素。

第三，JavaScript程序设计，介绍JavaScript语法基

础和事件处理，第二和第三部分授课时间是高一第二

学期。

第四，轻量级框架应用，使用Jquery插件来完善页

52

Copyright©博看网. All Rights Reserved.

学习过Web前端开发课程的学生可根据参赛队伍的需

求完成作品，参赛老师会以付费或是小礼品感谢帮忙的

同学。让学生体验了劳动带来的回报，也是积累工作经

验和增加项目开发实战经历。

（六）提高教师业务能力

鼓励教师不断继续学习，利用空闲去企业顶岗学习，

参与项目的实战，提高教师队伍动手操作能力。努力打

造“双师型”教学团队，鼓励教师参与相关职业技能培

训并考取资格证书。

2021年11月2日，我校邀请腾讯计算机系统有限

公司技术研发工程师田宽先生到校开设讲座。企业精英

分享了学习经验和前端开发类技术要求，帮助老师和学

生了解企业需求，了解行业内广泛应用的各种前端框架，

提高老师和学生的开发能力。

除此之外，学校还组织老师参加国培（“1+x”证

书制度带头人培训和web前端开发课程培训），提高带

头人制定人才培养方案能力，推进课证融合，完善课程

考核标准等。通过web前端开发课程培训，提高教师教

学组织与实施，教学诊断和教学质量评价能力等。

我校老师积极参加广东省职业院校教师教学能力

技能大赛

[5]

，目前已有多个团队获得省级大奖。我校也

是在深圳所有中等学校中获奖数量最多的，有四个团队

也获得2022年下半年代表深圳市参加国赛的资格。全

国职业院校技能大赛教学能力比赛是职业教育中影响力

最广、认可度最高的教学能力赛项。该项比赛以3-4人

的教学团队为单位参赛，要求呈现教学设计以及教学设

计的实施报告、专业人才培训方案和课程标准。我校的

web前端开发课程团队老师也在积极备赛，优化了教师

教学团队建设。教学能力大赛通过校级、区级、市级、

省赛和国赛逐级举办，让一批教师成长起来，更重要的

是在教师教学能力比赛中促进web前端开发课程的教学

设计更合理，推进了课堂教学改革，培养学生自主学习

能力，推进web前端开发课程的教学模式改革。通过参

加技能比赛，有助于推进教师、教材、教法改革，全面

提升职业教育的教学质量。

（七）选用教材

以前的Web前端课程的教学资源和教材无法匹配

web前端开发考证，如何帮助学生顺利拿到证书，做到

I

互联网+技术

nternet Technology

真正的课证融合是我们教学团队主要的研究方向。

在备战web前端考证时，我校主要使用电子工业出

版社出版的Web前端开发（实训案例课程）的培训用

书。该书涵盖了《web前端开发职业技能等级标准》的

实践技能，除此之外还包含多个案例，提高学生开发实

践能力。

（八）加入品牌课程培植，提供优秀教学资源

为了提高web前端课程建设水平和学校品牌课程的

学术品位，提高教师的课程实施能力和领导力，我校的

web前端开发课程成为深圳市福田区第二届品牌课程的

培植对象。在培植过程中，我们教学团队发表多篇论文，

录制多节微课，方便学生线上学习，给学生提供多种学

习方式，突破常规的课堂学习模式。

（九）第二课堂培优计划和技能竞赛[4]

为了提升职业教育办学质量和学生就业能力，我校

对web前端开发课程开展了第二课堂的培优计划。具

体是每周二和周四放学后对学生进行培训，授课内容比

课堂教学更全面，授课形式主要是教师提供微课或是学

习网站，学生自主学习。或是由师兄进行经验分享，教

学形式多样。通过第二课堂的培优计划，盘活了教学资

源，健全培训认证体制，为学生职业院校技能大赛挑选

选手。职业技能大赛已经成为职业教育的重要组成部分，

是职业教育的一大改革，可让职业教育实现从量到质的

变化，也是衡量一所学校教育水平的重要标准。在这几

年的web前端开发过程中，我校尝试以比赛促进教学，

以比赛促进学习，实现比赛和教学融合，互相促进。

四、结束语

在职业教育改革的背景下，中等职业学校只有坚持

落实“1+X”证书制度，落实“1+X”证书制度的组织实施，

争取教学突破，培养出新时代的技术人才，为学生的就

业提供有力的保障。

为了提升教学质量，满足学生的就业需求，提高

“1+X”考证通过率，我校web前端开发团队将会不断

地探索新的教学模式。利用“1+X”证书制度，实现课

证融合，争取教学与社会发展同步，与企业实际同步，

培养更多的网页开发人才。

作者单位：陈少燕 华强职业技术学校

参 考 文 献

[1]李峰. 基于"1+X证书"Web前端开发的"课证融合"探究[J]. 数字通信世界,2020(10):246-248.

[2]唐以志.1+X证书制度:新时代职业教育制度设计的创新[J].中国职业技术教育,2019(16):5-11.

[3]高岑.“1+X”证书制度下中职学校“课证融通”模式探究——以“Web前端开发”初级证书为例[J].电脑知识与技

术,2022,18(08):137-138.

[4]王允娜. 以赛促建 以赛促改——通过学生技能比赛浅谈推拿实践教学改革[J].卫生职业教育，2014,32(16):48-49.

[5]刘燕. 职业院校教学能力大赛对新型教学模式改革促进作用探析[J].科技与创新,2022(19):36-38.

53

Copyright©博看网. All Rights Reserved.