逆向学习编码的Web前端开发教学研究

黄雯婕

摘要：Web前端开发职业技能证书中对职业学校学生的编码能力提出了很高的要求。CSS作为Web前端开发学习中的基础内容包含在Web 页面制作基础和HTML5 开发基础与应用两部分内容里，是后续学习的重要基础，探索以兴趣为导向的教学策略，由易至难，循序渐进地进行编码学习。从先进行界面操作实现页面效果，以特效及功能吸引学生入手，再由界面操作反推代码，进而介绍代码功能，通过不断地练习，实现学生掌握相应编码的目标。

关键字：Web前端开发 CSS 设计界面操作 编码

2019年教育部部署启动了职业教育“1+X证书制度”，在职业学校中推动了学历证书+职业技能等级证书制度的试点工作，其中Web前端开发职业技能证书中对职业学校学生的编码能力提出了很高的要求。Web前端从业标准明确指明了需要具备静态网页开发、动态网页开发、数据库应用、网页美化和性能调优、网站架构设计、软件工程、软件测试和维护等技术和技能，而面向中职学生考核的初级证书，也要求学生具备Web前端开发基础知识及静态网页开发的设计、调试、维护等能力，具有利用HTML、CSS、JavaScript、网页开发框架等专业知识、方法和工具将产品UI设计稿实现成网站的技能。能从事Web前端软件编码、软件测试、软件技术服务等工作。考核标准涵盖了Web 页面制作基础、HTML5 开发基础与应用、轻量级前端框架、JavaScript 程序设计等。也就意味着对中职计算机教学提出了更高的要求，必须要走出舒适圈，探索与要求相对应的更高效的教育教学方法，培养出具有较强的逻辑思維能力，拥有良好的编写代码习惯，沟通能力强，具有运用色彩搭配、点线面布局来设计较好用户体验网站页面的能力的学生。

面对这样的改变，我们的计算机教学也一步步进行着各种探索，目前较多的两种教学模式，其中之一是传统的学科教学模式，也就是从理论到实践，强调系统性和完整性;而另一种则是以应用作为教学目的，也就是我们目前中职计算机教学中常用的一种教学模式，从学生的实际操作能力入手，先会做再升华，由掌握技能倒推理论进行学习。

中职学生文化理论基础较薄弱，但是动手能力相对较强。并且由于过去在文化课中常常经历的挫败，他们对学习的兴趣往往很难调动起来，特别是类似于编码的课程，如果一开始就运用传统的学科模式，从理论入手，长篇大论的代码会直接让学生产生厌恶的情绪，从而导致教学的失败。

在Web开发领域里，实现同一个效果有许多不同的方法，而CSS+ DIV作为其中的重要组成部分，是实现诸多在表格中无法实现的特效的基础，也是中职Web前端开发课程的重要学习内容。

过去我们的教学方法是从CSS的基本理论入手，讲解选择器及各类标签的属性，在讲解网页制作过程中往往也以输入代码为主，由于学生本身英文基础的问题，会对标签、属性的名称记忆产生强烈的不安，从而影响学习效果。在经过实践后我们发现这样的上课模式教学效果并不理想，探究我们的课程学习目标，要求的是学生能够使用CSS及DIV进行布局、美化网页，进而添加各种特效，那么在运用过程中，我们使用界面操作的方式替代一部分代码输入，在完成效果之后再来学习悉标签及属性的英文名称，这样不仅降低了学生的记忆及学习难度，也极大地提高了学生的学习兴趣。在大量的练习之后会自然而然会熟悉相应需要记忆的标签名称和属性。而这样的一种界面操作为主，代码输入为辅的学习方法，在我们的CSS+DIV课程中获得了较好的效果。

例如在“设置网站主体横向导航样式”这个内容中，我们使用Dreamweaver CS6完成，要求：主体导航有背景图片，并且导航部分的链接处于激活状态时，文本颜色改变，同时出现提示图标。

在制作过程中，首先插入DIV：nav，并新建CSS规则对它进行属性定义。按照传统的模式，在实操之前，必须先掌握所有CSS规则中的属性及其属性值的含义并记忆相关属性名称，然后在CSS页面中输入代码：

#nav{width：778px;height：50px;border：1px solid #000000;}

从而实现页面效果。但是由于中职学生英文差，对代码学习天然排斥，很多学生会因此完成不了学习任务。因此在教学中，我们尝试改换思路，倡导所学即所用，也就是只讲解在这个DIV中应用到的属性，并且我们的大部分操作直接用界面操作替代代码录入，直接在css规则界面设置以上属性，完成框架搭建。

接下来使用列表输入文字。在这一步，学生需要学习标签ul及li的使用。摒弃掉过去先讲解标签含义及定义格式的方法，直接在Dreamweaver设计视图中使用工具栏中预置的列表按钮，并在编辑区录入导航文字完成。完全没有涉及到代码内容。当学生在设计视图中完成页面内容编辑后，我们再打开代码视图去学习ul及li标签。掌握：

• 首页
……

的用法

这种学习模式下学生不需要HTML的基础也能够完成并看懂代码及视图操作，也能够掌握标签ul及li的应用。

第三步是对ul及li进行属性设置，我们都可以直接在CSS格则定义对话框中完成，避开代码操作。

ul 列表类型：无;边界：0像素;填充：0像素

li 浮动：左对齐

第四步是设置导航链接，并对链接进行设置。设置导航链接可以直接在Dreamweaver设计界面完成，选中文字，在属性栏好链接，接下来就是使用CSS规则对文字样式进行美化了。

a 文本大小：12像素;文本粗细：加粗;文本颜色：白色;行高：50像素;

文本对齐：居中;显示：块;高：50像素;宽：100像素。

为了更直观地查看效果，我们现在可以将导航背景设置到div#nav中了，在#nav将已经准备好的背景图片添加到背景属性“background-image”中，得到初始效果图。

至此导航制作就完成了，在Dreamweaver设计界面中操作及在CSS规则面板中进行属性设置代替了大部分的代码输入，大大减轻了学习难度。当学生熟练掌握界面及对话框设置之后，再代入部分代码进行学习，这样逆向进行的学习模式，在我们的实际教学中证明更适合中职学生的学情。更好地实现教学效果，达到教学目标。

中职学生的自主学习和自我管理能力相对较弱，而本身文化基础和逻辑思维的弱势在编码内容的学习中更加凸显，CSS作为教育部1+X项目Web前端开发职业技能证书考核学习中的基础内容，包含在Web 页面制作基础和HTML5 开发基础与应用两部分内容里，是后续学习的重要基础，也具有较大的难度。首先体现在属性多，区分具有很大的难度;其次各属性之间会互相影响，还存在各种优先级别的问题，难以在短时间内完全掌握;第三，作为英文词汇的存在，对中职学生本身就具有非常大的难度和天然的反感。在这样的情况下使用传统的教学方法存在很大的弊端，必然很难实现教学目标，更甚者导致学生弃学该门课程。因此针对这个情况我们采用的以兴趣为导向的教学策略。由易至难，循序渐进地开展教学，从先进行界面操作实现页面效果，以特效及功能吸引学生入手，消除学生的心理隔阂，激发学习的兴趣，接受CSS的学习内容，再由界面操作反推代码，进而介绍代码功能，通过不断地练习，实现学生掌握相应编码的目标。

参考文献

[1]北京阿伯泰克北大青鸟信息技术有限公司编著。《制作企业网站》.科学技术文献出版社出版。