商务页面设计技术解析

引言

伴随着互联网的迅速推广，愈来愈多的人得益于网络的发展和壮大，网络以其特殊的方式极大地改变着人们的生活方式。网页设计随着网络的发展而逐渐受到人们的重视，它本身以网络为载体，把各种信息以快捷、方便的方式传达给受众。据统计，目前国内网页设计从业人员已达300万之众，专业从事网页设计的公司、工作室也有十几万个，其间涌现出了许多优秀的网页设计作品。但是由于网页设计的发展在国内仅有不到二十年的时间，从整体上讲还不成熟，存在着许多弊病，如网页结构形式单一、内容空洞、页面混乱等问题。

1电子商务网站网页设计

电子商务网站是基于互联网，以交易双方为主体，以银行电子支付和结算为手段，以客户数据为依托的全新的商务模式，它可以使商家与供应商更紧密地联系起来，更快地满足客户需求，也可以让商家在全球范围内选择最佳供应商，在全球市场上销售产品。电子商务网站的网页设计在实施运作过程中起着至关重要的作用，优秀的网页设计不仅可以吸引顾客而且可以提升网站SEO排名，因此有必要对电子商务网站的网页制作进行深入探讨。SHOPEX是国内比较大的电子商务软件，SHOPEX网上商店系统可以快速建立个性化的网上商店，软件功能强大、全面、完善，更有多种辅助配套程序，结合使用这些配套程序可以大大提升网店管理效率。对于电子商务网站来说需要频繁更新网站信息，改变网页布局，更换商品展示，统一各个网页的风格，传统的网页制作技术已无法满足需要，必须采用基于Web标准的网页制作技术。

2Web标准的主要技术

Web标准不是某一个标准，而是一系列标准的集合。在Web标准里，网页主要由结构、表现和行为3部分组成。通过Web标准设计网页，可以很好地分离结构和外观，同时可以提高开发和维护效率，降低成本，使网站具有更好的可读性和良好的用户体验。Web标准的技术主要分为3方面:结构化标准语言XHTML和XML;表现标准语言主要包括CSS;行为标准主要包括对象模型W3CDOM、ECMAScript等。XHTML称为可扩展标识语言，主要由普通文本和标签组成，XHTML负责整个网页的文档和结构的创建，使用正确并且有意义的标签来标记文档，是整个Web标准开发过程的第一步，结构良好并且有意义的XHTML文档对于后面应用CSS样式和提高网站的易用性和可用性具有至关重要的意义。CSS是层叠样式表(CascadingStyleSheet，CSS)的缩写，它是Web标准化布局语言，可以控制颜色、版式设计以及元素、图像的尺寸和布局，CSS样式表由一个或多个规则定义组成，可以嵌入定义在XHT-ML文件中，也可以定义在单独的文件中。一个CSS定义由两部分构成:选择器和声明，而声明由属性和值两部分组成。

selector{property:value}

其中selector是选择器，花括号内的是声明，property表示属性，value是对应的属性值。如p{text-align:center;color:red}表示段落居中排列，并且段落中的文字为红色。CSS的作用是取代表格式布局，利用CSS和XHTML可以帮助网站设计人员分离网站的外观与结构，使网站的访问和维护变得容易。Web标准使用CSS技术将页面内容存放在HTML文档中，而用于定义表现形式的CSS规则即存放在另一个文件中或HTML文档的某一部分。根据W3CDOM规范，文档对象模型(DOM)是一种与浏览器、平台语言的接口，使得用户可以访问页面其它的标准组件。ECMAScript是ECMA(Euro-ean Computer Manufacturers Association)制定的标准脚本语言(JavaScript)，目前推荐遵循的是ECMAS-cript262标准。

3电子商务网站网页设计与制作过程

网页设计制作时按照如图1所示的流程进行:(1)内容分析。仔细研究需要在网页中展现的内容，梳理其中的逻辑关系，分清层次以及重要程度。(2)结构设计。根据内容分析的成果，确定网页布局，搭建出合理的XHTML结构。(3)方案设计。使用美工软件，设计出具有良好视觉效果的页面设计图。(4)表现形式设计与制作可以分为布局设计和视觉设计。布局设计使用XHTML和CSS对页面进行布局，实现网页布局;视觉设计使用CSS并配合美工设计元素，完成由设计方法到网页的转化。图1中给出了每个步骤中需要使用的相应工具和语言。

3．1内容分析

网页设计作为一种视觉语言，特别讲究编排和布局，合理的布局使得主页清晰、明了、内容充实。网页的版面布局主要指网站主页的版面布局，主页的设计应以醒目优先，令人一目了然，其它网页的版面应该与主页风格基本一致。常见的布局形式大致有“国”字型、“厂”字型、“框架”型、“封面”型等。本文开发的是以销售汽车用品为主的电子商务网站网页，由于商品种类繁多，应注重商品的导航及产品的展示。综合电子商务网站营销特色以及不同布局方式的结构特点，本文设计与制作的网页采用如图2所示的复杂的“框架”型布局，可以将页面分成许多部分，上面是头部。左边一栏显示纵向导航栏，右边一栏为商品展示平台。底部为网站的基本信息、联系方式、新手上路等帮助信息。网页模板的头部和底部出现在每一页的同一位置。其中网页头部设计如图3所示，头部最上面是顶部菜单;网站LOGO在最左边的醒目位置;右边是用户账户注册/登录;下面是与页面同宽的导航栏，导航栏列出公司产品的分类;导航栏下是搜索框，与搜索框同行显示的是购物车。

3．2结构设计

为SHOPEX网店系统开发的网页准确地应该称之为模板，模板将页面抽象成为不同的区块，有实现核心流程的业务区，也有实现展示和其他功能的板块。模板开发完成投入使用后，用户的大部分操作都在后台可视化进行，用户甚至可以通过拖放配置不同的板块，来创建属于自己的个性化的网页。在使用SHOPEX网店系统过程中，框架是页面的骨架，它决定了页面大体的布局和板块可摆放的区域，框架通常都是HTML文件，它的作用是将页面划分区隔，在适当的位置放置板块区(代码中的＜{wid-gets}＞)，以便用户在使用过程中可视化编辑时配置板块。板块区(＜{widgets}＞)是最能体现SHOPEX个性化的地方，通过更换板块内容实现网页更新，页面中的每个板块有唯一的一个id，一个板块区能竖向摆放一个或多个内容。这些板块作为独立的部分，可以通过切换不同的边框及编辑配置改变它的呈现样式。由于网页模板的头部和底部将会出现在每一页的同一位置，并且对于一个电子商务网站来说，头部的设计非常重要，因此一个功能完备、结构清晰的头部设计将会给一个购物网站带来很好的收益。图4为页面头部的框架。头部对应的HTML文件内容如下，从该文件能够看出来，头部共定义6个板块，每个板块由不同的CSS样式控制。…＜divid=″AllWrap″＞＜divid=″Top″＞＜divid=″TopMenu″＞＜divclass=″box″＞＜ul＞＜li＞＜{widgetsid=″top_c″}＞＜/li＞＜/ul＞＜/div＞＜/div＞＜divid=″user_box″＞＜{widgetsid=″top_a″}＞＜/div＞＜divid=″MenuButton″＞＜divclass=″menuButton″style=″display:inline;float:right;width:500px;left:400px;top:54px;″＞＜ahref=″＜{linkctl=″page″act=″index″}＞″class=″menuButtonone″＞所有分类＜/a＞＜ahref=″＜{linkctl=″member″act=″index″}＞″class=″menuButtontwo″＞所有品牌＜/a＞＜ahref=″＜{linkctl=″gift″act=″showList″}＞″class=″menuButtonthree″＞＜b＞gift＜/b＞所有车型＜/a＞＜spanclass=″menuButtontwor″＞＜/span＞＜/div＞＜divclass=″Logo″style=″display:inline;position:abso-lute;float:left;width:350px;″＞＜{widgetsid=″top_b″}＞＜/div＞＜/div＞＜/div＞＜divid=″Menu″＞＜{widgetsid=″top_d″}＞＜/div＞＜divclass=″secmenu″＞＜divclass=″mycar″＞＜divclass=″box″＞＜{widgetsid=″top_e″}＞＜/div＞＜/div＞＜divid=″Search″＞＜{widgetsid=″top_f″}＞＜/div＞＜/div＞＜/div＞

3．3表现设计

建立好文档的内容和结构后，接下来使用CSS为文档添加样式。首先将在方案设计中已经设计好的网页图片切割出来，然后为文档添加样式。在此过程中主要涉及到CSS布局、CSS盒模型、背景图片的应用、浮动和清除的应用，使用CSS中各种选择器以及层叠和继承。其中头部中顶部菜单对应的CSS样式为:#TopMenu*{padding:0px;margin:0px;}#TopMenu{position:absolute;right:0;top:0px;margin:0px;padding:0px;width:990px;}#TopMenu．box{height:29px;line-height:29px;float:right;background:url(topmenu_a．gif)repeat-xtopleft;padding-left:18px;}#TopMenua:hover{text-decoration:underline;}#TopMenub，#TopMenustrong，#TopMenuspan{color:#36c;font-size:13px;}由头部对应的HTML代码可以看出网页顶部菜单的设置由＜divid=″TopMenu″＞和＜divclass=″box″＞这两个标签控制。将顶部菜单的position属性设置为absolute绝对定位，它的绝对定位是相对于靠近它的祖先元素定位的，在头部HTML代码中可以看到＜divid=″Top-Menu″＞外嵌套着＜divid=″Top″＞，即TopMenu的临近祖先元素是Top，因此TopMenu的绝对定位是取决于Top的位置;将TopMenu的边界和补白均属性均设置为0px，TopMenu距离浏览器顶部和右侧的距离均为0px;TopMenu宽度设置为990px。将顶部菜单添加一个背景图像属性topmenu_a．gif，设置鼠标经过TopMenu时，显示文字下划线等效果。应用CSS样式后，从网站后台观察网页头部效果如图5所示，可以看到有6个空的板块区域，这是由HTML文件确定框架结构、CSS规则确定布局及表现形式。在网站后台进行可视化编辑，向各个空板块区域添加板块挂件，设置好网页内容后页面头部效果如图6所示。

4结束语

互联网开始慢慢渗入生活，电子商务网站随之孕育而生。电子商务网站的网页设计在电子商务实施运作过程中起着至关重要的作用，应用Web标准进行网页设计与制作是网站开发的有效方法和手段，能够提高开发效率，提升网站性能。本文以Web标准的关键技术和基本思想为基础，介绍了一套行之有效的网页制作开发流程，即内容分析、结构设计、方案设计、表现设计的过程，并按照此过程为基于SHOPEX的汽车用品网进行网页设计制作，这种开发方案在实践过程中得到很好的验证。