基于Web标准的网页设计应用探析

江家龙

（广西工商职业技术学院，广西 南宁 530003）

基于Web标准的网页设计应用探析

江家龙

（广西工商职业技术学院，广西 南宁 530003）

随着应用的不断深入，Web标准已经成为网页设计的主流模式。文章通过介绍 Web标准的基本内容，结合具体的网页设计，对网页规划、设计、开发和维护进行探讨，以期为构建高适用性、代码简洁、用户友好的网页设计提供参考。

Web标准；XHTML；DIV；CSS

随着计算机及网络技术的发展，Web技术应用几乎渗透到了各个领域，如门户网站、电子商务、博客等。网页的规划、设计、开发和维护也不断规范化、标准化，其中 Web标准是目前所关注的焦点。近年来，随着越来越多的浏览器和设备对该标准提供支持，Web标准已经成为当前设计的主流模式。

（一）Web标准

1.Web标准的组成

Web标准是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三方面：结构化标准语言主要包括 XHTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。结构决定了网页“是什么”，表现决定了网页看起来是“什么样子”，而行为决定了网页“做什么”。图1为结构、表现、行为的关系图。

图1 结构、表现、行为的关系

2.Web标准的优点

从浏览客户端的角度来看，基于 Web标准构架可以提高文件下载与页面显示速度，为浏览者节约带宽；内容能被更广泛的设备所访问，包括屏幕阅读机、手持设备、搜索机器人等；内容能被更多的用户所访问，包括失明、视弱、色盲等残障人士；由于结构和表现分离，用户能够通过样式选择定制自己的表现界面；所有页面都能提供适于打印的版本。

对于网站服务器端而言，由于结构和表现分离且更少的代码和组件，网站维护更容易，也更容易被搜寻引擎搜索到；代码更简洁，从而有效降低带宽占用，提高网站访问速度；清晰合理的结构，提高了网站的易用性；兼容性强，当浏览器版本更新或者出现新的网络交互设备时所有应用能够被继续正确执行。

（二）基于Web标准的网页设计

1.合理运用结构化标记XHTML

XHTML( The Extensible HyperText Markup Language，可扩展超文本标识语言)，目前遵循的是W3C、2000年 1月26日推荐的XML1.0。XHTML是一种为适应XML而重新改造的HTML，建立 XHTML的目的就是实现 HTML向XML的过渡。尽管目前浏览器都兼容HTML，但是为了使网页能够符合标准，设计者应该尽量使用XHTML规范来编写代码。使用XHTML规范需要注意以下事项：

（1）标签必须闭合。

（2）所有标签名称必须小写。

（3）所有标签属性必须使用引号。

（4）标签必须合理嵌套。

（5）特殊符号编码表示。

（6）所有属性必须赋值，没有值的就重复本身。

2.具体页面设计

（1）效果图设计

根据网站需求并通过图形图像软件实现最终设计效果。将效果图切片导出，并整理为网站素材待用。DIV+CSS 排版技术能较好地实现WEB标准中信息内容与表现相分离的思想,是当前页面布局的主流技术。根据DIV+CSS布局思想对效果图进行DIV块划分，如下图2所示：

图2 页面设计及各DIV块划分

（2）结构设计

DIV标签是XHTML中指定的、专门用于布局设计的容器对象。使用 DIV可以合理地标识出我们的内容区域，使得整个网页的内容结构清晰地呈现出来。为了给后续步骤中的 CSS留下接口，可适当地给DIV标签指定一个id或class。根据图2，我们可以为页面结构设计如下代码：

＜div id="wrapper"＞ ＜!--整个页面容器--＞

＜div id="header"＞页面顶部＜/div＞

＜div id="menu"＞菜单＜/div＞

＜div id="banner"＞页面 banner＜/div＞

＜div id="center"＞ ＜!--页面主要内容--＞

＜div id="sideleft"＞页面左边盒子＜/div＞

＜div id="mainbox"＞页面主盒子＜/div＞

＜div id="sideright"＞页面右盒子＜/div＞

＜/div＞

＜div id="footer"＞页面底部＜/div＞

＜/div＞

（3）表现设计

CSS(Cascading Style Sheet，层叠样式表)是一组格式设置规则，用于控制Web页面的外观。通过CSS我们可以对各个 DIV标签的表现样式进行设置，包括显示区域、位置、背景、文字格式等。通常将这些 CSS代码保存在一个独立的 CSS文件中，以外部链接的方式链接到页面当中，实现真正的内容与表现形式分离。当需要对网页的外观进行修改，则只需要修改 CSS文件，从而提高网站的开发和维护效率。具体CSS代码如下：

* {margin:0px; padding:0px; }

body {font-size:12px; color:#666;

background:#84929D;}

#wrapper { width:850px;margin:0px

auto;background:#FFF;}

#header { width:850px; height:60px;

position:relative;}

#menu { width:850px; height:32px;

text-align:center;background-color:#014D7E;}

#banner {width:850px; height:200px; margin:4px auto

10px auto; background:#3B91C0;}

#center { width:850px;}

#sideleft {width:200px; float:left;}

#mainbox {width:440px; margin:0px 10px;

float:left;}

#sideright { width:180px; padding-top:9px;

padding-left:8px; height:385px; float:left;

border: #B2C8D5 solid 1px;}

#bottom {width:850px; height:80px;}

.clear {clear:both; width:0px; height:0px;

overflow:hidden; }

（4）行为设计

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，常用于HTML网页添加动态功能，比如响应用户的各种操作。JavaScript客户端应用程序一般是通过JavaScript语言来操作DOM（文档对象模型）对象，改变网页元素的属性和行为。常见的有下拉菜单的实现和样式切换，如本页面使用的一种下拉菜单的JavaScript代码：

＜script type="text/javascript"＞

function displaySubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];subMenu.style.display = "block";

}

function hideSubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];

}

＜/script＞

（三）应用Web标准进行网页设计的探析

1.使用正确语义的结构化标记

当我们讨论 Web标准时，一些事情总是被提及，那就是结构和表现分离。结构与表现分离的一个重要方面就是使用语义化的标记来构造文档内容。

首先，在 XHTML中每个标签都有它特定的含义。比如h1-h6 表示1-6号标题，p表示文本段落，div表示区块等。使用正确语义的结构化标记是为了让浏览器、拼写检查程序、翻译系统以及搜索引擎分度器更好地解析执行，并呈现有意义的页面。

其次，语义化结构网页对搜索引擎友好。有了良好的语义结构，网页内容自然容易被搜索引擎抓取，网站的推广便可以省下不少的功夫。

2.W3C校验的必要性

Web标准的本意是实现结构和表现分离，这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。W3C校验仅仅是帮助检查XHTML代码的书写是否规范，CSS的属性是否都在 CCS的规范内。W3C校验是为了精简我们的页面代码，使得任何浏览器和网络设备都能正常浏览，从而提高我们的网页设计工作更有效率。

3.DIV+CSS和传统的TABLE

table可以容纳文字、图片、链接、表单以及其它元素，但是 table 不应该用来进行网页布局。table网页布局主要有以下几个缺陷：代码臃肿、页面渲染性能问题、不利于搜索引擎优化、可访问性差、不够语义。

DIV标签是用来为HTML文档内大块（block-level）内容提供结构和背景的元素，是 XHTML中指定的、专门用于布局设计的容器对象。Web标准的本意是实现结构和表现分离，而DIV+CSS技术能较好地实现这种理念。DIV+CSS布局不是简单地将原来的table用div来替代，原来的表格嵌套换成DIV嵌套，而是可以很好地将结构和表现相分离的一种页面布局技术。

当然我们也不能抛弃table，否则将会走入另一个极端。table语义上是一个表格，主要用于数据表示，在Web标准中仅用其展示数据列表的本意。在页面布局上我们还是首选DIV+CSS，但不管使用什么排版技术，都应该将内容与表现分离。

（四）结束语

使用 Web标准设计与制作的网站，由于采用符合语义的表现结构且表现和内容相分离，不仅能使网站取得理想的视觉效果，提高程序的可读性，且文件大小、代码量得到了有效的精简，网站维护更为方便。而DIV+CSS能较好地实现Web标准的理念，已经成为当前网页设计的主流技术手段。尽管Web标准还需要完善，但基于Web标准的网页的内容信息更加容易理解、执行、交换和共享，所以 Web标准势必成为网页设计应用的趋势，值得我们不断地研究探讨。

[1] 徐勤勤.我国政府信息门户网站建设现状及重构[J].农业图书情报学刊,2007(1):7.

[2] 张兴竹.基于 WEB标准的网站构建方法探讨[J].福建电脑,2010(4):72.

[3] 林晖.基于 WEB标准网站建设模式的探讨[J].中国科技信息,2009(20):88.

[4] 温谦,赵伟,胡静,李占波.网页制作综合技术教程[M].北京:人民邮电出版社,2009,5.

TP391

A

1008-1151(2011)06-0048-02

2011-03-25

江家龙（1981－），男，广西宾阳人，广西工商职业技术学院现代教育技术中心教师。