《css样式表》简案

《《css样式表》简案》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、《CSS样式表》简案一、教学目标1．知识与技能目标（1）理解什么是CSS样式表（2）了解CSS样式定义的方法和格式；（3）理解在HTML中引用CSS样式表的三种方法。（4）体会CSS样式表的特点2．过程与方法目标（1）培养学生独立思考、动手实践的能力（2）培养学生自主探究性学习能力3．情感态度与价值目标通过体验CSS样式表，让学生在今后的网页制作过程中乐于学习运用CSS样式表二、教学重点、难点（一）教学重点CSS样式表的三种引用方法：内联式、外联式、嵌入式CSS样式表的特点体验CSS样式表（二）教学难点CSS样式定义的方法和格式三、教学策略（一）教学方法1、讲授法和演示法相结合2、对比教学

2、法3、任务驱动法（二）学习方法1、观察法2、自主探究法；3、对比学习法；（三）教学手段大屏幕广播、网络教学、学习网站四、教学过程教师活动学生活动设计意图新课引入展示两张网页，并提出问题：两张网页显示的效果相同，请察看代码，观察实现方法有什么不同？引入课题“CSS样式表”学生观察网页代码，回答老师的问题通过对比教学法，引出本节课的课题新授1、结合网页中的样式定义，对于CSS样式表中的一些基本概念进行讲解（1）提问：在这个网页中应用CSS样式表有哪些特点？（2）介绍什么是样式：用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合（3）CSS样式定义的方法学生与教师一起共同分析，理解概

3、念，思考CSS样式表的特点课（4）CSS样式表引用方法一：内联式样式表（5）总结内联式样式表引用特点2、布置探究学习任务，对比两个网站文件夹下的文件及网页显示效果，回答教师给出的4个问题（1）网站2文件夹里比网站1文件夹里多了哪个文件？用记事本打开该文件查看，你认为这个文件的作用是什么？（2）对比网站1文件夹和网站2文件夹下相同文件名的网页代码，网站2中的网页是如何引用all.css文件中的样式表的？（3）尝试将网站2中all.css文件里td标识样式定义中的字体大小改为12pt,保存后，再浏览网页，看到什么效果？（4）你认为这样的样式表引用，有什么特点？3、在学生探索学习的基础之上小结外

4、联式样式表引用特点4、简单介绍嵌入式样式表5、引导学生发现问题：对于某一标识符既有嵌入式引用，又有内联式引用时，如何执行？讲解三种引用方式的优先级学生自行探究学习，完成练习，并思考CSS样式表的特点让学生通过对比、探究学习进一步掌握CSS样式定义的方法，同时自行找出外联式样式表引用方法，体会引用环境通过实例演示，让学生理解引用方式的优先级布置作业布置体验CSS样式表上机任务：1、点击这里下载素材文件2、打开nl.htm网页，在内联式样式表中做如下定义：（1）对p标识符定义进行修改字体大小font-size:12pt;字体颜色color:#;行高line-height:20pt字体样式fon

5、t-style:oblique3、在网站2文件夹中的all.css文件中的外联式样式表做如下定义：（1）对body标识符定义进行修改背景色background-color:#FFFF99;（2）对a标识符定义进行修改字体大小font-size:12pt;文本强调text-decoration:underline;4、点击这里打开CSS常用属性，参考常用属性，按照自己的想法对素材里的网页进行样式定义学生自己上机体验CSS样式表在HTML中的应用通过体验任务，加深学生对CSS样式表的理解课堂总结根据前面所学，引导学生总结CSS样式表的特点1、只需修改一个CSS代码文件就可以改变页数不定的网页外

6、观和格式2、可以“随心所欲”地控制页面布局和外观3、在所有浏览器和平台之间具有较好的兼容性4、能够精简网页，提高下载速度