DIV+CSS在中职计算机教学中的运用

邹 锰

（广东省东莞市大岭山职业技术学校 广东 东莞 523820）

DIV+CSS的网页布局方法现已成为网页设计的行业标准。在计算机专业课教学中，网页设计教学也都是以DIV+CSS布局为中心进行的。笔者在实际教学中发现，DIV+CSS布局这一方法不仅适用于网页制作，还能够灵活运用到其他计算机专业课教学中，甚至运用到其他专业课教学中。

DIV+CSS技术简介

DIV+CSS是当前WEB标准中的一种术语，它是一种网页布局方法，这种网页布局方法有别于传统HTML网页设计语言中的表格（TABLE）布局方式，可实现网页页面内容与表现相分离。DIV可比做容器，它用来进行网页布局，打好网页的框架。CSS是层叠样式表（Cascading Style Sheets） 的缩写，用于定义HTML元素的显示形式，是W3C（The World Wide Web Consortium，万维网联盟）推出的格式化网页内容的标准技术，是网页设计者必须掌的技术之一。

如图1所示，每个DIV相当于一个盒子，盒子中存放网页的具体内容，包括图片、文字、动画等。整个网页由很多个DIV“盒子”拼成。

图1 网页与DIV关系示意图

中职计算机教学存在的问题

计算机教学内容多而杂 有些计算机课在中职每个专业都有开设，基本上成为了中职生的必修科目。相对而言，计算机专业也存在计算机教学内容多而杂，课程难度深浅不一，学生学习好似走马观花的问题。几乎每一款流行软件都有涉及，但都停留在入门阶段。

计算机教学形式单一 计算机学科操作性强，相对于其他学科而言，学生动手机会多。但是由于计算机软件的特点，在计算机教学中，一般采用的教学方法基本是案例教学法，教师将知识点通过案例操作一遍，然后学生按教师要求也将实例做出来，或者反复练习。

计算机知识更新快 软件的更新速度是非常快的，学生在高一学习的知识可能在高中毕业时已经完全被新的知识代替。一方面，学生对新的计算机技术有兴趣；另一方面，教师跟不上计算机知识更新步伐。

学生综合运用计算机的知识能力差 学生学习完多款软件后，对单一软件的运用可能较好，但是很多实际问题不是一款软件就能解决的。另外，文化基础差也是中职学生的一大软肋，造成学生的综合能力低下。例如，很多学生无法单独做好一个动画短片，因为做动画短片除了要掌握好基本的动画制作软件Flash等，还需要对音频进行很好的控制；另外，还要自己写好剧本，需要学生良好的写作能力和创作力、想象力的综合运用。

DIV+CSS在计算机教学中的新解

DIV——教学内容结构化DIV+CSS一个显著的特点是分离页面的表现与结构。如典型DIV布局图所示，它的结构很清晰，中间有一个DIV嵌套。在计算机教学内容的安排中，也需要结构化、模块化。每一个软件都可以分为几块，比如Flash软件的教学完全可以分为绘图块、Action块、动画块等。DIV布局有一个浮动的概念，在同一行并排布局中起到很重要的作用。通过CSS中改变Float的属性可以实现布局的调整。同理，在教学中对于知识点结构化后，对同一层次的知识点完全可以实现浮动操作。例如，前面提到的Flash三个块中的动画块中包含引导线动画、遮罩动画、逐帧动画等，它们是同一层次，完全可以随意改变它们的学习顺序。

CSS——教学形式多样化 在DIV+CSS技术实现的网页中，可通过改变CSS的设置，实现网页表现的多样化。在计算机教学中，对同样的教学内容除了采用案例教学，项目教学方法外，完全可以采用游戏、竞赛投标等方式进行。对不同层次的学生，同样的内容必须能够提供适合它们的不同教学方式。教师在教学形式上要大胆创新，从其他学科教学形式或流行元素上的基础上开发出多样化的教学形式。实现同样的内容不同的教法、不同的学生不同的教法。

DIV+CSS字母缩写新解 （1）D（Develop，发展）：在教学内容方面，教学的知识注重计算机知识更新的速度，力求选取新的技术知识，对同样的问题，新技术、新方法能解决的就采用新方法。如Flash CS4开始的骨骼工具对制作人物动作能够简单化、科学化，就可以替代逐帧动画中的人物动作制作。（2）I（Interesting，有趣）：在教学内容方面，选取的内容要让学生感兴趣，当然计算机学科中的大部分内容是枯燥的，也是不可不学的，这就需要教师在教学形式上下大功夫，将教学内容由复杂变为简明，由无趣变为有趣。 （3）V（Video，视频）：在视频方面包括各种对教学有利的动画资源和各种格式的音视频集合，着重注意对教学形式有利的视频。另外，计算机学科注重操作性，教师每节课在教师机上对案例的演示都可以用录屏软件录制下来，便于不同层次的学生复习。教师自己录制的视频非常重要，因为这是教师根据学生的特点自己选取出来的教学内容，有针对性，比网络上的相关教学视频更能得到学生认同。 （4）C（Center，中心）：所有的教学内容和教学形式都要围绕一个中心——以学生为中心。所有的教学手段都是以学生学会知识、学会学习为目标。对计算机教学来说，教师教学的最终目标是让学生掌握对计算机各门学科学习特别是自学的能力，以及综合运用多款软件解决实际问题的能力。（5）S（Solve，解决）：对于中职学校来说，开设的专业科目都是以技能为主，计算机学科也更注重实用性。因此，教学上要注重联系实际，着重对学生解决问题能力的培养，真正做到学以致用。（6）S（Sweat，出汗）：在计算机学科中，软件的学习是一个长期的过程，对实际问题的解决往往需要灵活综合运用几类软件，也是挑战耐心的过程。就算只用到一款软件的学科，要很好地解决实际问题也需要一个 “流汗”的过程。例如，设计一个动画，人物设计、场景设计、镜头的运用、音乐的处理、后期的制作，每一个步骤都不能马虎。一个好的作品制作出来是需要流汗的。学生也只有经过这样的过程，才能学会知识、运用知识并体会到学习的乐趣，从而更好地学习。

DIV+CSS在计算机教学中的应用

在计算机教学中的运用 在全国等级考试计算机一级教程中有一节关于进制的知识，大多数时候教师是跳过不讲，因为中职学生数学基础不太好，很难学明白，并且在正式等级考试时，学生能调用Windows系统自带的计算机直接得出结果。进制这个知识点确实很枯燥，所以学生没兴趣学。没兴趣就肯定学不好。按DIV+CSS的原理，首先要让进制这个知识点变得有趣，另外，它必须能够解决实际问题，同时，要以学生为中心，使教学形式围绕学生转。教师在讲解这节时可以安排一个魔术环节，自己或者让班上一名学生表演一个猜出生月份的魔术（当然先教会这个学生这个魔术的演法）。情节很简单，表演者先后展示给学生A、B、C、D四张卡片，每一次学生只需要仔细看一看，自己的出生月份有没有位列其中。如图2所示。举个例子，如果学生出生月份是9月，学生的出生月份只有在卡片A和D中才可以看到，在卡片B、C中都看不到。把这个结果告诉魔术表演者，表演者经过“心灵感应”后，就可以确定学生的出生月份是9月。实际原理就是运用了二进制，卡片A权为1，卡片B权为2，卡片C权为4，卡片D权为8。这样卡片A权+卡片D权=9就得出了结果。如图3所示。实际上12个月份用了二进制表示成了四位，四张卡片分别代表了四位的权，这个魔术融入了二进制以及十进制和二进制转换的知识。通过这样的魔术方式，提起学生学习进制的兴趣。学生学习完，教师可以进一步安排学生分组利用进制知识自己创作此类游戏，如猜星座、猜生肖、甚至猜出生日等变成一个小型魔术表演活动。还可以利用扑克牌和二进制知识创作更复杂的魔术游戏。这样，就能使学生将书本的知识融合自己感兴趣的实际问题，并通过自身的努力学会解决实际问题。

图2 卡片内容示意图

图3 卡片模式二进制原理示意图

在课后作业中的运用 计算机学科的作业基本上以做项目和任务为主。在布置每一个任务或项目时，按DIV+CSS的新解，要注意任务首先应与学生相关，学生一定要感兴趣；另外，任务应能够联系实际，应能解决实际问题。例如，在学完网页设计科目中美工设计和静态网页制作大部分知识后，就可以让学生动手自己设计自己的主页，可以参考QQ空间，技术方面能用新的就不用旧的，方法上能用简单的就不用复杂的，最后交上来的任务成果要求包括设计草图、美工图、网页切片图、最后的网页效果等几部分。这样，能让学生不仅重视最后的结果，也注重规范网页制作的流程。在制作过程中，学生肯定会遇到大量的技术问题，这时，教师在上课时自己录制的视频就能起到很重要的作用，学生可用之随时复习教师上课的要点。对教师没提到的技术要点，一方面，学生可以分组讨论，向同学和教师请教；另一方面，可以自己上网找参考资料。对学生完成任务的过程，教师要全程关注，对随时出现的技术问题引导学生尽量自己解决，如网页切片的分段式切片方法，网页DIV布局中出现的浮动问题等。

在计算机技能比赛中的运用 中职学校对技能教学很重视，各个层次的技能比赛有很多，每年几乎都会有技能节等活动。这些比赛和活动大大提高了学生学习技能的热情。在这些比赛和活动中，按DIV+CSS的原理可以让CSS形式多样化。在组织形式上，注重借鉴流行元素，同时紧密联系实际。比如，对网页、动画作品、电子报刊竞赛的评选可以参照达人秀的模式，让作者现场展示他的作品，下面的评委提问评选，注意评委不能都是计算机教师，要有两三个音乐美术教师参与。同时，选手可以采用各种方式表现自己的设计能力、创新能力等来进行现场拉票。现场活动要注意以解决实际问题和提高学生兴趣为目标。比如，可以举行现场处理照片、打印相片为内容的活动，或者通过照片现场设计动漫造型并输出到手机的动漫设计活动。

在不同层次学生中运用 中职学生文化基础虽然普遍较差，但每个学生的爱好都比较广泛，都特别有个性。教师在教学中只采用一种模式无疑是不可取的。参照DIV的浮动方式及结构化的特点，完全可以让不同层次的学生根据自身特点选取自己最感兴趣的模块来学习。比如，动画的制作包含剧本、人物设计、场景设计、镜头运用、音乐处理等，对音乐感兴趣的学生可以侧重对音乐处理学习，想象力、写作力强的可以侧重剧本创作，然后以小组合作的方式制作出动画。对于每个学生必须掌握的内容，对不同层次的学生，也可以采取不同的形式和方法。对领悟能力较弱的学生要提供视频并多次指导；对领悟能力较强的学生可直接分配任务，甚至教师没教过的知识也可要学生自己融入任务中来。比如，FlashCS4后续的版本多加了BONES骨骼系统和3D控制工具等新特性，教师没教，但可提供一个教师自创的教学课件，要求学生用到其中的新特性完成任务。另外，一些辅助软件，教师只提供软件名即可，怎么用完全可让学生自己去摸索，自己去学习，最终完成布置的任务。

总之，DIV+CSS的理论方法完全可以应用到计算机教学中来。借助这个理论，计算机教学始终围绕以学生为中心，以激发学生的学习兴趣为前提，解决实际问题和通过学习过程让学生学会学习。在具体运用中，教师必须全方位了解学生的特点，把流行元素综合运用到教学中来。另外，还需要教师自身能够综合各种软件解决实际问题，这些要求对教师是一种挑战，需要教师不断提高自身技能水平以及教学水平。

[1] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007：449.

[2] 温谦.HTML+CSS网页设计与布局从入门到精通[M].北京：人民邮电出版社，2008：424.

[3] 袁润非.DIV+CSS网站布局案例精粹[M].北京：清华大学出版社，2011：397.

[4] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008：456.

[5] 黄爱娟，雷喜.中文版Dreamweaver CS5完全自学一本通[M].北京：电子工业出版社，2010：629.

[6] （美）莫里.CSS禅意花园[M].陈黎夫，等译.北京：人民邮电出版社，2007：276.

[7] 教育部考试中心.全国计算机等级考试（一级MS Office教程）[Z].天津：南开大学出版社，2007：331.