CSS样式表简案.docVIP

《CSS样式表》简案 教学目标 1．知识与技能目标 （1）理解什么是CSS样式表 （2）了解CSS样式定义的方法和格式； （3）理解在 HTML 中引用CSS样式表的三种方法。 （4）体会CSS样式表的特点 2．过程与方法目标 （1）培养学生独立思考、动手实践的能力 （2）培养学生自主探究性学习能力 3．情感态度与价值目标 通过体验CSS样式表，让学生在今后的网页制作过程中乐于学习运用CSS样式表 二、教学重点、难点 教学重点 CSS样式表的三种引用方法：内联式、外联式、嵌入式 CSS样式表的特点 体验CSS样式表 教学难点 CSS样式定义的方法和格式 三、教学策略 （一）教学方法 1、讲授法和演示法相结合 2、对比教学法 3、任务驱动法 （二）学习方法 1、观察法 2、自主探究法； 3、对比学习法； （三）教学手段 大屏幕广播、网络教学、学习网站 四、教学过程 教师活动 学生活动 设计意图 新课引入 展示两张网页，并提出问题：两张网页显示的效果相同，请察看代码，观察实现方法有什么不同？ 引入课题“CSS样式表” 学生观察网页代码，回答老师的问题 通过对比教学法，引出本节课的课题 新 授 课 结合网页中的样式定义，对于CSS样式表中的一些基本概念进行讲解 （1）提问：在这个网页中应用CSS样式表有哪些特点？ （2）介绍什么是样式：用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合 （3）CSS样式定义的方法 （4）CSS样式表引用方法一：内联式样式表 （5）总结内联式样式表引用特点 2、布置探究学习任务，对比两个网站文件夹下的文件及网页显示效果，回答教师给出的4个问题 （1）网站2文件夹里比网站1文件夹里多了哪个文件？用记事本打开该文件查看，你认为这个文件的作用是什么？ （2）对比网站1文件夹和网站2文件夹下相同文件名的网页代码，网站2中的网页是如何引用all.css文件中的样式表的？ （3）尝试将网站2中all.css文件里td标识样式定义中的字体大小改为12pt,保存后，再浏览网页，看到什么效果？ 你认为这样的样式表引用，有什么特点？ 3、在学生探索学习的基础之上小结外联式样式表引用特点 4、简单介绍嵌入式样式表 5、引导学生发现问题：对于某一标识符既有嵌入式引用，又有内联式引用时，如何执行？ 讲解三种引用方式的优先级 学生与教师一起共同分析，理解概念，思考CSS样式表的特点 学生自行探究学习，完成练习，并思考CSS样式表的特点 让学生通过对比、探究学习进一步掌握CSS样式定义的方法，同时自行找出外联式样式表引用方法，体会引用环境 通过实例演示，让学生理解引用方式的优先级 布置作业 布置体验CSS样式表上机任务： 1、点击这里下载素材文件 2、打开nl.htm网页，在内联式样式表中做如下定义： （1）对p标识符定义进行修改 字体大小font-size:12pt; 字体颜色color:#000000; 行高line-height:20pt 字体样式font-style:oblique 3、在网站2文件夹中的all.css文件中的外联式样式表做如下定义： （1）对body标识符定义进行修改 背景色background-color:#FFFF99; （2）对a标识符定义进行修改 字体大小font-size:12pt; 文本强调text-decoration:underline; 4、点击这里打开CSS常用属性，参考常用属性，按照自己的想法对素材里的网页进行样式定义 学生自己上机体验CSS样式表在HTML中的应用 通过体验任务，加深学生对CSS样式表的理解 课堂总结 根据前面所学，引导学生总结CSS样式表的特点 1、只需修改一个CSS代码文件就可以改变页数不定的网页外观和格式 2、可以“随心所欲”地控制页面布局和外观 3、在所有浏览器和平台之间具有较好的兼容性 4、能够精简网页，提高下载速度