活学活用如何快速美化网页

2018-02-24 05:34于敏

中学课程辅导·教学研究 2018年36期

于敏

摘要：一个杂乱无序的网页让人枯燥乏味，而一个美观大方的网页则让人流连忘返。拥有简约的页面及高访问量的网站是每个网页设计者的追求。对于中学生而言，要有这样的网页制作功底，就必须掌握真正的技术。它能对页面的布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制，这就是CSS。本文的主题就是要从学生的认知水平出发，重组层叠样式表的教学内容，让学生能通过自主探索学习的方法掌握这门技术。

关键词：美化网页;CSS;信息技术

中图分类号：G632.0 文献标识码：A 文章编号：1992-7711（2018）12-0103

一、教学目标

1. 知识与技能

通过网页的比较演示、让学生会分析使用CSS样式表的优势;并能叙述出CSS样式表的概念。要求学生掌握运用CSS进行样式设置的方法和格式，并能够归纳出如何实现在HTML中加入CSS的三种方法。学生能举例说明CSS样式表的一小段代码，并能尝试编写类似的新的CSS代码。

2. 过程与方法

在活动中指导学生学会利用各种学习资源，自主探究出CSS样式表的三种应用方法。学生通过读书指导法式的学习，逐步掌握CSS代码，提高他们读、写、编代码的能力。学生在问题情境下学会主动探索，提高问题解决的迁移能力，掌握CSS样式表对网页美化的一般过程与方法。

3. 情感、态度与价值观

通过学生的自主探究、独立思考、自主完成CSS样式表的编辑任务，能将经验活学活用到今后的主题网站设计中。通过学习运用CSS样式表优化网页制作，让学生正确学习、合理运用技术，了解技术服务于内容的原则。

通过网页的美化任务，在活动中潜移默化地培养学生发现美、创造美的能力，提高学生的综合素质。

二、教学重、难点

教学重点：CSS样式表的基本语法结构。知道CSS加入HTML中的三种方式，能说出三种方式的使用环境。

教学难点：读懂CSS样式表中的具体代码的含义。CSS样式表三种加入方式同时使用在一个网页中的层叠关系即优先级。

三、教学过程

1. 创设问题情境、主动探索

师：我们都是“金陵人”，我为自己是金陵人而自豪。自古至今，有很多文人都通过优美的文笔抒发了自己对金陵的热爱。你能说出哪些呢？

学生在教师的引导下多多少少都能背出一些名诗名句，教师将课前收集整理到的詩歌都放到网页中。取名“诗词话金陵”。学生欣赏优美的诗句，都觉得很美。那网页美不美？教师展示的是网页的初始状态：一些诗词、图片、景点介绍文字堆砌在页面。这样并不美观，教师可以让学生几分钟时间来修饰一下。然后，教师通过瞬间变魔术式的给出网页的终极目标：经过CSS样式表美化的网页。

学生也完成“诗词话金陵”网页的编辑，但是时间略长，强烈的神秘感让他们很想知道教师是如何瞬间完成的，也很愿意学会这套本领。学生的注意力被充分吸引过来，教师紧接着抛出几个问题，让学生积极思考并回答。（1）进过对比，哪个网页更精美？又是如何实现的？（2）网页中的各个对象在进行编辑时采用了什么方法？（3）教师的瞬间美化网页，你看到并想到了什么？（4）你觉得用CSS样式表美化网页的优势是什么？在课堂上，不仅教师的提问层层深入，而且在活动中也一直努力创设民主氛围，适时对话、从而实现指导并启发学生。

2. 教师讲授层叠样式表的知识点，并采用范例教学法，让学生思考

师：讲解CSS样式表的定义及功能、分析CSS样式表的基本语法。以“设计百度LOGO”为例子，简单示范如何在网页中使用CSS并解读它的基本语法。

下图为范例中的CSS代码：

这段在<head> </head>标签中的CSS代码设计好后，还需要在<body> </body>区的需要设置样式的文字前后加上<p> </p>，<span> </span>标签。例子如下：

通过教师的范例教学，学生看到了经过CSS样式表的修饰完成了百度LOGO的制作。

教师的知识点剖析加上优秀例子的示范，强烈激发了学生的学习热情，个个都很活跃地想要看看自己能否也完成一个优秀的作品。同时，教师在演示完这个实例后，又抛出一个问题让学生思考。在HTML中加入CSS的常用方法有哪些？本实例中是属于哪种方式。学生带着问题有目标的进入课堂的下一个环节。

3. 情境任务实现，学生根据学习任务和材料自主学习完成

下面是学生实践过程，按要求依次完成下面的各个小任务。（1）为标题是“诗歌话金陵”的网页中的五首诗歌全部设置相同的文字效果、并为网页添加背景。该任务的代码在css1.txt记事本中。（2）深层任务，只需要将五首诗歌的标题重新进行设置，具体代码在css2.txt记事本中。（3）将所有属于金陵景点介绍的网页都加上相同效果的修饰，采用css3.txt记事本中的代码。第三个任务中，要求采用的方法是最便捷的，并且该方法能够精简网页代码，减少网页在浏览器中加载代码的时间。

学生独立思考、自主学习完成这三个小任务。当然，学生在实践中也是需要参考教师提供的学习资料。其中每个任务的重难点都用微视频进行分析，能力强的学生直接看文字和操作提示就能完成，能力弱的学生可以看微视频来自学完成。

学生在情境任务完成过程中不仅仅是完成具体操作，还需要思考每个任务的本质目标是什么。教师在任务中也准备了一些问题，采用竞赛制加奖品的方法激励学生回答。（1）三个任务中分别采用的是什么方式将CSS加入HTML中。（2）每种样式表的特点是什么？（3）CSS样式表中如何体现“层叠”思想。

4. 任务展示、总结提升

课程进入这个环节时间已经过去一大半了，在任务展示中，笔者精选了3名学生的作品进行比较。3名学生在展示自己的作品过程中，口述自己本节课学到的知识点。教师应要求3名学生在讲述过程中不能重复前面学生说到的知识，所以第3位学生在回答过程中有点困难。教师也给予一定提示，最后教师用思维导图的形式梳理了本节课CSS的知识点，再次标注了重难点。

也许这节课将要结束，但是对于CSS的学习其实才是刚刚开始。所以教师又讲解了关于CSS的代码知识，让学生会修改CSS代码，按照自己的喜好设计网页。教师主要给出四个拓展任务，学生阅读教学资料至少选择一样完成即可。（1）运用CSS控制鼠标样式变换，需要使用的关键代码段“style=cursor：值”。（2）网页中大标题字体设置。主要用到的CSS文字属性如下：font-family字体、font-size字号、font-style字体风格、font-weight加粗字体、color字体颜色。（3）网页中边框的设置。主要边框属性：border-style边框样式、border-color字体颜色、border-width边框线宽。（4）CSS样式表控制超链接的颜色。

A：link{text-decoration： none;color：blue}是说明了超链接还没有被访问，它没有下划线，颜色为蓝色。

A：visited{color：red;text-decoration：line-through}说明了超链接被访问后，它的颜色变成了红色，有了一条删除线。

A：active{color：white;text-decoration：underline}说明超链接处于活动状态的时候，它的颜色变成了白色，有了下划线。

A：hover{text-decoration：none;color：#FF0000;background-color：black}说明鼠标移动到超链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。

根据这些解释，学生可以把超链接在各种状态下的显示颜色修改成自己喜欢的那种，以便能更好地展示自己的個性。

5. 多样评价与课堂反馈

学生的能力是参差不齐的，能力弱的只能做完基础任务、能力强的已经能完成总结后的2个拓展任务并且意犹未尽，还想课后继续学习下去。教师给学生设计了评价表，分别从课堂任务的达成率以及本节课的教学目标的三个维度来给他们自己打分，采用ABC等级制进行选择。最后通过这些等级看出自己哪些能力还需要课后进一步加强。

在课堂反馈过程中，教师最后也对学生的完成情况及课堂抢答情况进行了点评，并把CSS代码的详细知识放到本年级360云盘中，鼓励学生课后能自由选择进行深入学习，教师也会在课后进行持续关注。

四、教学反思

信息技术作为开放型课堂，应该是注重活动体验与能力培养的课堂。培养学生的能力就是要求学生能根据问题要求，分析问题，提出解决问题的方案，根据方案内容运用技术手段解决问题，以让学生在课堂上学会阅读、并能通过搜索辨别出正确的方法。

本文在课堂教学中采用了多种教学方法相结合，为了就是提高课堂学生的达成率。教师在课堂中主要采用抛锚式教学策略，即“基于问题的教学”，这样利于学生以技术学基础的学习。首先，教师创设了“金陵之美”的情境、确定问题让学生自由对话、指导启发、然后再让学生自主学习，最后进行效果评价。在课堂问题引出之后，学生不能很快理解CSS理论知识和操作要领，教师就先采用了讲授教学法。在讲解过程中，用生动幽默的语言来叙述和描绘所讲知识，从而保持学生的注意力。紧接着用范例教学法，选用学生感兴趣的百度LOGO作为精选范例，进一步激发学生的学习欲望与动机。

学生在独立完成各个任务的过程中，课堂就完全由学生掌控，他们是学习的主体，教师只是在一旁启发指导。当然，学生在活动中首先确定学习任务，其次阅读相关教材及教师提供的课堂资源，然后再进行师生之间、生生之间的问题讨论与交流。这种类似读书指导法的教学，就是要培养学生的自学能力，在阅读学习资料的过程中逐步学会抓住中心和思路。学生也能根据自己的实际能力选择采用文字样张提示、或具体操作提示、或微视频提示来完成自己的学习目标。

学生自主学习后的归纳也显得尤其重要，教师在学生训练后，通过问题启发学生思考、让学生能将归纳的知识真正变成自己的经验，从而提高他们的综合运用能力。

笔者在课堂提问环节和拓展任务活动中都采用了竞赛式，优先回答的学生和完成拓展任务的学生都有奖品发放。从物质上刺激学生主动学习，并能全身心投入到学习中，尽自己最大的努力完成所有任务。他们虽然在课上并不能全部完成但是他们已经有了这种意愿就能促使他更进一步学习。学生在一次又一次的操练中，提高了自己快速美化网页的能力。持续性的学习也让他们对CSS样式表进行活学活用。

（作者单位：江苏省南京市行知实验中学 210000）