2.8强大的层叠样式表

《2.8强大的层叠样式表》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、章第2章DreamweaverMX入门节2.8强大的层叠样式表教学目标1、熟悉CSS层叠样式表的格式和组织形式2、掌握CSS层叠样式表的定义和使用教学重点、难点1、CSS的组织形式2、层叠样式表的建立3、层叠样式表的运用技能培训的目的1、掌握建立CSS层叠样式表的两种方法2、掌握用D reamweaver的CSS面板创建自定义样式3、掌握使用自建的CSS层叠样式的方法教法演示与练习相结合、引发学生学习的兴趣、指导学生自学学法记忆、观察、思考与上机实践教具使用多媒体投影、多媒体计算机机房教学内容与过程

2、教学内容教师活动学生活动备注复习提问复习：1、给美乐电器首页插入一个背景透明的FLASH动画2、给美乐电器的“企业简介”页面加背景音乐思考上台操作导入新课1．用多媒体演示：改变IE浏览器“查看”菜单“文字大小”中值的选项，比较“美乐电器”网站的“企业简介”页面上的文字和“与我联系”页面上的文字有什么区别？2．再上网查看一些网站：http://www.sina.com、http://www.163.com看看这些网站的文字会不会随着浏览器选项“文字大小”的变化而产生变化。最后，引入本节的教学内容。观察

3、、思考将使用HTML样式定义的文字和用CSS定义的文字进行比较，引发学习兴趣讲授新课1．什么是层叠样式表2．层叠样式表的格式给出本节课题2.8强大的层叠样式表1．什么是层叠样式表层叠样式表的英文名是CascadingStyleSheets，简称为CSS。是W3C为了弥补传统HTML功能之不足而开发的一种新的网页格式标准。功能：（1）丰富文字大小的定义格式（2）不会破坏原有的排版效果（3）重新定义HTML语言的源代码标记2．层叠样式表的格式（1）格式：名称{属性1：属性值；属性2：属性值}理解记忆教师

4、讲解时要与刚才的实例相结合，直接做到网页中，演示效果，加深学生的感性认识。3．层叠样式表的组织形式名称：可以是用户自己定义的，也可以是HTML的源代码标记。如：P9是自己定义的名称，H1则是HTML语言中1号标题标记属性：指要修改的属性，如color(颜色)属性值：给属性设定的值，不同的属性有不同的值，如color的值可以设定为red（红色）或#FF0000。3．层叠样式表的组织形式（1）把所有的规则全包括在STYLE（样式）元素里面并放在HEAD元素内，然后在BODY中调用这些规则，这种方法适用于

5、某个CSS规则在特定页面中多次使用的情况。具体源代码如：（2）把所有的CSS规则都编写到一个CSS文档中，要使用这些规则的网页，只要在HEAD元素中加入链接信息

6、就可以使用CSS文档中的CSS规则。这种方法在多个页面要使用同一种CSS样式规则时非常便利，并在以后修改时也非常方便，只要直接修改CSS文档中相应的CSS规则就可以达到修改所有页面的效果。具体源代码如：//“rel=stylesheet”指连接的元素是一个样式表文档，href后面括号内是连接的CSS文件路径和名称。（3）直接把CSS规则写到HTML源代码内，这种方法使用方便，但使用时要直接写源代码。具体源代码如：

7、font-size:12px;color:BLUE">大家好

8、时将CSS规则做成CSS文档），并应用到文档中。然后留一个CSS02规则，让学生上台制作并应用到文档中。（4）学生上机操作刚才老师演示的实例（15分钟）（5）再请一名学生上台操作，检查上机效果，巩固所学的操作5．上机操作：（1）继续上机操作老师演示的实例“美乐电器”网站中“与我联系”页面的CSS样式，并记录步骤（2）用学到的三种定义CSS规则的方法将“美乐电器”网站所有的页面文字都用CSS样式标记起来。（3）将课后的实例“余姚市电脑技术有限公司”网站中网页的文字用CS