Dreamweaver CS3网页设计培训教程电子教案08.ppt

《Dreamweaver CS3网页设计培训教程电子教案08.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第8课使用层叠样式美化网页本课要点具体要求本课导读本课要点层叠样式的定义及创建层叠样式的管理和应用具体要求了解层叠样式熟悉创建层叠样式的方法掌握层叠样式的管理掌握层叠样式的应用本课导读DreamweaverCS3中默认的文本字号都比较大，需要用户自己手动来设置，但逐一设置很麻烦，运用层叠样式就可以很方便地对整个网页中的文本进行字体格式设置。另外，还可以用层叠样式来创建十分精美的表格线框等。8.1层叠样式的定义及创建在设计网页时，常常需要对网页中各种元素的属性进行设置。一般来说，在同一个网站的所有页面中，相同类型的网页元素应该具有相同的属性，。如果逐一设置会做许多重复的工作，而且很容易

2、出错；当需要对属性进行修改时，也需要逐一进行修改。为了解决这个问题，就需要使用CSS（CascadingStyleSheets，即层叠样式表）来统一进行控制。定义CSS样式后，就可以把它应用到不同的网页元素中，这样，所有应用该CSS样式的网页元素就会具有相同的属性；当修改该CSS样式后，所有应用该CSS样式的网页元素的属性就会一同被修改。8.1层叠样式的定义及创建8.1.1知识讲解8.1.2典型案例——设置网页页面属性8.1.1知识讲解要想在文档中使用CSS样式，可以创建新的CSS样式，也可以链接或导入文档外部的CSS样式。在创建CSS样式前，我们先来了解一下CSS样式的定义。8.1

3、.1知识讲解1.层叠样式的定义2.认识【CSS样式】面板3.创建层叠样式4.CSS样式的具体定义1.层叠样式的定义CSS是“层叠样式表”的简称，通过CSS可以定制网页中的文本格式，不仅可以控制一个页面的文本格式，采用外部链接的方式还可以控制多个页面的文本格式。CSS样式有多种定义方式，主要有标签CSS样式、类CSS样式和伪类CSS样式3种。2.认识【CSS样式】面板CSS的创建及管理基本上都是在【CSS样式】面板中进行的，下面就来认识它。选择【窗口】→【CSS样式】命令或按【Shift＋F11】组合键，打开【CSS样式】面板。在该面板中可进行新建、编辑、删除CSS样式和链接外部CSS

4、文件等操作。3.创建层叠样式在【CSS样式】面板中创建CSS样式的具体操作步骤如下：（1）单击【CSS样式】面板右上角的按钮，在弹出的菜单中选择【新建】命令，打开【新建CSS规则】对话框。（2）在【选择器类型】栏中选择所需定义的样式类型。（3）在【定义在】栏中可选择样式的种类或选择只在当前文档中应用所选样式。这里选中单选按钮，然后单击【确定】按钮。（4）打开【保存样式表文件为】对话框。在该对话框的【保存在】下拉列表框中选择保存路径，在【文件名】文本框中输入该CSS样式的名称。（5）单击【保存】按钮，保存新建的样式表文件并自动打开CSS规则定义对话框。（6）在该对话框中进行各项参数设置

5、，设置完成后单击【确定】按钮，系统会自动在【CSS样式】面板中显示出定义的样式。4.CSS样式的具体定义CSS样式有8个类别：1）类型2）背景3）区块4）方框5）边框6）列表7）定位8）扩展各类别中相关参数的具体含义请教师参照软件和书中内容进行讲解。8.1.2典型案例——设置网页页面属性案例目标网页页面属性也是通过创建层叠样式来实现对整个网页进行控制的，下面就来设置网页页面属性。8.1.2典型案例——设置网页页面属性操作思路（1）新建一个空白文档并将所有要用的素材复制到保存网页的位置。（2）设置页面属性。（3）插入网页元素。8.1.2典型案例——设置网页页面属性操作步骤具体操作步骤请

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

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