1、本网站免费注册后即可以下载,点击开通VIP会员可无限免费下载!
2、资料一般为word或PPT文档。建议使用IE9以上浏览器或360、谷歌、火狐浏览器浏览本站。
3、有任何下载问题,请联系微信客服。
扫描下方二维码,添加微信客服
教科2003课标版《5.2.2CSS样式表》新课标教案优质课下载
教学目标
让学生理解什么是CSS样式表;
让学生掌握在HTML中加入CSS样式表的方法;
使学生掌握简单的CSS样式表代码。
4、通过学习使学生会运用CSS样式表优化网页制作;
5、培养学生独立思考、自主探究、动手实践的能力;
教学重点
CSS样式表设置的方法。
教学难点
三种CSS样式表的选择应用。
教学过程
一、创设情境,感受CSS样式表
网站风格的三要素是网站标志、标准色彩和标准字体,我们说不同的网页色彩体现不同的风格,高一(21)班站点采用什么风格呢?教师快速切换网页的背景,我们用哪种风格的网页背景呢?
老师利用修改简单的代码就实现了网页整体的风格的改变,这就是当前网页制作中的一个常用技术——CSS样式表,今天我们就学习神奇的网页外衣——CSS样式表。
设计意图:CSS样式表的内容比较枯燥,导入课题时,教师利用班级网站的风格作为切入点,快速的网页换装给学生以视觉冲击力,同时抓住了学生的眼球,激发了学生的求知欲,为后面的学习作好铺垫。
二、知识迁移,内联式样式表
问题:下图的文字有哪些格式吗?
(黑体、蓝色、粗体、40磅……)
教师总结:CSS样式表其实就是一组样式,样式就是用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。CSS样式表是当前网页制作中的一个常用技术,不仅可以对文字格式进行设置,还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。
问题:怎么在网页中加入样式表呢?如果我们用一个名字把这几种格式集成起来,那就是样式。我们可以把几种格式集合成一种样式,一次性的加入到网页中,不仅可以提高网页制作的效率,还可以统一网页的风格。
活动一:打开高一20班站点中的ydtk.htm,在HTML中加入内联式样式表。
问题(1):如何加入内联式样式表?(师演示内联式样式表的方法。提示学生还可以参考学件的样例和操作步骤。)
问题(2):观察内联式样式表代码,它们有什么特征?
(我们定义了一个名称为“h1”的样式,集成了几种文字的格式,样式表定义语句放在标签中)
问题(3):网页上的文字格式有什么不足之处?有什么方法解决呢?