《电商网站案例分析》PPT课件.ppt

* 第九章 电子商务网站案例分析 第一节 “淘宝网”案例分析 第二节“易万贝”电子商务网站案例分析 第三节“尚志都市商城”电子商务网站案例分析 一、总体结构设计 在线交易 商品展示 用户管理 三大模块 “尚志都市”网站整体效果如图9.27所示。网站总体业务流程如图9.28所示。 二、版式规划 该网站属于典型的T型版式结构，其构成如图9.29所示。 三、头部设计 图9.30 网站标志（Logo） 1．标志（Logo）与网站标题设计（如图9.30所示） 网站设计者是怎么构思的？ 在构思设计上从功用性、识别性、艺术性三大方面 进行了综合考虑。 （2）网站设计者是怎么制作的？ 在一体化的网站标志（Logo）的设计上，网站设计者遵循了标志（Logo）设计的三大原则；在制作上使用了以下方法： ① 图形标志采用了该公司的企业标志，通过扫描处理后供使用。 ② 在工具上，利用了PhotoShop图像处理软件，将公司图标、公司名称和网址进行了组合处理。 2．标语（Banner）的设计 该网站由于在主体正中居上的位置做了大幅广告“网上开店，赠送网站”，所以省略 了头部的标语（Banner），在设计时一定要注意，头部的设计要与整体搭配和谐、自 然统一。 3．导航设计 4．其他功能设计 四、栏目设计 （1）设计者是怎么构思的？ 每一个电子商务网站都有一个会员注册与登录模块，而且其位置一般都是在左上部。该网站遵循了这一规律，由于网站刚编制出来，处在运营初期，在最主要位置为本网站进行广告宣传是明智之举，而“免费开店”及“支付宝”则是在线交易的两大重要模块，均在此位置予以设置。 1．T型上部的设计 （2）设计者是怎么制作的？ 该部分以蓝色为主，采用Photoshop图像处理工具，其大体步骤如下： ① 启动Photoshop，新建文件，并将背景设为从蓝到白的渐变； ② 左侧加入用Photoshop设计成购物车造型；中间预留了动画区，右侧上方加一张表格，用于一些产品链接，下边则为开店入口及支付宝区。 ③ 然后用Photoshop将相关的图标及文字加入即可，这在第五章已经有详细介绍，在此不赘述。 2．产品分类栏目的设计 （1）设计者是怎么构思的？ 产品分类栏目，即网上商城的产品目录，如图9.36所示。分类全面、层次清晰是 本栏目的最大特点，在颜色上，选择了类别标题用红色，类别内容用黑色，标准的 12像素宋体字。整体效果相当简洁，把繁杂的类别清晰醒目地展现出来。 （2）设计者是怎么制作的？ 该部分制作十分简单，只有栏目标题处用了一个图像，其他部分全部是纯文字， 只要在Dreamweaver中先进行排版，然后设置CSS样式，对行间距进行规范即可。 3．推荐产品与必威体育精装版上架栏目（如图9.37所示） （1）设计者是怎么构思的？ 目前，商品展示类电子商务网站，都是以图片加文字的形式进行说明（如图9.37 所示），本网站的“推荐产品”及“必威体育精装版上架”均属于商品展示类，标准的75×75像素图 像，为了更整齐划一，还特别加了一个浅灰色的细线外框。红色的栏目标题上面还用 了一条橘黄色的线条，引人注目的同时，更显生动活泼。 （2）设计者是怎么制作的？ 在网页制作前，准备好所有商品图片，并对每一个商品图片进行简单处理，使其正 好能放在75×75像素的外框中。在DreamWeaver中以表格的方式排版，同时，在 网站代码中，实现对图片的更换。 （1）编写者是怎么构思的 如图9.38所示，是图9.27所示的网站整体效果右侧的四个栏目之一，风格一致，制作 方法统一。 （2）编写者是怎么制作的 这四个栏目的制作十分简单，与产品分类基本相同，在此不复述。 *