理解动态HTML——CSS样式表.doc

理解动态HTML——CSS样式表 教学目标： 了解CSS样式表的定义；了解CSS样式表的优点；掌握嵌入式、内联式、外联式三种样式表的实现方法；通过对三种样式表的亲身实践，感受这三种样式表的优缺点。 课前准备：多媒体教室教学平台 设置网络环境：无 教学课件：课件 板块 教师活动的问题串设计 学生活动串设计 目标达成反馈串设计 导入 新授 纠正上节课作业错误，观察网页色彩变成灰色？ CSS样式表（展示PPT） CSS（Cascading Style Sheets ）层叠样式表，简称样式表 P112 样式：用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。 例：word中的样式项 （1）嵌入式样式表 例如：＜table style=”color:red；font-size:12pt”＞,粗体为直接嵌入的样式，通过预览就能看到实际效果。 功能：对具体的标签作具体的调整，其范围只限于本标签。 任务一：应用嵌入式样式表修改网页 教师总结嵌入式样式表的优缺点 （2）内联式样式表 教师：所谓内联式，就相当于下厨房做菜，就是我们刚才讲的炒菜必须在锅里炒，并且要放在灶头上一样，我们的CSS样式代码必须要写在 style type=”text/css”和/style(锅)中,并要把这一部分语句放在HTML文件的HEAD(灶头)中。 任务二：应用内联式样式表，完成作业要求 （3）外联式样式表 教师：其实外联就像做外卖一样。菜做好后打包（把样式定义语句写在记事本里保存为h3.css），只要客户有需要通过联系 （链接link rel=”stylesheet” href=”h3.css”）就可以满足需求。 任务三：应用外联式样式表，实践操作 教师小结 通过刚才的学习，同学们能说说CSS样式的优点吗？ 学生：可以避免重复性劳动、可以根据自己的个性设计网页…… 教师补充：具有良好的兼容性；精简网页,提高下载速度等。 网页所使用内容是网络上搜索来的，需要标明出处，保护他人版权。提高网络安全意识。 通过本节课的学习，同学们对于CSS样式表有了深入了解，掌握了三种CSS样式表的使用。希望同学们以后在自己制作网站时，能灵活运用CSS样式表来美化自己的网页。 学习网站： /index.html /index.html / 观察思考 倾听 倾听 学生操作练习 倾听 学生操作练习 倾听 学生操作练习 学生代表发言 教师巡视指导 学生代表发言 学生代表演示 课后反思 1