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

DreamweaverCS3网页设计培训教程第8课使用层叠样式美化网页本课要点具体要求本课导读上机练习DreamweaverCS3网页设计培训教程本课要点层叠样式的定义及创建层叠样式的管理和应用DreamweaverCS3网页设计培训教程具体要求了解层叠样式熟悉创建层叠样式的方法掌握层叠样式的管理掌握层叠样式的应用DreamweaverCS3网页设计培训教程本课导读DreamweaverCS3中默认的文本字号都比较大，需要用户自己手动来设置，但逐一设置很麻烦，运用层叠样式就可以很方便地对整个网页中的文本进行字体格式设置。另外，还可以用层叠样式来创建十分精美的表格线框等。DreamweaverCS3网页设计培训教程8.1层叠样式的定义及创建在设计网页时，常常需要对网页中各种元素的属性进行设置。一般来说，在同一个网站的所有页面中，相同类型的网页元素应该具有相同的属性，。如果逐一设置会做许多重复的工作，而且很容易出错；当需要对属性进行修改时，也需要逐一进行修改。为了解决这个问题，就需要使用CSS（CascadingStyleSheets，即层叠样式表）来统一进行控制。定义CSS样式后，就可以把它应用到不同的网页元素中，这样，所有应用该CSS样式的网页元素就会具有相同的属性；当修改该CSS样式后，所有应用该CSS样式的网页元素的属性就会一同被修改。DreamweaverCS3网页设计培训教程8.1层叠样式的定义及创建8.1.1知识讲解8.1.2典型案例——设置网页页面属性DreamweaverCS3网页设计培训教程8.1.1知识讲解要想在文档中使用CSS样式，可以创建新的CSS样式，也可以链接或导入文档外部的CSS样式。在创建CSS样式前，我们先来了解一下CSS样式的定义。DreamweaverCS3网页设计培训教程8.1.1知识讲解1.层叠样式的定义2.认识【CSS样式】面板3.创建层叠样式4.CSS样式的具体定义DreamweaverCS3网页设计培训教程1.层叠样式的定义CSS是“层叠样式表”的简称，通过CSS可以定制网页中的文本格式，不仅可以控制一个页面的文本格式，采用外部链接的方式还可以控制多个页面的文本格式。CSS样式有多种定义方式，主要有标签CSS样式、类CSS样式和伪类CSS样式3种。DreamweaverCS3网页设计培训教程2.认识【CSS样式】面板CSS的创建及管理基本上都是在【CSS样式】面板中进行的，下面就来认识它。选择【窗口】→【CSS样式】命令或按【Shift＋F11】组合键，打开【CSS样式】面板。在该面板中可进行新建、编辑、删除CSS样式和链接外部CSS文件等操作。DreamweaverCS3网页设计培训教程3.创建层叠样式在【CSS样式】面板中创建CSS样式的具体操作步骤如下：（1）单击【CSS样式】面板右上角的按钮，在弹出的菜单中选择【新建】命令，打开【新建CSS规则】对话框。（2）在【选择器类型】栏中选择所需定义的样式类型。（3）在【定义在】栏中可选择样式的种类或选择只在当前文档中应用所选样式。这里选中单选按钮，然后单击【确定】按钮。（4）打开【保存样式表文件为】对话框。在该对话框的【保存在】下拉列表框中选择保存路径，在【文件名】文本框中输入该CSS样式的名称。（5）单击【保存】按钮，保存新建的样式表文件并自动打开CSS规则定义对话框。（6）在该对话框中进行各项参数设置，设置完成后单击【确定】按钮，系统会自动在【CSS样式】面板中显示出定义的样式。DreamweaverCS3网页设计培训教程4.CSS样式的具体定义CSS样式有8个类别：1）类型2）背景3）区块4）方框5）边框6）列表7）定位8）扩展各类别中相关参数的具体含义请教师参照软件和书中内容进行讲解。DreamweaverCS3网页设计培训教程8.1.2典型案例——设置网页页面属性案例目标网页页面属性也是通过创建层叠样式来实现对整个网页进行控制的，下面就来设置网页页面属性。DreamweaverCS3网页设计培训教程8.1.2典型案例——设置网页页面属性操作思路（1）新建一个空白文档并将所有要用的素材复制到保存网页的位置。（2）设置页面属性。（3）插入网页元素。DreamweaverCS3网页设计培训教程8.1.2典型案例——设置网页页面属性操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。DreamweaverCS3网页设计培训教程8.1.2典型案例——设置网页页面属性案例小结本案例练习了网页页面属性的常规设置，DreamweaverCS3将网页页面中最常用的一些层叠样式集中在其中，以方便制作者进行设置。DreamweaverCS3网页设计培训教程8.2层叠样式的管理和应用初次创建的层叠样式可能不太符合实际需要，此时可以对层叠样式进行编辑。另外，部分层叠样式创建好后，还需制作者手动进行应用。DreamweaverCS3网页设计培训教程8.2层叠样式的管理和应用8.2.1知识讲解8.2.2典型案例——为表格应用CSS样式DreamweaverCS3网页设计培训教程8.2.1知识讲解在DreamweaverCS3中，可以对已创建的CSS样式进行修改和编辑，也可以删除已创建的CSS样式。DreamweaverCS3网页设计培训教程8.2.1知识讲解1.编辑CSS样式2.链接外部CSS样式表文件3.删除CSS样式4.应用CSS样式DreamweaverCS3网页设计培训教程1.编辑CSS样式编辑CSS样式有两种方法：一种是在CSS规则定义对话框中进行修改，另一种是直接在【CSS样式】面板中修改。DreamweaverCS3网页设计培训教程2.链接外部CSS样式表文件CSS样式通常只显示在创建该样式的页面的【CSS样式】面板中，通过链接可将其他页面中的样式应用到当前页面中。链接外部样式表的具体操作步骤请教师参照软件和书中内容进行讲解。DreamweaverCS3网页设计培训教程3.删除CSS样式如果不再需要某个CSS样式，则可以将其删除。在【CSS样式】面板中选择要删除的CSS样式，再单击按钮，即可删除该CSS样式。DreamweaverCS3网页设计培训教程4.应用CSS样式设置好CSS样式后，标签CSS样式和伪类CSS样式会自动应用到相应的HTML标签和伪类上，而类CSS样式需要手动应用到需要的网页元素上。将类CSS样式应用到网页元素上主要有3种方法：使用网页元素的快捷菜单使用CSS样式的快捷菜单使用网页元素的【属性】面板DreamweaverCS3网页设计培训教程8.2.2典型案例——为表格应用CSS样式案例目标本案例利用CSS样式对5.1.2节中制作的“我的课程表”网页进行样式设置，以美化网页。DreamweaverCS3网页设计培训教程8.2.2典型案例——为表格应用CSS样式操作思路（1）定义第1层表格的边框和背景等属性。（2）定义第1层表格的单元格属性。（3）定义第2层表格的边框和背景等属性。（4）定义第2层表格的单元格属性。DreamweaverCS3网页设计培训教程8.2.2典型案例——为表格应用CSS样式操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。DreamweaverCS3网页设计培训教程8.2.2典型案例——为表格应用CSS样式案例小结本案例练习用CSS样式对表格进行修饰，从中可以看出：CSS样式是统一多个网页风格的工具，使用得当可使网页制作事半功倍而且效果协调统一。在一些大型网站中，所有页面的风格是一致的，但各个栏目之间有一些小的差别，在制作好一个栏目的CSS样式文件后，再稍微修改一下即可。DreamweaverCS3网页设计培训教程8.3上机练习8.3.1“再别康桥”网页页面属性设置8.3.2“再别康桥”网页其他样式的设置及应用DreamweaverCS3网页设计培训教程8.3.1“再别康桥”网页页面属性设置本练习对“再别康桥”网页进行页面属性设置。DreamweaverCS3网页设计培训教程8.3.1“再别康桥”网页页面属性设置操作思路：设置页面背景。设置页面默认字体（默认字体的颜色要参照背景图像的颜色进行设置）。设置链接样式。DreamweaverCS3网页设计培训教程8.3.2“再别康桥”网页其他样式的设置及应用本练习对“再别康桥”网页进行其他样式的定义及应用。DreamweaverCS3网页设计培训教程8.3.2“再别康桥”网页其他样式的设置及应用操作思路：定义3种不同的字体样式，并将其分别应用于诗人简介、诗歌标题和诗歌内容。定义顶部表格及单元格的样式。定义图片样式。