第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两种。 1XML XML是The Extensible Markup Language（可扩展标识语言）的简写。 2XHTML XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。,22.1.2 表现标准CSS,CSS是Cascading Style Sheets（层叠样式表）的缩写。目前推荐遵循W3C于1998年5月12日发布的CSS 2（参考http:/www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格样式的布局、帧和其他的表现语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。,22.1.3 行为标准,行为标准主要包括DOM和ECMAScript两部分。 1DOM DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，可以访问页面其他的标准组件。2ECMAScript ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。目前推荐遵循ECMAScript 262。,22.1.4 Web标准的优点,大部分人都有深刻的体验，每当主流浏览器版本升级的时候，刚建立的网站就可能变得过时，因此就需要随之升级或重新建造一遍网站。例如，从19961999年，为了兼容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标签中，既有控制结构的标签（如标签和标签），又有控制表现的标签（如标签和标签），还有本意用于结构后来被滥用于控制表现的标签（如标签和标签）。整个结构标签与表现标签混合在一起。 1如何改版 2数据的利用,22.2.6 Web标准推荐的方法,对于内容、结构和表现相分离，最早是在软件开发架构理论中提出来的。用过QQ的人都知道，QQ面板的皮肤变更但内容却保持不变，仅是外观在变化。还有，Winamp的skin也是这种原理的典型体现。其实大多数的设计师已经在实践中都接触过。 动态信息发布系统实际上就是基于这个原理制作的。,22.3 DIV+CSS页面规划,从前一节的内容可知，DIV+CSS的页面布局不仅仅是设计方式的转变，而且是设计思想的转变。虽然在设计中使用的元素依然没有改变，在旧的表格布局中，也会使用到DIV和CSS，但它们却没有被用于页面布局。这一转变为网页设计带来了许多便利，在前面已经介绍过。那么究竟如何使用DIV+CSS进行页面布局，使用DIV+CSS需要掌握哪些知识点，就是本节要介绍的内容。,22.3.1 盒模型,盒模型是进行和实现DIV+CSS布局的基础，关系到网页元素的排列和定位。盒模型由内容、边框、内填充和外边距组成，如图所示。,22.3.2 定位,了解盒模型之后，如何才能把这些盒模型妥当地排列在网页中，这时需要用到定位技术。在此之前，介绍两个基本概念。在CSS的布局中，网页元素可分为两类： 一类是块级框元素，如标签和标签等。它们在网页中以块的形式出现。除非特殊情况，它们之后总会有换行，即它们会占据一行的位置。 另一类是行内框元素，如标签等。它们之后不会有换行，则多个此类标签共居一行。,22.3.2 定位,1普通流定位 普通流定位是根据元素在XHTML中原本的位置进行确定。块级框元素按从上至下的垂直方式进行定位，而行内框元素按从左至右的水平方式进行定位。在没有指明定位方式的情况下，默认为普通流方式。 2相对定位 相对定位方式是元素在原来的位置进行偏移,22.3.2 定位,3绝对定位 绝对定位是相对于其上一级元素来进行的。它会脱离普通流，即普通流中的元素会把它当作不存在。所以绝对定位的改变会影响到普通流中的元素的位置。其示意图如图所示。,22.3.2 定位,4浮动定位 浮动定位可以进行左右移动，直到定位元素的边框碰到父级元素或同级元素的边框，才会停止移动。它也是在CSS布局中常用的定位方式。浮动定位也会脱离普通流，从而普通流中的元素对浮动定位视而不见，将其当作不存在。如果需要把元素设置成浮动定位，只需把float设置为left或right即可。,22.3.3 清除,清除属性clear可以清除元素的浮动效果。该属性共有三个属性值：left、right和none。当设置为left时，元素的左边不允许出现浮动定位元素，如果出现浮动定位元素，则自动换行进行下降；当设置为right时，元素的右边不允许出现浮动定位元素；当设置为none时，元素的两边不允许出现浮动定位元素。 该属性的设置可以为布局带来便利。它会为浮动元素留出空间。当元素内存在浮动定位时，浮动元素会脱离普通流，从而不会占用父级元素的空间，如图所示。,22.3.4 实现布局规划,了解以上的几个基本概念后，可以实现简单的布局。在此就介绍二栏结构布局实现的方法。 首先绘制大概的结构示意图，如图所示，从而方便在布局实现的过程中理清各部分的关系。从示意图可看出，此布局主要是处理导航栏与主体内容之间的关系，以及布局元素居中的问题。导航栏与主体内容并列在同一水平位置，所以需要把它们包含在一个元素中，以便进行居中。在此使用DIV+CSS进行布局，,22.3.4 实现布局规划,DIV层之间关系如图所示。,22.3.5 美化布局,在传统布局也就是表格布局里可以使用大量的图片进行页面的美化。在DIV+CSS布局中，同样可以使用图片来进行页面的美化。不同的是，在DIV+CSS中使用背景图片的方式，这使得美化工作变得更为简单，在此用一实例来介绍背景图片的美化过程，如图所示。,22.4 DIV+CSS在Dreamweaver中实现,Dreamweaver CS3是全面地支持DIV+CSS，并且符合Web标准的网页设计。在Dreamweaver中可以实现可视化CSS布局，这使得网页设计更为简单，效率更高。为了方便初学者进行设计，Dreamweaver还提供了许多现成的模板，可以直接在网页中应用。当然，对于熟练的用户可以采用自定义方式进行布局。,22.4.1 使用模板布局,Dreamweaver CS3中提供了多达32种模板，几乎涵盖了所有的布局模型。模板主要分为1列布局、2列布局和3列布局。每种模型里又分为固定列布局、液态列布局和弹性布局。这些模板可以在设计的过程中稍加改动，从而满足用户的需要来使用。下面将介绍如何使用模板，具体步骤如下：,22.4.2 自定义布局,有时，从模板创建的布局页面并不能完全符合要求。那么，用户可以在Dreamweaver中灵活地创建自定义布局。过程同样也是非常简单的。具体步骤如下：,22.5 专家总结,本章介绍了Web标准，以及其所带来的优点。需要重视的是Web标准中结构与表现及行为分离的设计概念，如此才能真正地为设计带来许多便利。采用Web标准来设计网页，简化了设计过程，并且使网页的结构更为清晰，可读性增强；同时还能创建出漂亮的页面效果。作为网页设计工具的Dreamweaver，全方位地提供了支持，让设计工作变得更轻松有效。,