基于Web标准的企业网站网页设计与实现

摘要： Web标准是网站建设发展的必然趋势，它可以实现网页中结构、表现、行为三者相分离，取得比传统表格模式更好地访问性能，以及降低维护成本。该文详细分析了Web标准及其构成，并以锅泰吉企业网站为例，论述了基于Web标准的企业网站建设的策略，以及设计和实现的过程。

关键词：Web标准；XHTML；CSS；DIV；企业网站

中图分类号：TP312 文献标识码：A 文章编号：1009-3044（2013）09-2125-03

随着网络环境的不断改善和网民数量的不断增加，互联网已经成长为一个新型的媒体传播平台。对于企业来说，互联网已经成为必不可少的宣传和营销平台，而企业网站则是完成企业宣传和营销目的的有效方式之一。传统的基于表格布局的网页设计已经不能满足Web标准下表现与内容相分离的要求，因而越来越多的企业网站采用Web标准下基于CSS+XHTML布局的网页设计，这样也更有利于网站后期的改版和维护。

1 Web标准及其组成

1.1 什么是Web标准

随着行业的不断发展和规范，W3C（World Wide Web Consortium）和其他标准化组织制定了Web标准。Web标准是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构标准主要包括XHTML和XML，表现标准主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

1.2 Web标准的组成

Web标准由三大部分构成：结构、表现和行为。

1）结构：

结构用于对网站数据的分类及整合，主要技术包括可扩展标记语言（The Extensible Markup Language，XML）和可扩展超文本标记语言（The Extensible HyperText Markup Language，XHTML）。其中XML是一种允许用户对自己的标记语言进行定义的源语言，具有强大的数据转换能力，将来可以替代超文本置标语言（HTML）。XHTML结合了部分XML的强大功能及大多数HTML的简单特性，表现方式与HTML类似，不过语法上更加严格。

2）表现：

表现用于信息在浏览器上的显示控制，主要技术是层叠样式表（Cascading Style Sheet，CSS）。CSS用来进行网页风格设计，与XHTML负责的结构相分离。目前遵循的是CSS2，CSS对已经被结构化的信息进行显示上的控制，包含版式、颜色、大小等样式控制。

3）行为：

行为用于用户对网页文档的交互操作，主要技术包括文档对象模型（Document Object Model，DOM）和ECMAScript。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。ECMAScript用于实现具体的界面上对象的交互操作，主要是JavaScript技术。

2 Web标准下的网页开发流程

第一步：语义结构定义。在这一步我们需要根据网页设计图，进一步分析所需要的DIV层块，以及层块之间的相互关系。为访问速度的考虑，嵌套的DIV层块最好不要超过3层。

第二步：网页内容添加。在定义好的DIV语义结构中，根据网页设计图在对应的DIV层块中添加网页内容，其中包括文字、列表、表单、表单域、图像等。

第三步：CSS美好网页。使用CSS进行页面布局，如加入背景、边框；进一步使用CSS设置相关属性，如字体、大小、对齐等。

第四步：添加动态元素。需要根据网页设计图的要求，利用JavaScript脚本语言完成动态元素的添加，其中包括焦点图、导航菜单及其他动态效果。

3 Web标准在企业网站建设中的应用

本文以锅泰吉企业网站平台为例，展示基于Web标准的企业网站建设。

3.1 结构布局

1）文档头的编写

文档头位于文档的头部，主要包括文档说明和head标记。这部分内容并不会显示在网页上，但能影响到网页的全局设置和后期搜索引擎查找。我们保留自动生成的DOCTYPE说明和xmlns名字空间。Head区还定义了编码语言、设计者、版权信息、关键词、描述。Head区代码如下：

2）结构布局

根据案例网页设计图如图1，网页总体划分为左、右、下三个区块，左、右边区块可以根据需要进一步嵌套区块，整体布局结构代码如下：

3.2 内容添加

根据需要在区块中添加所需要的元素，如图片、文本、列表、表单、图片列表等。左边区块嵌套logo区块、menu区块、vip区块，以及添加两个带有超链接的图片。右边区块嵌套banner区块、nav菜单区块、二级菜单nav2区块、图片列表区块，添加图片等。XHTML提供了丰富的标签用于排版，选择合适的标签可以节省很多的代码，让进一步的样式设置更容易。

3.3 样式设置

1）CSS reset

XHTML标签在浏览器里有默认的样式，但不同浏览器的默认样式之间会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是，通过重新定义标签样式“覆盖”浏览器的CSS默认属性。这就是CSS reset。根据笔者自己的习惯，采用如下CSS reset代码：

2）区块布局

当然整个网页的设计不可能经过三步一次完成，设计过程往往是个螺旋式上升和完善的过程。每个具体细节部分的代码在此不再一一赘述。

3.4 动态效果添加

JavaScript是一种基于对象且事件驱动的客户端脚本语言，常用来给网页添加动态效果和功能，比如案例网页中的焦点图功能和二级弹出导航菜单功能。一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型和浏览器对象模型。

为提高JavaScript的兼容性，需要充分考虑各种浏览器解释JavaScript时的不同效果，需要设计时对不同浏览器的解释分别加以判断和处理。

4 结束语

Web标准是目前国际上正在推广的网站标准，Web标准中典型的应用模式是“CSS+XHTML”，XHTML负责结构，CSS负责表现，摒弃了HTML4.0中的表格定位方式，做到网站设计代码更加规范，减少了网络带宽资源浪费，加快了网站访问速度，也充分考虑了对于用户和搜索引擎的友好度。笔者在设计锅泰吉企业网站时，充分遵循了Web2.0标准，做到了结构、表现、行为的相分离。当然要学好Web标准还需要我们不断的实践。

参考文献：

[1] 叶青.网页开发手记：HTML+CSS+JavaScript[M].北京：电子工业出版社，2011.

[2] 赵清华.基于DIV+CSS的网页布局技术应用研究[J].现代计算机，2010（5）.

[3] 侯静.基于Web标准的高校网站建设与实现[J].中山大学学报，2009（3）.

[4] 余跃泓.Web标准下的CSS+DIV布局初探[J].计算机光盘软件与应用，2012（10）.