第一部分教程中我们做好了一些必要的前期准备工作，并把背景图像应用在了BODY标签上。关于利用CSS定义元素背景的一些知识，大家可以参考《CSS设计：百分比进行背景图片定位》。同时我们也设置了白色的背景色，不要觉得这个没有必要，因为在浏览器中，用户可以进行一些自定义设置，其中就包括浏览器默认的背景色，比如在IE的”Internet选项”中就有一个”颜色”的选项按钮，如果我们把复选框取消掉：
那么百度就会变成如下尊容：
当然也不是每个元素对象的背景属性中都必须设置颜色值，比如我们这里为BODY设置了白色背景之后，基本上其子级元素的样式中我们基本上就不用再考虑设置白背景色了。一般情况下我们还要为BODY设置字体族和字号属性，在本例中BODY标签的完整样式定义如下：
- body{
- font-family:Arial, Helvetica, sans-serif;
- font-size:12px;
- background:#fff url(images/bg.jpg) repeat-x;
- }
对简体中文网页，我们一般很习惯把字号设置为12像素，事实上在CSS对字号的控制上有很大值得研究的空间，很多技术文章和教程中都推荐用单位em来控制字号，有兴趣的朋友可以参考本站的《How to Size Text in CSS – 关于CSS中字号控制的兼容性研究》，在这里我们为了不脱离本教程主题，就简单的采用12像素字号，事实上个人觉得至少我们国人离em的道路还很远…
接下来我们要在网页中开始逐步的添加DIV容器了，先抛开内容元素上的细节，我们看看效果页面大致的宏观容器框架，做这么一张解构图好费力，希望大家能看得明白，另外《混沌初开 – 页面DIV布局解构》这个教程大家可以对比着学习一下：
我们现在不是要一次性的把它们全部添加好，正如前面所说的，教程中将遵循从外到内、从上到下、从左到右的顺序一边布局一边添加内容，首先我们就来看一下最外围的#wrap容器。在网页文件的代码视图中，我们在BODY标签之间添加如下代码：
- <div id="wrap">
- </div>
这样一来，我们的网页中就有了一个ID名为wrap的外围容器了，当然现在在浏览器中预览网页是看不到任何变化的，因为DIV作为一个容器标签，其本身默认没有任何视觉上的效果呈现，但是我们可以利用CSS来辅助我们看一下这个DIV在网页中的位置以及尺寸，在样式表中添加如下CSS语句：
- #wrap{
- background:#f00;
- height:500px;
- }
我们给它一个500PX的高度和红色背景，保存之后刷新网页看看效果：
可以看到默认情况下DIV容器的宽度是占满浏览器内容区的。事实上我们这里为#wrap设置的两条CSS只是辅助作用，主要是让我们在视觉上更容易的控制它的位置和尺寸，之后我们肯定会把这两条语句删除掉。恩，这就是所谓的过河拆桥吧…
首先看一下#wrap的宽度，明显不符合我们的要求，那它到底是多少宽呢？我们可以参考裁取下来的图片素材的尺寸，比如#header或#footer区域的背景图，这些图片的宽度应该是跟外围容器的宽度一致的。当然在PHOTOSHOP阶段我们也可以事先把这些尺寸数值记下来，不过个人觉得那比较麻烦，还得建个记事本备忘不是？参考#header的背景图header.jpg，得出其宽度为699像素：
那么我们就把这个宽度值用在#wrap上：
- #wrap{
- [color=Green]width:699px;</font>
- background:#f00;
- height:500px;
- }
看看浏览器中的效果：
接下来干什么？废话，居中呗，在样式中设置margin属性：
- #wrap{
- width:699px;
- margin:0 auto;
- background:#f00;
- height:500px;
- }
这条CSS规则的意思不用解释了吧，保存预览效果：
虽然效果是达到了，但是还是要提醒一下大家关于容器居中更标准的做法：首先在BODY标签的样式中添加：
- text-align:center;
然后在#wrap规则中添加：
- text-align:left;
为什么要搞得这么麻烦？text-align不是控制文本对齐方式的吗，跟容器居中有什么关系？事实上这是针对IE5的一个Hack，不相信的话，省去上述提到的更标准的做法，你在IE5.5中预览一下网页的效果，你会发现wrap容器还是死皮赖脸的停靠在浏览器左侧。关于这个现象，在本站的《CSS编辑工具 HTML PAD 2008 简明指南视频教程》中有详细的讲解。当然，如果你对网页的浏览器兼容性还没有考虑到这个程度的话，当我没说…
