从规划、切图到XHTML编码，再到编写CSS样式组建网页，直至最终对CSS编码进行精简，本案例给出了CSS网页布局的一般工作流程。布局简单也富有变化是本案例的特点，首页可以看成“一列式”布局，而内页变换成为“两列式”布局，这一切仅需要CSS—编码即可实现。下面就从Hello World开始进入CSS的精彩世界，一起感受CSS的无限魅力吧！
页面制作人员（Web Page Building）在切割图片以及进行HTML、CSS编码以前，应当对页面效果图进行详细的观察与分析，将页面各元素的组成关系理顺，在脑海中形成大概的轮廓。然后根据这样的思路去切割图片，编写页面的HTML文件，最后应用CSS样式将HTML页面还原成与效果图一致的效果。
一本章是人门型的简单案例，可以将首页页面看成是“一列六行”的布局形式。在倒数第二行出现了左、中、右三列的页面元素，本案例页面头部未设置导航菜单，只形成了“通栏”Banner图片。这“六行”元素分别是：
①页面顶端装饰线条；
②页面上部天津二手叉车LOGO；
③页面Banner通栏图片；
④文章内容索引，天津软膜天花；
⑤三个栏目介绍与链接；
⑥天津网站制作版权信息。
内页与首页有4个相同之处，分别是：页面顶端装饰线条、页面上部LOGO、页面Banner图片和页面底部版权。“文章内容”与“三个栏目介绍链接”进行了调整。“文章内容”一缩减宽度并浮动于左侧，可以自动地向下延伸；“三个栏目介绍链接”由三列的形式变换为三行的形式，—缔婆重度并浮动于右侧
下面开始规划与切割图片。首先进行页面规划，页面的嵌套与组成应避免通篇都是div，需要不断地探求如何灵活、合理地运用div标签。根据规划的基础准确地切割出所需图片。
首页布局是“一列六行”的简单形式，但并不能这样简单地布局，需要考虑今后改版可能遇到的情况以及网站其他页面的需求，尽最大的可能做到“代码重用”，尽可能地增加灵活性与适应,将首页页面划分成4个区域：顶部、头部、、主内容区和页脚。“六行”内容分别位于这4块区域以内，这样划分基本可以实现首页和内页最大可能的代码重用。顶部t叩层放置页面顶端装饰线条；头部header层放置页面上部LOGO( logoarea层)和页面Banner通栏图片（banner层）；主内容区main层放置文章内容（confiner层）和三个栏目介绍与链接(linkarea层）；页脚footer层放置页面底部版权。
内页与首页页面的区别在于“文章内容”与“三个栏目介绍链接”。根据首页的规划，它们都位于主内容区main层内，仅需要重新设置其宽度以及定义不同的浮动方式即可。
页面中的内容区与栏目介绍链接区需要进行单独的规划。首页的内容索引区由两块组成：标题和内容索引。内页内容区由3块组成：标题、内容和作者时间，栏目介绍链接区包括两块区域：标题链接图片和文字介绍。首页与内页的栏目介绍链接区都有3个单独的栏目组成，
经过上面的规划与分析，对页面的构成已经非常清晰，下面开始切割图片为页面提供必要的素材与“原料”。首页的CSS编码中要用到6张图片，它们分别是：LOGO图片、LOGO背景图片、Ban标题链接的3张图片单独切割导出，属于网站内容图片。
在上面的图片中，内容索引区圆角边框和栏目介绍链接区圆角边框需要做一些额外的处理。由于内容索引文字与栏目介绍文字可能不固定，按目前的高度来切割可能会出现被“撑破”的现象，因此适当地增加图片的高度，通过编码的方法实现一定范围内的高度自适应，具体的方法将在后面的CSS编码中体现。内页所需图片大部分已经在首页的切割中形成了，仅内容区的背景与首页有所区别。将这块区域分成3张图片：标题背景、内容背景和作者时间背景。其中内容背景图片高度仅为lOpx~；：不管内容有多高，图片沿y轴方向重复排列实现边框效果（这张图片也可以省略以CSS定义边框来实现）