Dreamweaver CS网页设计培训教程电子教案 ()

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

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

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

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

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

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

9、单元格属性。 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 “再别康桥”网页页面属性设置操作思路：设置页面背景。设置页面默认字体（默认字体的颜色要参照背景图像的颜色进行设置）