课题

动态网页——CSS样式表

教学目标

知识与技能

1、进一步掌握javascript特效的基本知识；

2、体验CSS在动态网页设计中的应用；

3、使用CSS优化你的网页；

过程与方法

通过在网页中运用和修改CSS样式，对CSS样式有了更深的认识；

情感、态度与价值观

1、培养学生观察力，注重思维的创新；

2、养成自主思考、自我探究的学习态度；

重点

CSS样式

难点

CSS样式

课时

1课时

教学过程

教师行为

学生行为

设计意图

一、复习引入

组织学生回顾一张基本网页的主要标签，复习Javascript语言的内联式与外联式用法

看网页代码，回顾知识点

温故而知新

二、CSS样式表

1、组织学生阅读CSS相关知识,对CSS样式表有一个基本的了解。

1、阅读书P112-115,并回答以下问题：

（1）什么是样式？你能列举出哪些样式？

（2）CSS样式表主要有什么优点？

（3）在HTML中加入CSS样式表有几种常见的方式？

理论先行，掌握CSS样式表的基本概念

2、组织学生利用嵌入式样式表进行网页的修改

打开index页面，在<td>单元格标签后加入嵌入式代码看效果

style="font-family:宋体;font-size:12pt;color:#663366;" 

嵌入式样式表

3、组织学生体验内联式样式表

1、将index页面中<td>单元格标签的嵌入式样式改为内联式样式。先定义

<style type="text/css">

<!--

h2{

   font-family:"宋体";

   font-size:12pt;

   color:#663366;

}

-->

</style>

后使用<h2></h2>

2、试一试能不能把样式的名称改成你自己的名字？

组织学生修改内联样式，使学生进一步了解CSS样式表，并理解先定义后使用

4、组织学生通过对背景颜色的修改，掌握外联式样式表

1、打开ip.htm网页，在head区加入超链接内联式样式，

2、利用外联式，给多张网页添加上同一个超链接效果

外联式样式表

三、总结

组织学生对相关知识进行总结

总结CSS的相关知识：

（1）CSS样式表的优点；

（2）CSS样式表常见的方式；

总结

四、作业上传

组织学生保存并提交作业

登录ftp，把作业上传到小组文件夹中。

作业的保存与上交

五、课后反思

 Css样式设计了两节课，第一节课让学生对css有初步的认识，对嵌入式和内联式尝试应用。第二节课则加入一定的趣味性，突显出css的优点，对文字运用css滤镜，同时也是对上一节课任务的巩固与递进。学生对于代码的使用存在一定的困难，这几节课老师都要做好引导与小结。