第二章 电子商务网站规划设计.ppt

1、电子商务网站规划设计,一个网站的成功，重在奠基。没有刻苦的学习，没有辛勤的付出，没有人随随便便能成功。,第 2 章,如何构思一个网站？,怎样开始创业之旅？,网易首席构架师丁磊,第一节 网站建设流程,第二节 内容设计,第三节 版式设计,第二章 电子商务网站建设概述,第四节 导航及目录设计,第五节 风格设计,一、电子商务网站制作流程概述,电子商务网站开发需要一个团队合作,所以,你不必全面“精”,但要一 门“通”,整个网站制作过程都要学习,但是要有一项最突出,做到专一博百。,网站制作流程,二、电子商务网站制作流程,1、规划设计,2、实施制作,3、发布维护,二、电子商务网站制作流程,1、规划设计,确定

2、主题,规划分析,收集资料,撰写网站规划书,整体规划、系统分析,文字、图片、影音素材,考虑周全、切实可行,市场分析,建设网站目的,网站功能定位,技术解决方案,网站内容规划,网页设计方案,网站维护计划,二、电子商务网站制作流程,1、规划设计,2、实施制作,版面设计,编辑排版,后台功能实现,代码整合,Photoshop,DreamWeaver,前台美工,二、电子商务网站制作流程,1、规划设计,2、实施制作,网站测试,上传发布,日常维护,网站空间,内容维护、版面维护,功能测试,3、发布维护,链接测试,流量压力测试,响应时间测试,如何撰写电子商务网站规划书,一、建设网站前的分析,案例分析,二、建设网站目

3、的及功能定位,三、网站技术解决方案,四、网站内容规划,五、网页设计,六、网站维护,如何撰写电子商务网站规划书,一、建设网站前的分析,案例分析,1.行业市场分析,2.公司概况了解,知彼,知已,如何撰写电子商务网站规划书,一、建设网站前的分析,案例分析,二、建设网站目的及功能定位,1.确定网站目的,2.确定网站功能,如何撰写电子商务网站规划书,一、建设网站前的分析,案例分析,二、建设网站目的及功能定位,三、网站技术解决方案,1.服务器,2.服务器平台,3.开发技术,4.数据库,自建服务器、租用虚拟主机,操作系统类型,开发技术类型,数据库系统类型,如何撰写电子商务网站规划书,一、建设网站前的分析,案

4、例分析,二、建设网站目的及功能定位,三、网站技术解决方案,四、网站内容规划,1.规划网站内容,会员注册、信息检索、订单确认、 付款、跟人信息保密、相关帮助 ,2.确定网站栏目,如何撰写电子商务网站规划书,一、建设网站前的分析,案例分析,二、建设网站目的及功能定位,三、网站技术解决方案,四、网站内容规划,五、网页设计,1.确定网站整体风格，网页色彩、版面规划,2.确定网站的布局,如何撰写电子商务网站规划书,一、建设网站前的分析,案例分析,二、建设网站目的及功能定位,三、网站技术解决方案,四、网站内容规划,五、网页设计,六、网站维护,1.管理方案,2.运营与推广方案,3.安全性措施,如何撰写电子商

5、务网站规划书,案例分析,案例：“古狗特色商品连锁店”电子商务网站规划书,强化训练,网站规划书制作 题目：为你所在的学校制作一个网站规划书 要求： 1详细分析你所在学校的情况，从实际情况 出发进行规划设计； 2按照标准格式进行设计。,第一节 网站建设流程,第二节 内容设计,第三节 板式设计,第二章 电子商务网站建设概述,第四节 导航及目录设计,第五节 风格设计,齐 齐 哈 尔 旅 游 网,网站体部,网站尾部,网站头部,一、电子商务网站应该包括的内容,头部内容,体部内容,尾部内容,网站标识,标题,广告条,分类导航 与检索,Logo,Title,Banner,Menu,Search,Banner规格

6、,全 幅,半 幅,垂 直,宽 型,小 型,486 x 60,234 x 60,120 x 240,728 x 90,88 x 31,一、电子商务网站应该包括的内容,头部内容,体部内容,尾部内容,网站标识,标题,广告条,分类导航 与检索,Logo,Title,Banner,Menu,Search,用户注册与登陆,各类栏目,相关站点链接,Login,Links,版权声明,管理入口,联系方式,CopyRight,二、电子商务网站应包括的功能模块,1网上电子商务系统,商品目录、促销引擎、认证管理、信用管理、 支付和结算、订单处理、配送处理 ,2用户认证管理系统,注册信息,3报价系统,4商品检索引擎,5

7、自助服务系统,6论坛系统,买卖双方交流平台,7网上调查系统,掌握客户需求、市场走向,三、电子商务网站内容设计遵循的原则,相关性,真实性,动态性,准确性,图像替换,以主题为主线展开内容设计,对内容要严格把关,随时进行修改和更新,尤其是报价、库存,适中地使用图像代替文本,一、网站的LOGO如何一分钟搞定,案例分析,将公司宣传彩页上的公司标识扫描照搬即可,二网站内容收集的技巧,案例分析,1网站所有内容一律由客户负责提供,2文字材料一律要电子版,3电子版的文字材料一律要通过邮箱发送，不要接受U盘材料,三确定栏目的的技巧,案例分析,用处不大的栏目 特色栏目,每一个网站都有的栏目,70%以上网站都有的栏目

8、,50%网站有的栏目,加上,不妨也加上,询问客户的意见,上网浏览10个同类网站,例如做医院网站,则浏览10个医院网站.,四、阿里巴巴网站内容分析,案例分析,LOGO(含标题）,宣传标语,产品检索,分类导航,1、头部内容,四、阿里巴巴网站内容分析,案例分析,2、体部内容,（1）资讯栏目,四、阿里巴巴网站内容分析,案例分析,（2）社区栏目,（1）资讯栏目,2、体部内容,四、阿里巴巴网站内容分析,案例分析,（2）社区栏目,（1）资讯栏目,2、体部内容,（3）交易栏目,四、阿里巴巴网站内容分析,案例分析,3、尾部内容,强化训练,技能训练：网站内容设计 题目：为自己班级做一个网站，请先进行网站 内容设计

9、。 要求： 1详细分析你所在班级情况，从实际情况出发 进行规划设计； 2内容要全面； 3边设计边上网查找相关网站，进行参照。,第一节 网站建设流程,第二节 内容设计,第三节 版式设计,第二章 电子商务网站建设概述,第四节 导航及目录设计,第五节 风格设计,一、版面布局的基础,左上角、页面顶部,1280X1024,1024X768,800X600,高度,宽度,随意,10241000左右,800776左右,上部,下部,左侧,右侧,标志、通知新闻,轻快、积极,压抑、稳定,轻便、自由,局促、庄重,二、网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,20%30%,70%80%,菜 单,用户登

10、录,流量统计,联系方式,主体内容,1、结构化布局,2、艺术化布局,二、网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,菜 单,用户登录,流量统计,联系方式,主体内容,链接等,1、结构化布局,2、艺术化布局,二、网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,主 体,标 题,1、结构化布局,2、艺术化布局,二、网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,最广泛,比较呆板、不够灵活,二级页面、文章页面,1、结构化布局,2、艺术化布局,二、网页的常用版式,2、艺术化布局,海报式布局,也称为POP布局,页面布局善于变化,综合式布局,FLASH,1、结构化布局,三

11、、版面布局的原则,1、根据网站的客户群选择合适的布局,2、整体布局要遵循简洁大方的原则,3、要注意视觉效果与内容翔实相结合的原则,4、主次分明条理清晰的原则,1、在百渡中检索相关网站，如“网上书店”。,动手制作,为某书店设计一个电子商务网站,移花接木巧构思,2、查看网站的头部，找到合适的用抓图工具截下，放到 Word中。,3、查看网站体部的每一个模块及尾部，用抓图工具截下， 放到Word中。,4、最后用WORD组合成一个完整的页面，形成了整体网站 的构思。,阿里巴巴网站布局分析,案例分析,4、网站简洁大方、视觉效果极佳、主次分明、条理 清晰，符合网站制作的五大原则。,1、网站的宽度依据1024

12、X768像素进行设计；,2、网页上面的黄金地带即放置了网站的LOGO、导航、 Flash动画广告；,3、网站符合结构化布局的标准，体部采用左右结构 布局，条理清晰；,强化训练,网站版式分析 题目：分析新浪博客、网易、齐齐哈尔大 学四个网站的版式 要求： 1对给定网站进行仔细分析，对其结构、 版式进行全面观察； 2对照版面布局的原则，逐条对比分析。,第一节 网站建设流程,第二节 内容设计,第三节 板式设计,第二章 电子商务网站建设概述,第四节 导航及目录设计,第五节 风格设计,一、电子商务网站导航栏设计概述,1导航的作用,2导航设计原则,每个网页中应有一个指向主页的链接,美观大方，而且要高效易用

13、。,既直接又简单,向导,一、导航分类,全局导航,局部导航,主要栏目,一级目录,出现在网站的每页上,次要栏目,二级以上目录,三、电子商务网站导航栏设计方法,纯文字表现法,图片表现法,优点：显示速度快,缺点：视觉效果差,优点：视觉效果好,缺点：显示速度慢,1、电子商务网站导航栏的表现形式,三、电子商务网站导航栏设计方法,首 页,简介类,如：单位概况、企业简介、走进企业,如：产品介绍,如：论坛、留言板,2、电子商务网站导航栏的常见内容,展示类,社区类,四、电子商务网站目录设计概述,网站目录是指建立网站时创建的目录，用于存放网站中所有的图片、网页、数据库等文件。站点本身的维护、未来的扩充和移植有着重要

14、的影响。,原则：,（1）分类存放、分别建立目录,分门别类，有序存放,（2）目录的层次不要太深,不超过3层,（3）根目录下不要存放所有文件,主页文件、流量统计的文本文件,（4）根据栏目内容建立子目录,（5）在每个主栏目子目录下都建立独立的images目录,（6）不要使用中文目录,（7）不要使用过长的目录,影响检索速度,五、网站目录建设的步骤及方法,1.建立一个用于存放网站的总目录,如：MyWeb,2.进入此网站目录，展开网站目录的建设工作,3.在网站的根目录下建立一个Images子目录,存放首页图像文件,4.在网站的根目录下建立一个style子目录,存放样式表文件,5.在网站的根目录为每一个栏目

15、建立对应子目录， 每个子目录下建立Images子目录,存放子页面图像文件,案例分析,1、常用栏目的英文拼写,网站导航 Sitemap 公司简介Profile or Company 公司荣誉 Glories 企业文化Culture 组织机构 organization 经理致辞 Managers oration 发展历程 Development History 产品展示 Product 合作加盟 Join In Cooperation 技术力量 Technology 工程案例 Engineering Projects 业务范围 Business Scope 分支机构 Branches 供求信息 S

16、upply & Demand 产品销售 Sales 联系我们 Contact Us Contact Us 信息发布 Information 返回首页 Homepage 分类浏览 Browse By Category 电子商务 E-business,行业新闻 Trade News 客户留言 Customer Message 客户服务 Customer Service 新闻动态 News & Trends 销售热线 Sales Hot-Line 论坛 Forum 在线订购 On-line order 招聘 Join Us 社区 Community 业务介绍 Business Introductio

17、n 在线调查 Online Inquiry 下载中心 Download 会员登陆 Member Entrance 意见反馈 Feedback 常见问题 FA 教育培训 Education & Training 在线交流 Online Communication 专题报道 Special Report,案例分析,1、常用栏目的英文拼写,（1）登陆,2、网上在线翻译,（2）在搜索引擎网站上搜索“在线翻译”,案例分析,制作敦煌网的目录结构,动手制作,1敦煌网的LOGO及导航栏,制作敦煌网的目录结构,动手制作,2敦煌网的目录结构设计,首页图像文件目录,样式文件目录,我的Dhgate栏目,我的Dhgat

18、e的图像文件夹,功能与服务栏目,功能与服务的图像文件夹,热门求购栏目,外贸通栏目,热门求购的图象文件夹,外贸通的图像文件夹,强化训练,设计网站的目录结构 题目：根据下列网站导航设计网站的目录结构 要求： 1在D盘建立一个DIRSTU的目录，将下列四 题目录全部建在此目录下。 2按照网站制作的标准进行目录设计。,黑龙江电教馆,黑龙江消费网,齐齐哈哈尔大学研究生处,上海家用电器研究所实验工厂,第一节 网站建设流程,第二节 内容设计,第三节 板式设计,第二章 电子商务网站建设概述,第四节 导航及目录设计,第五节 风格设计,一、电子商务网站风格设计概述,1、什么是电子商务网站的风格,2、如何树立电子商

19、务网站的风格,电子商务网站的风格是指站点的整体形象给浏览者的综合感受，是这个站点的与众不同之处。,网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字,(1)色调,(2)简繁,(3)字体的使用,(4)站内风格的统一,符合网站的内容、有独特的创意,把握好简洁与花哨尺度,标准统一，正文的字体为宋体12像素（五号字）,二、电子商务网站色彩搭配,1、色彩搭配概述,2、主色调的选择,粉色,蓝色,红色,绿色,黑色,企业、事业单位的网站,政府网站、在重大节日期间改版为红色,食品、农业类网站、购物类、儿童类网站,科幻、游戏类网站,女性、儿童类网站,主色调: 网站使用最多的颜色称为主色调 辅色调: 与主色调配套的其它颜色,三、电子商务网站文字使用,1、字体的运用,2、字号的设置,正文字体,非标准字体的使用,标题字体的使用,栏目字体,宋体,指黑体、宋体、楷体、仿宋体以外 的字体，以图形的形式表现出来,不得使用行楷等过于活泼的字体,黑体，用图形的方式，搭配一些小图标,正文字号,大标题,栏目标题,12像素、10磅、五号字