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

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