优化网页制作与设计课程课堂教学的几点做法

朱晓

[摘           要]  中等职业教育是国家教育体系的重要组成部分，怎样提高教学质量，使教学更有效，这是当前国内很多中等职业学校教师关注的问题。随着互联网的飞速发展，计算机应用专业存在行业技术更新换代快、课堂教学相对滞后等问题。以中职计算机专业“网页设计与制作”课程为例，通过引入企业真实项目、引入世界技能大赛的最新技术和编写校本教材等方式，让学生承接真实的企业项目、接触最新的网站技术。通过优化课堂教学，提升中职生的专业技能和职业素养。

[关    键   词]  课程标准;职业能力;真实项目;网页制作

[中图分类号]  G712                 [文献标志码]  A              [文章编号]  2096-0603（2019）06-0188-02

一、网页设计与制作课程教学的困惑

（一）课标的改动与相关教材的缺失

网页设计与制作课程，是中职计算机应用专业的一门专业核心课程，其教学目标主要是让中职学生学会使用网页制作工具软件，掌握良好的网页制作知识与技巧，能够从事静态网页设计与制作的相关工作。上海市中等职业教育课程教材改革办公室对2006年5月编制的《上海市中等职业教育专业教学标准开发指导手册》进行了研究和修改。其中网页设计与制作课程新增了两项培养目标，即能制作交互式网页和能制作移动端网页。但目前的教学参考用书并没有涵盖这方面最新的知识和技能，教师需要通过其他载体完成新技能的传授。

（二）职业资格考试的滞后性

网页设计与制作的课程标准是以职业标准为参照，教学过程围绕上海市职业技能鉴定中心的《网页设计制作员》四级的考核内容与要求，这是检验中职学生掌握网页技术的一个有效途径。但是近几年网页制作新技术的涌现，使职业资格考试的内容已经无法满足目前职业岗位的需求。以网页布局方式为例，《网页设计制作员》四级考核要求中是运用表格进行网页布局，而目前主流的网页布局方式是基于CSS层叠样式表和DIV容器。如何让学生在完成职业资格考试的前提下，尽可能多地了解网页制作的最新技术，是我们面对的一个新问题。

二、优化网页设计与制作课程的实践尝试

网页设计与制作课程是“課程内容的相对滞后”和“学用不一致”导致职业技能考核与实际职业能力无法完全契合。本人针对网页设计与制作新课标，以典型网站为载体，开展了优化网页设计与制作课程教学的实践尝试，总结出了几条行之有效的做法。

（一）在课程中引入企业真实项目

基于企业真实项目的网页设计和制作，使本课程教学更贴近行业实际，要求学生做到如下几点。

1.以客户需求为先

以网页Banner制作为例，在传统的教学中，要求使用Flash动画技术实现多个图片的轮转展示。但是，客户提出网页要在智能手机等移动端合理的展示。目前移动端的IOS和安卓系统都不再支持Flash。因此，在网站的制作过程中需采用Javascript网页脚本替代传统的Flash动画来实现图片轮转效果，而这也正是网页设计与制作新课标的培养目标之一——制作移动端网页。

中职生通过了解客户需求，知道不同网页制作技术的应用场合，并能合理地运用到网站项目中去。

2.以岗位分工进行角色代入

把学生分成若干小组，每个学生根据自身特长担任网站设计师、前端工程师、网页脚本工程师、网站测试员等，从而让每个学生参与进来，了解各个岗位的不同要求。网站设计师除了需要运用平面设计软件制作网页设计稿以外，还需要有良好的沟通能力，需要客户明确告知自己网站的整体框架、企业的宣传形象和理念、网站内容的主次（比如经典案例或企业荣誉）等。网站设计的过程中需要与客户的多次沟通才能尽量减少后期的修改。前端工程师需要把网站设计师完成的网页设计稿利用切片等方式把平面设计图转换成网页文件。网页脚本工程师需要在前端工程师完成的基础上编写网页脚本，比如网页表单的验证、图片的轮转等。网站制作完成后，网站测试员需要对网站的完成质量进行系统测试。检查网页呈现效果与设计稿的差距;检查表单验证效果是否达到;检查网页动态效果是否符合预期;检查网站在各类终端的呈现效果是否合理等。网站测试员需要把以上情况记录下来，并反馈给相应岗位的网站开发人员。

通过每个岗位的思考和感悟，中职生的判断力、表达力、思考力随之得到提高，自信心和职业成就感也在悄然提升。

3.以行业标准衡量作品

不论是课堂中教师的评价，还是职业资格考试中鉴定中心的评价，其最终目的都是为了评价学生能否具有良好的网页制作能力。学校通过校企合作平台把行业资深的网站项目经理请进课堂，参与评价学生网站作品，指出学生作品与行业标准间的差距并提出修改意见。例如，学生平时在书写HTML和CSS代码时，比较随意，没有遵循W3C规范。项目经理就此提出了批评，要求完成的网页文件要上传至W3C官网，在线检测其规范性，为以后的网站维护提供方便。最后，项目经理从若干小组的完成作品中选出符合客户需求和行业标准的网站，并予以肯定和展示。再如，在课堂中引入行业专家，激发了学生的学习热情。中职生通过熟悉行业标准，逐步养成严谨的学习作风，提高了职业素养。

（二）引入世界技能大赛的最新技术

世界技能大赛网站设计项目代表着网页技术发展的方向，代表了行业的最高水平。世界技能大赛网站设计项目可以分为四个模块，包括制作网页设计稿、响应式网页制作、Javascript网页脚本制作和PHP网站后台制作。在模块二响应式网页的制作要求中，网页的布局是基于CSS技术和DIV容器，与传统的表格布局有相当大的差距。为此，笔者尝试在授课过程中把典型网页实行一题多做。在部分课程中分别运用表格布局和CSS布局，让学生了解两种布局方式的优缺点。以网页设计与制作四级考核内容制作“卡内基信息科技有限公司”网站首页为例，网页内包含了大量DIV容器，需运用CSS技术对这些DIV容器定义样式，此项网页技术在传统的网页课程中并未涉及。但学生通过世界技能大赛中学到的CSS网页布局技术可以很好地解决这个问题。于是，笔者让学生用两种方式完成该网站的制作，并通过加载速度、样式变化、后期维护等方面进行比较，了解到两种布局的不同之处。

在2017年世界技能大赛上海市选拔赛中，需要在网页中做一个交互式的图片库动画效果。当展示效果时，学生反响强烈，有学生说：“哇！好酷炫哦！老师快教我们。”这时，我也有些感动，原来中职生并没有那么厌学，只是缺少能激发起他们学习热情的载体。学习有了热情，课堂教学就有了一个很好的开始。在教学设计中，把这个交互动画按照难度分成三个任务：（1）页面载入完成后自动播放图片库动画。（2）鼠标悬停在图片库上时，动画暂停;鼠标移开图片库区域后动画继续播放。（3）通过自定义元素进行前一张和后一张的切换。教师引导学生通过小组协作，由易到难得完成了交互式网页的制作，符合新课标对中职生制作网页的技能培养目标。

中职生通过世界技能大赛所涉及相关网页知识的学习，可以了解最新的网页技术，形成完整的知识体系，为以后能成为专业的网页制作人员打下基础。

（三）编写符合中职生现状的校本教材

企业真实项目内容繁多，所涉及的知识面广。世界技能大赛题目难度偏高，不适合所有中职生。这些虽然都是课堂教学的优秀载体，但需要专业教师完成对项目的分解、对赛题的分析和对学情的把控。将这些项目和赛题资源加以分析梳理，形式适合中职生个性特长的校本教材。以企业真实项目和技能大赛为载体，把每个项目制作成独立的案例。每个案例配有相应的图文素材，分成若干任务。每个任务分成教学目标、任务书、任务描述、任务要求、评分表等。

三、探索的成效与反思

（一）探索成效

1.以实际项目为载体，激发学习热情，提升综合职业能力

兴趣是构成学习心理的动力系统中最活跃的因素，选用企业真实项目和代表职业技能最高水平的世界技能大赛作为课堂教学的载体，能激发学生强烈的求知欲和职业成就感，启发中职生进行自主探索。通过真实企业项目的检验，中职生学会了综合运用各类知识技能，懂得遵循行業标准的重要性，能以最合理的网页制作技术满足客户需求。把企业项目引入课堂不仅提升了中职生的网站专业技能，而且沟通能力和问题分析能力也得到了有效锻炼，职业素养得到了有效提高。

2.与行业最新技术接轨，提升课堂效率，促进学生发展

计算机应用专业的特殊性在于计算机技术的飞速发展，以网页设计与制作课程为例的中职计算机课程最突出的问题主要是课程内容的相对滞后。通过世界技能大赛和中职星光大赛的锤炼，中职生能了解和掌握最新的网页制作技术。第42届世界技能大赛上海选拔赛中获得团体金奖、个人一等奖。在上海市中等职业学校第七届星光大赛中获得个人一等奖和团体二等奖。

（二）反思

1.教学载体的选择必须符合中职生的实际水平

课堂引入的真实项目需要教师进行合理的教学设计，形成规范的校本教材，才可以更有利于中职生的学习。在此过程中，多观察、多发现，积极深入校企合作企业，不断充实企业项目，逐步形成校本教材。随着新的校企合作企业的加入，引入更多新的项目，选择合适的项目充实校本教材，用新的项目替换已经相对落后的项目。世界技能大赛难度偏高，学生对知识的掌握程度存在较大的差异性，这就需要根据不同学生实际情况确定不同层次学生的项目完成要求，既要让每个学生在其能力范围内完成学习任务，又要激发学有余力的学生的探究欲望。

2.课堂探索过程中碰到的一些问题

在优化课堂教学的实践探索中，也会遇到一些问题。学生在网页制作中引出新问题的有些是教师课前没有料想到的，需要在课后查阅相关资料才能回答学生。网页制作的评价环节因为互动较多，教师要随机应变，充分讨论其网站作品的优缺点，以便达成学生自主感悟生成知识和技能的教学目标。

参考文献：

[1]洪新军.计算机网页制作教学过程中应该如何培养学生的创新能力[J].信息记录材料，2018（11）.

[2]刘芳.多元化教学方法在计算机技术综合实验课中的探索：以“网页制作与网站建设”为例[J].科教导刊，2018（9）.

[3]桂婷.项目教学法在中职《网页设计与制作》课程中应用的探讨[J].信息与电脑，2018（9）.

[4]陈青云.HTML5与CSS3技术在网页制作中的应用及发展前景[J].信息与电脑，2018（8）.

[5]吴琳.以职业能力培养为核心的《网页设计与制作》教学改革探索[J].计算机产品与流通，2018（8）.

[6]黄秀茵.中职《网页设计与制作》教学方法的探索与应用[J].课程教育研究，2018（5）.

[7]武海艳，王倩，李林超.网页设计与制作[J].项目驱动教学方法探索，2018（2）.

◎编辑 陈鲜艳