电子商务网站案例分析

1. 第 9章 电子商务网站案例分析 全书行文至此，一直遵循“一个中心，两个基本点”的 编写总原则，即以掌握电子商务网站建设技术为中心，以 学会必需的理论和实际动手能力为基本点。

2. 知识要点 听讲 认真 1．通过对“淘宝网”的分析，重点掌握大型电子商务网站的 创意设计； 2．通过对“易万贝”网站的分析，重点掌握中型电子商务 网站的整体规划； 3．通过对“尚志都市商城”的分析，重点掌握小型电子商务 网站的制作。

3. 四大技能 听讲 认真 1．网站开发高手成长的轨迹； 2．“淘宝网”的创意； 3．电子商务网站的结构规划； 4．“淘宝网”入门流程。

4. 学习方法 听讲 认真 本章没有理论知识，全部是案例分析，因此本章的学习， 要注意发散思维。通过学习本章的内容，可了解整个电 子商务网站的全貌，为自己创建电子商务网站打下坚实 的基础。要求如下： 1．对每一个案例，上网查阅类似网站，进行广泛分析； 2．认真学习每一个案例，领悟其中的精髓； 3．模仿每一个案例，制作电子商务网站。

5. 案例导航 听讲 认真 三个电子商务网站 三个人的人生轨迹 2003年5月10日“淘宝网”诞生于电子商务世家“阿里巴巴”，先天优越、“家 风”优良的“淘宝网”茁壮成长。5年后的今天，它已业绩显赫：2008年一季度， “淘宝网”注册会员超过6200万人，截至2008年1月，支付宝注册会员超过6300万， 覆盖了中国绝大部分网购人群；交易额突破188亿，2007年全年的成交额是433亿。 目前“淘宝网”已经是中国网民最喜爱的电子商务平台。 张宗新，名不见经传，却在孕育着又一个电子商务奇迹。1993年，正在读书的 毛头小伙子张宗新梦想创建一个著名的网络平台，父命难违的他却阴差阳错地进了 建设银行，当了一名网络管理员。2003年，他毅然辞职，狂热专注梦中的“她”，

6. 案例导航 听讲 认真 2008年他终于携“易万贝”闪亮登场，奥运之年虽然遭遇金融危机，他的梦想 也受到了影响，但他仍然满怀激情，因为他知道，“易万贝”底蕴深厚，必将走向 辉煌。草根张伟山，拖着病残的双腿行走在人生路上，曾以黑龙江省第一名的成绩 参加全国计算机大赛。一个普普通通的网民，不畏网络世界的风浪，不惧金融风暴 的肆虐，用自己的双手编织着电子商务创业梦。他的“尚志都市商城”虽然还没有 很大的名气，虽然还不是很完善，但我们却要第一时间去探究他的秘密，他的未来 一定会获得巨大的成功。因为我们和他们一样，有梦想、有激情，都在艰难的创业 路上一路前行。。

7. 第九章 电子商务网站案例分析 第一节 “淘宝网”案例分析 第二节“易万贝”电子商务网站案例分析 第三节“尚志都市商城”电子商务网站案例分析

8. 第九章 电子商务网站案例分析 第一节 “淘宝网”案例分析 第二节“易万贝”电子商务网站案例分析 第三节“尚志都市商城”电子商务网站案例分析

9. 1．建站目标明确 2．整体创意独特 B2C模式 3．模式创意 一、创意 4．功能创意 C2C模式 5．营销创意 6．内容创意 给网民以家的温馨 7．服务创意 为网民提供在线交流功能 便捷的功能让网民轻松进入

10. 二、规划 1．总体设计 “淘宝网”是最经典的电子商务网站，是商家们最喜爱的交易平台。仔细对比分析， 就会发现，目前国内很多中小型电子商务网站部分模仿“淘宝网”。无论是从结构设计 上，还是风格设计上，“淘宝网”都比较有特色，符合电子商务网站设计的标准。 2．结构设计 图9.1 “淘宝网”的头部

11. （2）体部结构设计

12. （3）尾部结构设计 3．风格设计 “淘宝网”以橘色为主色调，风格清新自然，色彩整体和谐统一，动感十足。 页面层次清晰、主次分明、重点突出、布局合理。网站设计方案主题鲜明，版 式设计恰到好处；内容虽然繁多，但多而不乱；网页形式与内容高度统一；字 体使用符合网页制作标准。

13. 三、实现 1．页面效果的实现 （1）“宝贝类目”栏目巧妙地利用了红、灰、蓝三色。其中总分类及突出的重点子目用了红色，而其他的子目分类则用了蓝色与灰色两种，字色的变化与字号的变化相配合，设计得分外合理。 （2）“热卖单品”，则用了浅灰色的细线框将各种形状的商品规范化。 （3）关键之处全部使用了红色，例如标题、商品总分类、价格。 （4）Flash动画的使用，使网站增添了动态效果。 “淘宝网”页面采用规则的CSS布局，由于内容众多，在实现上采取了以下措施：

14. （1）实名认证制 2．诚信安全体系 （2）信用评价体系 （3）付款发货方式

15. 如何设置电子商务网站必备栏目 （1）我要买 （2）我要卖 （3）支付平台 经典必 备栏目 （4）商品分类 （5）热卖商品 （6）资讯

16. “淘宝网”电子商务体验 1．“淘宝网”买家与卖家入门流程 （1）买家入门 （2）卖家入门

17. 2．网上安全交易流程 3．卖家交易的四个步骤 （1）申请认证

18. （2）发布宝贝和开设店铺 （3）宝贝出售中 在此步骤中，可以进行查询交易信息和修改商品信息两项操作。 （4）宝贝成交后（见图9.11）

19. 分析电子商务网站 【训练内容】到网上查找三个典型的电子网站，对其展开分析 【训练目的】 （1）综合应用所学知识，全面分析网站。 （2）对电子商务网站的规划、设计有更全面的了解。 （3）为自行设计电子商务网站打下基础。 【训练要求】 （1）必须是典型的电子商务网站。 （2）进行全面分析。

20. 第九章 电子商务网站案例分析 第一节 “淘宝网”案例分析 第二节“易万贝”电子商务网站案例分析 第三节“尚志都市商城”电子商务网站案例分析

21. 一、“易万贝”的总体结构设计

22. 二、头部设计 1．网站标志（Logo）与标题设计 2．横幅标语（Banner）设计

23. 3．导航设计 “易万贝”导航设计的另外一个显著特点，是将整个网站内容分为衣、食、 住、行、玩五个类别，以栏目的形式，列于网站的左方，如图9.16列出了 栏目“衣”。

24. 4．其他功能设计 （1）店铺搜索 （2）辅助功能

25. 三、栏目设计 易万贝的栏目 社区购物 联盟商圈 餐饮服务 分类信息 优惠打折 资讯信息 人才市场 大庆二手

26. 四、尾部设计

27. 五、用户管理功能设计 一种是在网上开设独立的虚拟商店 “易万贝”网上商家实现在线销售主要有两种方式 另一种是参与并成为网上购物中心的一部分

28. 六、商品展示功能模块设计 图文展示 “易万贝”社区平台商品展示模式其功能基本分为 多媒体展示

29. 七、网站推广方式 “易万贝”制订的推广计划包括内容 网站推广计划 网站策划建设阶段的推广 网站发布初期的基本推广手段 网站增长期的推广 网站稳定期的推广 推广效果的评价

30. 网站开发团队的组成 创建一个电子商务网站，要拥有一支团队，那么一个网站开发团队由哪些人员组成呢？根据项目的大小，团队可以有几十人，也可以只有几个人。 在团队划分中应该含有6个角色，分别是项目经理、网站策划、前台美工、程序开发员、代码整合员、网站测试员。不管团队有多少人，这6个角色都是必需的。人数少，可以一人兼任多个角色，比如项目经理可以兼任网站策划这个角色；程序开发员还可以兼任代码整合和测试这两个角色。 一般网站开发之初，人数不必太多，可一个人身兼数职；随着电子商务网站的发展壮大，每个角色的人员可以随时补充。

31. “当当网”（http://www.dangdang.com）新用户注册流程“当当网”（http://www.dangdang.com）新用户注册流程 1．进入“当当网”主页后，单击首页左上角的“请登录︱免费注册”中的“免费注册” （如图9.20所示）

32. 2．显示新用户注册页面，根据提示填写基本信息，包括Email地址、昵称、密码2．显示新用户注册页面，根据提示填写基本信息，包括Email地址、昵称、密码 、验证码等信息 （1）Email地址的填写要求

33. （2）昵称的填写要求

34. （3）验证码的输入问题

35. ② 如果您的计算机显示不出证验码，请刷新页面或调整IE浏览器的设置。调整浏 览器设置请到“工具”→“Internet选项”(如图9.24所示) →“常规”，选择“删除文件(cookie) ”并“清除历史记录”，如图9.25所示。

36. 3．验证邮箱（如图9.26所示） （1）单击“注册”按钮之后，系统会发送一封验证邮件到您已注册的电子邮箱里。 （2）如果您的邮箱收不到验证邮件，验证邮件可能被您的邮箱提供商认定为垃 圾邮件或广告邮件，请查看您的垃圾邮件箱或广告邮件箱。您也可以在该页面 更改电子邮件地址。 （3）登录您注册时填写的邮箱，查询当当发送的验证邮件。只要将邮件中的验证码输 入到图9.26中的输入框内，单击“完成”按钮就注册成功了。

37. 撰写一份《电子商务网站现状分析》报告 【训练内容】浏览国内较有名的电子商务网站，撰写一份《电子商务网站现状分析》 【训练目的】 （1）开阔视野，拓展思维。 （2）通过浏览网站，了解电子商务网站的现状，为自己制作电子商务网站打下坚实 基础。 【训练要求】 （1）分析时所涉及的电子商务网站均需注明网址。 （2）主要从页面设计、功能设计两个方面展开分析。

38. 第九章 电子商务网站案例分析 第一节 “淘宝网”案例分析 第二节“易万贝”电子商务网站案例分析 第三节“尚志都市商城”电子商务网站案例分析

39. 一、总体结构设计 在线交易 三大模块 商品展示 用户管理

40. “尚志都市”网站整体效果如图9.27所示。网站总体业务流程如图9.28所示。“尚志都市”网站整体效果如图9.27所示。网站总体业务流程如图9.28所示。

41. 二、版式规划 该网站属于典型的T型版式结构，其构成如图9.29所示。

42. 三、头部设计 1．标志（Logo）与网站标题设计（如图9.30所示） 图9.30 网站标志（Logo）

43. 网站设计者是怎么构思的？ 在构思设计上从功用性、识别性、艺术性三大方面 进行了综合考虑。

44. 在一体化的网站标志（Logo）的设计上，网站设计者遵循了标志（Logo）设计的三大原则；在制作上使用了以下方法：在一体化的网站标志（Logo）的设计上，网站设计者遵循了标志（Logo）设计的三大原则；在制作上使用了以下方法： ① 图形标志采用了该公司的企业标志，通过扫描处理后供使用。 ② 在工具上，利用了PhotoShop图像处理软件，将公司图标、公司名称和网址进行了组合处理。 （2）网站设计者是怎么制作的？

45. 2．标语（Banner）的设计 该网站由于在主体正中居上的位置做了大幅广告“网上开店，赠送网站”，所以省略 了头部的标语（Banner），在设计时一定要注意，头部的设计要与整体搭配和谐、自 然统一。 3．导航设计

46. 4．其他功能设计

47. 四、栏目设计

48. 1．T型上部的设计 （1）设计者是怎么构思的？ 每一个电子商务网站都有一个会员注册与登录模块，而且其位置一般都是在左上部。该网站遵循了这一规律，由于网站刚编制出来，处在运营初期，在最主要位置为本网站进行广告宣传是明智之举，而“免费开店”及“支付宝”则是在线交易的两大重要模块，均在此位置予以设置。

49. （2）设计者是怎么制作的？ 该部分以蓝色为主，采用Photoshop图像处理工具，其大体步骤如下： ① 启动Photoshop，新建文件，并将背景设为从蓝到白的渐变； ② 左侧加入用Photoshop设计成购物车造型；中间预留了动画区，右侧上方加一张表格，用于一些产品链接，下边则为开店入口及支付宝区。 ③ 然后用Photoshop将相关的图标及文字加入即可，这在第五章已经有详细介绍，在此不赘述。

50. 2．产品分类栏目的设计 （1）设计者是怎么构思的？ 产品分类栏目，即网上商城的产品目录，如图9.36所示。分类全面、层次清晰是 本栏目的最大特点，在颜色上，选择了类别标题用红色，类别内容用黑色，标准的 12像素宋体字。整体效果相当简洁，把繁杂的类别清晰醒目地展现出来。 （2）设计者是怎么制作的？ 该部分制作十分简单，只有栏目标题处用了一个图像，其他部分全部是纯文字， 只要在Dreamweaver中先进行排版，然后设置CSS样式，对行间距进行规范即可。