DreamweaverCS3网页设计培训教程电子教案08

1、第8课 使用层叠样式美化网页 本课要点具体要求本课导读上机练习本课要点点层叠样式式的定义义及创建建层叠样式式的管理理和应用用具体要求求了解层叠叠样式熟悉创建建层叠样样式的方方法掌握层叠叠样式的的管理掌握层叠叠样式的的应用本课导读读DreamweaverCS3中默认的的文本字字号都比比较大，需要用用户自己己手动来来设置，但逐一一设置很很麻烦，运用层层叠样式式就可以以很方便便地对整整个网页页中的文文本进行行字体格格式设置置。另外外，还可可以用层层叠样式式来创建建十分精精美的表表格线框框等。8.1层叠样式式的定义义及创建建在设计网网页时，常常需需要对网网页中各各种元素素的属性性进行设设置。一一般来说

2、说，在同同一个网网站的所所有页面面中，相相同类型型的网页页元素应应该具有有相同的的属性，。如果果逐一设设置会做做许多重重复的工工作，而而且很容容易出错错；当需需要对属属性进行行修改时时，也需需要逐一一进行修修改。为为了解决决这个问问题，就就需要使使用CSS（CascadingStyleSheets，即层叠叠样式表表）来统统一进行行控制。定义CSS样式后，就可以以把它应应用到不不同的网网页元素素中，这这样，所所有应用用该CSS样式的网网页元素素就会具具有相同同的属性性；当修修改该CSS样式后，所有应应用该CSS样式的网网页元素素的属性性就会一一同被修修改。8.1层叠样式式的定义义及创建建8.1.

3、1知识讲解解8.1.2典型案例例设置网页页页面属属性8.1.1知识讲解解要想在文文档中使使用CSS样式，可可以创建建新的CSS样式，也也可以链链接或导导入文档档外部的的CSS样式。在在创建CSS样式前，我们先先来了解解一下CSS样式的定定义。8.1.1知识讲解解1.层叠样式式的定义义2.认识【CSS样式】面板3.创建层叠叠样式4.CSS样式的具具体定义义1.层叠样式式的定义义CSS是“层叠叠样式表表”的简简称，通通过CSS可以定制制网页中中的文本本格式，不仅可可以控制制一个页页面的文文本格式式，采用用外部链链接的方方式还可可以控制制多个页页面的文文本格式式。CSS样式有多多种定义义方式，主要有

4、有标签CSS样式、类类CSS样式和伪伪类CSS样式3种。2.认识【CSS样式】面板CSS的创建及及管理基基本上都都是在【CSS样式】面板中进进行的，下面就就来认识识它。选择【窗口】【CSS样式】命令或按按【ShiftF11】组合键，打开【CSS样式】面板。在在该面板板中可进进行新建建、编辑辑、删除除CSS样式和链链接外部部CSS文件等操操作。3.创建层叠叠样式在【CSS样式】面板中创创建CSS样式的具具体操作作步骤如如下：（1）单击【CSS样式】面板右上上角的按按钮钮，在弹弹出的菜菜单中选选择【新建】命令，打打开【新建CSS规则】对话框。（2）在【选择器类类型】栏中选择择所需定定义的样样式类型

5、型。（3）在【定义在】栏中可选选择样式式的种类类或选择择只在当当前文档档中应用用所选样样式。这这里选中中单单选按按钮，然然后单击击【确定】按钮。（4）打开【保存样式式表文件件为】对话框。在该对对话框的的【保存在】下拉列表表框中选选择保存存路径，在【文件名】文本框中中输入该该CSS样式的名名称。（5）单击【保存】按钮，保保存新建建的样式式表文件件并自动动打开CSS规则定义义对话框框。（6）在该对对话框中中进行各各项参数数设置，设置完完成后单单击【确定】按钮，系系统会自自动在【CSS样式】面板中显显示出定定义的样样式。4.CSS样式的具具体定义义CSS样式有8个类别：1）类型2）背景3）区块4）方

6、框5）边框6）列表7）定位8）扩展各类别中中相关参参数的具具体含义义请教师师参照软软件和书书中内容容进行讲讲解。8.1.2典型案例例设置网页页页面属属性案例目标标网页页面面属性也也是通过过创建层层叠样式式来实现现对整个个网页进进行控制制的，下下面就来来设置网网页页面面属性。8.1.2典型案例例设置网页页页面属属性操作思路路（1）新建一一个空白白文档并并将所有有要用的的素材复复制到保保存网页页的位置置。（2）设置页页面属性性。（3）插入网网页元素素。8.1.2典型案例例设置网页页页面属属性操作步骤骤具体操作作步骤请请教师参参照软件件和书中中内容进进行讲解解。8.1.2典型案例例设置网页页页面属属

7、性案例小结结本案例练练习了网网页页面面属性的的常规设设置，DreamweaverCS3将网页页页面中最最常用的的一些层层叠样式式集中在在其中，以方便便制作者者进行设设置。8.2层叠样式式的管理理和应用用初次创建建的层叠叠样式可可能不太太符合实实际需要要，此时时可以对对层叠样样式进行行编辑。另外，部分层层叠样式式创建好好后，还还需制作作者手动动进行应应用。8.2层叠样式式的管理理和应用用8.2.1知识讲解解8.2.2典型案例例为表格应应用CSS样式8.2.1知识讲解解在DreamweaverCS3中，可以以对已创创建的CSS样式进行行修改和和编辑，也可以以删除已已创建的的CSS样式。8.2.1知

8、识讲解解1.编辑CSS样式2.链接外部部CSS样式表文文件3.删除CSS样式4.应用CSS样式1.编辑CSS样式编辑CSS样式有两两种方法法：一种种是在CSS规则定义义对话框框中进行行修改，另一种种是直接接在【CSS样式】面板中修修改。2.链接外部部CSS样式表文文件CSS样式通常常只显示示在创建建该样式式的页面面的【CSS样式】面板中，通过链链接可将将其他页页面中的的样式应应用到当当前页面面中。链链接外部部样式表表的具体体操作步步骤请教教师参照照软件和和书中内内容进行行讲解。3.删除CSS样式如果不再再需要某某个CSS样式，则则可以将将其删除除。在【CSS样式】面板中选选择要删删除的CSS样

9、式，再再单击按按钮，即可删删除该CSS样式。4.应用CSS样式设置好CSS样式后，标签CSS样式和伪伪类CSS样式会自自动应用用到相应应的HTML标签和伪伪类上，而类CSS样式需要要手动应应用到需需要的网网页元素素上。将将类CSS样式应用用到网页页元素上上主要有有3种方法：使用网页页元素的的快捷菜菜单使用CSS样式的快快捷菜单单使用网页页元素的的【属性】面板8.2.2典型案例例为表格应应用CSS样式案例目标标本案例利利用CSS样式对5.1.2节中制作作的“我我的课程程表”网网页进行行样式设设置，以以美化网网页。8.2.2典型案例例为表格应应用CSS样式操作思路路（1）定义第第1层表格的的边框和

10、和背景等等属性。（2）定义第第1层表格的的单元格格属性。（3）定义第第2层表格的的边框和和背景等等属性。（4）定义第第2层表格的的单元格格属性。8.2.2典型案例例为表格应应用CSS样式操作步骤骤具体操作作步骤请请教师参参照软件件和书中中内容进进行讲解解。8.2.2典型案例例为表格应应用CSS样式案例小结结本案例练练习用CSS样式对表表格进行行修饰，从中可可以看出出：CSS样式是统统一多个个网页风风格的工工具，使使用得当当可使网网页制作作事半功功倍而且且效果协协调统一一。在一一些大型型网站中中，所有有页面的的风格是是一致的的，但各各个栏目目之间有有一些小小的差别别，在制制作好一一个栏目目的CSS样式文件件后，再再稍微修修改一下下即可。8.3上机练习习8.3.1“再别康康桥”网网页页面面属性设设置8.3.2“再别康康桥”网网页其他他样式的的设置及及应用用8.3.1“再别康康桥”网网页页面面属性设设置本练习对对“再别别康桥”网页进进行页面面属性设设置。8.3.1“再别康康桥”网网页页面面属性设设置操作思路路：设置页面面背景。设置页面面默认字字体（默默认字体体的颜色色要参照照背景图图像的颜颜色进行行设置）。设置链