米乐·M6（中国）官方网站

商务页面设计技术解析米乐M6 米乐

发布时间：2023-06-03 00:27:31 丨 浏览次数：766

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

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

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

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

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

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