网站设计网页设计流程.pptVIP

建立网站整体风格 第三步：设计网站的标准字体。 标准字体是指用于标志、标题、主菜单的特有字体。 一般网页默认的字体是宋体。 使用一些比较特别的字体时，最好使用图片的形式。 页面制作 第一步：画出简线图 简线图指简单的黑白线框图，相当于网站的框架结构图，只关于布局的设计。 工具：铅笔、纸张，或者工具软件。 页面制作 第二步：设计效果图 用绘图软件设计彩色的效果图，是网页的具体形态。 工具采用Photoshop、Firework等。 页面制作—设计效果图 页面制作 第三步：效果图切片 网页效果图完成后，就需要进行网页切片，现在介绍两种切片方式； 方法一：选择“切片工具” ，在效果图中任意裁切 。任何现有切片自动显示在文档窗口中。 注意： 首先希望大家将预期的切片设计好，然后进行切片； 为了切片准确，减少误差，在此建议大家尽量放大图片进行切片； 所有切片都有编号，希望所有的编号能够一目了然。 页面制作—效果图切片 页面制作 第四步：导出网页 页面制作 第五步：网页编辑 网页编辑主要是将使用切片导出的网页进行编辑使其规范易用 后期网页编辑中主要采取两种方式： 第一种是直接在切片效果图中进行编辑，进行后期处理，这种方法适用于艺术界面型网页，具体的方法是直接在网页中设置超级链接，添加动画等效果，或者将某些切片删除（或设置为背景），然后添加需要的文字。 第二种是以导出的网页为基础，利用Dreamweaver软件进行合理的布局与优化。这种方法通用性强，很多网页都可采用。 页面制作—网页编辑 页面制作 第六步：提交给程序员写动态网页 动态网站从功能上简单可以分成前台静态模块和后台动态模块。前面制作的效果图与网页编辑以及动画制作简单可以理解为静态模块，而后台模块主要采用两种方式进行解决： 方式一：下载免费的网站管理平台，然后与前台整合，称之为代码融合。 方式二：所有功能完全自主开发，根据客户的要求定制，逐一实现功能。 页面制作 页面制作工作至此就完成。 后续工作就是根据程序开发工作来做相应的修改调整，以及网站的维护与更新。 Thanks * 2009 @Sofmit 2006 @Sofmit 2006 @Sofmit 网站设计制作过程 成都颠峰软件有限公司 2010.11 网站建设的基本步骤 网站设计制作 前台页面制作 后台程序设计 修改 改进设计 网站发布 网站推广 网站的评价与改进 网站测试 网站设计制作流程图 栏目规划 栏目名称 子栏目名称 内容描述 机器人博览 成长历史 回顾机器人的发展历史，关注机器人的未来发展趋势 动态关注 机器人概述 各家定义 介绍对机器人的各种定义，展示目前机器人的几大种类 分门别类 机器人文化 人机互动 展现人类关于机器人的种种联想，机器人与人类的共同发展 浮想联翩 机器人比赛 群雄逐鹿 介绍近年来的机器人制作赛事和机器人制作的成功案例 设计制作 站点内服务 网站地图 方便访问者的浏览，给浏览者留出发表自己意见的空间 版权申请 论坛 留言板 栏目规划 网站栏目安排要注意以下几个方面： （1）要紧扣主题，尽可能删除与主题无关的栏目。 （2）尽可能将网站最有吸引力的内容列在栏目上。 （3）尽可能方便访问者的浏览和查询。 网站结构规划 版面结构是指一种能够让浏览者清楚、容易地理解作品传达的信息的东西，也就是将不同元素巧妙排列的方式。 布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。 设计版面时要把文字、图片、空白当作一个整体来看，采用平面分割方式，调动全部面积来构建整个版面。 几种常见的页面布局样式： “厂”字型 主菜单以及横条网站标志+广告条 主 菜 单 显 示内容 几种常见的页面布局样式： “口”字型 主菜单 广 告条 主要内容 友情链接等 几种常见的页面布局样式： 自由式，又称POP布局 页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放。 网站结构规划 网页版面布局可按创意草案、粗略布局、最后定案 三个步骤来进行。 标题栏 子栏目 名称 主要内容 内容提示 附加信息 网站结构规划—多级规划 一级页面 二级页面 一个新闻站点的页面结构如下： 版面设计应遵循的原则 变化和统一 对比和调和 均齐与平衡 节奏与韵律 建立网站整体风格 第一步：设计、制作一个网站标志(logo) 标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等。 标志的设计创意来自你网站的名称和内容。 设计标志有以下几种方法： 1、选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化。例： 2、对于专业性的网站，可以以本专业有代表的物品作为标志。例: 3、最常用和最简单的方式是用自己网站的中文或者英文名称作为标志。采用不同的字体、字母的变形与组