探析CSS课堂教学质量的提高
摘要 CSS技术是网页设计的关键技术，也是网页设计与制作课程的重点和难点。文章分析了在CSS教学过程中经常出现的学生难学、难懂和不愿学的根本原因，并从课堂目标设定、培养学习兴趣、改进教学方法等方面阐述了提高CSS课堂教学质量的解决方案。
关键词 CSS技术；课堂教学；演示教学法；任务驱动教学法
1 引言
CSS是Cascading Style Sheet的缩写，中文译作“层叠样式表单”，是用于增强控制网页样式并允许将样式信息与网页内容分离的众多属性和规则的集合。CSS应用在网页设计中，能够对网页中的对象的位置进行精确控制，实现网页内容与表现的分离，使网页更新与维护变得简单。减少网页代码量，加快网页浏览速度。进一步支持众多智能型和手持型终端设备。优化对搜索引擎和众多浏览器兼容性的支持。所以，CSS对于每一位网页设计人员来说，都是非常重要的学习内容[1]。
2 存在的问题
在《网页设计与制作》课程中，CSS内容相对比较容易学习，但需要进一步提高时却具有较大的难度。在众多Dreamweaver网页设计教材中，CSS内容只占全书总内容的8%～10%左右，内容安排也较为简单，并且多以示范操作步骤为主。在传统课堂教学模式下，简单的讲解与示范已不足以让课堂内容在学生心中留下深刻的印象，不能使学生深刻理解CSS的本质，特别是在实际应用过程中，很多学生更是感到无从下手[2]。
在CSS教学过程初期，由于新知识对学生还具有一定吸引力，但随着教学进度不断推移、内容不断增多以及难度不断加大，学生逐渐感到力不从心，导致在学生中弥漫出一种畏难情绪，部分学生开始慢慢失去学习信心，最终失去学习兴趣，并在课堂上以玩手机或玩游戏的方式来弥补其内心的空虚感。从而产生“学生不愿学，老师不愿教”周而复始的恶性循环的现象。究其原因，可以归结为以下几个问题：第一，难以获得成就感。第二，代码众多，学生惧怕学习。第三，难以区分到底该使用哪种CSS选择器类型。针对这些现象，有必要对CSS教学课堂进行改进。
3 改进措施
为了使学生通过CSS课程的学习能够掌握相关内容并在网页设计中熟练运用CSS知识，结合
上述问题分析，进而提出下列解决方案。
3.1 课堂目标与课程目标相互协调
首先我们需要做到的是课堂目标与课程目标相互协调。课堂教学目标是指教学活动预期达到的结果，是教育目的、教学目标和课程目标的具体化，也是教师完成教学任务所要达到的要求和标准。课堂教学目标比课程目标更具体，是课程目标在具体的教学过程中的体现。在实际课堂教学中，教师需要根据课程目标和具体的教学内容来确定详细的教学目标以便选择教学内容和确定教学效果。由于CSS学习对整体网站设计学习的影响较大，恰当选择CSS相关课堂教学目标对实现整体课程目标的意义重大，反之则会影响课程目标的实现。需要注意的是，由于教学对象是中专二年级的学生，有一定的基础但是整体素质水平不高，对代码、数字、英文等内容不感兴趣，这就需要教师在设定课堂目标和课程目标方面注意调整，并提升教学方法。课堂目标的制定要考虑到学生所具有的知识基础和接受能力，目标小且实用，争取让学生在每一节课中都能学到一些技能。
3.2 学生学习兴趣的建立及学习难点的攻破
学生在学习入门阶段对于新知识的学习是充满好奇的，并且愿意接触新知识，这是建立学生学习兴趣的关键阶段。但是随着学习的深入、新奇感消失、学习难度的加大及对重难点问题解决的无力感将会导致学生产生畏难情绪，而进一步影响学习积极性从而降低学习兴趣。在此阶段，难点问题必须得以解决，否则后续内容再精彩再实用，对学生来说，都是索然无味的。针对这个问题，我们将从营造轻松愉悦的课堂学习氛围和解决学生学习难度较大且对课堂课程目标实现影响较大的方面着手。
首先，营造轻松愉悦的课堂学习氛围。著名心理学家皮亚杰认为：“一切有成效的工作必须以某种兴趣为先决条件。”教育是培养人的活动，学生要获取科学文化知识，首先要对学习充满兴趣。一旦失去兴趣，学生不仅会感到学习是一种痛苦，而且学习效率也不会高。因此，教师要充分调动学生学习的主动性、积极性。让学生具有浓厚的学习兴趣，诱发出强烈的求知欲望和学习动机，从而自觉自愿地投入，真正变“要我学”为“我要学”。营造轻松愉悦的课堂学习氛围，这需要教师在上课前要有针对性的分析学生心理特点，安排符合学生基础的丰富且实用的课堂内容和实训材料，采用幽默而诙谐的语言，拉近教师与学生之间的心理距离，及时表扬学生所取得的每一个成就，加强师生之间的交流，让学生分享成功的喜悦。
其次，注重降低入门学习的难度。入门学习的难度主要集中在代码众多和CSS选择器类型的选用上，将这两个难点化解将会极大降低学生学习的难度和畏难情绪，并提升其未来学习的积极性。我们以如何化解CSS选择器类型的选用的学习难度为例。
网页代码中的单标签关于CSS选择器类型的使用，在分析对比各种选择器的作用及区别的基础上，集中精力重点解决目前常用的几种类型，一方面降低中职学生的记忆混乱程度，另一方面起到让学生能够熟练使用常见CSS类型，增强其信心。CSS选择器主要有四种类型是应用率最高的。
（1）标签选择器。一个XHTML文档包含多种标签，如p、ul、img、h1等标签，标签样式能够对同一页面中所有相同标签的样式重新定义。标签选择器主要用在诸如html、body标签中，用于控制页面中某些对象的统一风格，而不应使用在诸如p、li、td等重复性较高的标签上。
（2）类选择器。任何标签都可以应用类样式，是唯一需要应用的样式。类样式的命名应见名知意，如“.RedText”、“.BlueText”和“.BigText”等等，但过多的类样式会使网页修改和维护变得困难。
（3）id选择器。id选择器允许为每个标签进行唯一性命名，使样式的作用被局限在一定范围内，而不会影响到其他标签样式。id选择器的命名同样也因见名知意，如“#navigator”、“#content”、“#footer”、“#copyright”等等。（4）高级选择器。高级选择器并不是真正的选择器，而是由类选择器、id选择器、标签选择器和伪类选择器相互组合在一起而构成的规则组合，是CSS样式表中使用率最高的一种。另外，CSS应用需要遵循一定的规则，CSS样式最终规则其实是多种样式规则的综合，样式效果由CSS代码执行顺序先后决定。
3.3 相关课程教学方法的应用
（1）重难点问题的突破可借助视图记忆法及操作巩固法
Dreamweaver是CSS教学环境中使用得最多的软件，随着版本的不断改进，功能也变得越来越强大，丰富的菜单和对话框可以很方便地创建出CSS样式，其所见即所得的特点使学生能够快速地熟悉操作，进行CSS设置。由于操作简便，学生对视图界面的依赖相当大，另外中职学生对英语常表现出一定的抵触心理，导致其无法阅读他人案例代码，特别是在进行代码编辑和精确设置时往往不知所措。同时，Dreamweaver软件针对CSS代码还提供了自动显示
功能，即在CSS代码编辑区按下回车键，则会自动列出所有的CSS属性可供选择，当输入某个字母后，该字母所对应的所有属性将自动被定位选中，这对于学生学习代码编写具有很大的帮助。另外，一部分重要的CSS样式并不能直接通过视图界面设置，而必须进入代码模式下才能完成。所以，在教学过程中，将视图界面与代码编辑进行对照讲解显得很有必要。
视图界面与代码编辑对照学习，有利于提升学生相关知识的记忆和运用能力。对于CSS学习，学生经常因内容难记不易记而难以攻破重难点，而采用视图界面与代码编辑对照教学可使学生对重难点的记忆起到事半功倍的效果。在这里以突破代码记忆和使用的重难点为例。
首先，养成阅读CSS样式表代码的习惯。在创建样式表规则前，先将Dreamweaver设置为代码视图或拆分视图，再调出CSS规则定义视图界面。当设置好一个样式时，代码视图中会立即显示该样式的代码，同时边操作界面边讲解代码语法，这样，通过一定时间的积累，即熟悉了视图界面中样式及所对应的CSS代码。虽然学生不能在短时间内记住所有设置的样式代码，但也能对一些常见的样式代码产生深刻的印象。因此，通过视图界面与代码的对照讲解，有利于帮助让学生养成阅读代码的良好习惯。
其次，总结CSS样式表代码的规律。众所周知，中职学生多数对于英语单词都具有一定的抵
触心理，对英语较为排斥，怕学怕记。如果说在短时间内完整的记住一个属性的全部单词是有困难的，那么记住一个属性的单词头部字母或一个单词应该是不难的。例如，font-？设置文本类型样式，background-？设置背景样式，margin-？设置边界样式，padding-？设置填充样式，border-？设置边框样式，list-style-？设置列表样式。另外诸如color、top、right、bottom、left、width、align等这些单词在样式中的出现率也是非常高的。在CSS样式表代码中，众多属性的代码其实都具有一定的相似性，差别并不是太大，关键是要出其中的规律并加以理解和记忆，当然也存在个别独立的属性代码，但使用率并不高。
第三，通过案例巩固学习效果。学习CSS样式表需要持之以恒，循序渐进，而实操练习更是巩固学习效果的最佳方法。因此，在课堂外，需要布置具有代表性的作业，以巩固课堂所学知识，让学生养成独立分析问题和处理问题的习惯。
（2）演示教学法提高学生模仿学习的能力
演示法是教师通过展示各种实物、教具，进行示范性实验，或通过现代化教学手段，使学生获取知识的教学方法。演示法常配合讲授法、谈话法一起使用，它对提高学生的学习兴趣发展观察能力和抽象思维能力，减少学习中的困难具有重要作用[3]。例如，在通过演示法讲解
如图3.3-1的实例可从以下步骤实施。
①导航可以采用至少两种方法实现，如表格、项目列表，超链接具有图像翻转特效。
②在页面中插入div标签，命名为“nav”。
③在div标签中插入项目列表，输入导航文字，并将其设置为超链接。
④选中ul标签，新建高级样式“#nav ul”，设置列表中的“类型”。
⑤选中a标签，新建高级样式“#nav a”，设置类型中的“字体、颜、装饰效果”；设置背景中的“背景图像、重复”；设置区块中的“文本对齐”；设置方框中的“宽、高、浮动、上填充”。
⑥新建高级样式“#nav a：hover”，设置类型中的“颜”；设置背景中的“背景图像、重复”，修改超链接触发翻转效果。
在教学实施过程中，首先需要引导学生先分析实例由哪些元素组成、具有哪些功能特点、可以采用哪些方法来实现，同时边演示边讲解，并将步骤记录下来，当学生对某些步骤不清楚时可以重新查阅。另外，最好让学生在做练习前先尝试着去分析实例，将分析结果以纸张或
文档的形式记录下来，然后再转化成步骤去实施操作。这样经过一定的训练，对于提高学生分析问题和解决问题能力的提高具有很大的帮助。
（3）任务教学法促进学生分析问题和解决问题的能力
任务驱动教学法是一种建立在建构主义学习理论基础上的教学法，它将以往以传授知识为主的传统教学理念，转变为以解决问题、完成任务为主的多维互动式的教学理念；将再现式教学转变为探究式学习，使学生处于积极的学习状态，每一位学生都能根据自己对当前问题的理解，运用共有的知识和自己特有的经验提出方案、解决问题[4]。
实施任务驱动教学法，需要做好充分的准备工作。首先，教师要了解学生的兴趣爱好及具有的专业基础知识。其次，教师要熟悉教材、理顺教学思路，并具有娴熟的操作技能。第三，针对学生差异性做好任务的设计。下面以旅游网站首页的具体制作为例来介绍任务驱动教学法的具体教学实施过程，如图3.3-2所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。