你问我答(22)——遵循Web标准的网页设计工作流程(一)
经常有读者来信询问在实际开发一个网站的时候，具体是按照什么工作流程进行工作的，一个网站到底是如何从零开始一点点做出来的呢?
今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤，如下图所示。
在图中，这个过程分为了7个步骤，并且说明了这7个步骤相应使用的工具。这7个步骤依次为：
1. 内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。
2. 结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高可读性。
3. 原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。
4. 方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。
5. 布局设计：使用HTML和CSS对页面进行布局。
6. 视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。
7. 交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。
下面具体解说一下，例如要设计出一个如下图所示的页面。这是为一个假想的名为“Baby Housing”的儿童用品网上商店制作的一个网站首页。
请读者思考一下要设计出这样的一个页面，根据上面描述的工作流程，应该在每一步骤中完成什么工作呢？今天介绍先介绍这里，明天继续！
10,190
我是无意间在老师的视频教程里看到这个网址的，回来搜了一下，惊人的发现这个网站还蛮不错，并且网页课上老师所说这也都有，所以如果上课没听清楚还可以回来自己看看。最主要的事这里面扩展了很多之前我都不了解的东西。所以很开心能发现这个网站。我想我会一直关注的。
从我开始学习网页时、我就在看你们的视频、感觉确实蛮不错的 这两天我也打算买本书看下 不知道需要多久可以送到 广州、白云区的、 支持、
太谢谢老师了。我终于找到这个了，我一直都不太清楚网站开发在实际中的过程，今天终于了解到了。。。呵呵！ 以后要多多向老师请教一些知识了。。。呵呵
boovit ，
谢谢您的鼓励！欢迎常来这里交流！
作业
第一步内容分析：分析客户要出售的物品有哪些类型。主打什么是儿童服装呢还是床等系列，主要帮助客户分析它独有的特色，从图中来看这位客户应该是主打床和被单等物品（从客户的角度出发，往往能购买床和被单的客户再给孩子买件衣服的几率很高 所有下面放几件特别推荐漂亮流行的儿童衣服）
第二步结构分析：例出第一步后 知道客户需要网页必被 的类型有床 被单 衣服 各个年龄段的玩具 ！主页上面要有会员登陆 我的够物车 够物流程 产品分类 客服服务 特别推荐 今日推荐 最受欢迎
第三步原型设计：画出大体的结构草图和客户交流 ，看对方是否还有其他需求
第四步方案设计：用PS做出网页成品图再和客户交流，看对方是否满意！
第五步布局设计：完成第四步后得到客户的认可，开始用CSS+DIV 布局成品图的结构
第六步视觉设计：完成第五步后结构设计后 开始加入图片等元素！完成成品图
第7步交互设计：在考虑用户体验前提下 优化各个连接字体 颜色 大小 特效等方案
口水一下
以前拿到一个网页都会到网络上搜索一下 看看同种系列别人都怎么做 自己再做成品图 然后开始动工！
不过师傅讲的都是理论知识 很牛X 生怕哪天去面视设计师 突然问我流程知识 我不知道怎么回答 被卡擦！！！！！！！！！
再口水一下
现在好多团体都配备SEOER人员 并且薪水不低
别人我不知道 我知道我自己已经学习SEO 足有2年了 虽然从未面视过设计师 不过我感觉当对方问我有作品吗 我把我的作品 一量再说 我的搜索排名第几 或者我懂SEO 我想面视我的工作人员 应该很高兴因为他们省了一个SEOER 呵呵 我是这么想的 不知道对不对 或者专业不专业。。
小渔，
SEO也是个产业了，不过我不是很了解，这个东西不太好说，也很难验证，作弊的不算，那些都没有真正的用处。
谢谢老师的讲解，学网页有段时间了，一直以为画张效果图，然后便网页就ok了，现在终于弄清楚了，符合WEB标准的网页时怎么做出来的，谢谢老师！
qianqian1220th，
很高兴我们的课程对您的学习有所帮助！也欢迎您常来这里交流！
[…] http://learning.artech.cn/20080320.web-design-work-flow.html 分类: web标准 […]
css彻底研究一书买到了，我要彻底研究，也要彻底支持前沿视频！希望多出点视频教程。
Bong，
加油！希望你能做出漂亮的作品哦，如果有好的新的体会，可以参加我们的“读者故事与案例研究”活动，给我们投稿哦！
一直不知从何下手，看了老师的讲解，脑袋里的轮廓清晰多了，我要继续学习。谢谢！
格物致知，
希望能对您有所帮助，欢迎您来这里交流！
学了好久的网页制作,一直对做网站或网页还是很模糊,今天看这篇文章才知道,自己在网站或网页设计流程上出的问题,今天找到问题所在,我很激动.
谢谢老师!!!
请老师推荐一本这方面专业书籍,谢谢!
刘楚
刘楚，
这方面好像没有特别好的书，目前的书都是针对某一个软件或者技术的，好像没有比较综合，真正结合工作流程，又非常实用的。这些方面的内容还要靠多交流，多琢磨，来慢慢提高。
这个很好,很不错.支持下
本人也需要这方面的步骤
谢谢温老师.
可可，
一共分5天讲完，希望和大家交流！
这个对很多没有实际接触网站开发的人员用处很大
让大家了解具体一个网站从规划到出来是一个什么样的步骤
很好.非常的支持.
好啊，等都看完以后，给点意见和建议哦！