网页设计流程.pptVIP

网页设计流程

李文兢

案例描述

网站的开发过程

网站的开发过程大致可分为5个阶段：

筹划与分析、设计、开发、测试、发布

在网站开发的每一个阶段，都需要相关各方人员的共同合作，包括客户、设计师和编程开发人员等不同角色

策划与分析

设计

开发

测试

发布

客户

设计师

设计师

设计师

架构师

程序开发员

客户

设计师

程序开发员

设计师

程序开发员

网站开发过程的各环节

遵循Web标准的网页设计步骤

步骤

工具

内容分析

结构设计

原型设计

效果图设计

布局设计

视觉设计

交互设计

铅笔

纸

橡皮

HTML

AxureRP

Visio

Fireworks

Word

Fireworks

Photoshop

CSS

HTML

CSS

HTML

Fireworks

Photoshop

CSS

JavaScript

DreamWeaver

网页设计是网站开发中耗时最多，也是最为关键的一个环节，下面介绍的是从零开始遵循Web标准的理念设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤：

遵循Web标准的网页设计步骤

内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。

结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高度可读性。

原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最正确媒介。

效果图设计：在确定的原型线框图根底上，使用美工软件，设计出具有良好视觉效果的图片。

布局设计：使用HTML和CSS对页面进行布局。

视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。

交互设计：为网页增添交互效果，如鼠标指针经过和点击时的一些特效等。

一、内容分析

参考已有的网站

明确网页的内容，如网页需要传递给浏览者的信息，各种信息的重要性，各种信息的组织架构等。以“信息与网络中心”首页为例进行说明。

对于这个页面，首先要有明确的网站名称和标志〔logo〕，此外，要使浏览者能方便地了解这个网站所有者的信息，包括指向自身的介绍〔“关于我们”〕、联系方式等内容的链接。然后再思考制作这个网站的目的是什么，因为这个网站的根本目的是为了对外宣传网络中心这个部门，给全校师生员工提供更便捷的网络和信息化效劳，实现数字化校园，信息化教学。那么这些目的就是该网站的定位。

根据网站的定位确定该网站具有的栏目结构，并把每个第一级栏目的标题作为导航条的导航项。

二、HTML结构设计

使用具有一定含义的标记，如h1p…

任何一个页面，应该尽可能保证在不使用CSS的情况下，依然保持良好的结构和可读性。这不仅仅对访问者有帮助，而且有助于被搜索引擎收录。

当有假设干个工程并列时，ul是较好的选择。

三、原型设计

首页

二级页面

内页

四、效果图设计

五、布局设计

在这一步中，任务是把各种元素通过CSS布局放到适当的位置，而暂时不涉及对页面元素美化这样细节的因素

1.整体样式设计

首先对整个页面的共有属性进行一些设置，例如字体、margin、padding等属性都进行初始设置，以保证这些内容在各个浏览器中有相同的表现

2.页头局部

#header局部的代码中，将position属性设置为relative，目的是使其包含的子元素使用绝对定位时，以页头而不是浏览器窗口为定位基准，然后设定它的宽度width等于网页的宽。

3.内容局部

在原型线框图中，内容局部为左右两列，下面首先对HTML代码进行改造，然后设置相应的CSS代码，实现左右分栏的要求

4.页脚局部

为页脚局部增加一个div，并将其id名称设置为“footer”

六、视觉设计

页面总体的布局设计完成后，就要开始对细节进行设计了，整个设计过程是按照从内容到形式，逐步细化的思想来进行的。视觉设计主要是使用Fireworks切图再把切好的图放置到页面元素的背景中实现的

用图像替换标题文字的方法

可以看到图像已经出现在正确的位置，但是原来的标题文字还在上面，这时为了隐藏原来的文字，需要在HTML中为文字套一层span标记，代码如下：

h1span信息与网络中心/span/h1

然后在CSS中通过display属性将它隐藏起来，代码如下：

#headerh1span{display:none;}

这样标题局部的视觉设计就设置完成了。对标题文字进行图像替换最核心的作用就是在HTML代码中仍然保存h1元素的文字信息，这样对于网页的维护和结构完整都有很大好处，同时对搜索引擎的优化也有很大的意义

左侧列和右侧列的视觉设计

七、交互效果设计

1.为“常用下载”设置鼠标经过时效果

#sid