通过DreamweaverCS3学习HTMLDIVCSS第22章DIVCSS.pptVIP

第22章 DIV+CSS 从本章的标题来看，可能会让人费解。DIV是前面学习过的层标签，CSS是层叠样式表的缩写，它们之间会有什么关系，为什么可以联系到一起？了解Web标准的读者肯定会知道其中的缘由。到目前为止，大多数网站的布局是采用表格进行定位的，但这种方式会逐渐淡出设计舞台，取而代之的是符合Web标准的DIV+CSS布局方式。那么，Web标准是什么，如何进行DIV+CSS布局，就是本章所要介绍的内容。 22.1 Web标准 Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为3个方面：结构化标准语言，主要包括XHTML和XML；表现标准主要包括CSS；行为标准主要包括对象模型（如W3C DOM）和ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript标准。从如下的几个方面进行简单介绍。 22.1.1 结构化标准语言 现在常用的结构化标准语言主要包括XML和XHTML两种。 1．XML XML是The Extensible Markup Language（可扩展标识语言）的简写。 2．XHTML XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。 22.1.2 表现标准CSS CSS是Cascading Style Sheets（层叠样式表）的缩写。目前推荐遵循W3C于1998年5月12日发布的CSS 2（参考/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格样式的布局、帧和其他的表现语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 22.1.3 行为标准 行为标准主要包括DOM和ECMAScript两部分。 1．DOM DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，可以访问页面其他的标准组件。2．ECMAScript ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。目前推荐遵循ECMAScript 262。 22.1.4 Web标准的优点 大部分人都有深刻的体验，每当主流浏览器版本升级的时候，刚建立的网站就可能变得过时，因此就需要随之升级或重新建造一遍网站。例如，从1996~1999年，为了兼容Netscape和IE，很多网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，也需要制作一个新版本来支持这种新技术或新设备，如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿和繁杂浪费了大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等。这些都是恶性循环，是巨大的浪费。 22.2 理解表现和结构相分离 了解了Web标准之后，本小节将介绍如何理解表现和结构相分离。在此以一个实例来详细说明。首先必须先明白一些基本的概念：内容、结构、表现和行为。 22.2.1 内容 内容就是页面实际要传达的真正信息，包含数据、文档或图片等。注意这里强调的“真正”，是指纯粹的数据信息本身，不包含任何辅助信息，如导航菜单或装饰性图片等，下面一段文本是页面要表现的信息，如图22.1所示。 22.2.2 结构（Structure） 可以看到上面的文本信息本身已经完整，但是混乱一团，难以阅读和理解，必须将其格式化一下。把其分成标题、作者、章、节、段落和列表等，如图22.2所示。 22.2.3 表现（Presentation） 虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰等。所有这些用来改变内容外观的东西，称之为“表现”。下面是对上面文本用表现处理过后的效果，如图所示。 22.2.4 行为（Behavior） 行为是对内容的交互及操作效果。例如，使用JavaScript可以使内容动起来，可以判断一些表单提交，进行相应的一些操作。 所有HTML和XHTML页面都由结构、表现和行为三方面内容组成。抽象一点理解，内容是基础层，然后是附加上的结构层和表现层，最后再对这三个层做点“行为”， 22.2.5 传统的HTML方法 传统的HTML标签中，既有控制结构的标签（如