序－经验之谈－超级牛最详细的Div+CSS布局案例
最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。这个在我自己刚工作时，也不能明白，感觉leader老要报告真麻烦，改一个小小的功能也要发报行，我直接修改只要15分钟，但报告却要我1个多小时的时间，现在知道了，这是份很重要的依据，可以理清自己的想法，也能够在后来项目开发的后期，再帮自己找到这个项目初期的开发的原因（写得有点玄乎，但我相信做过项目的人都理解，项目到最后常常会变味的）。
做网站先要出策划图，下面这个是策划图的示例图.
这是我从网上找的，感谢西乔同学的提供（由于工作的性质，我不方便将自己的策划图公开，大家都懂的）。我平时一般用Axure RP做网站策划图，可以推荐给大家使用，有汉化版。
但出策划图只是第一步，我手下的员工都知道我的要求，不管是改版还是新建页面，草图（我允许手画版）一定要做一张，然后一定要用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局设计出来，尤其不能是因为只是修改一个小栏目就可以跳过。因为自以为只需要5分钟的修改可能最终却因为反复调整失败后连最初的效果都恢复不了，最后造成整个页面重新做的例子我看到太多，尤其是当你的水平还不成熟时。所以一定要有设计图，这个设计图一定要很精致，一定要和你最终想得到的网页效果一样，不要敷衍自己。
最后，最重要的来了，制作页面最重要的一点就是全局性，以“模块化”思维，将同样的“模块”抽取出来，我见过很多人在制作网站时，为了有成就感，或为了网站运营时间，或工程的压力等很多原因，都会将一个页面完成然后上线一个页面，这样的情况不仅限于小型的网站，很多大型成熟的网站也会发生这样不成熟的事情，多以网站改版时为多，修改channel页面时只考虑channel页面，首页改版时只考虑首页，结果经过几次改版之后，整个网站的页面完全没有了联系，各自为政，造成很多不能删除的冗余代码，或者是技术上改动的困难，维护起来越来越辛苦。
最后，最最重要的来了，制作页面另一个最重要的一点就是要考虑程序员，一个网站最终还是需要程序员来将网站从静态变成动态，有很多页面制作人员在制作纯HTML代码时只考虑是不是还原了设计，是不是符合W3C的要求，却忘记了程序员，结果HTML代码完全不利于开发，造成程序代码的冗余，页面展示时间过长。这点也很需要注意的。
下面我们先从如何将页面模块化开始，我们要随时保持一个模块化的意识，其实网页就是由一个盒子叠一个盒子组合而成。这里我们要引进一个名词－css盒模型。
css盒模型意思是DIV+CSS的重点。就是用DIV+CSS来代替表格布局，盒模型是和table布局的一个不同点。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，能兼容更多的浏览器，比如PDA设备也能正常浏览。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。
我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框
(border)、边界(margin)， CSS盒子模式都具备这些属性。下图将这些属性的关系表现出来
margin，我们也称之为：外边距、外补丁；padding也可以称为：内边距、内补丁。这些名称是制作人员必须要完全理解的。
看下图，我们仔细分析一下该图，来规划一下页面的布局.
图片大致分为以下几个模块
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
超级牛最详细的Div+CSS布局案例教学教材
