Cha03外观、图形样式和图层

1、第第3 3章章 页面布局和使用页面布局和使用CSSCSS美化页面美化页面（时间：（时间：2 2次课，次课，4 4学时）学时） 本章主要讲解页面的布局，本章主要讲解页面的布局，DreamweaverDreamweaver提供了表格提供了表格网页定位技术，这些都是网页制作技术的精髓。表格是在网页定位技术，这些都是网页制作技术的精髓。表格是在HTMLHTML页面中排列数据与图像的非常强有力的工具。使用表页面中排列数据与图像的非常强有力的工具。使用表格可以对列表数据进行布局。格可以对列表数据进行布局。CSSCSS样式可以一次对若干个样式可以一次对若干个文档所有的样式进行控制。文档所有的样式进行控制。

2、CSSCSS样式表的主要优点是提供方便的更新功能，在更样式表的主要优点是提供方便的更新功能，在更新新CSSCSS样式时，使用该样式的所有文档格式都自动更新为样式时，使用该样式的所有文档格式都自动更新为新样式。新样式。第第3 3章章 页面布局和使用页面布局和使用CSSCSS美化页面美化页面n3.1 3.1 使用表格布局页面使用表格布局页面n3.2 3.2 表格基本操作表格基本操作n3.3 3.3 什么是什么是CSSCSSn3.4 3.4 【CSS CSS 设计器】面板设计器】面板n3.5 3.5 设置设置CSSCSS属性属性n3.6 3.6 链接到或导出外部链接到或导出外部CSSCSS设计器表设

3、计器表n3.7 3.7 使用使用CSSCSS布局模板布局模板n3.8 3.8 上机练习上机练习网页布局网页布局n3.9 3.9 思考与练习思考与练习第第3 3章章 页面布局和使用页面布局和使用CSSCSS美化页面美化页面 3.1 3.1 使用表格布局页面使用表格布局页面 表格是网页中的一个非常重要的元素，它可以控制文本和图形在页面上出表格是网页中的一个非常重要的元素，它可以控制文本和图形在页面上出现的位置，现的位置， HTMLHTML本身没有提供更多的排版手段，为了实现网页的精细排版，本身没有提供更多的排版手段，为了实现网页的精细排版，我们经常使用表格来实现。在页面创建表格之后，我们可以为其添

4、加内容、修我们经常使用表格来实现。在页面创建表格之后，我们可以为其添加内容、修改单元格和列改单元格和列/ /行属性，或者及复制和粘贴多个单元格等。行属性，或者及复制和粘贴多个单元格等。 在网页制作过程中，它被更多地用于网页内容排版，例如要将文字放在页在网页制作过程中，它被更多地用于网页内容排版，例如要将文字放在页面的某个位置，就可以插入表格，然后设置表格属性，文字放在表格的某个单面的某个位置，就可以插入表格，然后设置表格属性，文字放在表格的某个单元格里就行了。元格里就行了。 在在DreamweaverDreamweaver中可以使用表格清晰地显示列表数据。在中可以使用表格清晰地显示列表数据。在

5、DreamweaverDreamweaver也可也可以利用表格将各种数据排成行和列，从而更容易阅读信息。以利用表格将各种数据排成行和列，从而更容易阅读信息。 在网页设计中，表格不但可以用于罗列数据，它也是目前进行页面元在网页设计中，表格不但可以用于罗列数据，它也是目前进行页面元素定位的主要手段之一。素定位的主要手段之一。 表格在网页定位上，除了可以精确定位外，还具有规范、灵活的特点。表格在网页定位上，除了可以精确定位外，还具有规范、灵活的特点。插入表格的具体操作步骤如下：插入表格的具体操作步骤如下：3.1.1 3.1.1 插入表格插入表格(1) (1) 新建一个空白的新建一个空白的HTMLHT

6、ML文件，在菜单栏中选择【插入】文件，在菜单栏中选择【插入】| |【表格】命令，如图【表格】命令，如图3.13.1所示。所示。(2) (2) 在弹出的【表格】对话框中设置【行数】设置为在弹出的【表格】对话框中设置【行数】设置为3 3，设置【列】为，设置【列】为3 3，设置，设置【表格宽度】为【表格宽度】为100100百分比，设置【边框粗细】设为百分比，设置【边框粗细】设为1 1像素，如图像素，如图3.23.2所示所示. .图图3.1 3.1 选择【表格】命令选择【表格】命令 图图3.2 3.2 【表格】对话框【表格】对话框 3.1.1 3.1.1 插入表格插入表格 (3) (3) 设置完成后单

7、击【确定】按钮，即可在页面中才创建表格，如图设置完成后单击【确定】按钮，即可在页面中才创建表格，如图3.33.3所示。所示。 我们还可以选择在菜单栏中选择【窗口】我们还可以选择在菜单栏中选择【窗口】| |【插入】命令，打开【插【插入】命令，打开【插入】面板，选择【常用】选项，单击【表格】入】面板，选择【常用】选项，单击【表格】 按钮按钮 ，如图，如图3.43.4所示。所示。 还可以通过快捷键的方式打开【表格】对话框框来创建表格，快捷键为：还可以通过快捷键的方式打开【表格】对话框框来创建表格，快捷键为：Ctrl+Alt+TCtrl+Alt+T组合键。组合键。图图3.3 3.3 创建的表格创建的表

8、格图图3.4 3.4 【常用】选项【常用】选项3.1.2 3.1.2 设置表格属性设置表格属性 如果创建的表格不能满足需要，我们可以重新设置表格的属性。比如：如果创建的表格不能满足需要，我们可以重新设置表格的属性。比如：表格的行数、列数、表格高度、宽度等。修改表格属性一般在【属性】面板表格的行数、列数、表格高度、宽度等。修改表格属性一般在【属性】面板中进行。中进行。 首先选中要修改属性的表格，在窗口界面下方的【属性】面板中即可切首先选中要修改属性的表格，在窗口界面下方的【属性】面板中即可切换到表格的属性面板中，如图换到表格的属性面板中，如图3.53.5所示。所示。图图3.5 3.5 表格【属性

9、】面板表格【属性】面板 在【属性】面板中的各项表格参数如下：在【属性】面板中的各项表格参数如下：n 【表格】：文本框中可以为表格命名。【表格】：文本框中可以为表格命名。n 【行】：设置表格行数。【行】：设置表格行数。n 【Cols】：设置表格列数。】：设置表格列数。n 【宽（【宽（W）】：设置表格宽度。）】：设置表格宽度。3.1.2 3.1.2 设置表格属性设置表格属性 n【CellpadCellpad】：单元格内容和单元格边界之间的像素数：单元格内容和单元格边界之间的像素数。n【allSpaceallSpace】：相邻的表格单元格间的像素数：相邻的表格单元格间的像素数。n【AlignAlig

10、n】：设置表格的对齐方式，在下拉列表中包含：设置表格的对齐方式，在下拉列表中包含【默认默认】、【左对左对齐齐】、【居中对齐居中对齐】和和【右对齐右对齐】4 4个选项。个选项。n【BorderBorder】：用来设置表格边框的宽度：用来设置表格边框的宽度。n【清除列宽清除列宽】 ：用于清除列宽用于清除列宽。n【清除行高清除行高】 ：用于清除行高用于清除行高。n【将表格宽度转换成像素将表格宽度转换成像素】 ：将表格宽度转换为像素将表格宽度转换为像素。n【将表格宽度转换成百分比将表格宽度转换成百分比】 ：将表格宽度转换为百分比将表格宽度转换为百分比。3.1.3 3.1.3 插入嵌套表格插入嵌套表格

11、当单个表格不能满足布局的需求时，可以创建嵌套表格。当单个表格不能满足布局的需求时，可以创建嵌套表格。 嵌套表格是指在表格的某个单元格中再插入另一个表格，如果嵌套表格嵌套表格是指在表格的某个单元格中再插入另一个表格，如果嵌套表格的宽度单位为百分比，插入表格的宽度受所在单元格的宽度限制；如果单位的宽度单位为百分比，插入表格的宽度受所在单元格的宽度限制；如果单位为像素，当嵌套表格的宽度大于所在单元格宽度时，单元格宽度将随之变大。为像素，当嵌套表格的宽度大于所在单元格宽度时，单元格宽度将随之变大。 插入嵌套表格的操作方法如下：插入嵌套表格的操作方法如下：(1) (1) 打开随书附带光盘中的打开随书附带

12、光盘中的CDROMCDROM素材素材Cha03Cha03装潢公司装潢公司.html.html素材文件，将光素材文件，将光标置于左侧的表格中，按标置于左侧的表格中，按Ctrl+Alt+TCtrl+Alt+T组合键，在弹出的对话框中将【行数】组合键，在弹出的对话框中将【行数】设置为设置为5 5，将【列】设置为，将【列】设置为1 1，将【表格宽度】设置为，将【表格宽度】设置为500500像素，将【边框粗像素，将【边框粗细】设置为细】设置为0 0像素，如图像素，如图3.63.6所示。所示。(2) (2) 设置完成后单击【确定】按钮，即可在表格中插入表格，如图设置完成后单击【确定】按钮，即可在表格中插入

13、表格，如图3.73.7所示。所示。图图3.6 3.6 【表格】对话框【表格】对话框 图图3.7 3.7 插入单元格插入单元格 3.1.3 3.1.3 插入嵌套表格插入嵌套表格 (3) (3) 选择插入的表格，在【属性】面板中将【高】设置为选择插入的表格，在【属性】面板中将【高】设置为2727，如图，如图3.83.8所示。所示。图图3.8 3.8 设置嵌套表格的高度设置嵌套表格的高度 3.2 3.2 表格基本操作表格基本操作 在网站设计时我们要清楚地了解设置表格基本操作，使我们的网页样式在网站设计时我们要清楚地了解设置表格基本操作，使我们的网页样式更加方面浏览者浏览网页中的内容。下面将重点介绍表

14、格的以下基本操作。更加方面浏览者浏览网页中的内容。下面将重点介绍表格的以下基本操作。3.2.1 3.2.1 选择表格选择表格 在网页中，表格用于网页内容的排版，在使用表格具体布局网页之前，首先在网页中，表格用于网页内容的排版，在使用表格具体布局网页之前，首先应该学习一下表格的基本操作。在选择表格对象的时候，可以选择整个表格、表应该学习一下表格的基本操作。在选择表格对象的时候，可以选择整个表格、表格的行或列，同时也可以选择一个或多个单独的单元格。格的行或列，同时也可以选择一个或多个单独的单元格。 打开随书附带光盘中的打开随书附带光盘中的CDROMCha03CDROMCha03素材素材 表格基本操

15、作表格基本操作.html.html素材文件。素材文件。3.2.1 3.2.1 选择表格选择表格1. 1. 选择整个表格选择整个表格 选择表格，是编辑表格的第一步，下面为选择表格的几种方法：选择表格，是编辑表格的第一步，下面为选择表格的几种方法：n单击表格上的任意一条边框线，即可选择整个表格，如图单击表格上的任意一条边框线，即可选择整个表格，如图3.93.9所示。所示。n将光标置于表格内的任意位置上，在菜单栏中选择【修改】将光标置于表格内的任意位置上，在菜单栏中选择【修改】| |【表格】【表格】| |【选【选择表格】密令，如图择表格】密令，如图3.103.10所示。所示。n将光标置于表格的任意位

16、置，单击文档窗口左下角的将光标置于表格的任意位置，单击文档窗口左下角的标签，如图标签，如图3.113.11所示。所示。图图3.10 3.10 选择【选择表格】命令选择【选择表格】命令 图图3.9 3.9 单击边框线单击边框线 图图3.11 3.11 选择标签选择标签 3.2.1 3.2.1 选择表格选择表格2. 2. 选择表格的行或列选择表格的行或列 当用户想要选择表格中的某一行或列时，可以使用以下几种方法：当用户想要选择表格中的某一行或列时，可以使用以下几种方法：n当鼠标位于行首或列时，此时鼠标会处于当鼠标位于行首或列时，此时鼠标会处于 或或 的形状，单击鼠标左键即可以的形状，单击鼠标左键即

17、可以选中行或列，如图选中行或列，如图3.123.12、3.133.13所示。所示。图图3.12 3.12 选择行选择行 图图3.13 3.13 选择列选择列 n 选择行或列的最开始的表格，按住鼠标不放，拖动鼠标至最后一个单元格，即选择行或列的最开始的表格，按住鼠标不放，拖动鼠标至最后一个单元格，即n 可选择行或列。可选择行或列。n 选择某一行或列的第一个单元格，按住选择某一行或列的第一个单元格，按住ShiftShift键然后单击该行或列的最后一个键然后单击该行或列的最后一个n 单元格，即可选择该行或列。单元格，即可选择该行或列。3.2.1 3.2.1 选择表格选择表格 3. 3. 选择单元格选

18、择单元格n按住鼠标左键并拖动，可选择单元格。按住鼠标左键并拖动，可选择单元格。n将光标放置在单元格中，连续单击三次即可选择该单元格。将光标放置在单元格中，连续单击三次即可选择该单元格。n将光标插入要选择的单元格中，按住将光标插入要选择的单元格中，按住ShiftShift键在该单元格以外的附近单键在该单元格以外的附近单 击鼠标左键，即可选中该单元格。击鼠标左键，即可选中该单元格。n在要选择的单元格中插入光标，然后单击文档窗口界面下方的【在要选择的单元格中插入光标，然后单击文档窗口界面下方的【】标】标签，即可选择该单元格，如图签，即可选择该单元格，如图3.143.14所示。所示。图图3.14 3.

19、14 选择【选择【tdtd】标签】标签 3.2.2 3.2.2 改变表格和单元格的大小改变表格和单元格的大小 当调整整个表格的大小时，表格中的所有单元格都会按比例改变大小。当调整整个表格的大小时，表格中的所有单元格都会按比例改变大小。如果表格的单元格指定了明确的宽度或高度，则调整表格大小将更改文档窗如果表格的单元格指定了明确的宽度或高度，则调整表格大小将更改文档窗口中的单元格的可视大小，但不改变这些单元格的指定宽度和高度。口中的单元格的可视大小，但不改变这些单元格的指定宽度和高度。 再次打开表格基本操作再次打开表格基本操作.tml.tml素材文件，改变表格和单元格大小的操作方素材文件，改变表格

20、和单元格大小的操作方法如下：法如下：n选择要改变大小的表格，然后将光标放置在表格选择框关键点上，当光标变选择要改变大小的表格，然后将光标放置在表格选择框关键点上，当光标变为为 状态时，单击鼠标左键并拖动鼠标，即可改变表格大小，如图状态时，单击鼠标左键并拖动鼠标，即可改变表格大小，如图3.153.15所示。所示。n选择要改变大小的表格，在属性面板【宽度】文本框中输入数值，在文本框选择要改变大小的表格，在属性面板【宽度】文本框中输入数值，在文本框右侧下拉列表中选择单位，可以调整表格宽度，如图右侧下拉列表中选择单位，可以调整表格宽度，如图3.163.16所示。所示。图图3.15 3.15 拖拽鼠标更

21、改表格的大小拖拽鼠标更改表格的大小图图3.16 3.16 设置表格属性改变表格的大小设置表格属性改变表格的大小3.2.2 3.2.2 改变表格和单元格的大小改变表格和单元格的大小n通过拖动单元格边框，可以改变单元格大小，如图通过拖动单元格边框，可以改变单元格大小，如图3.173.17所示。所示。n将光标置于要改变大小的单元格内，在【属性】面板中设置【宽】、将光标置于要改变大小的单元格内，在【属性】面板中设置【宽】、【高】的数值，即可调整单元格的大小，如图【高】的数值，即可调整单元格的大小，如图3.183.18所示所示图图3.17 3.17 拖动单元格边框调整单元格的大小拖动单元格边框调整单元格

22、的大小 图图3.18 3.18 在【属性】面板中设置单元格的大小在【属性】面板中设置单元格的大小 3.2.3 3.2.3 添加或删除行或列添加或删除行或列 在做一些大型的网页时，创建的网格往往不能供我们使用，或者有多余的行在做一些大型的网页时，创建的网格往往不能供我们使用，或者有多余的行或列，那么，这样的情况下我们就需要将多余的行或列进行删除，或者是添加我或列，那么，这样的情况下我们就需要将多余的行或列进行删除，或者是添加我们需要的行或列。们需要的行或列。1. 1. 选择单元格选择单元格 面介绍如何添加或删除表格的行或列。面介绍如何添加或删除表格的行或列。(1) (1) 继续使用【表格基本操作

23、继续使用【表格基本操作.html.html】素材文件，将光标插入需要添加行的单元】素材文件，将光标插入需要添加行的单元格中，在菜单栏中选择【修改】格中，在菜单栏中选择【修改】| |【表格】【表格】| |【插入行】命令，如图【插入行】命令，如图3.193.19所示。所示。(2) (2) 执行完该命令后便可以发现，表格由原来的执行完该命令后便可以发现，表格由原来的8 8行变成了现在的行变成了现在的9 9行，如图行，如图3.203.20所示。所示。图图3.19 3.19 选择【插入行】命令选择【插入行】命令图图3.20 3.20 插入行后的效果插入行后的效果3.2.3 3.2.3 添加或删除行或列添

24、加或删除行或列 使用同样的方法插入列，我们还可以在菜单栏中选择【修改】使用同样的方法插入列，我们还可以在菜单栏中选择【修改】| |【表格】【表格】| |【插入行或列】命令，打开【插入行或列】对话框。在该对话框中可设置要【插入行或列】命令，打开【插入行或列】对话框。在该对话框中可设置要插入的行数或列数以及插入行或列的位置，单击【确定】按钮，即可插入行插入的行数或列数以及插入行或列的位置，单击【确定】按钮，即可插入行或列，如图或列，如图3.213.21所示。所示。图图3.21 3.21 【插入行或列】命令【插入行或列】命令 2. 2. 删除行或列删除行或列 将光标处于要删除行的任意一个单元格内，在

25、菜单栏中选择【修改】将光标处于要删除行的任意一个单元格内，在菜单栏中选择【修改】| |【表【表格】格】| |【删除行】命令，即可将当前行删除，如图【删除行】命令，即可将当前行删除，如图3.223.22所示。删除列的方法所示。删除列的方法与删除行的方法相同。与删除行的方法相同。图图3.22 3.22 选择【删除行】命令选择【删除行】命令 3.2.4 3.2.4 合并、拆分单元格合并、拆分单元格 在表格的使用过程中，有时需要通过合并、拆分单元格达到所需要的效在表格的使用过程中，有时需要通过合并、拆分单元格达到所需要的效果，下面来介绍如何添加或删除表格行或列：果，下面来介绍如何添加或删除表格行或列：

26、1. 1. 合并单元格合并单元格 (1) (1) 打开一个素材，在文档中选择要合并的单元格，在菜单栏中选择【修改】打开一个素材，在文档中选择要合并的单元格，在菜单栏中选择【修改】| |【表格】【表格】| |【合并单元格】命令，如图【合并单元格】命令，如图3.233.23所示。所示。(2) (2) 选择命令后即可将单元格合并，合并后的效果如图选择命令后即可将单元格合并，合并后的效果如图3.243.24所示。所示。图图3.23 3.23 选择【合并单元格】命令选择【合并单元格】命令图图3.24 3.24 合并单元格后的效果合并单元格后的效果3.2.4 3.2.4 合并、拆分单元格合并、拆分单元格2

27、. 2. 拆分单元格拆分单元格(1) (1) 打开一个素材，将光标置于要拆分的单元格中，在菜单栏中选择【修改】打开一个素材，将光标置于要拆分的单元格中，在菜单栏中选择【修改】| |【表格】【表格】| |【拆分单元格】命令，如图【拆分单元格】命令，如图3.253.25所示，所示，(2) (2) 执行完该命令后即可打开【拆分单元格】对话框，在对话框中选择将单元执行完该命令后即可打开【拆分单元格】对话框，在对话框中选择将单元格拆分为行或列，并设置拆分数，设置完成后单击【确定】按钮，如图格拆分为行或列，并设置拆分数，设置完成后单击【确定】按钮，如图3.263.26所示。所示。 图图3.25 3.25

28、选择【拆分单元格】命令选择【拆分单元格】命令图图3.26 3.26 【拆分单元格】对话框【拆分单元格】对话框3.2.4 3.2.4 合并、拆分单元格合并、拆分单元格 但是创建表格，好像并不能满足我们的需求，我们可以重新设置表格的但是创建表格，好像并不能满足我们的需求，我们可以重新设置表格的属性。比如：表格的行数、列数、表格高度、宽度等。修改表格属性一般在属性。比如：表格的行数、列数、表格高度、宽度等。修改表格属性一般在【属性】面板中进行。【属性】面板中进行。 下面我们通过对打开的素材进行修改表格属性的操作步骤如下：下面我们通过对打开的素材进行修改表格属性的操作步骤如下：(1) (1) 启动启动

29、Dreamweaver CCDreamweaver CC软件后，在菜单栏中选择【文件】软件后，在菜单栏中选择【文件】| |【打开】命令，在【打开】命令，在对话框中选择随书附带光盘中的对话框中选择随书附带光盘中的CDROMCDROM素材素材Cha03Cha03装潢公司装潢公司.html.html素材文件，素材文件，单击【打开】按钮即可将其打开，如图单击【打开】按钮即可将其打开，如图3.273.27所示。所示。(2) (2) 在最下方的表格中插入一个在最下方的表格中插入一个1 1行行1 1列的单元格，如图列的单元格，如图3.283.28所示。所示。图图3.27 3.27 打开的素材文件打开的素材文

30、件图图3.28 3.28 插入单元格插入单元格3.2.4 3.2.4 合并、拆分单元格合并、拆分单元格 (3) (3) 将光标置于插入的单元格中，打开【属性】面板，切换至【将光标置于插入的单元格中，打开【属性】面板，切换至【CSSCSS】选项卡，】选项卡，在该选项卡中单击【拆分单元格为行或列】在该选项卡中单击【拆分单元格为行或列】 按钮按钮 ，如图，如图3.293.29所示。所示。(4) (4) 打开【拆分单元格】对话框，将【把单元格拆分】定义为【列】，将【列打开【拆分单元格】对话框，将【把单元格拆分】定义为【列】，将【列数】设置为数】设置为2 2，如图，如图3.303.30所示。所示。(5)

31、 (5) 设置完成后单击【确定】按钮，在文档中观察拆分后的单元格效果，如图设置完成后单击【确定】按钮，在文档中观察拆分后的单元格效果，如图3.313.31所示。所示。图图3.29 3.29 【属性】面板【属性】面板 图图3.30 3.30 【拆分单元格】对话框【拆分单元格】对话框图图3.31 3.31 拆分单元格后的效果拆分单元格后的效果3.2.4 3.2.4 合并、拆分单元格合并、拆分单元格(6) (6) 选择拆分后的单元格，在【属性】面板中将【高】设置为选择拆分后的单元格，在【属性】面板中将【高】设置为150150，【宽】设置，【宽】设置为为50%50%，如图，如图3.323.32所示。所

32、示。图图3.32 3.32 拆分单元格后的效果拆分单元格后的效果 3.3.1 CSS3.3.1 CSS的概念的概念 CSS CSS（Cascading Style SheetCascading Style Sheet）可译为【层叠样式表或级联样式表】，）可译为【层叠样式表或级联样式表】，它定义如何显示它定义如何显示 HTML HTML 元素，用于控制元素，用于控制WebWeb页面的外观。对于设计者来说，页面的外观。对于设计者来说，CSSCSS是一个非常灵活的工具，用户不必再把繁杂的样式定义编写在文档结构是一个非常灵活的工具，用户不必再把繁杂的样式定义编写在文档结构中，而可以将所有有关文档的样式

33、指定内容全部脱离出来，在行内定义、在中，而可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供标题中定义，甚至作为外部样式文件供HTMLHTML调用。调用。3.3 3.3 什么是什么是CSSCSSCSSCSS提供了功能强大而全面的格式控制，是如今网页制作中必不可少的格式工具。提供了功能强大而全面的格式控制，是如今网页制作中必不可少的格式工具。3.3.2 CSS3.3.2 CSS的特点的特点 CSS CSS具有以下的特点：具有以下的特点：n将将格式和结构分离格式和结构分离 将将设计部分剥离出来放在一个独立样式文件中，设计部分剥离出来放在一个独立样式文件中

34、，HTMLHTML文件中只存放文本文件中只存放文本信息。这样的页面对搜索引擎更加友好。信息。这样的页面对搜索引擎更加友好。n有效有效的控制页面布局的控制页面布局 HTMLHTML语言对页面总体上的控制很有限。如精确定位、行间距或字间距等，语言对页面总体上的控制很有限。如精确定位、行间距或字间距等，这些都可以通过这些都可以通过CSSCSS来完成。来完成。n提高提高页面浏览速度页面浏览速度n对于同一个页面视觉效果，采用对于同一个页面视觉效果，采用CSSCSS布局的页面容量要比布局的页面容量要比TABLETABLE编码的页面文编码的页面文件容量小得多，前者一般只有后者的件容量小得多，前者一般只有后者

35、的1/21/2大小。浏览器就不用去编译大量冗大小。浏览器就不用去编译大量冗长的标签。长的标签。3.3.2 CSS3.3.2 CSS的特点的特点n可同时更新许多网页可同时更新许多网页 没有样式表时，如果要更新整个站点中所有主体文本的字体，必须一页一没有样式表时，如果要更新整个站点中所有主体文本的字体，必须一页一页的修改每个网页。样式表的主旨就是将格式和结构分离。利用样式表，可以页的修改每个网页。样式表的主旨就是将格式和结构分离。利用样式表，可以将站点上所有的网页都指向单一的一个将站点上所有的网页都指向单一的一个CSSCSS文件，只要修改文件，只要修改CSSCSS文件中某一行，文件中某一行，整个站

36、点都会随之发生变动。整个站点都会随之发生变动。n浏览界面更加友好浏览界面更加友好 样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用旧版本的浏览器时不会出现乱码。只要是可以识别串接会发生中断，或者使用旧版本的浏览器时不会出现乱码。只要是可以识别串接样式表的浏览器就可以应用它。样式表的浏览器就可以应用它。 3.4 3.4 【CSS CSS 设计器】面板设计器】面板 在在DreamweaverDreamweaver中，使用【中，使用【CSSCSS设计器】面板可以查看文档所有的设计器】面板可以查看文档所

37、有的CSSCSS规规则和属性，也可以查看所选择的页面元素的则和属性，也可以查看所选择的页面元素的CSSCSS规则和属性。在规则和属性。在CSSCSS面板中科面板中科研创建、编辑和删除研创建、编辑和删除CSSCSS设计器，还可以添加外部样式到文档中。设计器，还可以添加外部样式到文档中。 在菜单栏中选择【窗口】在菜单栏中选择【窗口】| |【CSSCSS设计器】命令，如图设计器】命令，如图3.333.33所示。打开所示。打开【CSSCSS设计器】面板。在【设计器】面板。在【CSSCSS设计器】面板中会显示已有设计器】面板中会显示已有CSSCSS设计器，如图设计器，如图3.343.34所示。所示。 图

38、图3.33 3.33 选择【选择【CSSCSS设计器】对话框设计器】对话框图图3.34 3.34 【CSSCSS设计器】面板设计器】面板3.5 3.5 设置设置CSSCSS属性属性 CSS CSS设计器用来定义字体、颜色、边距和字间距等属性，可以使用设计器用来定义字体、颜色、边距和字间距等属性，可以使用Dreamweaver CCDreamweaver CC来对所有的来对所有的CSSCSS属性进行设置。属性进行设置。CSSCSS属性被分为属性被分为9 9大类，分大类，分别是类型、背景、区块、方框、边框、列表、定位、扩展和过度，在后面别是类型、背景、区块、方框、边框、列表、定位、扩展和过度，在后

39、面的内容中我们会对齐分别进行介绍。的内容中我们会对齐分别进行介绍。 3.5.1 3.5.1 设置设置CSSCSS类型属性类型属性 在我们打开一个文件场景时，选择定义好的要编辑的样式，将【属性】在我们打开一个文件场景时，选择定义好的要编辑的样式，将【属性】面板定义为【面板定义为【CSSCSS】将【目标规则】定义为要编辑的规则，然后单击【编】将【目标规则】定义为要编辑的规则，然后单击【编辑规则】辑规则】 按钮，即可打开当前规则的【按钮，即可打开当前规则的【CSSCSS规则定义】对话框，规则定义】对话框，如图如图3.353.35所示。在【分类】列表框中选择【类型】选项，用于设置文本的所示。在【分类】

40、列表框中选择【类型】选项，用于设置文本的属性。属性。 图图3.35 3.35 【CSSCSS规则定义】对话框规则定义】对话框 3.5.1 3.5.1 设置设置CSSCSS类型属性类型属性在【类型】选项中具体参数如下：在【类型】选项中具体参数如下：nFont-familyFont-family：用户可以在下拉菜单中选择需要的字体。如果系统安装了某：用户可以在下拉菜单中选择需要的字体。如果系统安装了某种字体，但在下拉菜单中没有显示，可以在下拉列表中选择【管理字体】命种字体，但在下拉菜单中没有显示，可以在下拉列表中选择【管理字体】命令，如图令，如图3.363.36所示。所示。在打开的【管理字体】对话

41、框中选择【自定义字体堆栈】选项，在【可用字在打开的【管理字体】对话框中选择【自定义字体堆栈】选项，在【可用字体】窗口中选择需要添加的字体，单击按钮即可添加到【选择的字体】窗口体】窗口中选择需要添加的字体，单击按钮即可添加到【选择的字体】窗口中，然后单击左上角的按钮可继续添加下一个字体。单击【完成】确定添加中，然后单击左上角的按钮可继续添加下一个字体。单击【完成】确定添加并关闭【管理字体】对话框，如图并关闭【管理字体】对话框，如图3.373.37所示。所示。nFont-sizeFont-size：用于调整文本的大小。用户可以在列表中选择字号，也可以直：用于调整文本的大小。用户可以在列表中选择字号

42、，也可以直接输入数字，然后在后面的列表中选择单位，如图接输入数字，然后在后面的列表中选择单位，如图3.383.38所示。所示。图图3.36 3.36 选择【管理字体】命令选择【管理字体】命令图图3.37 3.37 【管理字体】对话框【管理字体】对话框 图3.37 调整文本的大小 图图3.38 3.38 调整文本的大小调整文本的大小 3.5.1 3.5.1 设置设置CSSCSS类型属性类型属性 nFont-styleFont-style：提供了【：提供了【normalnormal（正常）】、【（正常）】、【ItalicItalic（斜体）】【（斜体）】【obliqueoblique（偏斜体）】和

43、【（偏斜体）】和【inheritinherit（继承）】三种字体样式，默认为（继承）】三种字体样式，默认为normalnormal。如图。如图3.3.3939所示。所示。nLine-heightLine-height：设置文本所在行的高度。该设置传统上称为：设置文本所在行的高度。该设置传统上称为【前导前导】。选择。选择【正常正常】选项将自动计算字体大小的行高，也可以输入一个确切的值并选择选项将自动计算字体大小的行高，也可以输入一个确切的值并选择一种度量单位，如图一种度量单位，如图3.403.40所示。所示。提提 示：示： 建议使用【点数（建议使用【点数（ptpt）】作为单位。【点数】是计算机字

44、体的标准单位，）】作为单位。【点数】是计算机字体的标准单位，这一单位的好处是设定的字号会随着显示器分辨率的变化而调整大小，这一单位的好处是设定的字号会随着显示器分辨率的变化而调整大小，可以防止在不同分辨率的显示器中字体大小不一致。可以防止在不同分辨率的显示器中字体大小不一致。图图3.39 3.39 字体样式字体样式 图图3.40 3.40 调整文本的大小调整文本的大小 3.5.1 3.5.1 设置设置CSSCSS类型属性类型属性 nText-decorationText-decoration：向文本中添加下划线、上划线、删除线，或：向文本中添加下划线、上划线、删除线，或使文本闪烁。正常文本的默

45、认设置是【无】。链接的默认设置是使文本闪烁。正常文本的默认设置是【无】。链接的默认设置是【下划线】。将链接设置为【无】时，可以通过定义一个特殊的【下划线】。将链接设置为【无】时，可以通过定义一个特殊的类删除链接中的下划线，如图类删除链接中的下划线，如图3.413.41所示。所示。nFont-weightFont-weight：对字体应用特定或相对的粗细量。【正常】等于：对字体应用特定或相对的粗细量。【正常】等于400400；【粗体】等于；【粗体】等于700700。nFont-variantFont-variant：设置文本的小型大写字母变体。：设置文本的小型大写字母变体。Dreamweaver

46、Dreamweaver不不在文档窗口中显示该属性。在文档窗口中显示该属性。nText-transformText-transform：将选定内容中的每个单词的首字母大写或将文：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。本设置为全部大写或小写。nColorColor：设置文本颜色：设置文本颜色 图图3.41 3.41 字体样式字体样式 3.5.2 3.5.2 设置设置CSSCSS背景属性背景属性 在【分类】列表框中选择【背景】选项，背景属性的功能主要是在在【分类】列表框中选择【背景】选项，背景属性的功能主要是在网页元素后面加入固定的背景色或图像。网页元素后面加入固定的背景色

47、或图像。nBackground-colorBackground-color：设置元素的背景颜色，如图：设置元素的背景颜色，如图3.423.42所示所示nBackground-imageBackground-image：设置元素的背景图像，单击该选项右侧的【浏览】按：设置元素的背景图像，单击该选项右侧的【浏览】按钮，在弹出的对话框中选择要设置的背景图像。钮，在弹出的对话框中选择要设置的背景图像。 图图3.42 3.42 设置元素的背景颜色设置元素的背景颜色3.5.2 3.5.2 设置设置CSSCSS背景属性背景属性 nBackground-repeatBackground-repeat：确定是否

48、以及如何重复背景图像，包括如下：确定是否以及如何重复背景图像，包括如下4 4个选项，个选项，如图如图3.433.43所示。所示。 图图3.43 3.43 背景图像重复方式背景图像重复方式 u 【no-repeatno-repeat（不重复）】：用于在元素开始处显示一次图像。（不重复）】：用于在元素开始处显示一次图像。u【repeatrepeat（重复）】：用于在元素的后面水平和垂直平铺图像。（重复）】：用于在元素的后面水平和垂直平铺图像。u【repeat-xrepeat-x（水平重复）】：用于在元素前将图像在水平方向重复排列。（水平重复）】：用于在元素前将图像在水平方向重复排列。u【repea

49、t-yrepeat-y（垂直重复）】：用于在元素前将图像在垂直方向重复排列。（垂直重复）】：用于在元素前将图像在垂直方向重复排列。 选用水平重复或垂直重复后，图像都会被剪裁以适合元素的边界。选用水平重复或垂直重复后，图像都会被剪裁以适合元素的边界。3.5.2 3.5.2 设置设置CSSCSS背景属性背景属性nBackground-attachmentBackground-attachment：确定背景图像是固定在它的原始位置还是随内：确定背景图像是固定在它的原始位置还是随内容一起滚动，如图容一起滚动，如图3.443.44所示。所示。nBackground-positionBackground-

50、position（X/YX/Y）：指定背景图像相对于元素的初始位置。可）：指定背景图像相对于元素的初始位置。可用于将背景图像与页面中心垂直（用于将背景图像与页面中心垂直（Y Y）和水平（）和水平（X X）对齐。如果附件属性为）对齐。如果附件属性为【固定固定】，则位置相对于文档窗口而不是元素，如图，则位置相对于文档窗口而不是元素，如图3.453.45所示。所示。图图3.44 3.44 背景图像滚动方式背景图像滚动方式 图图3.45 3.45 指定背景图像相对于元素的初始位置指定背景图像相对于元素的初始位置 3.5.3 3.5.3 设置设置CSSCSS区块属性区块属性 【分类】列表框中选择【区块】

51、选项，【分类】列表框中选择【区块】选项，CSSCSS中的区块属性指的是网页中中的区块属性指的是网页中的文本、图像、层等替代元素，它主要用于控制块中内容的间距、对齐方式的文本、图像、层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。和文字缩进等。nWord-spacingWord-spacing：调整单词之间的距离。若要设置特定的值，在其下拉列表中：调整单词之间的距离。若要设置特定的值，在其下拉列表中选择【值】选项，然后输入一个数值，并在右侧的下拉列表中选择度量单位，选择【值】选项，然后输入一个数值，并在右侧的下拉列表中选择度量单位，如图如图3.463.46所示。所示。nLett

52、er-spacingLetter-spacing：增加或减小字母或字符的间距。若要减少字符间距，可指：增加或减小字母或字符的间距。若要减少字符间距，可指定一个负值。字母间距用于设置覆盖对齐的文本设置。定一个负值。字母间距用于设置覆盖对齐的文本设置。nVertical-alignVertical-align：指定应用它的元素的垂直对齐方式。仅当应用于：指定应用它的元素的垂直对齐方式。仅当应用于标标签时，签时，DreamweaverDreamweaver才在文档窗口中显示该属性。才在文档窗口中显示该属性。nText-alignText-align：设置元素中的文本对齐方式，如图：设置元素中的文本对

53、齐方式，如图3.473.47所示。所示。图图3.46 3.46 调整单词之间的距离调整单词之间的距离 图图3.47 3.47 设置文字对齐方式设置文字对齐方式3.5.3 3.5.3 设置设置CSSCSS区块属性区块属性n Text-indentText-indent：指定第一行文本缩进的程度。可以使用负值创建凸出，但：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver Dreamweaver 才在文档才在文档窗口中显示该属性。窗口中显示该属性。nWhite-spaceWhite-spa

54、ce：确定如何处理元素中的空白，包括：确定如何处理元素中的空白，包括3 3个选项，个选项，【正常正常】收缩收缩空白；空白；【保留保留】的处理方式与文本被括在的处理方式与文本被括在prepre标签中一样（即保留所有空标签中一样（即保留所有空白，包括空格、制表符和回车）；白，包括空格、制表符和回车）；【不换行不换行】指定仅当遇到指定仅当遇到brbr标签时文本标签时文本才换行。才换行。DreamweaverDreamweaver不在文档窗口中显示该属性，如图不在文档窗口中显示该属性，如图3.483.48所示。所示。nDisplayDisplay：指定是否显示以及如何显示元素，选择：指定是否显示以及如

55、何显示元素，选择【无无】将会关闭该样式将会关闭该样式被指定的元素的，如图被指定的元素的，如图3.493.49所示。所示。图图3.48 3.48 处理元素中的空白处理元素中的空白图图3.49 3.49 设置是否显示元素和元素的表现形式设置是否显示元素和元素的表现形式3.5.4 3.5.4 设置设置CSSCSS方框属性方框属性图图3.51 3.51 定义定义DivDiv边边 在【分类】列表框中选择【方框】选项，可以设置控制元素在页面上的在【分类】列表框中选择【方框】选项，可以设置控制元素在页面上的放置方式的标签和属性。放置方式的标签和属性。 在【方框】选项中具体参数如下：在【方框】选项中具体参数如

56、下：nWidthWidth与与HeightHeight：用于设置元素的宽度和高度。：用于设置元素的宽度和高度。nFloatFloat：用于设置文字等对象的指环绕效果。选择【右对齐】，对象居右，：用于设置文字等对象的指环绕效果。选择【右对齐】，对象居右，文字等内容从另一侧环绕对象；选择【左对齐】，对象居左，文字等内容从文字等内容从另一侧环绕对象；选择【左对齐】，对象居左，文字等内容从另一侧环绕；选择【无】则取消环绕效果，如图另一侧环绕；选择【无】则取消环绕效果，如图3.503.50所示。所示。nClearClear：定义不允许：定义不允许DivDiv的边。如果清除边上出现的边。如果清除边上出现D

57、ivDiv，则带清除设置的元素，则带清除设置的元素移到该移到该DivDiv的下方，如图的下方，如图3.513.51所示。所示。图图3.50 3.50 设置文字等对象的指环绕效果设置文字等对象的指环绕效果3.5.4 3.5.4 设置设置CSSCSS方框属性方框属性nPaddingPadding：指定元素内容与元素边框（如果没有边框，则为边距）之间的间：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选中【全部相同】复选框可设置元素各个边的填充；选中【全部相距。取消选中【全部相同】复选框可设置元素各个边的填充；选中【全部相同】复选框可将相同的填充属性设置为应用于元素的【上】、【右】

58、、【下】同】复选框可将相同的填充属性设置为应用于元素的【上】、【右】、【下】和【左】侧。和【左】侧。nMarginMargin：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，间的间距。仅当应用于块级元素（段落、标题、列表等）时，DreamweaverDreamweaver才在文档窗口中显示该属性。取消选中【全部相同】复选框可设置元素各个才在文档窗口中显示该属性。取消选中【全部相同】复选框可设置元素各个边的边距；选中【全部相同】复选框可将相同的边距属性设置为应用于元素边的

59、边距；选中【全部相同】复选框可将相同的边距属性设置为应用于元素的【上】、【右】、【下】和【左】侧。的【上】、【右】、【下】和【左】侧。3.5.5 3.5.5 设置设置CSSCSS边框属性边框属性 在【分类】列表框中选择【边框】选项，可以定义元素周围边框的设置。在【分类】列表框中选择【边框】选项，可以定义元素周围边框的设置。如图如图3.523.52所示。所示。 在【边框】选项中具体参数如下：在【边框】选项中具体参数如下：nStyleStyle：用于设置边框的样式外观，样式的显示方式取决于浏览器。：用于设置边框的样式外观，样式的显示方式取决于浏览器。DreamweaverDreamweaver在文

60、档窗口中将所有样式呈现为实线。其中的在文档窗口中将所有样式呈现为实线。其中的【全部相同全部相同】复复选框表示将相同的边框样式属性设置为应用于元素的选框表示将相同的边框样式属性设置为应用于元素的【上上】、【右右】、【下下】和和【左左】侧侧。nWidthWidth：用于设置元素边框的粗细。其中的：用于设置元素边框的粗细。其中的【全部相同全部相同】复选框表示将相同复选框表示将相同的边框宽度设置为应用于元素的的边框宽度设置为应用于元素的【上上】、【右右】、【下下】和和【左左】侧侧。nColorColor：用于设置边框对应位置的颜色。可以分别设置每条边框的颜色，但：用于设置边框对应位置的颜色。可以分别设