1. No category

第
2章
电子商务网站规划设计
一个网站的成功，重在奠基。没有刻苦的学习，
没有辛勤的付出，没有人随随便便能成功。
如何构思一个网站？
怎样开始创业之旅？
网易首席构架师丁磊
第二章
电子商务网站建设概述
第一节
网站建设流程
第二节
内容设计
第三节
版式设计
第四节
导航及目录设计
第五节
风格设计
一、电子商务网站制作流程概述
电子商务网站开发需要一个团队合作,所以,你不必全面“精”,但要一
门“通”,整个网站制作过程都要学习,但是要有一项最突出,做到专一博百。
指导每一个操作步骤
网站成功的有力保障
网站制作流程
有效利用时间、提高制作效率
便于团队合作，协同完成
保障网站的科学性、严谨性
二、电子商务网站制作流程
1、规划设计
2、实施制作
3、发布维护
二、电子商务网站制作流程
确定主题
规划分析
整体规划、系统分析
收集资料
文字、图片、影音素材
1、规划设计
撰写网站规划书
市
场
分
析
建
设
网
站
目
的
网
站
功
能
定
位
技
术
解
决
方
案
网
站
内
容
规
划
网
页
设
计
方
案
考虑周全、切实可行
网
站
维
护
计
划
……
二、电子商务网站制作流程
版面设计
Photoshop
1、规划设计
前台美工
编辑排版
2、实施制作
后台功能实现
代码整合
DreamWeaver
二、电子商务网站制作流程
功能测试
1、规划设计
网站测试
2、实施制作
3、发布维护
链接测试
流量压力测试
响应时间测试
上传发布
网站空间
日常维护
内容维护、版面维护
如何撰写电子商务网站规划书
一、建设网站前的分析
二、建设网站目的及功能定位
三、网站技术解决方案
四、网站内容规划
五、网页设计
六、网站维护
案
例
分
析
案
例
分
析
如何撰写电子商务网站规划书
1.行业市场分析
知彼
2.公司概况了解
知已
一、建设网站前的分析
如何撰写电子商务网站规划书
一、建设网站前的分析
1.确定网站目的
二、建设网站目的及功能定位
2.确定网站功能
案
例
分
析
案
例
分
析
如何撰写电子商务网站规划书
一、建设网站前的分析
二、建设网站目的及功能定位
1.服务器
自建服务器、租用虚拟主机
2.服务器平台
操作系统类型
三、网站技术解决方案
3.开发技术
开发技术类型
4.数据库
数据库系统类型
如何撰写电子商务网站规划书
案
例
分
析
一、建设网站前的分析
二、建设网站目的及功能定位
三、网站技术解决方案
四、网站内容规划
会员注册、信息检索、订单确认、
1.规划网站内容 付款、跟人信息保密、相关帮助
……
2.确定网站栏目
如何撰写电子商务网站规划书
案
例
分
析
一、建设网站前的分析
二、建设网站目的及功能定位
三、网站技术解决方案
四、网站内容规划
1.确定网站整体风格，网页色彩、版面规划
五、网页设计
2.确定网站的布局
如何撰写电子商务网站规划书
一、建设网站前的分析
二、建设网站目的及功能定位
三、网站技术解决方案
四、网站内容规划
五、网页设计
1.管理方案
六、网站维护
2.运营与推广方案
3.安全性措施
案
例
分
析
如何撰写电子商务网站规划书
案例：“古狗特色商品连锁店”电子商务网站规划书
案
例
分
析
强化训练
网站规划书制作
题目：为你所在的学校制作一个网站规划书
要求：
1．详细分析你所在学校的情况，从实际情况
出发进行规划设计；
2．按照标准格式进行设计。
第二章
电子商务网站建设概述
第一节
网站建设流程
第二节
内容设计
第三节
板式设计
第四节
导航及目录设计
第五节
风格设计
网站头部
网站体部
网站尾部
齐
齐
哈
尔
旅
游
网
一、电子商务网站应该包括的内容
头部内容
网
站
标
识
Logo
标
题
Title
广
告
条
Banner
体部内容
分
类
导
航
Menu
与
检
索
Search
尾部内容
全 幅
486 x 60
半 幅 234 x 60
Banner规格
垂 直
120 x 240
宽 型
728 x 90
小 型
88 x 31
一、电子商务网站应该包括的内容
头部内容
网
站
标
识
Logo
标
题
Title
广
告
条
Banner
分
类
导
航
Menu
与
检
索
Search
体部内容
尾部内容
用
户
注
册
与
登
陆
版
权
声
明
Login
各
类
栏
目
相
关
站
点
链
接
Links
管
理
入
口
CopyRight
联
系
方
式
二、电子商务网站应包括的功能模块
1．网上电子商务系统 商品目录、促销引擎、认证管理、信用管理、
支付和结算、订单处理、配送处理… …
2．用户认证管理系统
注册信息
3．报价系统
4．商品检索引擎
5．自助服务系统
6．论坛系统
买卖双方交流平台
7．网上调查系统 掌握客户需求、市场走向
三、电子商务网站内容设计遵循的原则
相关性
以主题为主线展开内容设计
真实性
对内容要严格把关
动态性
随时进行修改和更新
准确性
尤其是报价、库存
图像替换
适中地使用图像代替文本
一、网站的LOGO如何一分钟搞定
将公司宣传彩页上的公司标识扫描照搬即可
案
例
分
析
二．网站内容收集的技巧
案
例
分
析
1．网站所有内容一律由客户负责提供
2．文字材料一律要电子版
3．电子版的文字材料一律要通过邮箱发送，不要接受U盘材料
三．确定栏目的的技巧
上网浏览10个同类网站,例如做医院网站,则浏览10个医院网站.
每一个网站都有的栏目
加上
70%以上网站都有的栏目
不妨也加上
用处不大的栏目
50%网站有的栏目
特色栏目
案
例
分
析
询问客户的意见
案
例
分
析
四、阿里巴巴网站内容分析
1、头部内容
LOGO(含标题）
分类导航
产品检索
宣传标语
四、阿里巴巴网站内容分析
2、体部内容
（1）资讯栏目
案
例
分
析
四、阿里巴巴网站内容分析
2、体部内容
（1）资讯栏目
（2）社区栏目
案
例
分
析
案
例
分
析
四、阿里巴巴网站内容分析
2、体部内容
（1）资讯栏目 （2）社区栏目
（3）交易栏目
四、阿里巴巴网站内容分析
3、尾部内容
案
例
分
析
强化训练
技能训练：网站内容设计
题目：为自己班级做一个网站，请先进行网站
内容设计。
要求：
1．详细分析你所在班级情况，从实际情况出发
进行规划设计；
2．内容要全面；
3．边设计边上网查找相关网站，进行参照。
第二章
电子商务网站建设概述
第一节
网站建设流程
第二节
内容设计
第三节
版式设计
第四节
导航及目录设计
第五节
风格设计
一、版面布局的基础
1280X1024
分辨率确定
1024X768
高度 随意
宽度
800X600
1024—1000左右
800—776左右
左上角、页面顶部 标志、通知新闻
上部 轻快、积极
内容与放置位置
下部 压抑、稳定
左侧 轻便、自由
右侧 局促、庄重
二、网页的常用版式
1、结构化布局
左右结构布局
20%—30%
2、艺术化布局
左中右结构布局
70%—80%
菜 单
用户登录
流量统计
联系方式
主体内容
上下结构布局
二、网页的常用版式
1、结构化布局
左右结构布局
2、艺术化布局
左中右结构布局
上下结构布局
菜 单
用户登录
流量统计
联系方式
主体内容
链接等
二、网页的常用版式
1、结构化布局
左右结构布局
2、艺术化布局
左中右结构布局
标 题
主 体
上下结构布局
二、网页的常用版式
1、结构化布局
左右结构布局
最广泛
2、艺术化布局
左中右结构布局
上下结构布局
比较呆板、不够灵活
二级页面、文章页面
二、网页的常用版式
1、结构化布局
2、艺术化布局
海报式布局
也称为POP布局
综合式布局
页面布局善于变化 FLASH
三、版面布局的原则
1、根据网站的客户群选择合适的布局
2、整体布局要遵循简洁大方的原则
3、要注意视觉效果与内容翔实相结合的原则
4、主次分明条理清晰的原则
移花接木巧构思
动
手
制
作
题 目
为某书店设计一个电子商务网站
操作步
骤
1、在百渡中检索相关网站，如“网上书店”。
2、查看网站的头部，找到合适的用抓图工具截下，放到
Word中。
3、查看网站体部的每一个模块及尾部，用抓图工具截下，
放到Word中。
4、最后用WORD组合成一个完整的页面，形成了整体网站
的构思。
阿里巴巴网站布局分析
1、网站的宽度依据1024X768像素进行设计；
2、网页上面的黄金地带即放置了网站的LOGO、导航、
Flash动画广告；
3、网站符合结构化布局的标准，体部采用左右结构
布局，条理清晰；
4、网站简洁大方、视觉效果极佳、主次分明、条理
清晰，符合网站制作的五大原则。
案
例
分
析
强化训练
网站版式分析
题目：分析新浪博客、网易、齐齐哈尔大
学四个网站的版式
要求：
1．对给定网站进行仔细分析，对其结构、
版式进行全面观察；
2．对照版面布局的原则，逐条对比分析。
第二章
电子商务网站建设概述
第一节
网站建设流程
第二节
内容设计
第三节
板式设计
第四节
导航及目录设计
第五节
风格设计
一、电子商务网站导航栏设计概述
1．导航的作用
向导
既直接又简单
2．导航设计原则
每个网页中应有一个指向主页的链接
美观大方，而且要高效易用。
一、导航分类
主要栏目
出现在网站的每页上
全局导航
一级目录
次要栏目
局部导航
二级以上目录
三、电子商务网站导航栏设计方法
1、电子商务网站导航栏的表现形式
纯文字表现法
图片表现法
优点：显示速度快
缺点：视觉效果差
优点：视觉效果好
缺点：显示速度慢
三、电子商务网站导航栏设计方法
2、电子商务网站导航栏的常见内容
首
页
简介类
如：单位概况、企业简介、走进企业
展示类
如：产品介绍
社区类
如：论坛、留言板
四、电子商务网站目录设计概述
网站目录是指建立网站时创建的目录，用于存放网站中所有的图片、
网页、数据库等文件。站点本身的维护、未来的扩充和移植有着重要的
影响。
原则：
（1）分类存放、分别建立目录 分门别类，有序存放
（2）目录的层次不要太深 不超过3层
（3）根目录下不要存放所有文件 主页文件、流量统计的文本文件
（4）根据栏目内容建立子目录
（5）在每个主栏目子目录下都建立独立的images目录
（6）不要使用中文目录
（7）不要使用过长的目录 影响检索速度
五、网站目录建设的步骤及方法
1.建立一个用于存放网站的总目录 如：MyWeb
2.进入此网站目录，展开网站目录的建设工作
3.在网站的根目录下建立一个Images子目录 存放首页图像文件
4.在网站的根目录下建立一个style子目录 存放样式表文件
5.在网站的根目录为每一个栏目建立对应子目录，
每个子目录下建立Images子目录
存放子页面图像文件
1、常用栏目的英文拼写
网站导航 Sitemap
公司简介Profile or Company
公司荣誉 Glories
企业文化Culture
组织机构 organization
发展历程 Development History
合作加盟 Join In Cooperation
工程案例 Engineering Projects
分支机构 Branches
产品销售 Sales
信息发布 Information
分类浏览 Browse By Category
案
例
分
析
经理致辞 Manager’s oration
产品展示 Product
技术力量 Technology
业务范围 Business Scope
供求信息 Supply & Demand
联系我们 Contact Us Contac
返回首页 Homepage
电子商务 E-business
1、常用栏目的英文拼写
行业新闻 Trade News
客户留言 Customer Message
客户服务 Customer Service
新闻动态 News & Trends
销售热线 Sales Hot-Line
在线订购 On-line order
社区 Community
在线调查 Online Inquiry
会员登陆 Member Entrance
常见问题 FA
在线交流 Online Communication
案
例
分
析
论坛 Forum
招聘 Join Us
业务介绍 Business Introduction
下载中心 Download
意见反馈 Feedback
教育培训 Education & Training
专题报道 Special Report
2、网上在线翻译
（1）登陆http://translate.google.cn
（2）在搜索引擎网站上搜索“在线翻译”
案
例
分
析
制作敦煌网的目录结构
1．敦煌网的LOGO及导航栏
动
手
制
作
制作敦煌网的目录结构
2．敦煌网的目录结构设计
动
手
制
作
我的Dhgate栏目
首页图像文件目录
我的Dhgate的图像文件夹
样式文件目录
功能与服务栏目
热门求购栏目
热门求购的图象文件夹
功能与服务的图像文件夹
外贸通栏目
外贸通的图像文件夹
强化训练
设计网站的目录结构
题目：根据下列网站导航设计网站的目录结构
要求：
1．在D盘建立一个DIRSTU的目录，将下列四
题目录全部建在此目录下。
2．按照网站制作的标准进行目录设计。
黑龙江电教馆
黑龙江消费网
齐齐哈哈尔大学研究生处
上海家用电器研究所实验工厂
第二章
电子商务网站建设概述
第一节
网站建设流程
第二节
内容设计
第三节
板式设计
第四节
导航及目录设计
第五节
风格设计
一、电子商务网站风格设计概述
1、什么是电子商务网站的风格
电子商务网站的风格是指站点的整体形象给浏览者的综合感受，
是这个站点的与众不同之处。
网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字……
2、如何树立电子商务网站的风格
(1)色调 符合网站的内容、有独特的创意
(2)简繁 把握好简洁与花哨尺度
(3)字体的使用 标准统一，正文的字体为宋体12像素（五号字）
(4)站内风格的统一
二、电子商务网站色彩搭配
1、色彩搭配概述
主色调: 网站使用最多的颜色称为主色调
辅色调: 与主色调配套的其它颜色
2、主色调的选择
蓝色
企业、事业单位的网站
红色
政府网站、在重大节日期间改版为红色
绿色
食品、农业类网站、购物类、儿童类网站
黑色
科幻、游戏类网站
粉色
女性、儿童类网站
三、电子商务网站文字使用
正文字体 宋体
1、字体的运用
指黑体、宋体、楷体、仿宋体以外
非标准字体的使用
的字体，以图形的形式表现出来
标题字体的使用 不得使用行楷等过于活泼的字体
栏目字体 黑体，用图形的方式，搭配一些小图标
正文字号 12像素、10磅、五号字
2、字号的设置
大标题
不超过36像素
栏目标题 16—18像素、三号、四号、小四号
三、电子商务网站文字使用
3、行间距的设置
1.2倍—1.5倍行距
宋体12像素正文文字，行间距为18像素
字体
正文：宋体 题目：方方正正的，如黑体
字号
正文12px,栏目标题16-18PX，大标题<=36
字色
正文一律用黑色
行距
标准文字的为1.5倍，如12PX字，用18PX行距
总结
一、初学者网站配色技巧
找同类网站做参考
案
例
分
析
二、红、绿、蓝三基色使用的秘密
不要使用纯粹的单一颜色，
在每一种颜色中掺杂少许白色。
案
例
分
析
典型电子商务网站风格剖析
题 目
中国建材网http://www.c-bm.com
动
手
制
作
设计剖
析
一、网站的整体风格
中国建材网，整体效果极佳。内容丰富，又井然有序，色彩斑斓，又
不显花哨。两侧广告条的运用恰到好处，蓝色为主的色调配以红色点缀，
平和中又突显重点，动画的运用再一次增强了整体效果。
二、网站颜色的使用
（1）主色调。本网站以蓝色为主色调，LOGO、导航、栏目标题均为蓝色，
是标准的企业类网站配色方案，整体效果淡雅而清新。
（2）辅助配色。该网站使用红色做为辅色调。吸引了浏览者的视觉，增强
了广告效应，而且红色与蓝色巧妙地进行了搭配，整体效果十分理想。
三、网站文字运用
无论是标题还是正文都符合文字使用的规则，给人的感觉即标准又规范。
强化训练
网站设计风格分析
题目：分析齐齐哈尔大学网站的设计风格，
网址是：www.qqhru.edu.cn
要求：
1．对齐齐哈尔大学网站进行全面分析，
要求具体、细致；
2．分析结果以文本形式用WORD排版。