课题

动态网页——css

教学目标

知识与技能

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

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

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

过程与方法

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

情感、态度与价值观

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

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

重点

CSS样式

难点

CSS样式

课时

1课时

教学过程

教师行为

学生行为

设计意图

一、复习

组织复习动态网页以及JavaScript的相关知识。

2、组织学生修改JS特效，并进行总结（1）拼写（2）标点符号为英文输入法状态下的符号

复习动态网页的相关知识：

（1）动态网页的特点；

（2）动态HTML三种核心技术

（3）<script>标签

复习,并实现外部调用js文件

二、CSS样式表

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

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

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

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

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

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

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

2、利用代码把“距第八届花博会开幕式还有”这些文字设置发光文字效果；

嵌入式样式表

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

（1）       3、分别把主展区文字的样式设置如下：

“主展馆：”样式设置为“15磅，红色，有下划线”；

第1、3段文字样式设置为“20磅，绿色，无下划线”；

第2、4段文字样式设置为“10磅，#0000ff，无下划线”。

内联式样式表

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

4、把“zzq.html”的网页背景色改为“#99ff00”,并将其余的网页设置为同一背景色

外联式样式表

三、总结

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

总结CSS的相关知识：

（1）CSS样式表的优点；

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

总结

四、作业上传

组织学生保存并提交作业

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

作业的保存与上交

五、课后反思

 本节课上下来与自己的预想慢了点，现在反思一下，还是不放心学生，结果时间没有把握，所以有点仓促。CSS历来是学生学习的难点，所以实践很重要，而第二节课在第一节课的设置上进行了修改，把字体样式改为学生无法用普通方式来设置的发光文字，这样学生的学习积极性提高了。