第二章-电子商务网站规划设计PPT课件

1 网站规划设计 一个网站的成功 重在奠基 没有刻苦的学习 没有辛勤的付出 没有人随随便便能成功 第2章 如何构思一个网站 怎样开始创业之旅 网易首席构架师丁磊 第一节网站建设流程 第二节内容设计 第三节版式设计 第二章网站建设概述 第四节导航及目录设计 第五节风格设计 一 网站制作流程概述 网站开发需要一个团队合作 所以 你不必全面 精 但要一门 通 整个网站制作过程都要学习 但是要有一项最突出 做到专一博百 网站制作流程 二 网站制作流程 1 规划设计 2 实施制作 3 发布维护 二 网站制作流程 1 规划设计 确定主题 规划分析 收集资料 撰写网站规划书 整体规划 系统分析 文字 图片 影音素材 考虑周全 切实可行 市场分析 建设网站目的 网站功能定位 技术解决方案 网站内容规划 网页设计方案 网站维护计划 二 网站制作流程 1 规划设计 2 实施制作 版面设计 编辑排版 后台功能实现 代码整合 Photoshop DreamWeaver 前台美工 二 网站制作流程 1 规划设计 2 实施制作 网站测试 上传发布 日常维护 网站空间 内容维护 版面维护 功能测试 3 发布维护 链接测试 流量压力测试 响应时间测试 如何撰写网站规划书 一 建设网站前的分析 案例分析 二 建设网站目的及功能定位 三 网站技术解决方案 四 网站内容规划 五 网页设计 六 网站维护 如何撰写网站规划书 一 建设网站前的分析 案例分析 1 行业市场分析 2 公司概况了解 知彼 知已 如何撰写网站规划书 一 建设网站前的分析 案例分析 二 建设网站目的及功能定位 1 确定网站目的 2 确定网站功能 如何撰写网站规划书 一 建设网站前的分析 案例分析 二 建设网站目的及功能定位 三 网站技术解决方案 1 服务器 2 服务器平台 3 开发技术 4 数据库 自建服务器 租用虚拟主机 操作系统类型 开发技术类型 数据库系统类型 如何撰写网站规划书 一 建设网站前的分析 案例分析 二 建设网站目的及功能定位 三 网站技术解决方案 四 网站内容规划 1 规划网站内容 会员注册 信息检索 订单确认 付款 跟人信息保密 相关帮助 2 确定网站栏目 如何撰写网站规划书 一 建设网站前的分析 案例分析 二 建设网站目的及功能定位 三 网站技术解决方案 四 网站内容规划 五 网页设计 1 确定网站整体风格 网页色彩 版面规划 2 确定网站的布局 如何撰写网站规划书 一 建设网站前的分析 案例分析 二 建设网站目的及功能定位 三 网站技术解决方案 四 网站内容规划 五 网页设计 六 网站维护 1 管理方案 2 运营与推广方案 3 安全性措施 如何撰写网站规划书 案例分析 案例 古狗特色商品连锁店 网站规划书 第一节网站建设流程 第二节内容设计 第三节板式设计 第二章网站建设概述 第四节导航及目录设计 第五节风格设计 齐齐哈尔旅游网 网站体部 网站尾部 网站头部 一 网站应该包括的内容 头部内容 体部内容 尾部内容 网站标识 标题 广告条 分类导航与检索 Logo Title Banner Menu Search Banner规格 全幅 半幅 垂直 宽型 小型 486x60 234x60 120 x240 728x90 88x31 一 网站应该包括的内容 头部内容 体部内容 尾部内容 网站标识 标题 广告条 分类导航与检索 Logo Title Banner Menu Search 用户注册与登陆 各类栏目 相关站点链接 Login Links 版权声明 管理入口 联系方式 CopyRight 二 网站应包括的功能模块 1 网上电子商务系统 商品目录 促销引擎 认证管理 信用管理 支付和结算 订单处理 配送处理 2 用户认证管理系统 注册信息 3 报价系统 4 商品检索引擎 5 自助服务系统 6 论坛系统 买卖双方交流平台 7 网上调查系统 掌握客户需求 市场走向 三 网站内容设计遵循的原则 相关性 真实性 动态性 准确性 图像替换 以主题为主线展开内容设计 对内容要严格把关 随时进行修改和更新 尤其是报价 库存 适中地使用图像代替文本 一 网站的LOGO如何一分钟搞定 案例分析 将公司宣传彩页上的公司标识扫描照搬即可 二 网站内容收集的技巧 案例分析 1 网站所有内容一律由客户负责提供 2 文字材料一律要电子版 3 电子版的文字材料一律要通过邮箱发送 不要接受U盘材料 三 确定栏目的的技巧 案例分析 用处不大的栏目特色栏目 每一个网站都有的栏目 70 以上网站都有的栏目 50 网站有的栏目 加上 不妨也加上 询问客户的意见 上网浏览10个同类网站 例如做医院网站 则浏览10个医院网站 四 阿里巴巴网站内容分析 案例分析 LOGO 含标题 宣传标语 产品检索 分类导航 1 头部内容 四 阿里巴巴网站内容分析 案例分析 2 体部内容 1 资讯栏目 四 阿里巴巴网站内容分析 案例分析 2 社区栏目 1 资讯栏目 2 体部内容 四 阿里巴巴网站内容分析 案例分析 2 社区栏目 1 资讯栏目 2 体部内容 3 交易栏目 四 阿里巴巴网站内容分析 案例分析 3 尾部内容 第一节网站建设流程 第二节内容设计 第三节版式设计 第二章网站建设概述 第四节导航及目录设计 第五节风格设计 一 版面布局的基础 左上角 页面顶部 1280X1024 1024X768 800X600 高度 宽度 随意 1024 1000左右 800 776左右 上部 下部 左侧 右侧 标志 通知新闻 轻快 积极 压抑 稳定 轻便 自由 局促 庄重 二 网页的常用版式 左右结构布局 左中右结构布局 上下结构布局 20 30 70 80 菜单 用户登录 流量统计 联系方式 主体内容 1 结构化布局 2 艺术化布局 二 网页的常用版式 左右结构布局 左中右结构布局 上下结构布局 菜单 用户登录 流量统计 联系方式 主体内容 链接等 1 结构化布局 2 艺术化布局 二 网页的常用版式 左右结构布局 左中右结构布局 上下结构布局 主体 标题 1 结构化布局 2 艺术化布局 二 网页的常用版式 左右结构布局 左中右结构布局 上下结构布局 最广泛 比较呆板 不够灵活 二级页面 文章页面 1 结构化布局 2 艺术化布局 二 网页的常用版式 2 艺术化布局 海报式布局 也称为POP布局 页面布局善于变化 综合式布局 FLASH 1 结构化布局 三 版面布局的原则 1 根据网站的客户群选择合适的布局 2 整体布局要遵循简洁大方的原则 3 要注意视觉效果与内容翔实相结合的原则 4 主次分明条理清晰的原则 1 在百渡中检索相关网站 如 网上书店 动手制作 为某书店设计一个网站 移花接木巧构思 2 查看网站的头部 找到合适的用抓图工具截下 放到Word中 3 查看网站体部的每一个模块及尾部 用抓图工具截下 放到Word中 4 最后用WORD组合成一个完整的页面 形成了整体网站的构思 阿里巴巴网站布局分析 案例分析 4 网站简洁大方 视觉效果极佳 主次分明 条理清晰 符合网站制作的五大原则 1 网站的宽度依据1024X768像素进行设计 2 网页上面的黄金地带即放置了网站的LOGO 导航 Flash动画广告 3 网站符合结构化布局的标准 体部采用左右结构布局 条理清晰 强化训练 网站版式分析题目 分析新浪博客 网易 齐齐哈尔大学四个网站的版式要求 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公司简介ProfileorCompany公司荣誉Glories企业文化Culture组织机构organization经理致辞Manager soration发展历程DevelopmentHistory产品展示Product合作加盟JoinInCooperation技术力量Technology工程案例EngineeringProjects业务范围BusinessScope分支机构Branches供求信息Supply Demand产品销售Sales联系我们ContactUsContactUs信息发布Information返回首页Homepage分类浏览BrowseByCategory电子商务E business 行业新闻TradeNews客户留言CustomerMessage客户服务CustomerService新闻动态News Trends销售热线SalesHot Line论坛Forum在线订购On lineorder招聘JoinUs社区Community业务介绍BusinessIntroduction在线调查OnlineInquiry下载中心Download会员登陆MemberEntrance意见反馈Feedback常见问题FA教育培训Education Training在线交流OnlineCommunication专题报道SpecialReport 案例分析 1 常用栏目的英文拼写 1 登陆 2 网上在线翻译 2 在搜索引擎网站上搜索 在线翻译 案例分析 制作敦煌网的目录结构 动手制作 1 敦煌网的LOGO及导航栏 制作敦煌网的目录结构 动手制作 2 敦煌网的目录结构设计 首页图像文件目录 样式文件目录 我的Dhgate栏目 我的Dhgate的图像文件夹 功能与服务栏目 功能与服务的图像文件夹 热门求购栏目 外贸通栏目 热门求购的图象文件夹 外贸通的图像文件夹 黑龙江电教馆 黑龙江消费网 齐齐哈哈尔大学研究生处 上海家用电器研究所实验工厂 第一节网站建设流程 第二节内容设计 第三节板式设计 第二章网站建设概述 第四节导航及目录设计 第五节风格设计 一 网站风格设计概述 1 什么是网站的风格 2 如何树立网站的风格 网站的风格是指站点的整体形象给浏览者的综合感受 是这个站点的与众不同之处 网站标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 1 色调 2 简繁 3 字体的使用 4 站内风格的统一 符合网站的内容 有独特的创意 把握好简洁与花哨尺度 标准统一 正文的字体为宋体12像素 五号字 二 网站色彩搭配 1 色彩搭配概述 2 主色调的选择 粉色 蓝色 红色 绿色 黑色 企业 事业单位的网站 政府网站 在重大节日期间改版为红色 食品 农业类网站 购物类 儿童类网站 科幻 游戏类网站 女性 儿童类网站 主色调 网站使用最多的颜色称为主色调辅色调 与主色调配套的其它颜色 三 网站文字使用 1 字体的运用 2 字号的设置 正文字体 非标准字体的使用 标题字体的使用 栏目字体 宋体 指黑体 宋体 楷体 仿宋体以外的字体 以图形的形式表现出来 不得使用行楷等过于活泼的字体 黑体 用图形的方式 搭配一些小图标 正文字号 大标题 栏目标题 12像素 10磅 五号字 不超过36像素 16 18像素 三号 四号 小四号 三 网站文字使用 3 行间距的设置 1 2倍 1 5倍行距宋体12像素正文文字 行间距为18像素 总结 字体 字号 字色 行距 正文 宋体题目 方方正正的 如黑体 正文一律用黑色 标准文字的为1 5倍 如12PX字 用18PX行距 正文12px 栏目标题16 18PX 大标题 36 一 初学者网站配色技巧 案例分析 找同类网站做参考 二 红 绿 蓝三基色使用的秘密 案例分析 不要使用纯粹的单一颜色 在每一种颜色中掺杂少许白色 典型网站风格剖析 动