网页设计流程.ppt

网页设计流程
李文兢
案例描述
网站的开发过程
网站的开发过程大致可分为5个阶段:
策划与分析、设计、开发、测试、发布
在网站开发的每一个阶段,都需要相关各方人员的共同合作,包括客户、设计师和编程开发人员等不同角色
策划与分析
设计
开发
测试
发布
客户
设计师
设计师
设计师
架构师
程序开发员
客户
设计师
程序开发员
设计师
程序开发员
网站开发过程的各环节
明确网站定位
收集信息和素材
设计页面方案
制作各个页面
实现后台功能
整合与测试网站
网站维护和推广
策划栏目内容
前期
中期
后期
遵循Web标准的网页设计步骤
步骤
工具
内容分析
结构设计
原型设计
效果图设计
布局设计
视觉设计
交互设计
铅笔
纸
橡皮
HTML
Axure RP
Visio
Fireworks
Word
Fireworks
Photoshop
CSS
HTML
CSS
HTML
Fireworks
Photoshop
CSS
JavaScript
DreamWeaver
网页设计是网站开发中耗时最多,也是最为关键的一个环节,下面介绍的是从零开始遵循Web标准的理念设计一个页面的过程,我们可以把一个页面的完整设计过程分为7个步骤:
遵循Web标准的网页设计步骤
内容分析:仔细研究需要在网页中的展现的内容,梳理其中的逻辑关系,分清层次,以及重要程度。
结构设计:根据内容分析的成果,搭建出合理的HTML结构,保证在没有任何CSS样式的情况下,在浏览器保持高度可读性。
原型设计:根据网页的结构,绘制出原型线框图,对页面进行合理的分区的布局,原型线框图是设计负责人与客户交流的最佳媒介。
效果图设计:在确定的原型线框图基础上,使用美工软件,设计出具有良好视觉效果的图片。
布局设计:使用HTML和CSS对页面进行布局。
视觉设计:使用CSS并配合美工设计元素,完成由设计方法到网页的转化。
交互设计:为网页增添交互效果,如鼠标指针经过和点击时的一些特效等。
一、内容分析
参考已有的网站
明确网页的内容,如网页需要传递给浏览者的信息,各种信息的重要性,各种信息的组织架构等。以“信息与网络中心”首页为例进行说明。
对于这个页面,首先要有明确的网站名称和标志(logo),此外,要使浏览者能方便地了解这个网站所有者的信息,包括指向自身的介绍(“关于我们”)、联系方式等内容的链接。然后再思考制作这个网站的目的是什么,因为这个网站的根本目的是为了对外宣传网络中心这个部门,给全校师生员工提供更便捷的网络和信息化服务,实现数字化校园,信息化教学。那么这些目的就是该网站的定位。
根据网站的定位确定该网站具有的栏目结构,并把每个第一级栏目的标题作为导航条的导航项。
二、 HTML结构设计
使用具有一定含义的标记,如<h1><p>…
任何一个页面,应该尽可能保证在不使用CSS的情况下,依然保持良好的结构和可读性。这不仅仅对访问者有帮助,而且有助于被搜索引擎收录。
当有若干个项目并列时,<ul>是较好的选择。
三、原型设计
首页
二级页面
内页
四、效果图设计