第1章 Web标准布局的本质

� 为什么要建立 Web 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 � 什么是 Web 标准 � 内容、结构和 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 现 � 两种思考方式 � Web 标准的前景 � Web 标准网站欣赏 了解 Web 标准的本质，掌握关于内容、结构和表现的相关知识，学会使用新的思 维方式进行思考，这些是能否成功使用 CSS 布局页面的关键。在本章将详细讲解 Web 标准的本质、Web 标准的概念、使用 Web 标准的好处。本章还将着重介绍使用 CSS 布 局和传统布局的本质区别，帮助读者建立起全新的网页布局观念。 通过对本章的学习，读者需要重点掌握页面中的内容、结构和表现的概念，了解使 用 CSS 布局页面的思考方式。 Web 标准布局的本质 第 章 CSS 标准网页布局开发指南 ·4· 1.1 为什么要建立Web标准 传统的用网页布局（使用 Table 进行布局）已经有很长的历史和较成熟的技术 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 了。但其存在 很明显的缺点。由于页面的内容和修饰没有分离，导致改版的困难；由于页面代码的语义不明确，导 致数据利用的困难。而使用 CSS 进行网页布局，分离了结构和表现，所以能成功解决这些问题。 1.1.1 建立 Web 标准的目的 Web 标准的目的是解决网站中由于浏览器升级、网站代码臃肿、代码不易用等带来的问题。Web 标准是在 W3C（W3C.org 万维网联盟）的组织下建立的，其主要目的如下： ‰ 因为使用了统一的标准，所以使得更多的网站用户有了最多的利益。 ‰ 因为实现了结构和表现相分离，所以确保了任何网站文档的长期有效性。 ‰ 因为简化了代码，所以降低了成本。 ‰ 因为可以容易地调用不同的样式文件，所以使得网站更容易使用，适合不同用户和网络设备。 ‰ 因为实现了向后兼容，所以当浏览器版本更新，或者出现新的网络交互设备时，所有应用能够 继续正确执行。 1.1.2 使用 Web 标准的好处 使用 Web 标准的好处是可以大大缩减页面代码，提高浏览速度，缩减带宽成本。由于其清晰的结 构，能使网页更容易被搜索引擎搜索到。其具体的好处主要体现在以下两个方面。 1．对网站浏览者的好处 ‰ 由于页面代码量减少，所以文件下载速度更快，同时浏览器显示页面的速度也更快。 ‰ 由于清晰的语义结构，所以使得内容能被更多的用户所访问。 ‰ 由于实现了结构和表现相分离，所以内容能被更多的设备（包括手机、打印机等）所访问。 ‰ 由于样式文件的独立性，所以用户选择自己喜欢的界面变得更容易。 ‰ 由于可以调用独立的打印样式文件，所以便于页面的打印。 2．对网站拥有者的好处 ‰ 由于代码变得更简洁和组件用得更少，所以使得维护变得很容易。 ‰ 由于对带宽要求降低，所以节约了成本。 ‰ 由于页面结构清晰的语义性，所以使得搜索引擎的搜索变得更容易。 ‰ 由于实现了结构和表现相分离，所以使得修改页面外观很容易，同时可以不变动页面内容。 ‰ 由于可以调用不同的样式文件，所以使得提供打印版本变得更容易。 ‰ 由于清晰合理的页面结构，提高了网站的易用性。 第 1 章 Web 标准布局的本质 ·5· 1.2 什么是Web标准 Web 标准可以分为 3 个方面：结构标准语言（主要包括 XHTML 和 XML）、表现标准语言（主要 包括 CSS）和行为标准（主要包括对象模型、ECMAScript）等，下面简单介绍这些标准。 1．结构标准语言 结构标准语言包括两个部分：XML 和 XHTML。其具体区别如下： XML 是 The Extensible Markup Language 的简写，是一种扩展式标识语言。XML 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 的目的是对 HTML 的补充，它具有强大的扩展性，可以用于网络数据的转换和描述。同时 XML 具有简洁有效、 易学易用、具有开放的国际化标准、高效可扩充等特点。 XHTML 是 The Extensible HyperText Markup Language（可扩展标识语言）的缩写。XHML 是基于 XML 的标识语言，是在 HTML 4.01 的基础上，用 XML 的规则对其进行扩展建立起来的，它是 HTML 向 XML 的过渡。 2．表现标准语言 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。目前推荐遵循的是 W3C 于 1998 年 5 月 12 日推出的 CSS 2。CSS 标准建立的目的是以 CSS 进行网页布局，控制网页的表现。CSS 标准布局与 XHTML 结构语言相结合，可以实现表现与结构相分离，提高网站的使用性和可维护性。 3．行为标准 行为标准也包括两个部分：DOM 和 ECMAScript，其具体区别如下： DOM 是 Document Object Model（文档对象模型）的缩写。W3C 建立的 W3C DOM 是建立网页与 Script 或程序语言沟通的桥梁。它实现了访问页面中标准组件的一种标准 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 。 ECMAScript 是 ECMA（European Computer Manufacturers Association）制定的标准脚本语言。 1.3 内容、结构和表现 内容、结构和表现是一个网页必不可少的组成部分。其中，内容是页面传达信息的基础，表现使 得内容的传达变得更加明晰和方便，而结构则是内容和表现之间的纽带。下面通过实例详细说明三者 的区别和联系。 1．内容 内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。其中不包括 修饰的图片、背景音乐等。为了更好地理解，举一个实际的例子。下面就是一个页面的内容部分，如 图 1-1 所示。 CSS 标准网页布局开发指南 ·6· 图 1-1 页面内容 注意：页面的内容只包含所要传达的基本信息，不包含任何修饰的成分，也不包含任何布局和排版的 部分。 2．结构 虽然在图 1-1 中已经完全包括了页面所有要传达的信息，但是这些信息简单地罗列在一起，难于 阅读，内容的信息也不能很清晰地传达给阅读者。将如图 1-1 所示的页面内容进行整理，分成文章标 题、作者、文章内容、段落、段落标题、段落内容、列表等各个部分，如图 1-2 所示。 图 1-2 页面结构 在图 1-2 中，用来标记内容各个部分的“文章标题”、“作者”、“文章内容”、“段落”等标 签就是页面的结构。页面结构说明了内容各个部分之间的逻辑关系，使内容更便于理解。 3．表现 以上虽然从结构上对页面内容进行了区分，但是页面内容的外观并没有改变。“文章标题”、“作 者”、“文章内容”等各个部分仍然是一样的字体，一样的颜色，而且内容还依然是简单地罗列在一 起。要让阅读者能更好地阅读页面内容，就需要设置内容部分的字体样式、对齐方式、背景修饰等， 所有这些外观的效果就称之为表现。加入表现后的内容如图 1-3 所示。 第 1 章 Web 标准布局的本质 ·7· 图 1-3 页面表现 从图 1-3 可以看出，页面内容增加了背景，标题部分的文字进行了加粗，并且合理地排列了各部 分内容的位置。经过表现处理后的页面更加美观和便于阅读。 Web 标准的另一个部分行为就是对内容的交互及操作效果。举例来说，内容好比人的身体；结构 则标明了身体的各个部分（哪里是头，哪里是脚）；表现好比装扮身体的衣服；行为就是走、跑、跳 等动作。 1.4 两种思考方式 使用 Table 的传统布局和使用 CSS 的标准布局有着截然不同的思考方式。在传统布局中，页面的 结构部分和表现部分混杂在一起。而在标准布局中，结构部分由 XHTML 控制，表现部分由 CSS 控制， 实现了表现和结构相分离。下面详细介绍两种思考方式的具体区别。 1．传统的 HTML 布局 在传统布局中使用的主要布局元素是 table 元素。一般用 table 元素的单元格将页面分区，然后在 单元格中嵌套其他表格定位内容。通常使用 table 元素的 align、valign、cellspacing、cellspadding 等属 性（关于 table 元素的属性参看第 2 章）控制内容的位置，用 font 元素来控制文本的显示。下面是用 table 元素进行布局的简单示例，其代码如下：

生查子·元夕 CSS 标准网页布局开发指南 ·8· 欧阳修 去年元夜时，花市灯如昼。 月到柳梢头，人约黄昏后。 今年元夜时，月与灯依旧。 不见去年人，泪满春衫袖。

代码中使用 table、tr、td 三个元素定义了一个表格，在 td 元素中定义了文本居中，在 font 元素中 定义标题为红色。其应用到网页中效果如图 1-4 所示。 图 1-4 table 布局的页面 示例中使用 font 元素控制文本的颜色为 red，用 td 的 align 属性控制内容的居中。从显示效果来看 并没有什么问题。但是由于表现部分嵌入到了结构部分之中，当制作了繁多的类似页面之后，修改页 面表现就会很困难。例如，页面中有几十首诗词，现在要将页面中诗词标题的字体颜色改为 blue，那 么就要更改几十个 font 元素中的 color 值。如果有成千上万的页面，这样的操作就会花费大量的时间。 2．Web 标准布局 在 Web 标准布局中，结构部分和表现部分是各自独立的。结构部分是页面的 XHTML 部分，表现 部分是调用的 CSS 文件。XHTML 只用来定义内容的结构，所有表现的部分放到单独的 CSS 文件中。 下面是 Web 标准布局的示例，其代码如下： 其中代码： 实现了调用名字为 style 的 CSS 文件，CSS 文件中的代码如下： 第 1 章 Web 标准布局的本质 ·9· div { width:100%; text-align:center;} /*定义文本水平居中显示*/ span { color:red;} /*定义文本的颜色*/ 将代码应用到网页中，其效果如图 1-5 所示。 图 1-5 div 布局的页面 采用标准布局之后，结构部分和表现部分完全分离了。同样要更改诗词标题的字体颜色为 blue， 只需更改 CSS 中 span 元素的 color 属性。如果网站中所有页面都调用相同的 CSS 文件，那么更改网站 所有诗词标题的颜色也只需更改这一句代码。语义清楚的 XHTML 和合理的 CSS，使得网站的改版非 常容易。页面的结构和表现相分离后，带来的好处主要体现在以下几个方面： ‰ 由于内容可以使用不同的样式文件，所以可以使内容适应各种设备。 ‰ 由于页面的表现部分由样式文件独立控制，所以网站改版变得更加容易。 ‰ 由于 XHTML 有清晰的结构，所以使得数据的处理更加简单。 ‰ 由于 XHTML 有明确的语义性，所以使得搜索变得更加容易。 注意：使用 CSS的标准布局，并不是简单地用 div等元素代替 table元素，而是要从根本上改变对页面 的理解方式，达到结构和表现相分离。 1.5 Web标准的前景 随着越来越多的网站（特别是一些大型的门户网站）改版成符合 Web 标准的版本，Web 标准也逐 渐被网站设计者所了解和认可。Web 标准之所以能从原来的被质疑、争论，到现在的被应用和认可。 其主要的原因是，Web 标准能给使用者带来真正的好处。在传统的 Table 布局中，页面内容要等表格 中的内容加载完后才能显示。而使用 CSS 布局的页面，内容边加载边显示，所以大大提高了显示速度。 同时由于标准布局的代码更加简洁，增加了关键字占网页总代码的比重，实现了搜索引擎的优化。 自 2005 年以来，Web 2.0 的提出和应用给 IT 界带来了新的技术革新。而 Web 标准正是 Web 2.0 技术的基础，这也在很大程度上推动了 Web 标准的发展。随着 Web 技术的不断革新和越来越多支持标 准的浏览器的出现，采用 Web 标准的网页布局一定会变得更加容易和普遍。 CSS 标准网页布局开发指南 ·10· 1.6 Web标准网站欣赏 虽然使用 CSS 布局和传统布局有本质上的区别，但是从表现效果来说却没有什么区别。使用传统 布局所能达到的效果，用 CSS 一样能够实现。使用 CSS 布局的页面不但具有精美的表现效果，而且具 有更加简洁合理的页面结构。下面介绍一些使用 CSS 布局的精美站点。 1．www.macrabbit.com 这是一个高度只有一屏左右的简洁站点，整个页面分成头部导航和内容两大部分。页面中合理地 使用了圆角图片，使界面看上去很美观，如图 1-6 所示。 图 1-6 www.macrabbit.com 首页效果 2．www.mp3.com mp3 的站点就较为复杂一些，大体上纵向分为 3 个部分：头部（包括导航）、主体内容部分、底 部信息。中间部分依然采用两列的布局方式。沉稳的黑色给人一种很时尚的感觉，如图 1-7 所示。 3．www.stopdesign.com 该站点使用一种简洁的布局方法，给人一种洗练、简约的感觉，如图 1-8 所示。 第 1 章 Web 标准布局的本质 ·11· 图 1-7 www.mp3.com 首页效果 图 1-8 www.stopdesign.com 首页效果 4．www.vh1.com 该站点大量使用图片，页面采取纵横分割的综合布局，给人一种华丽、充实的感觉，如图 1-9 所示。 CSS 标准网页布局开发指南 ·12· 图 1-9 www.vh1.com 首页效果