开发web应用程序是一件非常辛苦的事情，你需要花大把大把的时间来做无数的事情。假如你不运用有条理的方法，尤其是在复杂的项目中，你会承受忽视项目，不能按时完成，浪费时间一无所获的风险。

这篇文章中，结构化过程的插图可以帮助你运用简化的方法更加节省时间更加有效的建立你的web开发程序。

工序的主要阶段

一般的web应用程序开发流程分为五个主要的阶段:
1. 明确需求
2. 设计
3. 执行
4. 测试
5. 发行

规划与跟踪监测是一个跨阶段的跟随开发发展的过程，定义一个在项目执行期间你需要跟踪监测的项目计划活动名单，并且每项活动需要定义一套行之有效的信息报告来进行跟踪监测，例如：

- 拥有者
- 持续的时间
- 所耗
- ...

看一看这些前一段我所写的文章，怎样使用Excel或者Google制表软件设计制作项目实施计划：

How to organize a project plan 怎样组织项目规划
Excel Gantt chart template Excel图表设计绘制模板
Implement a project plan and manage activities with Google Spreadsheets 使用google电子表格实施并灵活管理项目规划

1. 需求定义

在这第一阶段你必须确定范围和Web应用程序的需求，在你的应用程序中必须做的，主要特点和技术要求：

范围

为了确定Web应用程序的范围,足以编制一份明确说明适用功能的详细清单。目前重要的不是如何实现他们，而是什么需要实现！

需求
需求分析需求分析是一个开发过程的关键组成部分。在这一步中你需要估计潜在流量，选择一个服务器端语言（ PHP， ASP， Coldfusion ...),数据库，选择一个托管服务...这里需要非常注意不要高估 /低估预期！准确的平衡的预估时间，成本和目标之间每件事情！

2. 设计
在需求定义阶段，你需要明确的规划设计你的应用。在这个阶段，可以按照以下步骤：

设计: 应用图
应用图包含对应用有意义的和必要的结构信息：页面（用区块表示）和他们之间的主要关联。你的应用图可以像这样：

通过这种方式，您拥有了有关一些位置 （页）和路径 （关系页）的图，您可以非常容易的遵循它，逐页，以执行应用程序的下一阶段。运用这种方式，可以节省大量的时间，并明确什么是你需要执行的。

设计: 数据库
Ok,现在到了设计数据库的时候了。一个简单的实现方法是使用实体关系（ER）模型 。一般来说，你可以俺咋好下面的顺序：定义第一个表确定第一个表，而不是属性和关系的表格。您的ER模型将是这样的：

1:1表示集的关系（在这种情况下，例如1用户只能分派1的任务， 1个用户只生活在一个城市） 。欲了解更多有关这一主题的内容，来看看我的旧文章：

Define the entities-relationships model 定义实体关系模型
A correct approach to define relationships between database tables 正确对待，以定义数据库表格关系
10 Useful articles about Database design 十篇有用的数据库设计文章

设计: 页面结构
下一步工作是设计大体的页面结构，用名称命名确定所有的主要部分 (例如 #header, #navbar, #mainContent, #sidebar).

设计: 服务端语言
使用面向对象的开发方法进行开发，你可以定义类，函数和所有你所需要的，记住... 那不是执行只是下一阶段实施的指南.

设计: JS 框架
这一步选择JavaScript 框架(jQuery, Scriptaculous, MooTools...), 通过确定主要的特点和所需实施的效果（拖放，动画效果... ）编制简单的关于在一个或多个网页中有关联的每一个具体功能应用图的列表。

次点设计阶段已完成。让我们实施吧！

3. 实施
Ok.. 现在是真正的挑战的开始，因为执行才是实现应用。您可以划分这一阶段为以下几个步骤:

执行: 数据库
创建一个新数据库，写SQL代码定义表，属性和关系。看看下面的，过去我致力于一些有关此主题的文章的链接，以获取更多信息：

How to use PHP and SQL to create DB tables and relationships 怎样使用PHP创建DB表和关系
Create tables and relationships with SQL 使用SQL创建表和关系

执行: HTML
使用在设计阶段定义的页面结构实施 HTML 代码:

div id="header" /div
div id="navbar" /div
div id="mainContent" /div
div id="sidebar" /div
div id="footer" /div

此时添加所有在设计阶段定义的所需要的HTML元素。例如，如果mainContent部分包含一个标题，文字和文章的标签后，添加这些内容：

This is the moment to add all HTML elements you need in sections identified during Design phase. For example if the sections mainContent contains a post with a title, a text body and post tags, add these elements:

div id="header" /div
div id="navbar" /div

div id="mainContent"

h1!-- Post title --/h1
p!-- Text body --/p
small!-- Post tags --/small

/div

div id="sidebar" /div
div id="footer" /div

实施: CSS
当主体结构已经准备就绪，开始编写CSS代码添加样式。如果您需要一些如何撰写更好的CSS代码建议，请看看这些文章：

CSS coding: semantic approach in naming convention CSS编码：语义的方法命名惯例
Useful guidelines to improve CSS coding and maintainability 有益的改善的CSS编码和可维护性的指南

实施: 服务器端语言

实施应用类，应用功能,DB互动，查询，以及一切需要服务器端的实现的交互。

实施: JavaScript
使用在设计阶段选择的框架（ jQuery ， Scriptaculous ， MooTools ...)来实施Ajax的功能（拖放，动画效果... ）

4. 测试
在这一阶段需要强调的是。你的应用程序能在各种条件下执行（例如使用不同的浏览器） 。您的目标是在最后释放前检测和修复所有的应用程序错误。

请记住，这一过程需要有条理，需要极大的耐心！试验的每个页面和每个功能（在这种情况下还可以帮助理顺应用图） 。如果您测试过程中发现一个bug ，修复它修改代码并继续进行最后的代码审核（一个不可告人的测试）。

5. 发布
最后你准备好发布了！在测试文件夹中发布并做最后的测试，假如一切都OK的话，那就进行最后的发布吧。