一起CSS

当前位置:一起CSS > 未分类 > 文章正文

遵循Web标准的网页设计工作流程(一)

日期:2008-07-30 分类:未分类

经常有读者来信询问在实际开发一个网站的时候,具体是按照什么工作流程进行工作的,一个网站到底是如何从零开始一点点做出来的呢?

今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程,我们可以把一个页面的完整设计过程分为7个步骤,如下图所示。

网页设计流程

在图中,这个过程分为了7个步骤,并且说明了这7个步骤相应使用的工具。这7个步骤依次为:

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

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

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

4. 方案设计:在确定的原型线框图基础上,使用美工软件,设计出具有良好视觉效果的页面设计方法。

5. 布局设计:使用HTML和CSS对页面进行布局。

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

7. 交互设计:为网页增添交互效果,如鼠标指针经过时的一些特效等。

下面具体解说一下,例如要设计出一个如下图所示的页面。这是为一个假想的名为“Baby Housing”的儿童用品网上商店制作的一个网站首页。

网页设计流程-首页

请读者思考一下要设计出这样的一个页面,根据上面描述的工作流程,应该在每一步骤中完成什么工作呢?今天介绍先介绍这里,明天继续

文章转载自 http://learning.artech.cn/20080320.web-design-work-flow.html

后面几篇不再转载到本站,有兴趣的可以点击下面的链接直接到“官方”站阅读:

遵循Web标准的网页设计工作流程(二)

遵循Web标准的网页设计工作流程(三)

遵循Web标准的网页设计工作流程(四)

遵循Web标准的网页设计工作流程(五)

查看:608 评论:没有评论 标签:

相关日志

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved