阅读上一篇：WEB前端开发经验总结 ⅠWEB标准篇

现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制作的页面的图：

呵呵，希望我选的这张图没有让大家失望。那，现在图形已经在我们的面前了，现在我们就开始结合我们的理论--合理的布局。我在前面讲了，一个合理布局的页面，要结构清晰，要讲求语意化。那么我们实际的开发的时候要怎么做呢？那现在这个页面，我们一开始，先别忙着切图，先来分析以下页面的结构，说“结构清晰”嘛，我们大家一开始肯定要对页面的布局结构有了个框架后，我们才好动手制作啊。这个图形我分析的结构如下图：

现在我们就基本把页面的布局结构分析出来了，我们现在对页面的布局结构有了一个很清晰的了解了。不过还不要急着写代码。现在我们还要做的就是分析页面的数据结构。怎么理解？呵呵，还记得我们前面提到的XHTML标签要语言意化吗？即“使用合理的标签显示相应特征的数据”，放心，我们不是在做C#的开发，这里的数据结构的意思是，我们要对页面中显示的数据的特征进行分析，看看使用什么XHTML标签来显示它才更加语意化。

好，下面我们现在就从上到下的开始分析吧！