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

基于Web标准的企业网站网页设计与实现
摘要： Web标准是网站建设发展的必然趋势，它可以实现网页中结构、表现、行为三者相分离，取得比传统表格模式更好地访问性能，以及降低维护成本。

该文详细分析了Web标准及其构成，并以锅泰吉企业网站为例，论述了基于Web标准的企业网站建设的策略，以及设计和实现的过程。

关键词：Web标准；XHTML；CSS；DIV；企业网站
随着网络环境的不断改善和网民数量的不断增加，互联网已经成长为一个新型的媒体传播平台。

对于企业来说，互联网已经成为必不可少的宣传和营销平台，而企业网站则是完成企业宣传和营销目的的有效方式之一。

传统的基于表格布局的网页设计已经不能满足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标准还需要我们不断的实践。