从技术视阈谈购物页面设计

1、引言

2010年三月我国首个IT职业技能标准[2]颁布，电子商务是IT单独职业种类，市场数据也显示我国的电子商务发展速度迅速，从事电子商务及相关行业的人才需求量倍增，各企业、单位都需要一种适合自己的电子商务网站在互联网上展示自己、销售企业的商品，事实上小型网站构成了互联网内容的大部分内容，购物网站的设计是非常典型的工作任务，因此我们以网上淘宝小店为例，介绍CSS技术与DHTML结合制作网页的技术。

2、CSS技术的优势

目前通常有两种网页设计技术：早期流行的Table网页布局技术、目前市场推行的符合Web开发标准的“CSS+DHTML”技术。两种技术各有自己的特点，早期流行的Table技术进行网页布局已经有很长的历史和较成熟的技术规范，现在仍然可以看到很多Table技术设计实现的界面良好的网站，但其存在的突出缺点是无法实现页面的内容和修饰分离，导致改版困难；页面代码的语义不明确，导致数据利用困难；另外页面内容要等表格中的内容加载完后才能显示，导致加载速度慢；基于上述原因，出现了一种新的页面样式技术——CSS技术，它将页面内容与页面样式分离，页面结构采用DHTML技术，通常使用页面分块标记DIV进行页面框架区域的划分，页面的样式则是通过CSS定义页面各元素的样式效果。其优点是网站设计代码规范、简洁，增加了关键字占网页总代码的比重，实现了搜索引擎的优化。自2005年以来，Web2.0的提出和应用给IT界带来了新的技术革新。

3、购物网站制作

3.1网页整体效果设计

制作一个页面的一般步骤是：首先分析效果图，然后切图，最后制作成XHTML页面。所谓效果图，就是网页设计人员用Photoshop等图像制作软件制作的显示网页整体效果的图片。本例的网上商店主要以实现商品的搜索、购买为主，该类网站的特点是界面简单大方，能够实现商品的分类快捷查询。结合商品多样的特点，考虑到页面清新、大方的基调风格，我们采用浅蓝色为主色调，效果如图1购物网页整体效果所示。

3.2分析页面架构

页面内容繁多，为使页面整齐大方，我们需要首先确定整个网页的框架结构[1]，划分页面的分块：#heade（r页面头部）、#menu（导航条）、#left（左侧的导购信息）及#pic（主体部分的商品展示）等。页面整体框架见图2页面框架结构。图2页面框架结构通过采用DIV分块标记，将页面划分成几个大的分块，形成页面整体框架[1]。定义页面结构，代码如下：<!---页面容器--><divid="container"><!--页面头部：banner图片--><divid="header"></div><!--导航条--><divid="menu"></div><!--分类商品展示开始--><!--左侧导航条--><divid="left"></div><!--商品图片展示--><divid="pic"></div><!--版权区开始--><divid="footer"></div><!--containe容器结束--></div>基于页面的结构性的代码设计好后，紧接着需要做好的便是如何通过CSS样式技术精确控制页面元素的位置，完成页面良好的版式布局。本页面难点在于#header块、#pic块采用左右并排的版式布局，为实现这种布局，需使用非常重要的一个属性：float浮动属性。具体步骤：将两个块#left、#pic的float属性设置为left，使其成为浮动层；其位置相对于父层#container。设置两个块的合适宽度，这两个块的宽度累加和<=父层container的宽度。float属性与width的结合使用保证三个块在水平方向上呈现左中右版式，代码如下：#left{/*左侧导航条*/height:auto;width:185px;float:left;/*左浮动层*/border-right:solid2px#00CCFF;/*边框线*/padding:0px;/*填充间距*/}#pic{/*图片展示块*/padding:0px;/*填充间距*/float:left;/*左浮动层*/width:730px;}页面其它块的结构定义较简单，可以参考写出，另外页面常用的另一种版式布局是左、中、右版式布局，可以用float属性与width属性的结合定义，原理是一样的。

3.3图片电子相册制作

购物网站商品展示占据页面很大篇幅，也是非常普遍的一个内容，这里以实现图3商品展示为例简单介绍图片电子相册的制作。网页上展示多种商品，商品的排列版式要整齐，某种具体的商品信息很多，如：商品名称、价格、特色等，这些信息一般换行显示在商品图片的某个方向上，如上图3显示在图片的下方；根据显示样式采用UL无符号列表结构结合CSS样式技术实现。下边以某种商品的展示为例说明电子相册的制作：【步骤1】商品内容的结构定义——XHTML技术<!--商品1--><divclass="ls"><ahref="http://"><imgsrc="#"></a><ul><liclass="title">手提包</li><liclass="price">￥150</li></ul></div>【步骤2】商品样式定义——CSS技术/*商品展示定义*//*每种商品所占区域*/.ls{float:left;height:auto;width:auto;}.lsul{height:auto;width:120px;list-style:none;border-bottom:1pxsolid#a7d5ff;margin:3px0px0px3px;padding:0000.5em;background-color:#CCCCCC;}/*每种商品照片尺寸、位置等属性定义*/.lsimg{height:120px;width:140px;margin:20px35px0px3px;border:1pxsolid#82c3ff;}/*每种商品的价格不同颜色显示*/#picli.price{font-size:12px;color:#FF9900;}

【说明】

商品的展示又称为“商品电子相册”，定义其CSS样式基本思路是相同的：先完成某种商品的样式定义：商品详细信息的定义用UL无符号列表与CSS技术的结合进行定义，图片的样式单独定义：图片位置、尺寸等。对页面所有商品逐一套用商品的样式格式，完成商品图片的格式化的定义。

4、结论

采用“CSS+XHTML”联合技术设计网页是目前乃至今后网页设计的主流发展趋势，要熟练掌握“CSS+XHTML”联合技术，没有别的捷径可走，多实践、多做几个中型规模以上的网页，熟练掌握“CSS+XHTML”网页设计的两个步骤：（1）XHTML技术完成网页的框架结构、元素位置的定义；（2）CSS技术完成网页具体元素的样式定义。