“用CSS给超链接文字变脸”教学设计 高中一年级

常州市戚墅堰实验中学　徐梧

一、设计背景

1．教材：教育科学出版社 《网络技术应用》（选修）

2．年级：高中一年级

3．教材章节：第五章《动态网页制作》第二节 理解动态HTML第二部分 CSS样式表

4．课时：1

二、设计思想

从学生的学习需求出发设计学习内容，根据学生的学习基础设计恰当的学习活动，通过自主学习的方式，帮助学生获得知识的建构和运用。

三、教学分析

（一）教材分析

1、本章的《课程标准》内容

能够根据表达任务的需求，使用常用的网页制作软件制作与发布动态网页。动态网页是当今网页制作的潮流，在网络上更是随处可见动态网页的身影。对于掌握了静态网页制作的学生来说，学习第五章是一种必要也是一种需要。虽然，第五章中介绍的技术都有一定的难度，但我们可以通过一些好的应用实例让学生了解或初步理解这些技术方法，培养学生对网页技术发展的适应能力。

2、教学内容分析

第五章 动态网页制作 5.2.2 CSS样式表， 主要介绍了动态HTML核心技术之一CSS样式表的基础知识和实现方法，是本章的一个重点和难点。通过学习和实践，学生应了解CSS技术的基础知识，并能简单地使用CSS优化网页。本段内容计划2课时完成。第一课时主要介绍CSS的概念和特点、基本语法和实现方式。

本节课是CSS样式表的第2课时，主要内容是引领学生使用CSS实现超链接文字的样式效果，包括去除超链接文字下划线和实现超链接文字动态效果两个内容。该内容是《5.2.2 CSS样式表》的一个重要部分，其中利用CSS去除超链接文字下划线是根据教材增加的内容。

通过本课学习，让学生体验CSS在网页设计中的应用，了解网页技术在生活和学习中的应用价值，激发学生学习和应用网页技术的兴趣。

3、教材处理思路

遵循“用教材教”的思路，努力用活教材。（1）掌握学生的实际情况，开发教材。例如：将学生在制作网页过程中的问题、困惑——“如何去除超链接文字的下划线”作为课程资源进入教学过程。（2）根据实际情况对教材内容进行了扩充。例如：补充介绍了超链接标记的样式设置，帮助学生更好地理解CSS样式表的应用。（3）提炼教材范例的精髓，结合生活实际设计素材网页。例如：地震科普网页。

（二）学情分析

1、基本情况

高一学生具有一定的认知水平和自学能力。通过上节课的学习，同学们已经了解了CSS的基础知识、基本语法和实现方式，能熟练操作记事本程序或frontpage2000编辑网页代码，这为本节课学习打下了良好的基础。

2、可能遇到的困难

虽然学生储备了一些CSS知识但无法独立地使用CSS解决实际问题，对CSS在网页中的应用缺乏认识和理解。

3、可能的学习策略

学生可以通过自主学习和实践，体验CSS的应用。

（三）教学目标分析

1、知识与技能：

（1）通过学习和实践，了解超链接标记<a>的常用样式属性。

（2）通过学习和实践，会利用CSS去除超链接文字的下划线。

（2）通过学习和实践，会利用CSS实现超链接文字的动态效果。

2、过程与方法：

（1）通过学习和实践，掌握CSS的超链接文字设置的一般方法。

3、情感态度与价值观：

（1）通过使用CSS实现超链接文字的样式效果，体验CSS技术在网页制作中的优点。

（2）用实际问题体验技术，用技术解决问题，引导学生理论联系实际。

（四）教学重点和难点分析

1、教学重点：

超链接标记<a>的样式定义和常用文字属性。

2、教学难点：

根据设计需要，设置超链接标记<a>的样式属性，实现链接文字的动态效果。

3、解决策略：

提供帮助文档，引导学生自主学习；提供例句学习，引导学生创新实践。

（五）教学策略

1、通过创设问题情境引入学习。

2、提供学习资源（探究指南.txt、帮助一.txt、帮助二.txt），指导学生自主学习。

3、通过问答法帮助学生归纳、梳理所学的知识，提升对知识的理解和认识。

4、利用启发法引导学生运用理论创新实践，提高技术应用的水平。

5、通过交流评价，加深学生对知识内容的理解，促进其对技术应用的认识。

四、教学资源

（一）硬件：

计算机网络教室。

（二）软件：

极域电子教室、FrontPage 2000、课件、学习资源（探究指南.txt、帮助一.txt、帮助二.txt ）、地震科普网页。

（三）学生课前活动：

浏览地震科普网页（展示版），观察超链接文字的样式。

五、教学过程：

　　六、教学反思

因为学习动机是直接推动学生努力学习的内部力量。只有激发学生的学习动机，才能调动学习的积极性和主动性，提高学习效果。所以在设计这节课时，我就从如何激发学生的学习动机出发，设计教学活动。主要体现在：

1、内容

这节课内容设计的灵感源于一位学生在网页制作时提出的一个问题：老师，能不能把超链接文字的下划线去掉？如何去除超链接文字的下划线？这是一个在网页制作中经常困扰学生的问题，使用CSS的控制可以非常轻松地解决这个问题。

在本节课中，我将这个问题设计为一个学习内容，一是考虑这个问题与学生的实际应用相关，这样的问题一经提出必然会引起大家的注意，激发出强烈的学习动机。二是觉得这个问题是学习和理解CSS应用比较好的例子，属于学生的最近发展区。让我感到高兴的是，学生对于这个内容非常感兴趣，学习的主动性非常高。

本节课安排了两个关于超链接文字设置的内容，且具有一定的梯度。就是考虑当学生完成第一个任务，获得了一定的知识和经验时，应设置一个更高层次、半开放的应用问题。通过再次解决问题既可以加深对知识的理解也可以获得成就感，使学习活动沿着一定的方向持续下去。

2、教学策略

本节课的教学内容贴近学生的实际生活很容易激发其学习的兴趣，但同时也具有一定的难度如果采用讲授法加练习法可能会导致学生学习动机的下降，影响学习的效果和作用。  因此，我从三个方面考虑保持动机的激发。

（1）自主学习

自主学习概括地说，就是“自我导向、自我激励、自我监控”的学习。在这种活动中，学生主动地获取知识，形成技能，发展能力，完善人格。

本节课是一节以知识应用为主的课，采用自主学习方式，让学生在学习过程中感受、体验CSS，并喜欢CSS。老师不作过多的讲解，关键是提供合适的学习资源和解决问题的线索，如探究指南和帮助文档，并做好课堂引导和学习指导。而学生则利用学习资源，主动构建自身的知识结构和能力结构，自主地完成学习任务。同时，自主学习不是学生对学习内容的简单复制，而是学生根据自身学习需要，完成知识的再创造。例如：学生自主设计超链接文字的动态效果。通过本课可以看出，自主学习方式积极发挥了学生的主观能动性和创造精神。

（2）启发教学

启发式教学是相对于注入式教学提出的，注入式教学无视学生在学习上主观能动性，而启发式能启发学生的思维积极活动，能调动学生学习的积极性和主动性。对于有一定难度的知识和问题，例如：超链接标记的四种类别以及一些文字样式属性，老师要及时帮助学生分析、解读，促进其理解。同时，老师对学习结果要进行及时强化和反馈。

（3）目标保障

教学应该是一个鼓励学生控制自己学习的过程。但是，教师也要依据学生的能力差别对任务进行适当地控制，以保证每个学生都能完成一定的学习任务。本课的学习任务基本适合不同层次的学生，既给学生提供挑战的机会，而又不用担心失败。因为我为他们提供了两条实现目标的途径：“自主探究或寻求帮助”。一方面鼓励大家自主探究，自己寻找解决问题的方法；另一方面，我为找不到方法的学生提供支持，让他们也能通过老师提供的方法实现任务。先让学生获得成功的体验再引导他们反思和归纳，以巩固所学的知识。

我感觉通过本节课的教学对同学的网页应用是有一定帮助的。一是，学生通过本节课的学习掌握了一项网页制作的技能；二是让学生认识到了CSS应用的优势，开始有兴趣学习这项技术，适应了当前网页技术的发展。

3、评价激励

评价具有激励、诊断和促进的作用。因此，在本节课中我积极利用评价激励学习。有显性的课堂评价环节也有穿插在课堂交流中的隐性评价。无论采用何种方式的评价，我都创造条件，设置成功情景，使不同智能状态不同层次的学生都有获得某种成功的机会，体验成功的愉悦，以满足他们尊重和自我实现的心理需要，激发学习自信心，使之向更高的成功迈进。例如：我鼓励大家展示自己的超链接文字的动态设计，让学生在展示时要求学生说一说自己的设计意图，让大家了解制作的过程。通过自我、他人、老师的积极评价给学生带来愉快的感受，也增强了他们的自信。

在本节课即将结束时，我又举了一个CSS滤镜的应用实例：让网页变脸成黑白色。因为当时刚过全国哀悼日不久，所以同学们对黑白色的网页很有印象，当我告诉他们要想实现这样的页面效果很简单，只用一句CSS语句就行了。同学们听了都很好奇，很多同学表现出强烈的学习欲望，我觉得用这样的应用实例作为本节课的结尾可以进一步激发同学们课后探究CSS技术的兴趣。

在本次课堂实践过程中，仍有很多方面值得改进：首先，如何创设情境，使学生进行积极主动地思考，主动提出要解决的问题。比如说，让学生自己提出“如何去除超链接文字的下划线？”。其次，如何培养学生的元学习能力。例如，有一些学生在面临一个学习任务时，他们重要的目标就是完成这一任务，而不是去理解完成这一任务是为了达到什么目的。因此，必须激励学生的学习动机，进行目标学习。最后，如何引导学生理解和认识技术。学生技术素养的培养自然也应当对技术思想和方法加以关注。老师应帮助学生挖掘技术方法与思想，促进学生的发展。

【参考文献】：

[1]张文军《课程资源开发与利用的实践智慧》　高等教育出版社　2004年10月

[2]薛蕾《激发学生学习动机》 http://www.shuifeng.net/Teacher/ShowInfo.asp?InfoID=117