商务网站设计与管理

电子商务网站设计与管理电子商务网站概述电子商务网站的体系结构电子商务网站

是一种典型的基于Web的分布式、三层应用体系结构，应用逻辑与用户界面和数据存取明显的分离出来，客户端的用户界面与服务器端数据存取隔离开来1、电子商务网站的构成要素网站的域名及地点网站的页面商品目录购物车、付款台、商品配送计数器、留言板会员管理商品库存管理2、电子商务网站的分类按复杂程度分为初级电子商务网站中级电子商务网站高级电子商务网站按构建网站的主体分行业电子商务网站企业电子商务网站政府电子商务网站服务机构电子商务网站商务网站的设计要求及特点简单实用页面下载速度快易于导航和使用提供搜索引擎和/或网站地图联系信息方便多样设计易于更新的工具符合网络伦理兼容多种浏览器无错误链接强大的并发处理能力要有良好的容错性能可扩展性强要有安全性好要有强大的后台支撑电子商务网站的体系结构浏览器Web服务器Web应用服务器数据库服务器企业信息系统数据存取层应用逻辑层用户界面层HTTP应答HTTP请求电子商务网站的服务对象新浪网的服务对象是谁？如何定位的？服务对象可能是：

供应商、顾客（大客户、政府部门、一般顾客）网站资源有限，必须整合聚焦服务如何识别网站的服务对象？

确定访问者范围确定访问者目的分为内部访问者和外部访问者外部访问者（企业）访问对象

潜在客户、供应商、政府、其它组织和个人竞争者、投资者、债权者客户：了解产品信息、订购、反馈供应商：了解公司产品计划、分析库存竞争者：了解公司战略和经营情况过客：值得访问信息（针对潜在客户）内部访问者（企业）经常被忽略，仅限于参与建设部门按照价值链和业务流程确定制造部：了解客户对产品评价研究部：了解客户的偏好市场部：利用反馈信息制定特别促销方案财务部：了解客户定货和回款情况采购部：了解客户对产品（原料）评价网站设计与管理的基本过程1、网站的策划建站目的与目标可行性分析资源规划2、网站运行环境的建立域名注册建站方式的选择Web服务器的构建3、网站的设计与制作网站总体设计网站内容与结构设计网站可视化设计网页的制作4、网站管理系统的建立文件管理系统客户管理系统商品管理系统5、网站的测试、推广与维护网站的测试网站的营销推广网站的日常更新与维护网站建设总体策划本章要点：确定电子商务网站的构建目标网站的主题与定位电子商务网站的资源规划网站的建设流程与进度安排一、建站的目的与目标1、企业建立电子商务网站的目的宣传与推广交流与沟通提供在线信息咨询与技术支持实现网上的商务交易提高企业内部、外部业务的信息化水平如何确定访问目的讨论会（类似市场调查）借鉴同行成熟网站网上测试识别不同目的的重要性（主要目的、次要目的）识别访问目的背后的潜在需求确定网站目标（1/2）公司的任务或目标（Why）尝试性、补充（辅助）、转型（战略调整）网站的近期目标与远期目标（海尔）信息查询-》产品展示和订购-》网上交易-》

网上经营管理（数字化企业，与内部信息系统整合）网站访问者

根据不同阶段确定不同访问对象，以订购为例，分为组织和个人。根据地域、经济、文化，以及年龄、性别、收入等细分（Dell分为大、中、小企业客户）确定网站目标（2/2）确定为访问者提供的信息

时效性：及时更新（国内网站很少更新）准确性：明确无误（多为非专业人员制作）丰富性：详细真实（多媒体）相关性：增加信息使用效果（相关链接）便捷性：使用方便，按顾客导向可行性：考虑成本/效益，信息成本最低2、企业网上业务可行性分析研究自身商务需求确定网上业务根据商品特色、行业特点选择网上开展的业务3、目标客户分析目标客户基本状况分析性别、年龄、文化程度目标客户心理分析：来去匆匆、希望免费、对网络的不信任、喜欢点击4、市场定位分析竞争者分析销售区域性与潜在性分析消费层次与需求特征分析5、确定目标组织的任务与目标是的确定网站的近期目标与远期目标的确定确定访问者确定网站的服务领域与对象确定网站的赢利方式确定本网站的特色与风格二、建站策略1、网站的定位定位于人与定位于物构建网站文化，吸引目标客户服务为本，互动创新2、网站的主题网站的主题应集中、概括反映企业经营理念与服务定位网站的主题要有感召力三、资源规划1、人力调配系统策划师网站设计师程序员美工师录入员项目经理2、费用预算域名费用ISP接入费服务器硬件及网络设备费托管费用与租用虚拟主机费系统软件费用开发与维护费用网站的市场推广与经营费用四、进度规划1、网站建设流程设计策划阶段初步建设链接阶段交互阶段数据库阶段对外阶段商业阶段应用阶段资本运营阶段更新阶段2、制定时间表网站建设各项工作内容及时间安排月度和年度工作安排时间规划网站各工作人员工作内容及其时间安排工作人员讨论交流会时间安排网站的运行环境见第五章内容网站总体设计本章要点：网站CI形象设计网站的内容设计网站的总体结构网站的目录结构与链接设计网站的整体风格和创意设计一、网站CI形象设计CI:企业形象。CI设计主要指网站的标志、色彩、字体、标语等。1、网站标志、名称设计网站有代表性的人、事、物专业性网站的代表性物品英文名称作标志网站名称要合法、合理、合情2、设计网站的标准色彩标准色彩：指能体现网站形象和延伸内涵的色彩。一般地，网站的标准色彩不要超过3种标准色彩要用于网站的标志、标题、主菜单和主色块。3、设计网站的标准字体标准字体：指用于标志、标题、主菜单、主体内容的字体。不常用字体最好通过图片形式显示网站标志、名称网页配色宣传型电子商务网站实现网上商务交易的电子商务网站企业信息化的电子商务网站网站结构图

客户端技术HTML技术JavaScript技术CSS技术XML技术WAP与WML技术DHTML技术服务器端技术ASP技术PHP技术JSP技术Web编程回顾HTMLHTML纯静态网页HTMLHTML静态站点与数据录入处理和制表系统到系统的基于互连网的应用数据库HTMLHTML动态生成复杂简单文档中心的应用中心的数据库HTMLHTML查询记录通过站点的动态数据访问二、网站的内容设计1、网站的功能与类型选择电子商务网站的类型基本型：具备基本电子商务功能，可实现产品展示、公司宣传与客户服务，适用于初尝电子商务的小型企业。一般搭建在公众电子商务平台上，性价比较高宣传型：目的是通过网站宣传产品或服务项目，提升公司形象，拓展市场，适于各类企业。客户服务型：目的是宣传公司形象与产品，并达到与客户实时沟通及为产品或服务提供服务支持，从而降低成本，提高效率。适于各类企业。完全电子商务型：目的是通过网站宣传公司整体形象，推广产品与服务，实现网上客户服务与产品的在线销售，为公司直接创造利润、提高竞争力，适于各类有条件的大、中型企业。如：海尔网站静态内容》一般、常规信息：公司的历史、文化等》修改较少，初期建设注意规划动态内容》公司产品和服务有关信息，促销信息》经常修改，保持网站的吸引力和作用完全电子商务网站的基本功能企业形象宣传产品展示商品与服务的在线订购顾客关系与服务新闻、信息发布网上调查销售业务信息管理2、网站的信息设计网站的信息应完整、真实、准确、合法，并应及时更新。企业应制定互联网信息发布的审核机制分为主要功能和辅助功能主要功能》信息发布、网上交易（海尔）辅助功能》配合主要功能而设置的。如客户注册管理(8848)功能确定原则》内容与功能统一，功能满足顾客需求（如退货）三、网站的总体结构主页产品展示关于我们网上销售在线服务网站管理信息发布企业简介企业动态业务联系产品分类产品目录产品简介产品详情分类查询品牌介绍新品推介产品查询用户注册购物车订单查询电子合同交易证书下载FAQ在线提问售后服务技术支持用户反馈信息展示信息查询客户资源管理产品管理供应商管理交易管理新闻管理访问分析技术支持管理超级用户管理四、网站的目录结构与链接1、目录结构设计不要将所有文件都存放在根目录下按栏目内容建立子目录在每个主栏目内部建立独立的images目录目录层次不要太深不要使用中文目录名不要使用过长目录名尽量使用意义明确的目录名2、网站的链接结构

树状链接结构：条理清晰，但效率低

星状链接结构：浏览方便，但链接太多，不易导航，一般在页面顶部增加导般条，如：

当前位置：首页->产品信息->松下产品注重链接的个性化与相关性一级页面二级页面企业新闻页—新闻1，新闻2首页—产品信息页—产品1，产品2技术服务页—服务1，服务2五、网站的整体风格与创意1、风格的内涵风格（Style）是指站点的整体形象给浏览者的综合感受。2、风格的确立明确网站的风格使网站的标志尽可能出现在每个页面突出网站的标准色彩突出网站的标准字体使用统一的图片处理效果使用统一的符号、线条与图标3、创意设计网站的创意创意思考的过程准备期

孵化期

启示期

验证期

形成期创意思考的途径1.把它颠倒2.把它缩小3.把颜色换一下4.使它更长5.使它闪动6.把它放进音乐里7.结合文字音乐图画8.使它成为年轻的9.使它重复10.使它变成立体11.参加竞赛12.参加打赌13.变更一部分14.分裂它15.使它速度加快16.使它对称等网站静态页面设计本章要点：主页设计栏目与版面设计页面可视化设计静态网页制作技术一、主页设计1、确定主页的功能模块网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息等2、主页版面设计勾画草图—软件实现vioso20023、处理技术上的细节风格、链接、图形、动画、文字、速度二、栏目与版面设计1、栏目设计栏目设计应紧扣网站主题设计一个最近更新或网站指南栏目设计一个可以双向交流的栏目设计一个下载或常见问题解答栏目大型网站可根据需要设置子栏目联系及版权信息等辅助信息不要放在主栏目、版面设计版面布局原则主次分明，中心突出大小搭配，相互呼应图文并茂，相得益彰版面布局常用方法正常平衡异常平衡对比凝视空白图片解说正常平衡异常平衡对比凝视空白图片说明版面布局步骤轮廓设计布局设计细节设计版面布局形式“T”形结构布局“口”形布局“三”形布局对称对比布局“国”或“同”字形拐角形框架布局Flash动画型，封面型“T”结构布局。所谓“T”结构，就是指网页上边和左边相结合，页面顶部的横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，这是网页设计中用的最广泛的一种布局方式优点：信息能被用户最大限度的获取，而且很方便；其次是页面结构清晰，主次分明、易于使用。缺点：规矩呆板，让人“看之无味”。“口”型布局。指页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要内容。优点：页面充实、内容丰富、信息量大；缺点：页面拥挤，不够灵活。“三”型布局。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。对称对比布局。优点：视觉冲击力强；缺点：将两部分有机地结合比较困难。POP布局。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。优点：漂亮吸引人；缺点：速度慢。三、页面可视化设计1、色彩设计色彩的基本知识三原色原理色彩搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置网页色彩设计网页配色的基本方法底色和图形色整体色彩颜色的平衡配色时要有重点色渐变色的调和统调配色分割配色网页色彩设计网页内容的色彩网页标题色导航菜单色侧栏色页脚色网页色彩搭配的技巧暖色调冷色调对比色调2、字体设计3、导航设计突出超链接链接层次不宜过深“上一页、下一页，转到N页”的使用“返回”及“回首页”的使用4、图像设计图像的格式与大小大小：单张30KB，单页60KB，较大图像应进行“切割”图象的格式：GIF、JPEG图像设计技巧为图片加入说明缩略图的使用图片的更新透明色的使用慎用网页背景图片5、动画设计GIF动画与Flash动画四、静态网页制作技术1、HTML语言：HyperTextMarkupLanguage，中文名“超文标记语言”特点：通过“标记”描述页面元素（文本、图片、动画、音乐、影片等媒体）的显示方式源文件为纯文本文件，无需编译，通过浏览器解释运行一个HTML文件（*.htm，*.html）对应一个Web页具备各个Web页面可以通过“链接标记”实现“超级链接”2、客户端Script脚本语言Script：脚本，一段嵌在HTML源代码中的小程序JavaScript：Netscape公司开发VBScript：Microsoft公司开发的，是VB的一个子集3、CSS技术CascadingStyleSheets，层叠样式表功能：实现网页数据的编排、格式化显示及特殊效果，以弥补HTML在格式化网页数据方面的不足请利用PhotoShop或Fireworks或其他图像设计软件为网上书店进行主页设计。附：网站设计基础语言HTMLHTML简介HTML的语法格式文件标签版式标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签一、HTML简介（1）HTML语法标记（标签）：以”<”、”>”括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：<body>、<p>、<h1>指向其他资源的标记：<img>、<a>例：这是<b>粗体</b>字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开如：<imgsrc=logo.gifwidth=520height=81>属性值属性名一、HTML简介（2）HTML页面文档的结构一个简单的HTML页面<html>

<head>

<title>HTML文件结构</title>

</head>

<body>

在这里显示文件的主体内容。</body></html>一、HTML简介（3）HTML标记的结构形态<标记>页面元素内容</标记>如：<p>这是一个文本段落</p><标记属性名=“属性值”>页面元素内容</标记>如：<fontcolor=“red”>红色字</font><标记>如：以内容下换行显示<br>第二行内容二、创建HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档：文件扩展名*.htm或*.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件—打开”菜单命令二、创建HTML文档（2）在浏览页面时修改HTML源文件执行“查看—源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）<html></html>标记：不是HTML文档必须，但最好保持文档的完整性<head></head>标记：此标记中内容是提供给浏览器的，即文件头信息。三、文件标记（2）<body>标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或“no”，一般用于弹出式窗口三、文件标记（2）<title></title>标记：置于<head>区段，用于设定浏览器的标题<meta>标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性：

Name和content属性：指定“网页描述”类型及相应值

http-equiv和content属性：指定HTTP响应头标及相应值举例：四、排版标记功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：<!---->：注释标记<p></p>：段落标记<br>：换行标记<hr>：水平线标记<pre></pre>：预设格式标记<div></div>区段标记商务网站数据库设计的过程数据库的设计过程一般包括六个阶段：需求分析概念设计逻辑设计物理设计数据库实施和运行数据库的使用和维护B2C商务网站数据库实例一、示例B2C商务网站的数据流图会员注册会员数据商品采购会员网上订购商品数据订购商品明细数据结算结算数据客户端服务器端送货；更新商品库存数据（事务处理）货到付款信用卡支付(事务处理)财务数据二、确定数据表（逻辑设计）会员 （members）商品 （wares）商品类别（class）订单 （orders）订单明细（