W3C标准网页设计开发技术

传统网页大多数采用表格布局、表现与结构混杂在一起，1996-1999年的Netscape、Mozilla、Opera和IE浏览器之争，为了兼容不同的浏览器，网站不得不为不同浏览器写不同的代码。随着手机上网的实现，网站代码臃肿，浪费了大量的带宽，网页的页面载入缓慢。另外，不易用的代码使残障人无法浏览网站，类似的问题举不胜举，这些问题催生了W3C标准的制订，引发了网页设计制作的新革命。

W3C是“World Wide Web Consortium”的缩写，即互联网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。建立者是互联网的发明者蒂姆.贝纳斯-李（Tim Berners-Lee）。为了解决Web应用中不同平台、技术和开发者带来的不兼容问题，保障Web信息的顺利和完整流通，互联网联盟于1998年制定了一系列标准并督促Web应用开发者和内容提供者遵循这些标准。以下您可以了解到：

 

W3C标准的内容

W3C标准的内容包括使用语言的规范，开发中使用的准则和解释引擎的行为等。W3C也制定了包括html、Xhtml、XML和CSS等众多影响深远的标准规范。

W3C的目标是能够兼容各种移动技术，不仅仅是当前广泛应用的技术，还包括以后将会出现的技术。

 

符合W3C标准的网页设计开发技术

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的W3C标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（DOM）、ECMAScript等。

 

Web标准化的XHTML与HTML的区别

XHTML，“Extensible Hypertext Markup Language”的缩写，2000年，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。HTML4.0的时代，表格成为几乎所有的网页设计用来布局的工具， 而在XHTML1.0时代，表格并不是用来布局的，而仅仅只是数据显示。

 

Web标准化DIV+CSS的开发技术

CSS，即层叠式样式表(Casecading Style Sheet)，是一种控制页面的外观并且将文档的表现部分与内容分隔开的技术。与HTML网页设计语言中的表格（table）定位方式的区别，在W3C网站设计标准中，不再使用表格定位技术，弃用HTML+table设计页面的原因：一旦布局表格确定以后，就无法再更改。

CSS排版是一种很新的理念，它将页面首先在整体上进行＜div＞标记的分块，然后对各个块进行CSS定位，最后在各个块中填入内容。采用上述CSS+DIV的方式实现各种定位，使网页的页面载入得更快，一旦修改网页设计时，效率更高而代价更低。

一个网站通常包括标志和站点名称、主页面内容、站点导航（主菜单）、子菜单、搜索框、功能区（例如购物车、收银台）、页脚（版权和有关法律声明）等内容。通常采用DIV元素来将这些结构定义出来，类似如下：

  • ＜div id="header"＞＜/div＞
  • ＜div id="content"＞＜/div＞
  • ＜div id="globalnav"＞＜/div＞
  • ＜div id="subnav"＞＜/div＞
  • ＜div id="search"＞＜/div＞
  • ＜div id="shop"＞＜/div＞
  • ＜div id="footer"＞＜/div＞

Div联合id和class属性，提供了一个把结构添加到文档的通用机制。id的名称是控制某一内容块的手段，通过给这个内容块套上DIV并加上唯一的id，就可以用CSS选择器来精确定义每一个页面元素的外观表现，包括标 题、列表、图片、链接或者段落等。例如，网页中的每个元素都可以被结构化，CSS可使得一个有序或无序的列表显示为彻头彻尾的导航栏。

在HTML中，引入CSS通常有三种方式：嵌入方式、导入方式、链接方式，举例如下：

使用链接方式，需要使用如下语句引入外部CSS文件:

＜link href="mystyle.css" rel="stylesheet" type="text/css" /＞

使用导入方式，需要使用如下语句链接入外部CSS文件:

  • ＜style type="text/css"＞
  • @import "mystyle.css
  • ＜/style＞

两者的区别是：使用链接方式，会在装载页面主体部分前装载CSS文件，这样显示的网页从一开始就带有样式效果。使用导入方式，会在整个页面装载完成后再载入CSS文件，这是使用导入方式的缺陷。

 

基于W3C标准的XML技术

XML是Extensible Markup Language（可扩展标识语言）的简写，XML类似HTML，HTML有固定的标签，而XML允许自定义标签。自从1998年W3C组织推出XML 1.0规范以来，已经有大量的XML标准应用在网络生活中。例如，用手机订阅的天气预报、股票行情，这些数据都是从相应的系统获得然后通过XML格式转换发送的；还有更多的商业应用，例如公司内部的ERP、内容管理系统之间的数据交互与共享都应用了XML。W3C关于XML规范的详细的说明，请浏览网页：http://www.w3.org/TR/REC-xml。

XML主要有三个要素：Schema（模式）、XSL（可扩展样式语言）和XLL（可扩展链接语言）。定义XML文档的方法有两种：DTD和XML Schema，DTD包括标记声明或参数实体引用，有时还包括外部实体的ID，由于DTD比较复杂，因此引入Schema模式。Schema相对于DTD的明显好处是XML Schema文档本身也是XML文档，而不是像DTD一样使用自成一体的语法。

XML的链接相对HTML来说，链接本身成为了对象， 可以象其他对象一样被管理，链接包括三部分：

1) Xpath：主要目的是进行部分而不是整个XML文档的实际寻址。

2) XLink：利用XML句法创建结构来描述目前的HTML的单向链接以及更复杂的多端和多类型的链接。XLink的重要部分是定义两个或多个数据对象或对象部分之间的关系。

3) XPointer：建立在Xpath的基础上以支持到XML文档的内部结构中的寻址。因此可以使用XML标记联接到另一个文档的特殊部分而不必提供ID引用。

XML是未来网页设计的趋势，XML迟早会取代XHTML/HTML，成为未来的网站建设构建中实现内容层的一环。但就目前而言，XML在实现网站表现层上有一定困难，使用XML+CSS或XSTL技术构建网站本身技术上难度还是很高。

 

基于W3C标准的DOM技术

DOM(Document Object Model)，即“文档对象模型”，基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，采用DOM（文档对象模型）来管理网页的数据。在树状模型中，任何一个元素或是内容，都只有自己唯一的一个节点，用DOM都可以轻易地将这个文档中的任意一个元素或内容检索出来。对于网页前端开发人员而言，DOM就是一个用于检索网页内任意元素或内容的索引目录，经常使用DOM读取、操作和修改 XML 文档。

DOM的发展，与WEB标准化的趋势相关甚密。只有基于正确的语义逻辑，DOM才能正确地发挥其功用。如今，正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。因此，在网页前端开发中，DOM的存在，无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API，成为现在热门的Ajax应用中不可缺少的组成部分。

DOM 现在不仅内置于 Web 浏览器，而且也成为许多基于 XML 的规范的一部分。通过DOM来创建XML文档对象，并加载XML文档了。从加载的XML文档中获取所需要的内容，应通过DOM树来访问树中的任何一个节点，也就是对DOM树的遍历。通过存取cookie和dom操作调用不同的CSS样式表文件来实现前台换肤。

DOM是HTML和XML文档的编程基础，它定义了处理执行文档的途径。编程者可以使用DOM增加文档、定位文档结构、填加修改删除文档元素。

 

W3C验证校验服务

W3C提供了免费的标记语言语法校验服务，网站基本建好后，到W3C组织所提供的验证服务网页上进行代码规范化验证，以便查找错误，进行修改。验证服务网页包含如下：

  • 标记验证器：http://validator.w3.org/ 可检验HTML、XHTML、SVG或XML格式的网页。
  • 连结验证器：http://validator.w3.org/checklink/ 可检验HTML/XHTML网页中是否有无效的链接。
  • CSS验证器：http://jigsaw.w3.org/css-validator/ 可检验CSS样式文件或是使用CSS的网页。

网页验证通过后将会得到一个标志，通常是XHTML1.0验证和CSS验证，留意"Result: Passed validation"这条信息，这说明页面通过了校验。

W3C标准引领着网页设计的技术革命，使得网页设计更加规范，浏览速度更快，兼容不同的浏览器，维护也更加方便。目前，符合W3C标准并通过W3C标准网页验证的网站已经越来越多，最近新改版的大网站都采用符合W3C标准CSS布局，Web标准化正帮助未来互联网成为信息世界中有高稳定性、可提升性和强适应性的基础框架。