Web标准的电子商务网站网页设计研究

文／王亚辉

摘要：本文以Web标准为基本思想，阐述了针对电子商务网站网页设计的思想和策略，探究了一套紧随时代需求的网站设计流程。

教育期刊网 http://www.jyqkw.com
关键词 ：Web标准；电子商务网站；网页设计

引言

随着计算机网络技术的迅速发展，网站的网页设计布局也显得越来越复杂，在专业技术上的要求也越来越综合。同时，电子商务在这样的潮流下飞速发展，但电子商务网页设计却成了阻碍电子商务发展的一个重要因素，在这样的形势下，电子商务网页设计与制作就需要有专业的技术来实现，仅仅依靠传统的网页设计技术已不能满足时代的需求。目前，基于Web标准的网页设计思路已成为网站开发的主流，以Web标准为基本思想探究出一套有效的、紧跟时代步伐的设计流程，同时针对电子商务领域研究有效的网页设计策略。

1、关于Web标准的主要技术

1.1 什么是Web标准

Web标准不仅仅是一个标准，而是一系列标准的组合。一般的网页都由三个部分组成，即结构、行为和表现，而这三个部分中结构对应的标准为XML和XHTML，行为对应的标准为对象模型等，表现对应的标准为CSS。

① 结构

其中的主要技术包括可扩展超文本标记语言（XHTML）和可扩展标记语言（XML），主要应用在对网页数据的分类以及整合方面。在这两个标准中，XML是一种源语言，它能够让用户对自己的语言进行标记定义，其具有的数据转换能够相对来说比较强大，而XHTML在性能上结合了超文本置标语言（HTML）的简单特性，同时，它还使用了XML的强大的功能系统，在语法上相对来说也比较严格。

② 行为

其中的主要技术包括ECMAScript和对象模型（DOM），主要应用在交互操作网页文档方面。ECMAScript能够有效的实现界面上操作对象的交互操作，而DOM能够定义、修改以及表示文档所需的对象、所需的对象的属性和行为，同时还能处理这些所需的对象之间的关系。

③ 表现

其中的主要技术是CSS，即层叠样式表，主要应用在对浏览器的显示控制方面。CSS控制的表现与XHTML决定的结构相分离，主要用来设计网页的风格。

1.2 Web标准下的网页设计流程

Web标准下的网页设计流程主要包括语义结构定义、网页内容添加、CSS美化网页以及添加动态元素四个部分。

语义结构定义：进行这个部分时，需要我们能够根据网页上的设计图，对我们所需要的DIV层块进行进一步分析，同时也要分析各个层块之间的相互关系，为达到一个好的访问速度，DIV层块应该小于等于三层。

网页内容添加：在第一步中定义好语义结构后，然后根据网页设计图添加内容，并且在每一个层块添加合适的网页内容，其中包括添加文字、图像、表单、列表等。

CSS美化网页：在进行网页设计时，需要使用CSS对网页的整个页面进行布局，其中包括在页面中加入边框和背景等；同时，还需要使用CSS的相关设置，其中包括字体和大小等。

添加动态元素：在网页中添加动态元素时，需要根据网页设计图对各个方面的要求，利用JavaScript技术完成网页中动态元素的添加，包括添加导航菜单、焦点图及其它动态元素等。

2、电子商务网站网页设计所需要的技术

随着互联网科学技术的飞速发展，越来越多的企业应用互联网技术推动了企业的发展，人们的生活方式也受到互联网的影响。在这样的背景下，电子商务也逐渐发展壮大，而电子商务网站网页设计就成了相对重要的一部分，网页设计是以网络为载体，把一些对人们有用的信息方便快速的传达给他们。在进行电子商务网站网页设计时，整个过程都要用到大量的电子商务设计软件，而设计的过程又需要计算机技术作为基础。

在研究基于Web标准的电子商务网站网页设计时，在设计过程中需要有缜密的思想来进行设计的每一个流程，然后开发网上商店系统，以达到对网店实行有效的管理以及扩展网店的业务。在Web的标准下，网页设计者能够有效的将网页结构划分清楚，这样就能够提升电子商务网站网页开发的效率，同时还能够尽可能的降低网页设计成本。

3、电子商务网站网页设计过程

在设计电子商务网站网页时，可以按照下面的流程进行：内容分析、结构设计、方案设计以及表现设计。

第一，内容分析：即通过了解需要展示在网页上的具体内容，清楚各内容所具有的逻辑关系，最后分清楚各个内容的重要程度从而合理安排位置。第二，结构设计：即根据内容分析得出的相关结论，找到合理有效的网页布局，从而设计出好的XHTML结构。第三，方案设计：使用好的美工设计软件，设计出一个能给人视觉带来享受的网站页面设计图。第四，表现设计：表现设计又可分视觉设计和布局设计，视觉设计即是使用CSS美化网页的方式，同时配合美工设计元素，将设计方法转化为网页的方式。布局设计即是通过使用CSS和XHTML对网站页面进行布局设计。

3.1 内容分析

一个电子商务网站能否起到吸引客户的效果，取决于这个电子商务网站网页的布局是否清晰明了，能否给人一种视觉上的享受。网页设计就是一种视觉语言，对布局和色彩的搭配要求很高，要求网站的主页也能给人一种美的享受，其它网站页面的布局也应该与主页相协调。电子商务网站中网页布局形式多种多样，有“厂”字型、“国”字型、“封面”型以及经济“框架”型等。

3.2 结构设计

为电子商务网站开发网页时，网页中展示的有突出核心的业务区，也有展现其它功能的区域，整个网页开发完成后，用户可以在后台进行可视化的操作，同时，用户还可以创建属于自己的个性化的网页。在设计电子商务网站网页时，框架是整个网页的核心部分，它决定了整个网页的整体布局效果，框架一般都是HTML格式的文件，它能够将页面划分区域。

在制作电子商务网站时，首先要在硬盘上新建一个文件夹，并把这个文件夹作为网站的根目录，最后将这个目录上传到服务器上就行了。一个网站就对应一个磁盘上的文件夹，设计网站所需要的全部资源以及所有网页都放在这个文件夹里面。

3.3 表现设计

在设计好网页和它的结构后，可以使用CSS为网页文档添加样式。首先要将已经设计好的方案中的网页图片分离出来，然后使用CSS为其添加合适的样式，在进行这个操作的整个过程中，涉及到CSS的布局以及背景图片应用，在使用CSS时，可在网站的前台观察到网页的板块区域，板块区域的个数会根据有设计的电子商务网站的类型不同而有所变化，这个过程是由CSS规则确定的，并且整个框架结构是由HTML文件确定的。这样设计的网站，可以在其后台进行可视化设计，向所需要的区域添加好的插件等，这样网页表现出来的画面效果更好。

4、结语

随着时代的发展，人们不再满足于单调的生活模式，在这样的背景下，互联网技术慢慢融入到人们的生产与生活中去，这就使得方便人们生活的电子商务逐渐发展起来。目前，大多数人的生活开始与电子商务紧密联系在一起，而电子商务的网页设计的好坏直接关系到整个电子商务模式的运行。因此，研究基于Web标准下的网页设计技术成为了电子商务门户的重点，这样才能有效的提升电子商务网站的性能以及开发效率。

教育期刊网 http://www.jyqkw.com
参考文献：

[1] 朱淑琴，魏威，张嘉萌. 基于Web标准的电子商务网站网页设计与制作[J]. 计算机与现代化. 2012(15),30-32.

[2] 王猛. 基于用户情感需求的电子商务网站首页界面设计研究[D].东北大学. 2012,18-23.

[3] 沈乐. 基于用户体验的电子商务网站设计研究——以在线数码印刷为例[D]. 华东理工大学. 2012,16-20.

作者简介：王亚辉，讲师、工程师，晋中职业技术学院，主要研究方向为网页、网络。