1、北京大学出版社,电子商务网站建设,第2章电子商务网站规划设计,本章知识结构框图,学习激励 案例导航,电子商务网络规划基础 基本概念,网站建设 基础,导航及目录设计 计,网站3种内容 遵循5个原则 3个注意事项 栏目规划准则 栏目设计策略 常用栏目,功导航作用设计、原则、分类、表现形式导航常用内容目录建立7个原则5个步骤,版式及风格设计 模式,版面布局基础两类常用版式布局4大原则色彩搭配方法文字使用技巧,网站规划的必要性网站规划6项任务 网站建设3个流程网站规划5种方法,马云与他的阿里巴巴,本章知识要点学习方法,本章知识要点 1电子商务网站规划的基本理论； 2网站内容及栏目设计方法； 3导航及目
2、录设计方法； 4版式及风格设计。 本章学习方法熟读唐诗三百诗，不会作诗也会吟。大量观察各类网站；从中悟出规律是本章学习的最佳方法，也是入门的唯一捷径。,学习激励与案例导航,亚马逊,Ebay(易趣),阿里巴巴,马云,全球最大的电子商务网站,谁是下一个世界首富？,比尔盖茨说：亚洲的马云。,2.1电子商务网站规划的基本理论,一、电子商务网站制作流程概述,电子商 务网站 规划的 意义,指导每一个操作步骤,网站成功的有力保障,有效利用时间、提高制作效率,保障网站的科学性、严谨性,2.1.2 网站规划的任务,1明晰网站建设的流程,（1）网站制作有哪些流程 （2）每一个流程由谁来完成。 （3）每一项内容何时
3、完成。,2确定网站的目的、功能,为什么要建立网站，为了宣传产品，还是要进行网上交易？ 做本企业网站，还是建立行业性网站？为了企业日常任务需要， 还是市场开拓的延伸？根据公司的需要和网站建设计划，确定 网站的整体功能。目的确定，功能明晰，为后继工作掌握好方 向，此后的工作才能顺畅进行。,3确定网站的技术解决方案,网站技术 解决方案,（1）服务器的选用,（2）服务器平台选型,（3）开发技术选型,（4）数据库选型,4对网站内容进行总体规划,规划时要解决网站有哪些栏目的问题,规划时要解决每个栏目都有什么内容的问题,+,内容规划,5确定网页设计方案 网站规划时，还要确定网页的设计方案，明确每一个页面的设
4、计方案。包括版式设计，目录设计，导航设计及风格设计等。实际实施制作的技术人员取得该方案后，可以快速按照指定的要求进行制作。 6制定网站后期的运营、维护、管理、安全方案 对网站制作完成后的运营方案、维护计划、管理体系、安全防范等都要进行统一规划，这是网站规划的一项重要任务，也是网站规划中不可缺少的一个有机组成部分。,2.1.3 网站建设的流程,1、规划设计,2、实施制作,3、发布维护,1、规划 设计,确定主题,规划分析,收集资料,撰写网站规划书,整体规划、系统分析,文字、图片、影音素材,考虑周全、切实可行,市场分析,建设网站目的,网站功能定位,技术解决方案,网站内容规划,网页设计方案,网站维护计
5、划,2.1.3 网站建设的流程,1、规划设计,2、实施制作,版面设计,编辑排版,后台功能实现,代码整合,Photoshop,DreamWeaver,前台 美工,2.1.3 网站建设的流程,1、规划设计,2、实施制作,网站测试,上传发布,日常维护,网站空间,内容维护、版面维护,功能测试,3、发布维护,链接测试,流量压力测试,响应时间测试,2.1.3 网站建设的流程,2.1.4 电子商务网站规划的常用方法,1调查法,调查法包括,市场调查,用户调查,受众群体调查,所谓网站规划的调查法，就是通过市场调查、用户调查、 受众群体调查，进行网站规划的一种方法。,2参照法,参照法就是指网站规划时大量参照同类网
6、站、学习同类网 站，形成自己的规划方案的一种规划方法。,3手绘法,手绘法是将网站的规划用手绘的方式进行表现的一种方法。,步骤1：打开并分析你所在大学校园网站,步骤2：梳理你曾经就读的中学基本情况；,步骤3：画出网站整体轮廓；,【操作实例2-2】规划步骤,步骤4：分别对头部、尾部进行规划绘制；,步骤5：对体部进行规划绘制。,4软件规划法,软件规划法是指用Word、Photoshop、Firework等软件进 行页面规划的方法。,【操作实例2-3】用软件规划法规划一个以个人求职为主 题的网站首页为体会。,步骤2：启动Word软件；,步骤1：通过上网查找，结合自身情况确定个人主页的 布局,步骤3：进
7、行头部规划。上网查找与自己创意相符合的网站头部，参照制作或复制到Word中；,步骤4：进行体部规划。对体部的每一部分内容进行设计，可以不断地上网查找相关资料；,步骤5：对尾部进行规划。,5移花接木法,移花接木法就是对网站的每个细节部分都在网上找到与自 己设想比较一致的样例，然后将网上样例通过截图软件保存下 来，并粘贴到自己的规划图上。,1、在百渡中检索相关网站，如“网上书店”。,操作步骤,为某书店设计一个电子商务网站,题 目,2、查看网站的头部，找到合适的用抓图工具截下，放到Word中。,3、查看网站体部的每一个模块及尾部，用抓图工具截下，放到Word中。,2.2电子商务网站页面内容及栏目设计
8、,2.2.1 电子商务网站页面应该包括的内容,4、最后用WORD组合成一个完整的页面，形成了整体网站的构思。,齐 齐 哈 尔 旅 游 网,网站体部,网站头部,网站尾部,头部内容,体部内容,尾部内容,网站标识,标题,广告条,分类导航与检索,Logo,Title,Banner,Menu,Search,Banner规格,全 幅,半 幅,垂 直,宽 型,小 型,486 x 60,234 x 60,120 x 240,728 x 90,88 x 31,头部内容,体部内容,尾部内容,网站标识,标题,广告条,分类导航与检索,Logo,Title,Banner,Menu,Search,用户注册与登陆,各类栏目
9、,相关站点链接,Login,Links,版权声明,管理入口,联系方式,CopyRight,2.2.2 电子商务网站内容设计遵循的原则,相关性,真实性,动态性,准确性,图像替代,以主题为主线展开内容设计,对内容要严格把关,随时进行修改和更新,尤其是报价、库存,适中地使用图像代替文本,2.2.3 网站内容收集的注意事项,注意事项,文责自负,材料电子版,发送途径选择问题,2.2.4栏目规划概述,网站的栏目是指网站内容的提纲，是网站内容的大纲索引。其功能是将网站的所有内容都分门别类，利用栏目将网站的主体明确显示出来。如果将网站比做一本书，那么书中的每章就是一个栏目。,2网站栏目规划的原则,2.2.5
10、栏目规划策略,分类法,参照法,+,1栏目规 划的常用 方法,所谓分类法，就是将 欲在网站展示的所有 资料进行分门别类，每 一个类别形成一个栏目。,所谓参照法，就是参 照同类网站所设置的 栏目，结合实际需要 进行栏目设置的方 法,2栏目规划的技巧,设置自己的栏目，具体方法是： （1）所有同类网站都有的栏目，你一定要有； （2）70%以上同类网站都有的栏目你不妨也加上； （3）如果有些栏目只有50%网站具有，这类栏目，你要询问客户的意见后，再决定是否采用此栏目； （4）有些栏目只有50%以下网站拥有，这时要注意了，这类栏目一是用处不大的栏目，二是特色栏目，你要根据情况再三斟酌，而后决定。,3栏目的
11、表现形式,纯文字表现法,图形化的表现法,纯文字表现法,图形化的表现法,3栏目的表现形式,纯文字表现法,图形化的表现法,3栏目的表现形式,2.2.6 电子商务网站常用栏目,1网上商城常用栏目,2工业企业常用栏目,3其他常用栏目,1网上商城常用栏目,2工业企业常用栏目,3其他常用栏目,2.2.6 电子商务网站常用栏目28,1网上商城常用栏目,2工业企业常用栏目,3其他常用栏目,2.2.6 电子商务网站常用栏目,1网上商城常用栏目,2工业企业常用栏目,3其他常用栏目,2.2.6 电子商务网站常用栏目,2.2.7 阿里巴巴网站内容分析,案例分析,LOGO(含标题）,宣传标语,产品检索,分类导航,1、头
12、部内容,案例分析,2、体部内容,（1）资讯栏目,2.2.7 阿里巴巴网站内容分析,2.2.7 阿里巴巴网站内容分析,案例分析,（2）社区栏目,（1）资讯栏目,2、体部内容,2.2.7 阿里巴巴网站内容分析,案例分析,（2）社区栏目,（1）资讯栏目,2、体部内容,（3）交易栏目,案例分析,3、尾部内容,2.2.7 阿里巴巴网站内容分析,2.3电子商务网站导航及目录设计,1导航的作用,2导航设计原则,每个网页中应有一个指向主页的链接,美观大方，而且要高效易用。,既直接又简单,向导,2.3.2 导航分类,全局导航,局部导航,主要栏目,一级目录,出现在网站的每页上,次要栏目,二级以上目录,快捷导航,相
13、关导航,2.3.3 电子商务网站导航栏设计方法,纯文字表现法,图片表现法,优点：显示速度快,缺点：视觉效果差,优点：视觉效果好,缺点：显示速度慢,1、电子商务网站导航栏的表现形式,首 页,简介类,如：单位概况、企业简介、走进企业,如：产品介绍,如：论坛、留言板,2、电子商务网站导航栏的常见内容,展示类,社区类,2.3.3 电子商务网站导航栏设计方法,（1）确定导航内容。,（2）确定导航表现形式,（3）确定导航实现方法,3.电子商务网站导航栏的设计步骤,步骤,2.3.4 、电子商务网站目录设计概述,网站目录是指建立网站时创建的目录，用于存放网站中所 有的图片、网页、数据库等文件。站点本身的维护、
14、未来的 扩充和移植有着重要的影响。,原则：,（1）分类存放、分别建立目录,分门别类，有序存放,（2）目录的层次不要太深,不超过3层,（3）根目录下不要存放所有文件,主页文件、流量统计的文本文件,（4）根据栏目内容建立子目录,（5）在每个主栏目子目录下都建立独立的images目录,（6）不要使用中文目录,（7）不要使用过长的目录,影响检索速度,2.3.5网站目录建设的步骤及方法,1.建立一个用于存放网站的总目录,2.进入此网站目录，展开网站目录的建设工作,3.在网站的根目录下建立一个Images子目录,存放首页图像文件,4.在网站的根目录下建立一个style子目录,存放样式表文件,5.在网站的根
15、目录为每一个栏目建立对应子目录，每个子目录下建立Images子目录,存放子页面图像文件,如：MyWeb,2.3.6 案例：敦煌网的目录结构,动手制作,1敦煌网的LOGO及导航栏,动手制作,2敦煌网的目录结构设计,首页图像文件目录,样式文件目录,我的Dhgate栏目,我的Dhgate的图像文件夹,功能与服务栏目,功能与服务的图像文件夹,热门求购栏目,外贸通栏目,热门求购的图象文件夹,外贸通的图像文件夹,2.3.6 案例：敦煌网的目录结构,2.4电子商务网站版式及风格设计,2.4.1版面布局的基础,左上角、页面顶部,1280X1024,1024X768,800X600,高度,宽度,随意,上部,下部
16、,左侧,右侧,轻快、积极,压抑、稳定,轻便、自由,局促、庄重,2.4.2 网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,1、结构化布局,2、艺术化布局,20%30%,70%80%,菜 单,用户登录,流量统计,联系方式,主体内容,左右结构布局,左中右结构布局,上下结构布局,1、结构化布局,2、艺术化布局,菜 单,用户登录,流量统计,联系方式,主体内容,链接等,2.4.2 网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,1、结构化布局,2、艺术化布局,主 体,标 题,2.4.2 网页的常用版式,2.4.2 网页的常用版式,左右结构布局,左中右结构布局,上下结构布局,最广泛
17、,比较呆板、不够灵活,二级页面、文章页面,1、结构化布局,2、艺术化布局,2.4.3 版面布局的原则,1、根据网站的客户群选择合适的布局,2、整体布局要遵循简洁大方的原则,3、要注意视觉效果与内容翔实相结合的原则,4、主次分明条理清晰的原则,2.4.4 电子商务网站风格设计概述,1、什么是电子商务网站的风格,2、如何树立电子商务网站的风格,电子商务网站的风格是指站点的整体形象给浏览者的综合感受，是这个站点的与众不同之处。,网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文 字,(1)色调,(2)简繁,(3)字体的使用,(4)站内风格的统一,符合网站的内容、有独特的创意,把握好简洁与花哨
18、尺度,标准统一，正文的字体为宋体12像素（五号字）,2.4.5 电子商务网站色彩搭配,1、色彩搭配概述,2、主色调的选择,粉色,蓝色,红色,绿色,黑色,企业、事业单位的网站,政府网站、在重大节日期间改版为红色,食品、农业类网站、购物类、儿童类网站,科幻、游戏类网站,女性、儿童类网站,主色调: 网站使用最多的颜色称为主色调 辅色调: 与主色调配套的其它颜色,1、字体的运用,2、字号的设置,正文字体,非标准字体的使用,标题字体的使用,栏目字体,宋体,不得使用行楷等过于活泼的字体,黑体，用图形的方式，搭配一些小图标,正文字号,大标题,栏目标题,12像素、10磅、五号字,不超过36像素,1618像素、
19、三号、四号、小四号,2.4.5 电子商务网站色彩搭配,3、行间距的设置,1.2倍1.5倍行距 宋体12像素正文文字，行间距为18像素,总结,字体,字号,字色,行距,正文：宋体 题目：方方正正的，如黑体,正文一律用黑色,标准文字的为1.5倍，如12PX字，用18PX行距,正文12px,栏目标题16-18PX，大标题=36,2.4.5 电子商务网站色彩搭配,本章小结,1本章知识概述 网站制作共有规划设计、实施制作、发布维护三大流程，每一个流程又包括若干细节，流程之间有着严格的顺序。按照人们认识的规律将网站分为头部、体部、尾部三大板块。电子商务网站有网上电子商务系统、用户认证管理系统、报价系统、商品
20、检索引擎、自助服务系统、论坛系统、网上调查系统七大功能模块。电子商务网站内容设计应遵循相关性、真实性、动态性、准确性、图像替代五大原则，网页的常用版式有结构化的布局、艺术化的布局两种。网站的导航对于网站则起到提纲挈领的作用，电子商务网站导航栏的表现有纯文字表现法、图片表现法两种形式，,电子商务网站导航栏的常见内容有首页、简介类、展示类、社区类四种。网站目录建设的总原则是以最少的层次提供最清晰简便的访问结构。电子商务网站的风格是指站点的整体形象给浏览者的综合感受，树立电子商务网站的风格可以从色调、简繁、字体的使用、站内风格的统一入手。每个网站使用的颜色原则上不得超过三种，并且有一个占比例较大的颜
21、色，我们称之为网站的主色调，而其他颜色则称为网站的辅色调。每种颜色适合不同类别的网站，网页正文无特殊情况一般使用宋体，大小为12像素。 2本章名词 网站制作流程、网站规划、网站的主题、版面设计、网站发布、网站规划的调,法、网站规划的参照法、网站规划的手绘法、网站规划的软件规划法、网站规划的移花接木法、网站的栏目、像素、电子商务网站的风格。 3本章的数字 网站规划5个意义、网站规划的6项任务、网站建设的3个流程、网站规划的5种方法、网站3种常见内容、网站内容设计遵循的5个原则、网站内容设计3个注意事项、网站规划4项、3种规划策略、导航设计的3原则、导航的4个类别、导航的2种表现形式、导航常用4类
22、内容、目录建立7个原则、目录建立的5个步骤、2类常用版式、布局4大原则。,每课一考,一、填空（40空，每空1分，共40分） 1网站规划是指在网站建设前对市场进行分析、确定网站的 目的和功能，并根据需要对网站建设中的（ ）、 （ ）、（ ）、（ ）和（ ）等 做出规划。 2按照人们认识的规律将网站分为（ ）（ ） 、（ ）三大板块。 3电子商务网站内容设计应遵循的原则有（ ）、 （ ）、（ ）、（ ）和 （ ）。,4电子商务网站应包括的功能模块有（ ）、 （ ）、（ ）、（ ）、 （ ）、（ ）和（ ）。 5网页的宽度一般有（ ）和（ ）两种。 6网站的最佳视域是（ ）。 7网页的结构化布局包括
23、（ ）、（ ） 、（ ）。,8网页版面布局的原则包括（ ）、（ ） 、（ ）和（ ）。,9网站的（ ）对于网站则起到提纲挈领的作用。 10电子商务网站导航栏的表现形式有（ ）和 （ ）两种。 11电子商务网站的风格是指站点的（ ）。 12树立电子商务网站的风格要从（ ）、 （ ）、（ ）、（ ）和 （ ）入手。 13每个网站都有一个占比例较大的颜色，我们称之为网站的 （ ）。,二、选择题（20小题，每小题1分，共20分） 1以下哪些不是电子商务网站的制作的三大流程（ ）。 A.规划设计 B.实施制作 C.网站推广 D.发布维护 2以下哪些不是网站规划书包含的内容（ ）。 A.网页设计方案B.网
24、站 C.网站技术解决方案D.建设网站目的 3所谓版面设计就是指用图像处理软件进行网页页面的设计 制作过程，一般使用的软件是（ ）。 A.WORD B.Photoshop C.FTP D.EXCEL,4以下哪个不是电子商务网站的实施制作阶段（ ）。 A.版面设计B.编辑排版 C.撰写网站规划书 D.代码整合,5网站测试内容主要包括（ ）。 A.风格测试 B.功能测试 C.链接测试 D.流量压力测试 6LOGO是指（ ）。 A.网站标识 B.导航栏 C.广告条 D.以上都不对 7Banner是指（ ）。 A.网站标识 B.导航栏 C.广告条 D.栏目 8以下不是网站尾部内容的是（ ）。 A.版权声
25、明 B.管理入口 C.联系方式 D.导航栏 9以下哪些不是电子商务网站导航栏的常见内容（ ）。 A.首页 B.简介类 C.展示类 D.管理入口,10以下哪个文件允许在根目录下放置（ ）。 A.index.htm B.logo.jpg C.Logo.asp D.title.jpg 11网站目录的层次一般不得超过（ ）层。 A.1 B.3 C.5 D.10 12每个栏目对应一个（ ）。 A.图片 B.程序 C.目录 D.网站 13以下允许为主页的扩展名的是（ ）。 A.DBF B.ASP C.DOC D.JPG,14Style子目录用于存放（ ）。 A.图像 B.样式表文件 C.数据库 D.网页文
26、件 15网站标识对应的英文拼写是（ ）。 A.SiteMap B.Addr C.Brand D.Logo 16网站的“整体形象”不包括（ ）。 A.站点的CI B.版面布局 C.浏览方式 D.采用的编程语言 17网站正文的字体以（ ）体为主。 A.宋体 B.黑体 C.楷体 D.仿宋体 18适用于企业、事业单位的网站的颜色是（ ）。 A.红色 B.绿色 C.蓝色 D.粉色,19红色适用于（ ）单位的网站。 A.农业 B.政府 C.学校 D.企业 20网站文字的行距设置一般采用的方法是在（ ）中定义。 A.表格 B.表单 C.程序 D.样式表,三、判断题（20小题，每小题1分，共20分）,1电子商
27、务网站的制作与普通网站的制作流程相同。（ ） 2网站规划对网站建设起到计划和指导的作用，对网站的内容 和维护起到定位作用。（ ）,3网站的代码整合是在前台美工设计完成之后，后台模块编 写之前进行。（ ） 4所谓网站发布就是指将已经制作完成的网站刻录成光盘。 （ ） 5电子商务网站的改版工作是指用新制作的网站覆盖原网站。 （ ） 6网页中最好不要使用过长的目录。（ ） 7网站中所有的图片都必须放在根目录下的Images子目录中。 （ ）,8每一个网站要有统一的风格，各个二级页面风格要统一。 （ ） 9网站大标题的大小可以随便设置。（ ）,10文件目录越长越好。（ ） 11网站中允许使用中文目录。
28、（ ） 12导航颜色、栏目颜色尽量使用与主色调一致的色彩。（ ） 13每个网站使用的颜色原则上不得超过3种。（ ） 14红色属于典型的冷色调。（ ） 15网站的目录建设可以方便日后维护以及扩充升级。（ ） 16每一个网站只能有一个首页。（ ）,17电子商务网站导航栏一般位于网站的底部。（ ） 18像素是指荧光屏上的每一个发光小点，一般显示器有500 万像素。（ ） 19网站上使用黑体、宋体、楷体、仿宋体以外的字体时， 必须将字体以图形的形式表现出来。（ ） 20网站的栏目标题，即网站的小标题，一般为12像素至14 像素。（ ）,四、问答题（4小题，每小题5分，共20分）,1. 电子商务网站规划的意义主要有哪些? 2. 简述网站建设的流程。 3. 简述电子商务网站规划的常用方法。 4. 简述网站规划的任务。,技能实训,一操作题 （1）以你最喜欢的运动项目为主题，策划一个网站； （2）根据你所在学校网站内容，为你所在的学校补写一份网 站策划书； （3）分析红孩子购物网（http:/ 的规划特点； （4）规划你的个人求职网，为毕业求职做准备。 二励志题 以我的明天在网上飞翔为题，把你学过本课知识后的激 情尽情显现，为自己明天的网上生活勾勒一副美好愿景，并 努力实现。,
