2.8强大的层叠样式表

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