HTML5+CSS+JavaScript深入学习实录
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.4 Web标准布局介绍

无论做什么都需要遵循一定的标准和游戏规则，否则将会造成天下大乱。在网页领域也同样如此，也需要一个标准来约束数量迅猛增长的网页。随着网络技术的飞速发展，各种应用类型的站点纷纷建立。因为网络的无限性和共享性，以及各种设计软件的推出，多样化的站点展示方式便应运而生。为保证各种用户和各类软件设计出的站点信息完整地展现在用户面前，Web标准技术便应运而生。

1.4.1 看当前的Web开发标

Web标准是所有站点在建设时必须遵循的一系列硬性规范。从页面构成来看网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。所以对应的Web标准也由如下三方面构成。

1.结构化标准语言

当前使用的结构化标准语言是HTML和XHTML，下面将对这两种语言进行简要介绍。

HTML是Hyper Text Markup Language（超文本标记语言）的缩写，是构成Web页面的主要工具，用来表示网上信息的符号标记语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，就是所见到的网页。HTML语言是网页制作的基础，是初学者必须掌握的内容。当前的最新版本是HTML 5。

XHTML是Extensible Hyper Text Markup Language的缩写。XHTML是根据XML标准建立起来的标识语言，是由HTML向XML的过渡。

2.表现性标准语言

目前的表现性语言是本书讲的CSS。CSS是Cascading Style Sheets（层叠样式表）的缩写。通过CSS可以对网页进行布局，控制网页的表现形式。CSS可以与XHTML语言结合，实现页面表现和结构的完整分离，提高了站点的使用性和维护效率。

当前的行为标准是DOM和ECMAScript。DOM是Document Object Model文档对象模型的缩写，根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了JavaScript和Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。从本质上讲，DOM是一种文档对象模型，是建立在网页和Script及程序语言之间的桥梁。

ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。

上述标准大部分由W3C组织起草和发布，也有一些是其他标准组织制定的标准，比如ECMA的ECMAScript标准。

1.4.2 为什么使用Web标准

Web标准就是网页行业的ISO标准，网页必须有一个标准，不然五花八门的技术用在多如牛毛的不同网站上，会显示不出来“神采奕奕”的视觉效果。推出Web标准的主要目的是不管是哪一家公司的技术，都要遵循这个规范来设计、制作并发展，这样大家的站点才能以完整、标准的格式展现出来。具体来说，使用Web标准主要目的如下所示。

■ 提供最多利益给最多的网站用户，包括世界各地的。

■ 确保任何网站文档都能够长期有效，而不必在软件升级后进行修改。

■ 大大简化了代码，并对应地降低站点建设成本。

■ 让网站更容易使用，能适应更多不同用户和更多网络设备，因为硬件制造商也按照此标准推出自己的产品。

■ 当浏览器版本更新或者出现新的网络交互设备时，也能确保所有应用能够继续正确执行。

使用Web标准后，不仅给浏览用户带来了多元化的浏览展示，而且给站点拥有者和维护人员带来了极大的方便。使用Web标准对浏览用户的具体意义如下所示。

■ 页面内容能被更多的用户所访问。

■ 页面内容能被更广泛的设备所访问。

■ 用户能够通过样式选择定制自己的表现界面。

■ 使文件的下载与页面显示速度更快。

使用Web标准对网站所有者的具体意义如下所示。

■ 带宽要求降低，降低了站点成本。

■ 使用更少的代码和组件，使站点更加容易维护。

■ 更容易被搜索引擎搜索到。

■ 使改版工作更加方便，不再需要变动页面内容。

■ 能够直接提供打印版本，而不需要另行复制打印内容。

■ 大大提高了站点的易用性。

1.4.3 CSS布局标准

作为一个站点页面设计人员，必须严格遵循前面介绍的标准，使页面完美地展现在用户面前。在推出Web标准以前，站点网页是以table（表格）作为布局的。从本质上看来，传统的table布局和现在的CSS布局所遵循的是截然不同的思维模式。在下面的内容中，将介绍传统布局和CSS布局的区别，并着重说明标准布局所产生的重要意义。

1.传统页面布局

传统的页面布局方法是使用table元素，其具体实现方法如下所示。

（1）使用table元素的单元格根据需要将页面划分为不同区域，并且在划分后的单元格内可以继续嵌套其他的表格内容，随意添加。

（2）利用table元素的属性来控制内容的具体位置，如algin和valgin。

2.标准布局

在Web标准布局的页面中，表现部分和结构部分是各自独立的。结构部分是用HTML或XHTML编写实现的，而表现部分是用可以调用的CSS文件实现的。这样，实现了页面结构和表现内容的分离，从而方便了页面维护。例如，下面的代码使用了标准布局。

  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>无标题文档</title>
  <link href="style.css" type="text/css" rel="stylesheet"/>    <!--调用样式代码-->
  </head>
  <body>
  <table width="600" height="200" border="0" align="center">
    <tr><td><div class="unnamed1">欧锦赛A组</div></td></tr>     <!--使用样式-->
    <tr><td><div class="unnamed1">法 国</div></td></tr>
    <tr><td><div class="unnamed1">荷 兰</div></td></tr>
    <tr><td><div class="unnamed1">意大利</div></td></tr>
    <tr><td><div class="unnamed1">罗马尼亚</div></td></tr>
  </table>
  </body>
  </html>

文件style.css的具体代码如下所示。

  <!--定义的样式-->
  .unnamed1 {
      background-position: center;
      text-align:center;
      color:#CC0000;
  }

从上述实例代码中可以清楚地看出，使用CSS标准样式后，结构部分和表现部分已经完全分离了。如果想继续修改字体的颜色为green，则只需对CSS文件中的color值进行修改。这样，如果整个站点的页面都调用此CSS文件，那么只需改变此样式的某属性值，整个站点的此属性元素都将修改。

所以说当使用标准样式后，可以实现页面结构和表现的分离，给站点设计带来了重大意义，这主要体现在如下几个方面。

■ 由于页面的表现部分由样式文件独立控制，所以使站点的改版工作变得更加轻松自如。

■ 由于页面内容可以使用不同的样式文件，所以可以使页面内容能够完全适应各种应用设备。

■ 充分结合XHTML的清晰结构，实现建议的数据处理。

■ 根据XHTML的明确语意，轻松实现搜索工作。

上一章目录下一章