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

第一节 网站建设流程 第二节 内容设计 第三节 版式设计 第二章 网站建设概述 第四节 导航及目录设计 第五节 风格设计 一、版面布局的基础 左上角、页面顶部 分辨率确定 内容与放置位置 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．导航设计原则 每个网页中应有一个指向主页的链接 美观大方，而且要高效易用。 既直接又简单 向导 一、导航分类 全局导航 局部导航 主要栏目 一级目录 出现在网站的每页上 次要栏目 二级以上目录 网站规划设计 一个网站的成功，重在奠基。没有刻苦的学习，没有辛勤的付出，没有人随随便便能成功。 第 2 章 如何构思一个网站？ 怎样开始创业之旅？ 网易首席构架师丁磊 第一节 网站建设流程 第二节 内容设计 第三节 版式设计 第二章 网站建设概述 第四节 导航及目录设计 第五节 风格设计 一、网站制作流程概述 网站开发需要一个团队合作,所以,你不必全面“精”,但要一 门“通”,整个网站制作过程都要学习,但是要有一项最突出,做到专一博百。 网站制作流程 指导每一个操作步骤 网站成功的有力保障 有效利用时间、提高制作效率 便于团队合作，协同完成 保障网站的科学性、严谨性 二、网站制作流程 1、规划设计 2、实施制作 3、发布维护 二、网站制作流程 1、规划设计 确定主题 规划分析 收集资料 撰写网站规划书 整体规划、系统分析 文字、图片、影音素材 考虑周全、切实可行 市场分析 建设网站目的 网站功能定位 技术解决方案 网站内容规划 网页设计方案 网站维护计划 …… 二、网站制作流程 1、规划设计 2、实施制作 版面设计 编辑排版 后台功能实现 代码整合 Photoshop DreamWeaver 前台美工 二、网站制作流程 1、规划设计 2、实施制作 网站测试 上传发布 日常维护 网站空间 内容维护、版面维护 功能测试 3、发布维护 链接测试 流量压力测试 响应时间测试 如何撰写网站规划书 一、建设网站前的分析 案例分析 二、建设网站目的及功能定位 三、网站技术解决方案 四、网站内容规划 五、网页设计 六、网站维护? 如何撰写网站规划书 一、建设网