基于Web标准企业网站网页设计及实现.docVIP

基于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菜单区块、