制作实例_文档

《第10章Dreamweaver中层叠样式表的创建及使用》教案教学目标层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上

1.通过本章的教学，要求学生掌握以下基本内容

2.了解层叠样式表的基本知识

3.掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法

4.掌握将CSS样式应用到各种网页元素上的方法

5.掌握修改CSS样式的方法，并观察到该修改对网页外观的影响掌握管理CSS层叠样式表的基本方法，学会将外部样式表链接到网站的多个网页上，以便直接应用已创建好的css样式，统一多个网页的外观教学内容•CSS层叠样式表的基本知识内联式样式表、嵌入式样式表、外部样式表•在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式•链接外部样式表教学重点•创建CSS样式•应用CSS样式•修改CSS样式•链接外部样式表教学形式课堂讲授与网络自学相结合教学辅助手段•通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程•羊生可以访问网络教学站点教学站点提供了重点操作的Flash动画演/Jso教学时间安排1课时（45分钟）••层叠样式表的基础知识10分钟•创建和应用CSS样式15分钟•修改CSS样式5分钟•链接外部样式表5分钟小结10分钟教学方法与过程首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识然后介绍层叠样式表的基本种类接着介绍利用css面板创建CSS样式、应用CSS样式以及修改CSS样式的方法其后，介绍如何为网站的多个网页链接已有的外部样式表最后，进行小结在小结过程中，引导学生辨认和判断三种样式表在网页的HTML代码中具体的代码表示，并引导学生总结这些代码是如何通过css面板进行设置的，使得学生进一步加深对理论知识的理解布置课外作业，要求学生完成指定练习，巩固所学知识具体教学内容

一、引言引入学习本章节的原因，简单介绍有关概念，并提示本节课程的主要内容L什么是样式？样式是用来控制网页外观的一组格式

2.为什么在网页设计中使用样式？当网页中的多个元素需要使用相同的格式时，我们需要使用一种更为高效的格式设置方法如果把一组格式归纳起来，用一个名称命名，那么，这组格式就变成了一个样式对网页中的多个元素，只需给他们应用样式，他们就具有了相同的格式此外,当样式中的格式被修改之后，网页中所有应用了该样式的元素，其格式也发生了自动更新

3.什么是层叠样式表？层叠样式表CSS CascadingStyle Sheet是统一管理网页中各种样式的一种方式它是一组格式设置规则，用于控制网页外观一个网页对象（文本、图象、表格等）可以被多层的样式表来修饰，但是最终以优先级最高的样式表所定义的格式来显示这也是“层叠”样式表名称的由来层叠样式表可以同时被多个网页链接当样式表内的样式更新或被修改之后，所有应用了该样式表的文档都会被自动更新下面，我们首先了解一下层叠样式表有哪些类型，然后学习Dreamweaver中CSS样式的创建、应用及修改

二、层叠样式表的类型三类内联式样式表、嵌入式样式表、外部样式表

1.内联式样式表是在某个特定的标签内使用style属性定义CSS样式这种定义只对使用了style属性的标签有效，子标签可以继承父标签的样式p style二color:#000000;background:ye How;v这段文字背景色为I黄色/IX/p〉

2.嵌入式样式表是一系列包含在HTML文档head部分的style标签内的CSS样式headstyle type二text/cssv!--P{color:red;font-family:宋体；font-weight:bold）--/style/head

3.外部样式表是一系列存储在一个单独的外部.CSS文件中的CSS样式利用HTML文档head部分中的link标签，该文件被链接到Web站点中的一页或多页上headlink rel=stylesheet href=mystyle.cssv type=text/css”例参考css.htm（向学生演示三种不同的样式表代码）o/head

三、创建CSS样式

1.操作方法使用CSS面板•

2.操作步骤（结合后续示例向学生进行重点演示）•选择“窗口”菜单一“CSS样式”命令，打开CSS面板，点击面板底部的按钮，打开“新建样式”对话框•选择样式种类•创建自定义样式创建一个可以作为Class属性应用到某网页元素的样式•重定义HTML标签对指定的HTML标签的默认格式进行重新定义•使用CSS选择器为某个标签组合或所有包含特定Id属性的标签定义格式或从弹出式菜单中选择一个标签弹出式菜单中提供的选择器（称作伪类选择器）包括a:active a:hover a:link和a:visitedo•为新样式输入名字、选择标签、或者选择标签组合•样式的名字前边必须要有一个句点如果没有输入这个句点，Dreamweaver自动输入名字可以包含任何字母和数字的组合，但文字必须放在句号后例如.myheadlo•要重新定义HTML标签样式，可以键入一个HTML标签或者从弹出菜单中选择一个•选择CSS选择器后，可以输入任何一个有效的表达式（例如，tdp或ttmyStyle）,或者从弹出列表中选择可供选择a:active（选中超链接），a:hover（光标位于超链接上），a:link（超链接没有任何动作时），和a:visited（访问过的超链接）•选择样式保存的位置定义样式是保存在某个外部样式表文件中还是仅对本文档有效•点击确定，出现样式定义对话框•为新的css样式进行格式定义例打开css.htm,创建一个外部样式表（结合上面的述讲述内容向学生进行重点演示）

（1）新建一个外部样式表文件mycss.css。