DIV+CSS教程.doc

实战 DIV+CSS 网页布局第一章 web标准一、W3C标准 我们在用浏览器打开任何一种网页页面都是最终通过浏览器解析后呈现在我们的电脑屏 幕上的，而浏览器最终解析的只是html代码，这就存在一个标准问题。Web标准是由 W3C （World Wide Web Consortium 万维网联盟）和其它标准化组织制定的一套规范集合，WEB 标准不是某一个标准，而是一系列标准的集合，其目的在于创建一个统一的用于 Web表现层 的技术标准，以便于通过不同浏览器向用户展示信息内容。Web标准制定的核心目的：表现 与内容分离，这是网站设计和开发的长期努力目标。Web标准的执行其目的在于今后十多年 里，能够在桌面浏览器、文档浏览器、屏幕阅读器及手持设备上都能很好的运作。 采用网站标准的好处 1、 对网站浏览者的好处： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、）； 用户能够通过样式选择定制自己的表现界面； 所有页面都能提供适于打印的版本； 2、对网站所有者的好处： 更少的代码和组件，容易维护； 带宽要求降低（代码更简洁），成本降低。 例：当 ESPN.com使用 CSS改版后，每天节约超过两兆字节的带宽。 更容易被搜寻引擎搜索到 改版方便，不需要变动页面内容； 提供打印版本而不需要复制内容； 提高网站易用性。在美国，已经有严格的法律条款（Section508）来约束政府网站 必须达到一定的易用性，其他国家也有类似的要求。二、Web标准的构成 是由结构（Structure）、表现（Presentation）、行为（Behavior）三大部分组成的标准集。 1、结构：对网页中用到的信息进行整理与分类。（用HTML、XML、XHTML进行结构化设 计） （1）HTML（Hyper Text Mark-up Language 超文本标词语言）是 WEB的基本描述语言。更 多请查看：HTML语言剖细 （2）XML（XML是The Extensible Markup Language可扩展标识语言)XML是一种能定义其 他语言的语言。XML最初设计的目的是弥补 HTML的不足，以强大的扩展性满足网络信息 发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。 （3） XHTML XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写 XML虽然数据转换能力强大，完全可以替代 HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在 HTML4.0的基础上，用XML的规则对其进行扩展，得到了 XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 2、表现：即对已被结构化的信息进行显示上的控制。它包含版式、颜色、大小等形式控制。我们采用 CSS进行表现设计 CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是 W3C 于1998年5 月12日推出的 CSS2。W3C创建CSS标准的目的是以CSS取代 HTML表格式布局和其他表 现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 3、行为：是指对整个文档内容的一个模型定义及交互行为的编写，用于编写用户可进行交互 式操作的文档 （表现行为的 Web 标准技术有： DOM （文档对象模型）、 ECMAScript （JavaScript 扩展脚本语言） （1）DOM DOM 是Document Object Model文档对象模型的缩写。DOM是一种与浏览器，平台，语言的 接口， 使得你可以访问页面其他的标准组件。 简单理解，DOM解决了Netscaped 的Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来 访问他们站点中的数据、脚本和表现层对像。 （2） ECMAScript ECMAScript 是 ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。用于实现具体的界面上对象的交互操作 三、XHTML 基本介绍 XHTML是 HTML的严格和紧凑版。 XHTML 表示扩展 HTML（超文本标记语言 ） XHTML 目的为了是替换HTML XHTML基本等同于 HTML 4。01 XHTML 是 定义为 XML应用程序的 HTML XHTML W3C 推荐使用 XHTML 是 W3C推荐标准 XHTML1.0 在 2000 年 1月 26 号成为 W3C 标准 W3C 把 XHTML定义为最新的HTML。XHTML将逐渐替代 HTML。 所有新浏览器都支持 XHTML XHTML和 HTML4。01 相兼容。所有新浏览器都支持 XHTML /check/referer 验证页面的 XHTML 部分. /css-validator/check/referer 验证页面的 CSS 部分. 1、为什么要使用 XHTML XHTML 是 HTML 和 XML 的混合体。 XHTML 包含所有 HTML4.01 的所有元素并使用了 我们在网站中会发现一些站点存在许多错误的HTML。 灯火工作室 学习HTML 以上代码虽然可以在浏览器中正常工作，但不遵循 HTML 的语法规则。 XML是一种标记语言，但标识严格，文档内容具有严格的语法。 XML用于描述数据而 HTML用于呈现数据内容。今天的市场包含了多种浏览器技术，有些浏览器运行于电脑上的互联网，而有些运行于手机上和便携手掌机上。后者没有太多资源去解释错误的标记语言。因此 结合HTML和 XML 他们的优点，产生了便于未来使用的标记语言XHTML. XHTML 页面可以被所有支持 XML的设备所读取，XHTML 让你编写良好语法格式的文档，便于文档在所有浏览器中可以工作。 2、XHTML 和 HTML 之间的区别 XHTML和 HTML4.01 区别不是很大。因此，知道HTML4.01 标准对你认识 XHTML认识非常有帮助。另外，现在开始你编写HTML代码必须使用小写字母，不要忘了写结束标记。 比如（） 最重要区别 XHTML元素必须正确嵌套 在HTML中可以出现以下代码，虽然没有正确的嵌套，但也可以正常显示。 灯火工作室 在XHTML中，必须正确嵌套 灯火工作室 注意: 列表中常见错误就是忘了配对 li标签. XHTML元素必须最后关闭 错误: 灯火工作室 灯火工作室 正确: 灯火工作室 灯火工作室 XHTML 元素必须小写 错误： 灯火工作室 正确： 灯火工作室 XHTML文档必须只有一个根元素 所有 XHTML元素必须嵌套在根元素中。 3、XHTML 的基本语法 编写 XHTML需要清晰的HTML语法，以及额外的 XHTML语法规则： 属性名必须小写 属性值必须用引号括起 不允许属性缩写 错误: 正确: HTML 和 XHTML 缩写属性对应表 HTML XHTML compact compact=compact checked checked=checked declare declare=declare readonly readonly=readonly disabled disabled=disabled selected selected=selected defer defer=defer ismap ismap=ismapnohref nohref=nohref noshade noshade=noshade nowrap nowrap=nowrap multiple multiple=multiple noresize noresize=noresize id属性将替代 name属性 HTML 4.01 为标签a,applet,frame,iframe,img 和 map定义 了 name 属性。 在XHTML中 name 属性由 id 替代,name 属性过期。 错误: 正确: 注意： 为了考虑旧版本的浏览器，应当两个属性都写出来，值设置为一致内容: 重要的兼容性提示: 为了使你的XHTML兼容现在的浏览器，应当在“/”之前多一个空格。 lang 属性 lang 属性基本应用所有 XHTML 标签。指定标签内容的语言种类。如果你使用 lang 属性， 你必 须添加 xml:lang属性，如下： Heia Norge! XHTML DTD 定义必要元素 这是必须的 XHTML元素（标签） 所有 XHTML 文档必须要有一个 DOCTYPE 文档类型声明。 Html,head和 body元素必须存在。Title必须在 head元素中出现。 最简单的XHTML文档模型: Title goes here 注意: DOCTYPE文档类型声明不属于XHTML文档本身。它不是XHTML元素，不应当有结 束标签。 4、XHTML 的文档类型定义（DTD） XHTML 标准定义了三种文档类型定义。最经常用的是 XHTML Transitional(过渡型). 必须使用 一个 XHTML文档包含三个主要部分： the DOCTYPE the Head the Body。 DOCTYPE文档类型声明必须始终放在XHTML文档第一位置。 最简单的最小的XHTML文档 无标题文档 下一章将重点学习和掌握css基础以及 Dreamweaver8中有关 CSS应用的编辑界面，第二章 css基础一、认识CSS CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作 网页的新技术。网页设计最初是用HTML标记来定义页面文档及格式，例如标题、段落 、表格、链接等，但这些标记不能满足更多的文档样式需求，为了解决这个问 题，在1997年 W3C(The World Wide Web Consortium)颁布 HTML4标准的同时也公布了有关 样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式 表得到了更多的充实。W3C把 DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包 括JavaScript、Vbscript 等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator 等)和CSS样式表。你可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 二、语法 1.基本语法 CSS的定义是由三个部分构成： 选择符 （selector）， 属性 （properties） 和属性的取值 （value）。 基本格式如下： selector property: value 选择符 属性：值 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、ul、li， 你可以通过此方法定义它的属性和值，属性和值要用冒号隔开： 四种选择对象 1.HTML selector (TagName) html标签选择符 2.class selector (.NAME) 类选择符 3.ID selector (#IDname) ID选择符 4.特殊对象 (a:hover a:link a:visited a:active) 伪类选择符 四种选择方法实例： 1、 html标签选择符法：是指html的一些置标符，比如body、p、ul、li等选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效 果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合： p font-family: 宋体（定义段落字体为宋体） 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开： p text-align: center; color:#ff0000（段落居中排列；并且段落中的文字为红色） 为了使你定义的样式表方便阅读，你可以采用分行的书写格式： p text-align: center; color: black; font-family: arial 这样在整个页面凡是带p段落的文字就会自动运用“段落排列居中，段落中文字为黑色，字 体是arial”的效果， 2、类选择符法：用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类： .right text-align: right .center text-align: center 然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数： 这个段落向右对齐的 这个段落是居中排列的 注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。 调用方法是：class=NAME 3、ID 选择符法：在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。定义ID选择符要在ID名称前加上一个“#”号。还是上面的例子，我们来换一下 #right text-align: right #center text-align: center 这个段落向右对齐的 这个段落是居中排列的 调用方法是：id=NAME 要注意的是调用 ID 选择符法，同名的 id 在一个页面上只能用一 次。有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常，用多个id有什么影响吗？ 回答：第一影响就是不能通过W3的校验。 在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id 来控制这个div，那就会出现错误。 id是一个标签，用于区分不同的结构和内容，class是一个样式，可以套在任何结构和内容上，概念上说就是不一样的，id是先找到结构/内容，再给它定义样式，class是先定义好一种样式，再套给多个结构/内容。 4、伪类选择符：伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 （1）.语法 伪类的语法是在原有的语法里加上一个伪类（pseudo-class） selector:pseudo-class property: value 选择符:伪类 属性: 值 伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符及其他选择符也同样可以和伪类混用： （2）.锚的伪类 我们最常用的是4种 a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、hover、active（未访问的链接、已访问的链接、鼠标停留在链接上、和激活链接）。我们把它们分别定义不同的效果：a:link color: #FF0000; text-decoration: none /* 未访问的链接 */ a:visited color: #00FF00; text-decoration: none /* 已访问的链接 */ a:hover color: #FF00FF; text-decoration: underline /* 鼠标在链接上 */ a:active color: #0000FF; text-decoration: underline /* 激活链接 */ （上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色无下划线，鼠标在链接上时为紫色有下划线，激活链接时为蓝色并有下划线）我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。 （3）.伪类和类选择符 将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，鼠标放上去为绿色代下划线；另一组为蓝，鼠标放上去为黄色代下划线： a text-decoration: none; a.red:link color: #FF0000 a.red:visited color: #ff0000 a.red:hover color: #00FF00;text-decoration: underline; a.blue:link color: #0000FF a.blue:visited color: #0000FF a.blue:hover color: #FFFF00;text-decoration: underline; （这里的red和 blue是定语）现在将定语应用在不同的链接上： 有链接为红色鼠标放上去为绿色代下划线 有链接为蓝色鼠标放上去为黄色代下划线 其他34种锚的伪类实例将在课堂详细讲解。 （4）.其他伪类 此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。 下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的2倍： p:first-letter font-size: 200% 这是一个段落，这个段落的首字被放大了。 我们再定义一个首行样式的例子： div:first-line color: #ff0000 这是段落的第一行 这是段落的第二行 这是段落的第三行 （上例中段落的第一行为红色，第二、三行为默认颜色） 5、选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义： h1, h2, h3, h4, h5, h6 color: green （这个组里包括所有的标题元素，每个标题元素的文字都为绿色） p, div color: #ff0000 （段落和表格里的文字为红色） 效果完全等效于： p color: #ff0000 div color: #ff0000 6、包含选择符 可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，元素 2里包含元素3，这种方式只对在元素1里的元素 2里的元素 3起作用，对单独的元素1或元素2无定义，例如： ulli a font-size: 14px 在ul下的 li内的链接改变了样式，文字大小为14象素，li以外的链接的文字仍为默认大小。7、样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套 P标记： div color: red; font-size:9pt 这个段落的文字为红色9号字 （P元素里的内容会继承DIV定义的属性） 注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色： div color: red; font-size:9pt p color: blue 这个段落的文字为蓝色9号字 我们可以看到段落里的文字大小为9号字是继承div属性的， 而color属性则依照最后定义的。 不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important 提升样式表的优先权，例如： p color: #FF0000!important .blue color: #0000FF #id1 color: #FFFF00 我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important 申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。 8、注释 你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/* 开头，以*/ 结尾，如下： /* 定义段落样式表 */ p text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ 三、如何在网页中插入 CSS 前两章我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。 1、链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内，如下： 上面这个例子表示浏览器从 mystyle.css文件中以文档格式读出定义的样式表。 rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。 样式表文件可以用任何文本编辑器 （例如： 记事本） 打开并编辑， 一般样式表文件扩展名为.css。 内容是定义的样式表。 2、内部样式表 内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看出标记的用法： hr color: red p margin-left: 20px body background-image: url(images/back40.gif) 注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style 标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示： 3、导入外部样式表 导入外部样式表是指在内部样式表的里导入一个外部样式表，导入时用import，看下面这个实例： 例中import “mystyle.css”表示导入 mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。 4、内嵌样式 内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style 参数的内容就是 CSS的属性和值，如下例： 这是一个段落 （这个段落颜色为红色，左边距为20象素） 在style参数后面的引号里的内容相当于在样式表大括号里的内容。 注意：style 参数可以应用于任意 BODY内的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。 多重样式表的叠加 我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了 h3选择符的color 、text-alig 和 font-size属性： h3 color: red; text-align: left; font-size: 8pt （标题3的文字颜色为红色；向左对齐；文字尺寸为8号字）然后在内部样式表里也定义了h3选择符的text-align和 font-size属性： h3 text-align: right; font-size: 20pt （标题3文字向右对齐；尺寸为20号字） 那么这个页面叠加后的样式就是：color: red; text-align: right; font-size: 20pt （文字颜色为红色；向右对齐；尺寸为20号字） 字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。 注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。 四、简单介绍CSS结合JS的运用（针对事件动作）利用CSS配合 Javascript 的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合 JS的应用。首先，我们要搞清楚事件和动作的概念。在客户端脚本中， JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能（例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等）。 下面介绍几种常见的事件（还用更多事件，请查阅相关资料）： onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。） onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。） onMouseDown：鼠标按下事件。（鼠标按下时即产生。） onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。） onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。） onMouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。） onMouseOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。） onLoad：载入事件。（当图象或页面结束载入时产生。） onUnload：卸载事件。（当访问者离开页面时产生。） onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。） 有了事件以后，我们就为事件加上动作。这里只说改变当前元素自定义样式的动作，我们可以用这个方法先设定好两个自定义的CSS样式，对象原先调用第一种样式，当产生鼠标事件时让对象应用到第二种CSS样式，而产生的鼠标效果。 友情提示：1、用四种选择符做不同的定义；2、在一个页面里做几种链接样式；第三章 Dreamweaver 8中的 CSS设定一、DW中 CSS工具介绍 1、对 CSS支持的界面 属性面板 在属性面板中的样式下拉框，帮助我们选择我们所定义的样式，并且在下拉框中提供对样式的基本属性（包含背景字、字体样式及间距的预览效果） 注意：样式下拉框只显示 class 选择符，没列出 id 和类型选择符的样式。因为 id 在一个页面上只允许出现一次，类型选择符设置的样式会自动附加到相应的标签上。 CSS样式面板 CSS 样式面板位于编辑区的右边，包括两个标准面板，一个是 CSS 样式，一个是层面板，层面板主要用于浮动层式的布局方式，而CSS 样式面板将主要帮助我们进行各个对象的样式 定义。 CSS样式面板提供二种基本模式： 全部模式-列出当前文档中所使用的所有选择符的名称（包含内部样式和链接的外部样式）正在模式-在编辑区用鼠标选中的一个区域或一个对象正在使用的样式，当选择一个选择符时，下方的属性面板将显示当前选择到的样式列表，并可在这里进行直接修改。 在样式属性面板中有三个按钮用于样式视图的切换： 类视图-将样式分为字体、背景、区块、方框、列表、定位、扩展、表、内容等几个类别分类显示 列表视图-将样式属性按字母排序，方便我们查找相应的属性。 只显示设置属性视图-只显示当前选择符所用到的样式。 这二个按钮第一个是当前面板，第二个显示当前样式的层叠模式，选中它能够看到当前选定的样式对象处于几个选择符的下方。而上面的其它选择符，是对它有影响的父级对象。这组按钮大家应该很熟，第一个是附加样式表，第二个是新建样式规则，第三个编辑样式，第四个删除样式。2、可视的 CSS 辅助功能 DW中可视化辅助功能有两个可视工具组，一个叫可视化助理，另一个叫样式呈现，这二类工具均可以查看菜单里找到。可以选查看工具样样式呈现，调出样式呈现工具组，而可视化助理则可在工具栏中最右方的眼睛图标里找到。 CSS布局背景 该项勾选后，将对页面的所有div 元素显示一个背景色。帮助查看页面的布局。建议在需要查看页面整体布局时使用，以免对页面色彩产生影响。 CSS布局框模型 CSS 布局模型就是盒模型，勾选此项后，点选编辑区对象，将按实现宽度使用带颜色的正斜线、反斜线填充对象的 margin及 padding区域，这使我们可以看到对象在网页中实际所占的空间。 CSS布局外框 和CSS布局背景一样，是用来显示界面中的div，它会在div对象区域出现黑色的虚线。勾选它可以知道div在页面中占用的空间位置，不影响色彩设计。 层外框 当 div 使用相对定位（position:relative）绝对定位（position:absolute）时，它在页面上的表现是一个与其它对象分开的独立的层，Dreamweaver 为这些浮于对象之上的 div 提供单独的外框显示功能，帮助我们查看对象。 样式呈现按媒体类型查看 这个工具是帮助我们根据 CSS 所指定的媒体类型，进行编辑模式下的显示。工具栏上的按钮依次是“呈现屏幕媒体类型、打印媒体类型、手持媒体类型、投影仪媒体类型、TTY媒体类型、TV媒体类型。最后一个是用于控制页面中的样式表是否处于显示状态。 显示控制工具放大工具可以帮助我们查看网页细节，缩小工具可以帮助我们看到整个网页布局，还有平移工具等都借鉴图形软件的操作模式，改善了编辑环境。 浏览器检查 在工具栏网页标题右侧的第一个按钮即为浏览器检查工具，我们可以进行一些目标浏览器的设置，再检查浏览器是否支持。如果要更进一点看错误信息，点窗口结果（F7）。 验证标记 可以帮助我们检查标签对象的语法错误，比如有标签有开始，没有结束等等。在操作时可先设置验证参数再进行验证。 二、DW中的 CSS属性 在Dreamweaver8 的CSS样式里包含了 W3C 规范定义的所有CSS1的属性，DW8把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。 1、Type（类型） Type 面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。 Font：设置字体系列。什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。相对应的 CSS 属性是 “font-family” 。 注意： Dreamweaver8已经内置设定了 6个系列的英文字体，一般英文字体我们用“Verdana, Arial, Helvetica, sans-serif”这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体，一般就空着不要选取任何字体。 Size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。最好使用 Pixels 作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的12px。相对应的CSS属性是“font-size” 。注意：CSS 中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：px： （象素）根据显示器的分辨率来确定长度。 pt： （字号）根据windows系统定义的字号大小来确定长度。mm、cn、in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。 相对长度单位有： em：当前文本的尺寸。例如： font-size:2em是指文字大小为原来的2倍。 ex：当前字母“x”的高度，一般为字体尺寸的一半。 %：是以当前文本的百分比定义尺寸。例如： font-size:300%是指文字大小为原来的 3倍。 small、large：表示比当前小一个级别或大一个级别的尺寸。 Style：定义字体样式为 Normal、Italic、或者 Oblique。Italic 和 Oblique 是斜体字体。默认设置为 Normal。相对应的CSS属性是“font-style” 。 注意： Italic 和Oblique都是斜体字体。而它们不同的是， Italic是斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该用Oblique。 Line Height：设置文本所在行的行高。默认为 Normal，你也可以自己键入一个精确的数值并选取一个计量单位。 比较直观的写法用百分比， 例如140%是指行高等于文字大小的1.4倍。相对应的CSS属性是“line-height” 。 Decoration：在文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是“text-decoration” 。 注意：链接的默认设置是 Underline，我们可以通过选 none 去除下划线。Blink（闪烁效果）只在NC浏览器里可以看到。 Weight：给字体指定粗体字的磅值。Normal等同于400；Bold等同于700。设粗体字一般用bold。相对应的 CSS属性是“font-weight” 。 Variant：允许你选取字体的变种，选 small-caps（小型大写字母）时，此样式区域内所有字母大写。相对应的CSS属性是“font-variant” 。 Case：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。参数： capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、 none（不转换）。相对应的CSS属性是“text-transform” 。 Color：定义文字颜色。相对应的CSS属性是“color” 。 注意：CSS中颜色的值有三种表示方法： #RRGGBB 格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 FF”的两位十六进制正整数。例如：#FF0000表示红色，#FFFF00表示黄色。rgb(R,G,B)格式，RGB 为三色的值，取 0255，例如：rgb(255,0,0)表示红色，rgb(255,255,0)表示黄色。用颜色名称。CSS 可以使用已经定义好的颜色名称。例如：red 表示红色，yellow 表示黄色。 2、Background（背景） Background 面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对 BODY（页面）、TABLE（表格）、DIV（区域）的设置。 Background Color：设置元素的背景色。相对应的CSS属性是“background-color” 。Background Image：设置元素的背景图像。 相对应的CSS属性是 “background-image” 。 Repeat：确定背景图像是否以及如何重复。No Repeat：在