1、第2章 DreamweaverMX入门,2.8 强大的层叠样式表,广东省韶关学院09级软件班陈伟 王永雪,复习,复习： 1、给美乐电器首页插入一个背景透明的FLASH动画 2、给美乐电器的“企业简介”页面加背景音乐,1用多媒体演示： 改变IE浏览器“查看”菜单“文字大小”中值的选项，比较“美乐电器”网站的“企业简介”页面上的文字和“与我联系”页面上的文字有什么区别？ 2上网查看一些网站: http:/、http:/ 看看这些网站的文字会不会随着浏览器选项“文字大小”的变化而产生变化。,新课导入,什么是层叠样式表,定义 层叠样式表的英文名是Cascading Style Sheets，简称为CS
2、S。是W3C为了弥补传统HTML功能之不足而开发的一种新的网页格式标准。功能： （1）丰富文字大小的定义格式 （2）不会破坏原有的排版效果 （3）重新定义HTML语言的源代码标记,层叠样式表的格式,格式：名称属性1：属性值；属性2：属性值 名称：可以是用户自己定义的，也可以是HTML的源代码标记。 如：P9是自己定义的名称，H1则是HTML语言中1号标题标记 属性：指要修改的属性，如color(颜色) 属性值：给属性设定的值，不同的属性有不同的值， 如:color的值可以设定为red（红色）或#FF0000。,层叠样式表的组织形式,（1）把所有的规则全包括在STYLE（样式）元素里面并放在HE
3、AD元素内，然后在BODY中调用这些规则，这种方法适用于某个CSS规则在特定页面中多次使用的情况。 具体源代码如： ,层叠样式表的组织形式,（2）把所有的CSS规则都编写到一个CSS文档中，要使用这些规则的网页，只要在HEAD元素中加入链接信息就可以使用CSS文档中的CSS规则。这种方法在多个页面要使用同一种CSS样式规则时非常便利，并在以后修改时也非常方便，只要直接修改CSS文档中相应的CSS规则就可以达到修改所有页面的效果。 具体源代码如： /“rel=stylesheet”指连接的元素是一个样式表文档，href后面括号内是连接的CSS文件路径和名称。,层叠样式表的组织形式,（3）直接把C
4、SS规则写到HTML源代码内，这种方法使用方便，但使用时要直接写源代码。 具体源代码如： 大家好,层叠样式表的建立与使用,（1）DreamweaverMX中的CSS面板的打开方法 （2）CSS面板介绍 （3）CSS样式的建立与运用 实例演示：设置美乐电器网站上“与我联系”页面上的三个文字CSS样式规则并应用到页面中。 先建立一个CSS01和CSS03规则（为让学生养成做大系统的习惯，可以在演示时将CSS规则做成CSS文档），并应用到文档中。 然后留一个CSS02规则，让学生上台制作并应用到文档中。 （4）学生上机操作刚才老师演示的实例（15分钟） （5）再请一名学生上台操作，检查上机效果，巩固
5、所学的操作,上机操作,继续上机操作老师演示的实例“美乐电器”网站中“与我联系”页面的CSS样式，并记录步骤 用学到的三种定义CSS规则的方法将“美乐电器”网站所有的页面文字都用CSS样式标记起来 将课后的实例“余姚市电脑技术有限公司”网站中网页的文字用CSS样式来进行定义 思考问题：如果同一个CSS样式规则PP9被重复用CSS样式定义了几次，那么起作用的是哪个？,小结,什么是层叠样式表层叠样式表的格式层叠样式表的组织形式层叠样式表的建立与使用,作业,书：第二章习题P60 1.9、2.11、4.22 温习所掌握的操作，完成整个“美乐电器”网站制作。 有能力的人完成“余姚市电脑技术有限公司”网站。 预习下一章内容。,
