Dreamweaver基础教程—使用Dreamweaver设计CSS样式

那么这里的 red 类样式将是： #main p.red {  font­size: 0.75em;  color: blue;  text­decoration:none;  font­family:"Times New Roman", Times, serif;  } 而不是： .red { color:red; } 这主要是根据选择器的优先级来确定，关于这个话题可以参阅前面章节进行了解。如果感 觉可视化操作比较麻烦，规则太多，建议你不妨在【代码】视图下直接进行操作，定义样式， 把样式绑定到每个元素中。 使用 Dreamweaver 设计 CSS 样式 167 2 Dreamweaver 的 CSS 操作环境  Dreamweaver 不仅能为用户定义 CSS 样式，它还提供了一套比较完善的服务，从临时渲染 布局、人性化代码编辑，再到各种 CSS 辅助工具，这些都会让你感觉操作的过程如身临其境、 乐此不彼，确保在 Dreamweaver 环境中进行 CSS 设计不感觉辛苦和乏味。  2.1  强大的可视化渲染功能 如果设计的 CSS 样式不能够在 Dreamweaver 编辑环境中预览， 那么就会感觉所有操作如同 盲人摸象似的。不过 Dreamweaver 考虑还是比较周全的，所提供的即时渲染功能可以说是无处 不在的，如在编辑区、对话框和【CSS 样式】面板中都提供样式渲染功能。渲染结果严格按着  Web  标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 和 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 实施，同时经过多年的不断完善，Dreamweaver 在设计视图解析精度方面有了 显著改进，能够查看复杂的 CSS 布局在大多数浏览器中的渲染方式，同时 Dreamweaver 完全支 持溢出、伪元素和表单元素的样式渲染。 例如，在【设计】视图的编辑区域，默认状态下 Dreamweaver 以 CSS 标准对页面进行 渲染。如图 19 所示是在无渲染功能视图下的效果，而经过 CSS 渲染之后，整个编辑区域的 显示效果如图 20 所示。通过渲染前后比较，就会发现在渲染状态下进行可视化编辑会更加 直观、更加容易。 如果 Dreamweaver 不提供渲染功能，或者所渲染的效果不标准，或者渲染的速度比较慢、 渲染的质量不是很高，这些都将对设计师的设计产生消极影响。 同时 Dreamweaver 提供了一个【样式呈现】工具栏，利用这个工具条可以根据媒体类型来 设计网页渲染的方式和效果。具体方法是在菜单栏中选择【查看】|【工具栏】|【样式呈现】命 令，打开【样式呈现】工具栏，如图 21 所示。 图 19  网页结构在渲染前 网页制作与网站开发从入门到精通 168 图 20  网页结构在渲染后 【样式呈现】工具栏包括八个按钮，这些按钮能够查看设 计在不同媒体类型中的呈现方式，此外还包含是否启用或禁用  CSS  样式的按钮（ ） 。只有在文档中使用依赖于媒体的样式 表时，此工具栏才有用。在默认情况下，Dreamweaver 会显示 屏幕媒体类型的设计 ，如果单击相应的按钮就能查看不同媒 体类型的呈现。  2.2  代码与可视化编辑的无障碍服务 在【设计】视图下，当选中某个布局对象时，把光标移到选中对象上面，则  Dreamweaver  会自动提示布局对象的 ID、类、标签、浮动、位置、上、右、下、左、宽度、高度和溢出等布 局属性，如图 22 所示。 图 22  快速提示布局属性信息 如果选中具备盒模型效果的元素时，会直观地显示元素的边界（反斜线区域）、边框和补白 （斜线区域），当光标移到该元素边框上时，会显示边界（即边距）、边框和补白（即填充）的 精确值，如图 23 所示。这些可视化服务功能对于设计师来说是非常重要的。 图 21  【样式呈现】工具栏 使用 Dreamweaver 设计 CSS 样式 169 图 23  快速提示盒模型基本信息 当在页面中选中某个页面对象， 则会在 【CSS 样式】 面板中显示当前选中对象的详细样式信息， 如图 24 所示。反过来，如果在【CSS 样式】面板中选择某个样式，在面板菜单中选择【转到代码】 菜单命令时，会自动切换到【代码】视图，并定位到所定义的CSS 样式源代码位置。 图 24  快速提示盒模型基本信息 如果觉得可视化操作比较麻烦，也可以切换到【代码】视图，直接定义  CSS  样式。  Dreamweaver  的智能化提示功能可以帮助你快速定义样式。当在样式表中输入“{”符号时，会 自动弹出 CSS 属性下拉列表，如图 25 所示，或者在样式内（大括号内）按空格键也会自动弹 出属性列表。当从属性列表中选择一个选项并确定时，会弹出属性值列表，没有属性值列表， 则显示引号并要求输入值。当然在属性名后面按冒号键也能够自动弹出属性值列表，如图  26  所示。 图 25  自动显示属性列表 图 26  自动显示属性值列表 在【CSS 样式】面板中，我们也可以借助代码提示功能快速地定义样式。例如，在【全部】 网页制作与网站开发从入门到精通 170 显示模式下，从【所有规则】列表中选择 body 元素，然后单击底部的【添加属性】超链接，如 图 27 所示，将打开一个文本框，从下拉列表中选择一个属性，如图 28 所示，最后在右侧单击， 也可以在弹出的提示下拉列表中选择一个属性值，如图 29 所示。 代码智能提示和代码自动完成功能将在【代码】视图和【设计】视图下的【CSS 样式】面 板中都可用，这样使用 Dreamweaver 手工输入 CSS 代码比使用其他代码编辑器更快。 图 27  增加声明 图 28  选择属性 图 29  设置属性值 另外，利用【CSS 样式】面板还可以查看当前对象被定义的所有属性以及继承的属性，并 利用该面板判断冲突属性的优先级。例如，当选中文档中的列表项时，在【CSS 样式】面板的 【正在】模式下，我们可以在面板上半部分的【所选内容的摘要】区域查看当前选中对象的有 效属性。从有效属性声明摘要中选择一个属性，则在中间的关于属性信息栏中显示所选属性位 于哪个样式（即规则）中，以及样式表所在位置（一般指定文件名），如图 30 所示。 在中间栏右侧有两个按钮图标（ ），左侧图标按钮表示显示所选属性的相关信息。当 单击右侧按钮图标（ ）按钮后，则中间栏将显示所选标签的规则层叠，如图  31 所示。利用 这个样式层叠信息列表，读者可以借助它准确了解当前标签在父级结构中样式优先级特征。此 时中间栏显示当前标签以及父级结构，从根节点开始按嵌套顺序从上到下排列，当光标指向某 层元素时，会在提示信息中显示它的优先级（即规则特征），例如，当指向最底层的#container ul  li，则显示规则特征值为（1,0,2），其中第一个值表示  ID  选择器，第二个值表示类选择器，第 三个值表示标签选择器。 可以根据第 6 章讲解的 CSS 基础来确定每个 CSS 层叠样式的优先级加 权值是多少。 使用 Dreamweaver 设计 CSS 样式 171 图 30  显示当前属性的相关信息 图 31  显示当前标签样式的层叠信息 同时在【CSS 样式】面板底部属性列表中会自动显示每个样式的所有属性，如果某个声明 被覆盖，则会以删除线显示，这样就能更直观地了解样式的层叠顺序和优先级。  2.3  CSS 辅助工具  Dreamweaver 还提供了很多实用的辅助工具，它们能够提高开发效率。说明如下。 第一个工具就是 CSS 代码格式化排版工具。在使用 CSS 的过程中，也许最头疼的问题就是 代码排版，特别是对现有样式表进行格式 化。不过  Dreamweaver  提供了这样一个选 项，只需要一次单击即可快速排版。当打开 网页文档或者  CSS  文件时，在【代码】视 图下单击【编码】工具栏中的【格式化源代 码】按钮（ ），从弹出的下拉菜单中选择 【套用源格式】项，即可快速排版所有当前  CSS 源代码。 如果从中选择【代码格式设置】项，将 会打开【首选参数】对话框，然后在右侧选 项面板中单击【CSS】按钮，将打开【CSS  源格式选项】对话框，如图 32 所示。 在【CSS 源格式选项】对话框中可以设置 CSS 源代码的格式，如单行排版、单列排版、单 行单列混合排版、缩进方式和缩进大小等，具体格式将根据个人习惯进行选择。例如，单行版 式代码如下： body { font­family:Arial, Helvetica, sans­serif; }  p { margin:0; text­indent:2em; } 单列版式代码如下： 图 32  【CSS 源格式选项】对话框 网页制作与网站开发从入门到精通 172  body {  font­family:Arial, Helvetica, sans­serif;  }  p {  margin:0;  text­indent:2em;  } 单行单列混合排版代码如下： body { font­family:Arial, Helvetica, sans­serif; }  p {  margin:0;  text­indent:2em;  } 第二个工具就是快速导入外部 CSS 文件。手工导入外部样式表文件，有时候很容易出错， 特别是初学者容易遗漏属性设置或者写错代码等。而使用 Dreamweaver 导入外部样式表会很简 单，方法如下。 在【CSS 样式】面板中单击底部的【附加 样式表】图标按钮{  }，将会打开【链接外部 样式表】对话框，如图 33 所示。 在【文件/URL】文本框中可以输入外部样 式表文件，单击【浏览】按钮可以在打开的文 件对话框中直观地查找要打开的外部  CSS  样 式表。 如果要创建当前文档和外部样式表之间的链接，可以在【增加】选项组中选择【链接】，则  Dreamweaver 将在文档中创建一个标签，并链接已定义的样式表所在的 URL。例如： 如果要在一个样式表中添加另一个样式表，则不能使用链接方式引入，此时可以使用导入 指令。大部分浏览器还能识别页面中的导入指令，因此也可以利用这种方法把外部样式表导入 到文档中。例如：     在【媒体】下拉列表中可以指定样式表的媒体类型，具体说明可以参阅第 6 章的讲解内容。 常用媒体类型包括屏幕（电脑专用样式表）、打印（打印专用样式表）和手提设备（掌上设备专 用样式表）等。设置完毕，单击【确定】按钮即可把外部样式表导入。 第三个工具就是 CSS 兼容性检测工具。在 Dreamweaver 的【文档】工具栏中单击【检查浏 图 33  【链接外部样式表】对话框 使用 Dreamweaver 设计 CSS 样式 173 览器兼容性】图标按钮（ ），从其弹出的下拉菜单中选择【检查浏览器兼容性】选项，  Dreamweaver 会自动验证当前文档所包含 CSS 样式表的兼容性，并在【浏览器兼容性检查】面 板中列出所有 CSS 兼容性问题，根据其提供的修改建议，读者就能够快速修改非兼容性代码， 如图 34 所示。 图 34  【浏览器兼容性检查】面板 同时我们还可以在【检查浏览器兼容性】下拉列表中选择【设置】选项来定义要兼容的浏 览器类型和版本，这样就使自己设计的 CSS 样式具有更大的针对性。 3 Dreamweaver 布局实战 前面两节详细讲解了  Dreamweaver  如何支持  CSS 技术，下面我们尝试使用  Dreamweaver  工具来设计一个基本布局模板。本示例所使用的结构为第  20 章中使用 Dreamweaver 所搭建的  HTML 结构，如图 35 所示，本示例所要设计的基本布局效果如图 36 所示。 图 35  网页结构的基本布局样式 网页制作与网站开发从入门到精通 174 图 36  网页结构的基本布局样式  3.1  页面属性初始化 使用 Dreamweaver 实施页面布局，第一步应该从网页基本属性设置开始。Dreamweaver 提 供了【页面属性】对话框，利用该对话框可以定义网页基本样式，这些样式定义了网页基本字 体属性、网页背景、页边距、网页超链接样式、字符编码和网页标题等基本属性。 打开已设计好的 HTML 文档结构，选择【修改】|【页面属性】命令，打开【页面属性】对 话框，如图 37 所示。 在对话框左侧的【分类】列表中选择【外观（CSS）】列表项，然后在右侧区域定义网页基 本字体样式和网页背景。具体设置如下： （网页字体）大小：13 像素 文本颜色：#888  背景图像：images/img01.gif  重复（背景图像平铺方式）：横向 背景颜色：#191919  左边距、右边距、上边距和右边距：0 像素 然后在左侧【分类】 列表中选择【标题（CSS）】项，在右侧选项区域定义一级标题为 2.6em， 字体颜色为#fff；定义二级标题为 16 像素，字体颜色为#ddd，如图 38 所示。 使用 Dreamweaver 设计 CSS 样式 175 图 37  网页外观样式 图 38  网页标题样式  Dreamweaver  可视化操作也存在一个问题：代码冗余现象比较严重，且兼容性不是很好。 例如，当使用【页面属性】定义页边距都为 0 时，则所生成的代码如下：     显然这种定义 CSS 样式不是最优化的，且缺乏兼容性。此时只有手动修改 Dreamweaver 定 义的代码，并增加定义 CSS 声明，以实现兼容性处理。完善后的代码如下： body {/* 能够兼容不同浏览器的页边距样式 */  margin: 0;  padding:0;  }  3.2  页面基本结构布局 示例页面设计为固定宽度、水平居中，布局版式为三行二列式效果。为此我们可以分三步 进行设计。 第一步，定义固定宽度和网页居中显示样式。选中 body 元素，在【CSS 样式】面板中单击 【编辑样式】图标按钮（ ），将打开【CSS 规则定义】对话框，如图 39 所示，然后在左侧【分 类】列表中选择【区块】项，【区块】项负责定义文本样式。在右侧区域【文本对齐】项中定义 网页文本水平居中显示。 第二步，选中网页包含框元素（），再次打开【CSS 样式】面板，在【区块】 的【文本对齐】中定义包含框中所有文本左对齐显示。在 body 元素中定义水平居中，则可以在 IE  浏览器中实现包含框水平居中。为了避免网页文本也居中显示，需要在中恢复文本 网页制作与网站开发从入门到精通 176 为左对齐。在【方框】分类的【宽度】文本框中定义包含框宽度为 940 像素，设置上下边界为 0， 左右边界为自动，从而实现在非 IE 浏览器中包含框能够自动居中显示，如图 40 所示。 图 39  定义网页居中 图 40  定义包含框样式 生成的 CSS 样式代码如下： body {  margin: 0;  padding:0;  background: #191919 url(images/img01.gif) repeat­x;  /* 网页背景图像， 并水平平铺 */  font­size: 13px;  /* 字体大小 */  color: #888;  /* 字体颜色 */  text­align:center;  /* 居中对齐 */  }  #wrap {/* 包含框基本样式 */  width: 940px;  /* 固定网页宽度 */  margin: 0 auto;  /* 定义边界，实现水平居中显示 */  text­align:left;  /* 恢复文本左对齐默认样式 */  } 第三步，定义主体内容区域的第一个子模块左侧浮动显示，固定宽度为 560 像素；第二个子模 块右侧浮动显示，固定宽度为 258 像素。设置方法是，先选中某个子模块，然后在【CSS 样式】面 板中单击底部的【附加样式表】图标按钮（ ），为子模块定义基本样式（浮动和固定宽度），可以 在左侧的分类列表框中选择【方框】选项，定义【宽】和【浮动】项等，如图 41 所示。 使用 Dreamweaver 设计 CSS 样式 177 图 41  定义子模块基本样式 #main {/* 左列栏目样式 */  float: left;  /* 向左浮动 */  width: 560px;  /* 固定宽度 */  }  #sub {/* 右列栏目样式 */  float: right;  /* 向右浮动 */  width: 258px;  /* 固定宽度 */  }  3.3  页面基本模块样式 页面整体版式为三行二列式布局效果，其中第一行为一级和二级标题所组成的头部区域。 在头部区域中，首先清除标题的默认边距，定义一级标题前景色为#fff，字体大小为 13 像素的  2.6 倍，二级标题前景色为#ddd，背景为渐变的背景图像，三级标题为 13 像素字体 1.2 倍，字 体颜色为#bbb，背景色为#444。详细代码如下： h1 {/* 一级标题样式 */  margin:0;  /* 清除边距 */  padding: 88px 0 0 36px;  /* 利用补白调整标题显示位置 */  font­size: 2.6em;  /* 字体大小 */  color: #fff;  /* 字体颜色 */  }  h2 {/* 二级标题样式 */  margin:0;  /* 清除边距 */  padding­right:36px;  /* 利用补白调整字体显示位置 */  height: 50px;  /* 向左浮动 */  background: #222 url(images/img02.gif) repeat­x left top; /* 背景图像水 平平铺 */  line­height:50px;  /* 水平行高，实现垂直居中显示 */  font­size:16px;  /* 字体大小 */  color: #ddd;  /* 字体颜色 */  text­align:right;  /* 文本右对齐 */  }  #body h3 {/* 三级标题样式 */  padding:8px 12px;  /* 利用补白调整 */  background: #444;  /* 背景色 */  font­size: 1.2em;  /* 字体大小 */  color: #bbb;  /* 三级标题的颜色 */  } 再利用【CSS 样式】面板定义主体区域的项目列表样式，如图 42 所示。在【分类】列表框 中选择【列表】，然后在右侧的列表设置项中定义类型为无，项目符号图像为无。在【方框】分 类中定义填充和边界均为 0，如图 43 所示。 网页制作与网站开发从入门到精通 178 图 42  定义列表样式 图 43  清除列表缩进 对于表格来说，则需要在 CSS 样式表中直接进行定义，段落文本可以借助【CSS 样式】面 板来完成设计，由于这些细节都是简单的字体样式设置，因此就不再详解。