中小企业电子商务方案的设计与实现_第四章设计与实现_3

《中小企业电子商务方案的设计与实现_第四章设计与实现_3》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第四章设计与实现经过前面需发分析，明确了系统的任务和目标，按照规划所制定的技术路线和计划目标，进行设计，实现所要达到的功能。设计时首先要考虑网站的整体形象，包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。另外要考虑一个重要的因素就是网页色彩的重要性，色彩是在屏幕前浏览网页是给人的第一印象，色彩搭配要统一，要有层次感，用色不宜过多过滥，或者用一种具有不同透明度和饱和度的一种颜色，或者两种具有对比色的颜色，或者用一个色系。4.1企业网站建设在确定了公司企业网站是“企业形象＋电子商务功能”的设计目标

2、后，需要进一步明确网站功能，然后进行总体功能设计与详细设计，最后完成具体实现。4.1.1网站设计要求1．页面与企业文化、企业形象一致企业网站及其页面内容面向全世界开放，见网站如同见到企业产品，良好的界面会给客户或网民留下很深的印象。设计时网页必须把企业文化和企业形象蕴含其中，让人感受到企业文化的厚重，产品可信，质量可信。2．具有良好的可扩充性企业网站的建设一般不可能一步到位，随着企业的不断发展，新业务的展开，会有更多的事务需要借助企业网站来进行。因此，在设计网站时要充分考虑到可扩充性，不断补充、完善、更新和改造。303．高效率的并发处理能力浏览网站的用户无法准确地估

3、计人数，可能成千上万，在高峰期可能达到数百万，要求Web服务器具有并发处理能力，具有良好的排队机制，防止不堪承受大量的访问请求任务而宕机的意外情况发生。4．强大的管理工具为便于日常更新和维护网站，应该提供集中的管理工具，可在任一可上网的客户机进行管理。　5．企业信息化和信息资源相结合电子商务是以企业信息化为基础的，只有与此结合，挖掘和充分利用好信息资源，才能更好地发挥电子商务的长处，促进企业的不断发展。6．可靠的运行环境具有安全可靠的运行环境，防止非法入侵和攻击，确保网站提供7x24小时的优质服务，让用户满意，企业放心。　　4.1.2网站功能设计根据前面所作的系统分

4、析和总体规划以及实施方案，设计网站的栏目及其网站结构如图4.1．31图4.1网站页面结构初始界面由专业美工设计，是一幅经过特殊处理的图片，包含多个图形元素：绿色食品标志、商标、原产地标志、中英文页面按钮等，以此来表现企业形象、企业文化、产品特色。z公司首页：公司主页。z公司简介：简要介绍企业的一般情况，包括了文字、图片、动画等形式。z产品介绍：介绍了公司的最新产品，有文字、图片、动画等形式。z新闻中心：企业新闻、行业新闻等z意见反馈：对公司产品质量、销售服务以及网站、公司管理等提出意见。4.1.3网页页面设计1.页面布局页面指的是使用浏览器看到的一个完整的页面(可以

5、包含框架和层)。根据显示器分辨率的不同，—个页面的大小可能出现600×480，800×600，1024×768个像素的不同情况。布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。32设计网页布局时我们把页面看做一张报纸或一本杂志中的一页来进行排版布局。设计版面时要把文字、图片、空白当做一个整体来看，采用平面分割方式，调动全部面积来构建整个版面。常见的页面布局形式有“T”字型、“同”字型和“国”字型。公司网站的页面统一设计成“国”型布局，这种布局的优点是结构紧密，充分利用版面，信息量大，让浏览者感到稳重、可信赖。一个典型的页面如图4.2．图4.2网站页面2.

6、用层叠式样式表CSS（CascadingStyleSheets）即层叠式样式表，通过链接外部的CSS文件，用来统对页面格式、文字格式进行精确的格式化控制，更进一步规范网页的整33体风格。下面是一个外部CSS文件(css.css)的内容。BODY{background-image:url(../Images/bg_1.gifscrollbar-face-color:#C0C0C0;scrollbar-highlight-color:#C0C0C0;scrollbar-shadow-color:#C0C0C0;scrollbar-3dlight-color:#E0E0E

7、0;scrollbar-arrow-color:#333333;scrollbar-track-color:#E0E0E0;background-position:center;}td{font-size:9pt;color:#353535}body{font-size:9pt;}a:link{color:#000000;text-decoration:none}a:visited{color:#000000;text-decoration:none}a:active{color:#000000;text-decoration:none}a:hover{colo