27
Dreamweaver CS4
中的
CSS
CSS in Dreamweaver CS4
Adobe 公司的 Dreamweaver CS4 是一种创建网站的软件，它使得创建 HTML/XHTML 和
CSS 变得十分轻松。你不用把代码逐行地输入到文本编辑器中，而是只须点击屏幕上便
捷的按钮和菜单，就能将设计展现在你的眼前。这套软件甚至还有强大的站点管理工具，
可以帮助你追踪网站的页面和链接。
虽然本书介绍了从头开始创建 CSS 样式所须要知道的一切知识，但是借助像 Dreamweaver
这样的可视化编辑器来节省时间也是没有错的。事实上，熟悉 CSS 属性的功能（如本书
所述），对于调整或处理以 Dreamweaver 创建的网页会有极大的帮助。
注意：本附录专门讲解 Dreamweaver CS4 的 CSS 特性。欲了解 Dreamweaver 在网站设
计和维护方面可以完成哪些工作，请查阅 Dreamweaver CS4: The Missing Manual。
创建样式
与 CSS 有关的大部分工作都从 CSS Styles 面板开始的，这是在 Dreamweaver 中创建样式
的命令中心。打开这个面板的方法是：选择菜单 Windows → CSS Styles。
以图 B-1 为例，讲解 CSS Styles 面板的使用方法。
z 面板上方的 All 按钮为当前打开的文档列出所有的内部样式和外部样式。另一个按
钮 Current，则可以让你更近距离地查看个别的样式。
注意：点击样式表左侧的减号（-）图标，可以使样式列表折叠，将它们从视图中隐藏起
来。（在 Mac 系统中，按钮看起来就像一个小三角形，但是它的作用是一样的。）
z 内部样式表在面板中用<style>表示。在本例中，内部样式表中有一个标签样式（用
于<body>标签的）。
z 外部样式表是按文件名（main.css）进行排列。外部样式表的规则列在文件名的下
方（如 h1、p、.copyright，等等）。前两个样式是标签样式（注意名称要与各种
HTML 标签相匹配），最后 5 个则是类样式（注意每个名称开头处的圆点）。
z 位于面板下半部分的 Properties 列表可以供你编辑样式，如原书第 498 页所述。面
板左下角的 3 个按钮（如图 B-1 中圈起来的部位）用来控制属性列表的显示方式。
附录
B
487 488
- 1
- 2
- 3
- 4
- 5
前往页