1、2006 Sofmit 2006 Sofmit 网站设计制作过程网站设计制作过程 成都颠峰软件有限公司成都颠峰软件有限公司 2010.11 2009 Sofmit 网站建设的基本步骤网站建设的基本步骤 2009 Sofmit 网站设计制作网站设计制作 前台页面制作前台页面制作 后台程序设计后台程序设计 修改修改 改进设计改进设计 网站发布网站发布 网站推广网站推广 网站的评价与改进网站的评价与改进 网站测试网站测试 网站设计制作流程图网站设计制作流程图 2009 Sofmit 栏目规划栏目规划 栏目名称 子栏目名称 内容描述 机器人博览 成长历史 回顾机器人的发展历史，关注机器 人的未来发展趋
2、势 动态关注 机器人概述 各家定义 介绍对机器人的各种定义，展示目 前机器人的几大种类 分门别类 机器人文化 人机互动 展现人类关于机器人的种种联想， 机器人与人类的共同发展 浮想联翩 机器人比赛 群雄逐鹿 介绍近年来的机器人制作赛事和机 器人制作的成功案例 设计制作 站点内服务 网站地图 方便访问者的浏览，给浏览者留出 发表自己意见的空间 版权申请 论坛 留言板 2009 Sofmit 栏目规划栏目规划 网站栏目安排要注意以下几个方面： （1）要紧扣主题，尽可能删除与主题无关 的栏目。 （2）尽可能将网站最有吸引力的内容列在 栏目上。 （3）尽可能方便访问者的浏览和查询。 2009 Sofm
3、it 网站结构规划网站结构规划 版面结构是指一种能够让浏览者清楚、容 易地理解作品传达的信息的东西，也就是 将不同元素巧妙排列的方式。 布局就是以最适合浏览的方式将图片和文 字排放在页面的不同位置。 设计版面时要把文字、图片、空白当作一 个整体来看，采用平面分割方式，调动全 部面积来构建整个版面。 2009 Sofmit 几种常见的页面布局样式：几种常见的页面布局样式： “厂”字型 主菜单以及横条网站标志主菜单以及横条网站标志+广告条广告条 主主 菜菜 单单 显显 示示 内内 容容 2009 Sofmit 几种常见的页面布局样式：几种常见的页面布局样式： “口”字型 主菜单主菜单 广广 告告
4、条条 主要内容主要内容 友情链接等友情链接等 2009 Sofmit 几种常见的页面布局样式：几种常见的页面布局样式： 自由式，又称POP布局 页面布局像页面布局像 一张宣传海一张宣传海 报，以一张报，以一张 精美图片作精美图片作 为页面的设为页面的设 计中心，菜计中心，菜 单栏目自由单栏目自由 摆放。摆放。 2009 Sofmit 网站结构规划网站结构规划 网页版面布局可按创意草案、粗略布局、 最后定案 三个步骤来进行。 标题栏 子栏目 名称 主要内容 内容提 示 附加信息 2009 Sofmit 网站结构规划网站结构规划多级规划多级规划 首页首页 财经新闻页财经新闻页娱乐新闻页娱乐新闻页I
5、T新闻页新闻页 财经新闻财经新闻1财经新闻财经新闻2 2娱乐新闻娱乐新闻1娱乐新闻娱乐新闻2 2IT新闻新闻1IT新闻新闻2 2 一级页面一级页面 二级页面二级页面 一个新闻站点的页面结构如下： 2009 Sofmit 版面设计应遵循的原则版面设计应遵循的原则 变化和统一 对比和调和 均齐与平衡 节奏与韵律 2009 Sofmit 建立网站整体风格建立网站整体风格 第一步：设计、制作一个网站标志(logo) 标志可以是中文、英文字母，可以是符号、图案，可以是 动物或者人物等。 标志的设计创意来自你网站的名称和内容。 设计标志有以下几种方法： 1、选择与网站主题有关的，并具有代表性的人或者物，用
6、 它们作为设计的蓝本，加以卡通化和艺术化。例： 2、对于专业性的网站，可以以本专业有代表的物品作为标 志。例: 3、最常用和最简单的方式是用自己网站的中文或者英文名 称作为标志。采用不同的字体、字母的变形与组合，可以 很容易制作出自己的标志。 2009 Sofmit 建立网站整体风格建立网站整体风格LOGO欣赏欣赏 2009 Sofmit 建立网站整体风格建立网站整体风格 第二步：设计网站的标准颜色 网站的标志、标题、主菜单和主色块文字的链接色彩尽量 使用标准色彩； 图片的主色彩、背景色、边框等尽量使用标准色彩同色系 的色彩。 一个网站的标准色彩不超过3种。 色彩总的应用原则应该是“总体协调，
7、局部对比”。 2009 Sofmit 建立网站整体风格建立网站整体风格色彩的使用色彩的使用 蓝色调为主，加蓝色调为主，加 上白色和红色，上白色和红色， 强调权威与真实强调权威与真实 2009 Sofmit 建立网站整体风格建立网站整体风格色彩的使用色彩的使用 绿色为主，白色绿色为主，白色 为辅，产生舒适、为辅，产生舒适、 优雅、适于阅读优雅、适于阅读 的气氛的气氛 2009 Sofmit 建立网站整体风格建立网站整体风格色彩的使用色彩的使用 橙色为主，白色橙色为主，白色 为辅，具有轻快，为辅，具有轻快， 时尚的效果时尚的效果 2009 Sofmit 建立网站整体风格建立网站整体风格色彩的使用色
8、彩的使用 红色为主，产生红色为主，产生 热情、活力的感热情、活力的感 觉，充满欢乐的觉，充满欢乐的 气氛气氛 2009 Sofmit 页面设计中的色彩页面设计中的色彩 在网页中色彩具有三重功效：在网页中色彩具有三重功效： 色彩的功利作用：通过色彩的搭配，让页面色彩的功利作用：通过色彩的搭配，让页面 的内容轻松呈现。的内容轻松呈现。 色彩的心理作用：色彩的象征作用可以让人色彩的心理作用：色彩的象征作用可以让人 产生不同的联想和心理感觉。产生不同的联想和心理感觉。 色彩的审美作用：在色彩的搭配中可以产生色彩的审美作用：在色彩的搭配中可以产生 和谐的美感。和谐的美感。 2009 Sofmit 色彩的
9、意象色彩的意象 红的色彩意象红的色彩意象 红色是强有力的色彩，象征活力、积极，热红色是强有力的色彩，象征活力、积极，热 诚，温暖，愤怒、庄严，前进等涵义。诚，温暖，愤怒、庄严，前进等涵义。 红色容易引起注意，所以在各种媒体中也被红色容易引起注意，所以在各种媒体中也被 广泛的利用，具有较佳的明视效果。广泛的利用，具有较佳的明视效果。 红色也常用来作为警告，危险，禁止，防火红色也常用来作为警告，危险，禁止，防火 等标示用色，在工业安全用色中，红色即是等标示用色，在工业安全用色中，红色即是 警告，危险，禁止，防火的指定色。警告，危险，禁止，防火的指定色。 2009 Sofmit 橙的色彩意象橙的色彩
10、意象 橙色是十分活泼的光辉色彩，是暖色系中最温暖的橙色是十分活泼的光辉色彩，是暖色系中最温暖的 色彩。色彩。 它象征秋天，收获，富足，温馨，甜蜜，欢快。它象征秋天，收获，富足，温馨，甜蜜，欢快。 橙色明视度高，在工业安全用色中，橙色即是警戒橙色明视度高，在工业安全用色中，橙色即是警戒 色，如火车头，登山服装，背包，救生衣等。色，如火车头，登山服装，背包，救生衣等。 由于橙色非常明亮刺眼，有时会产生低俗的意象，由于橙色非常明亮刺眼，有时会产生低俗的意象， 在运用橙色时要注意选择搭配的色彩和表现方式。在运用橙色时要注意选择搭配的色彩和表现方式。 橙色与蓝色的搭配，构成了最响亮、最欢快的色彩橙色与蓝
11、色的搭配，构成了最响亮、最欢快的色彩 2009 Sofmit 黄色黄色 黄色是亮度最高的色，在高明度下能够保持很黄色是亮度最高的色，在高明度下能够保持很 强的纯度。强的纯度。 黄色象征灿烂、辉煌，财富，权利，希望，智黄色象征灿烂、辉煌，财富，权利，希望，智 慧，是骄傲的色彩。慧，是骄傲的色彩。 黄色明视度高，在工业安全用色中，黄色即是黄色明视度高，在工业安全用色中，黄色即是 警告危险色，常用来警告危险或提醒注意，如警告危险色，常用来警告危险或提醒注意，如 交通标志上的黄灯，工程用的大型机器，学生交通标志上的黄灯，工程用的大型机器，学生 用雨衣，雨鞋等，都使用黄色。用雨衣，雨鞋等，都使用黄色。
12、黑色或紫色的衬托可以使黄色达到力量无限扩黑色或紫色的衬托可以使黄色达到力量无限扩 大的强度。白色是吞没黄色的色彩。大的强度。白色是吞没黄色的色彩。 2009 Sofmit 绿的色彩意象绿的色彩意象 绿色是一种宽容的颜色。象征和平、生机、绿色是一种宽容的颜色。象征和平、生机、 希望、理想、健康、安全。嫩绿象征春天，希望、理想、健康、安全。嫩绿象征春天， 翠绿象征夏天。翠绿象征夏天。 在商业设计中，绿色所传达的清爽、生长的在商业设计中，绿色所传达的清爽、生长的 意象，符合服务业，卫生保健业的诉求，在意象，符合服务业，卫生保健业的诉求，在 工厂中为了避免眼睛疲劳，许多工作的机械工厂中为了避免眼睛疲劳
13、，许多工作的机械 采用绿色，一般的医疗机构场所，也常采用采用绿色，一般的医疗机构场所，也常采用 绿色来作空间色彩规划。绿色来作空间色彩规划。 2009 Sofmit 蓝色的色彩意象蓝色的色彩意象 蓝色是博大的色彩，象征天空、海洋、自由、蓝色是博大的色彩，象征天空、海洋、自由、 辽阔、科技、冷静、先进、永恒、忧郁。辽阔、科技、冷静、先进、永恒、忧郁。 由于蓝色沉稳的特性，具有理智，准确的意象由于蓝色沉稳的特性，具有理智，准确的意象 ，在商业设计中，强调科技，效率的商品或企，在商业设计中，强调科技，效率的商品或企 业形象，大多选用蓝色当标准色，如电脑，汽业形象，大多选用蓝色当标准色，如电脑，汽 车
14、，银行等。车，银行等。 2009 Sofmit 紫色的色彩意象紫色的色彩意象 紫色象征权力、神秘、优雅、高贵、成熟等紫色象征权力、神秘、优雅、高贵、成熟等 意象意象 紫色可以容纳许多淡化的层次，纯紫色只要紫色可以容纳许多淡化的层次，纯紫色只要 加入少量的白色，就会成为一种十分优美的加入少量的白色，就会成为一种十分优美的 色彩。色彩。 由于具有强烈的女性化性格，在商业设计用由于具有强烈的女性化性格，在商业设计用 色中，紫色也受到限制，常用在和女性有关色中，紫色也受到限制，常用在和女性有关 的商品或企业中。的商品或企业中。 2009 Sofmit 2009 Sofmit 黑白灰的色彩意象黑白灰的色
15、彩意象 黑色具有高贵，稳重，科技的意象。许多黑色具有高贵，稳重，科技的意象。许多 科技产品的用色。黑色的庄严也常用在一科技产品的用色。黑色的庄严也常用在一 些特殊场合的空间设计，生活用品和服饰些特殊场合的空间设计，生活用品和服饰 设计大多利用黑色来塑造高贵的形象，适设计大多利用黑色来塑造高贵的形象，适 合和许多色彩作搭配。合和许多色彩作搭配。 实例实例 2009 Sofmit 白色具有高级，科技的意象，通常需和其白色具有高级，科技的意象，通常需和其 他色彩搭配使用。纯白色会带给别人寒冷他色彩搭配使用。纯白色会带给别人寒冷 ，严峻的感觉。，严峻的感觉。 灰色具有柔和，高雅，中庸的意象。许多灰色具
16、有柔和，高雅，中庸的意象。许多 的高科技产品，采用灰色来传达高级，科的高科技产品，采用灰色来传达高级，科 技的形象和金属材质，使用灰色时大多利技的形象和金属材质，使用灰色时大多利 用不同的层次变化组合或配其他色彩。用不同的层次变化组合或配其他色彩。 2009 Sofmit 网页色彩设计体现的原则网页色彩设计体现的原则 色彩的鲜明性。色彩的鲜明性。网页的色彩要有统一网页的色彩要有统一 格调，引人注目。格调，引人注目。 色彩的独特性。色彩的独特性。要有与众不同的色调要有与众不同的色调 ，在明度、纯度上进行调整，使其与，在明度、纯度上进行调整，使其与 众不同。众不同。 2009 Sofmit 建立网
17、站整体风格建立网站整体风格 第三步：设计网站的标准字体。 标准字体是指用于标志、标题、主菜单的特有 字体。 一般网页默认的字体是宋体。 使用一些比较特别的字体时，最好使用图片的 形式。 2009 Sofmit 页面制作页面制作 第一步：画出简线图 简线图指简单的黑白线框图，相当于网站的框 架结构图，只关于布局的设计。 工具：铅笔、纸张，或者工具软件。 2009 Sofmit 页面制作页面制作 第二步：设计效果图 用绘图软件设计彩色的效果图，是网页 的具体形态。 工具采用Photoshop、Firework等。 2009 Sofmit 页面制作页面制作设计效果图设计效果图 2009 Sofmit
18、 页面制作页面制作 第三步：效果图切片 网页效果图完成后，就需要进行网页切片，现在介绍 两种切片方式； 方法一：选择“切片工具” ，在效果图中任意裁切 。 任何现有切片自动显示在文档窗口中。 注意： 首先希望大家将预期的切片设计好，然后进行切片； 为了切片准确，减少误差，在此建议大家尽量放大图 片进行切片； 所有切片都有编号，希望所有的编号能够一目了然。 2009 Sofmit 页面制作页面制作效果图切片效果图切片 2009 Sofmit 页面制作页面制作 第四步：导出网页 2009 Sofmit 页面制作页面制作 第五步：网页编辑 网页编辑主要是将使用切片导出的网页进行编辑使其规范易用 后期
19、网页编辑中主要采取两种方式： 第一种是直接在切片效果图中进行编辑，进行后期处理，这 种方法适用于艺术界面型网页，具体的方法是直接在网页中 设置超级链接，添加动画等效果，或者将某些切片删除（或 设置为背景），然后添加需要的文字。 第二种是以导出的网页为基础，利用Dreamweaver软件进行合 理的布局与优化。这种方法通用性强，很多网页都可采用。 2009 Sofmit 页面制作页面制作网页编辑网页编辑 2009 Sofmit 页面制作页面制作 第六步：提交给程序员写动态网页 动态网站从功能上简单可以分成前台静态模块和后 台动态模块。前面制作的效果图与网页编辑以及动 画制作简单可以理解为静态模块，而后台模块主要 采用两种方式进行解决： 方式一：下载免费的网站管理平台，然后与前台整 合，称之为代码融合。 方式二：所有功能完全自主开发，根据客户的要求 定制，逐一实现功能。 2009 Sofmit 页面制作页面制作 页面制作工作至此就完成。 后续工作就是根据程序开发工作来做相应的修 改调整，以及网站的维护与更新。 2009 Sofmit Thanks
