基于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）.