网页的“服装设计师”——《CSS样式表》教学设计

本论文在其他论文栏目，由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看

网页的“服装设计师”——《CSS样式表》教学设计
南京市第二十七高级中学魏劲 210001
【教材分析】
《CSS样式表》是普通高中信息技术选修《网络技术应用》第五章的内容，学生如能很好的掌握这部分内容，切实感受到CSS样式表的魅力和魔力，体会CSS的神奇之处，将会进一步激发学生学习的兴趣，培养他们运用信息技术的能力，发挥学生的潜能和创造能力。
【学情分析】
对于高中学生来说，网页制作是学生非常感兴趣的内容，学生已经学会了建立自已的网站，初步认识HTML基本标签及动态网页的相关概念，为CSS的学习做了铺垫。
【教学模式】
采用“网络课程教学”模式，教师提出问题后，学生共同讨论、探索、实践，教师适当地加以引导，针对不同的学生提出不同的要求，利用网络课件实施“分层次教学”，充分开发每个学生的主观能动性和潜能。
【教学手段】
多媒体交互式教学平台结合多媒体网络教学课件。
【教学目标】
知识与技能：体会CSS样式的功能，初步认识css样式表基本语法结构，掌握CSS应用于HTML文件的三种方法。
过程与方法：能根据学习任务，探究学习css样式应用于HTML文件的3种方法，通过自主学习，交流探讨、探究实践的过程来实践、加深知识的理解掌握。
情感态度和价值观：通过在专题学习网站的学习过程中，提高学生的探究和实践精神，产生学习用CSS样式设计网页的兴趣和愿望，提高善于思考总结，综合应用技能的能力。本论文由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看
【教学重点与难点】
重点： CSS应用于HTML文件的3种方法
难点：能够根据实际的需要选择适当的样式表应用方式，并正确使用。
【教学过程】
教学
过程教师活动学生活动
新课
引入大家是否为自己的QQ或博客“换过皮肤”？是如何实现“换肤”的呢？在网络世界中，要为网页换一幅新面孔无非也只是需要一个新的样式表而已。点击教学课件中的“感受魅力”，激发学生的学习兴趣。
教师总结引出课题。这一节课我们就通过网站添加样式，美化网站页面。来学习CSS样式表的使用

学生观看教学网站中的“感受魅力”，通过观察网页页面使用CSS样式表产生的效果,产生学习兴趣和动手操作尝试的愿望。

通过简单实例介绍CSS基本语法

教师演示，讲解知识要点。
所有H1元素颜色是红色，背景是亮灰色
规则包含两个关键的要素——选择符，定义要给个元素添加样式；声明块，定义要为选择的元素添加什么样式。

认真听课，积极思考，猜出本条语句预期结果，掌握CSS的基本语法。
观看演示，了解样式表建立的过程，积极探索，根据教师引导，接受任务挑战。

任务一 (1)设置H2元素颜色是白色，背景是绿色
(2)给网页背景替换成一种亮绿色
(3)设置网页中文本为粗体或斜体文本
想一想：仔细观察任务完成后，网页有什么变化？网页中的文本有变化吗？如没有？应如何稍加改动？

点击“学习任务”完成任务一
积极思考尝试，找出答案H1{font-style:italic;}
P{font-weight:bold;}
小结
一条完整的样式规则，必须同时包含选择符和声明块。  师生共同回顾“基本语法”小结
理解CSS样式类型中的嵌入和内联样式表
任务二 1、嵌入式样式表
在每个要应用样式的HTML的标记后写上CSS属性就可以了。这种方式主要用于对具体的标记作具体的调整，其作用的范围只限于本标记。
格式为：<Tag style=”properties”>网页内容</tag>
任务二、改变网页中某段文本的颜色和大小
2、内联样式表
把样式表放在<head></head>的中间，从而使样式表对当前整个HTML页面产生作用，这就是一个内联样式表。
其引用方式如下：
<style type=”text/css”>

</style>

相互讨论，合作交流，

积极回答老师的问题。请学生讲解，教师补充。
认真操作，掌握规律。学生积极去探索，尝试，开展小组合作，同学之间互助。

任务三
理解CSS样式类型中的外部式样式表
3、外部样式表
我们可以只编写一个CSS文件，借助于引入外部样式表来实现不同页面的风格，并且当外部样式表被更改时，各引用该样式表的网页风格也随之发生变化，不需要手工逐个修改。
定义方法为：
在需要引用的HTML文件的<head>和</head>之间通过下面语句对base.css文件中的样式定义进行引用。
<link rel=”stylesheet” type=”text/css” href=”base.css” media="all">
Stylesheet：指定使用一个外部样式表
任务三：导入一个外部样式表
<link rel="stylesheet" type="text/css" href="base.css" media="all">

打开ex02，通过完成相应的任务了解CSS样式类型。

学习
拓展  打开网页 ex03,ex04,ex05根据代码提示，理解含意，对网页自行设计修改。
通过查看css代码，请学生分析这些样式属于哪种样式？
学生操作，加样式，改参数……
提高实践能力，对代码稍做修改，领会含义。
总结
评价  采用CSS技术，能有效地针对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做简单的修改，就可以改变网页的外观和格式。利用CSS网页“设计师”的魔力管理美化你的网站。
切换屏幕到同学，点评同学实践。切换屏幕到同学，点评同学实践。  加深对CSS样式的理解，掌握常规步骤及要点。学生上传作业lxhtml文件夹，学生交流操作结果，自评并互评。

【教学反思】
CSS样式表涉及到语言代码，部分学生在学习过程会产生畏惧心理，不愿花时间理解思考，所以网站中“感受魅力”中用了大量的精美的网页和实例给学生以视觉的冲击力，使学生产生极大的学习热情和积极性，通过学习任务和三种样式相对应使学生进步步深入了解CSS样式表，克服畏难情绪，能对样式表有新的理解，产生学习关于样式表的更多的知识愿望。考虑到学生的学习差异，学生可以通过使用学习网站自主探究学习，因材施教，使每位同学都能很好的完成学习任务，提高了课堂教学效率，取得良好的教学效果。