[笔记] 一起参悟CSS布局之道 第一章（2）

1、Web标准是一个复杂的概念集合，它由一系列标准组成。

由于网页设计越来越趋向于整体结构化，因此网页设计必须从三方面入手：

网页设计三方面入手

结构（Strcture）	XHTML、XML
表现（Presentation）	CSS
行为（Behavior）	对象模型（W3C DOM）、ECMAScript等

XML:www.w3.org/TR/2000/REC-XML-20001006

XHTML:http://www.w3.org/TR/xhtmll

               http://www.chinaw3c.org

2、表现标准语言

CSS: http://www.w3.org/TR/CSS2/

含义：如何修饰网页信息的显示样式。表现标准语言主要是CSS（Cascading Style Sheets,层叠样式表）

它是由W3C于1998年5月12日发布的。

此标准的目的是希望使用CSS取代HTML中结构与表现混淆在一起的弊端。

                                          CSS布局与XHTML结构相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3、行为标准语言

1）DOM（Document Object Model） 根据W3C DOM 规范（http://www.w3.org/DOM/）

    它是一种让浏览器与网页内容沟通的语言，使得用户可以访问页面元素和组件。

2）ECMAScript 由ECMA（European Computer Manufacturers Association）制定的标准脚本语言。（http://www.ecma-international.org/publications/standards/Ecma-262.htm）

4、CSS布局的基本思路

首先，思考网页信息的语义和结构。

语义：标签所代表的元素是什么？

结构：由语义元素组合搭建的框架，所呈现出来的就是网页效果了。

例如：假设我们正要设计的页面模块包括：

LOGO

Banner

导航条

子菜单

搜索框

功能面板（如调查表、公告牌）

页脚（网页版权信息）

主页面内容

然后，div元素来将这些结构定义出来，如

<!-- [结构化网页模块] -->
<div id="header"></div>
<div id="globalnav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="board"></div>
<div id="footer"></div>
<div id="content"></div>

以上代码不是布局，而是页面结构。

其次，布局。

最后，定义内容块显示的背景颜色、字体、边框以及对齐属性等。