完成上面的准备工作后就可以开始XHTML编码了，根据规划的提示一步一步地深入编写，首先是整体的页面结构，然后往里面填内容。无论是首页还是内页，主体结构都由4部分组成：top, header, main和footer。这4部分中的header层包括logoarea和banner，main层包括container和linkarea。它们的嵌套关系与结构如图所示。首页与内页的container层有所区别，首页中由文章标题与文章内容索引两块组成，可以用hl和p标签。内页中由文章标题、文章内容和作者时间信息3块组成。在后面编写内页的XHTML代码时需要将这部分内容加进去。依据上面的思路，编写如下主体结构XHTML代码。
<body id="home">
<div id="top">天津网站制作</div>
<div id="logoarea">天津二手叉车</div>
<div id="banner">天津软膜天花</div>
</div>
<div id="main">
<div id="container"></div>
<div id="linkarea"></div>
</div>
<div id="footer"></div>
</body>
首先进行“页面顶端装饰线条”top层的完善，从效果图看出此图案由两部分构成：颜色填充和底部虚线。可以将它切割成一个宽度很小的图片，水平方向平铺实现这样的效果。在这里不采用背景图片的方法，此简单图案完全可以用CSS实现，定义top层的背景色并设置top层的下边框为黑色虚线。因而top层无需增加标签，其编码如下。
下面开始he甜er层的编码，header层包含logoarea和banner。在logoarea层内新建一个标题标签h3并赋予id为logo，没有使用img直接插入图片，而考虑在CSS中将LOGO图片设置为h3的背景。在h3内增删链接元素—HelloWorld。作为页面（或网站）的名称。这样做的益处在于，即使用户禁用图片与CSS样式，能准确地知道目前所在页的名称或主题，也就是说此处将会显示“Hello World”文字链接，从而使页面具有更强的适应性。logoarea层编码如下。本案例中的Ban,~r图片只是作作为形象展示示的需要而设置，未产生真正意义上的Banner作用。将此图片作为背景处理，因此banner层无需增加标签，其编码如下。底部版权foot由版权说明文字构成，中的网址链接元素。这些文字看成可以不设置段落标签，但这样不利于重构，footer层代码如下
<div id="top"></div>
<div id="header">
<div id="logoarea">
<h3 id="logo"><a href="#" title="从Hello World开始">Hello World</a></h3>
</div>
<div id="banner"></div>
</div>
<div id="main">
<div id="container"></div>
<div id="linkarea"></div>
主体内容main层内包含container和linkarea。前者为文章内容区（或内容索引区），后者为3个栏目介绍与链接。文章内容区container层，在首页(home)由文章标题和内容索引两部分组成。文章标题选择标题hl标签，内容索引选择段落p标签。首页的container层编码如下。由文章标题内容和作者时间组成。文章标题选择hl标签，文章内容选择p标签，作者时间信息选择标题h6标签。与首页相比较，文档结构一致，只是增加了若干段落p标签用于显示文章内容，另外增加h6标签来显示作者时间信息。首页文章内容区和内页文章内容区的不同的外观表现将由CSS实现。container层编码如下。绍与链接被放置在linkarea层内，采用左、中、右三列式的布局形式，用CSS浮动属性让它们居于合适的位置。以合适的标签来建立富含语义的文档是XHTML的编码原则，在XHTML中有3种列表一形式：有序列表ol、无序列表ul和定义列表dl。其中定义列表由dl、dt和dd 3个标签组成。因此可以采用定义列表的形式，将栏目标题图片看成是dt，将栏目介绍文字看成是dd。根据这样的思路编写linkarea层的编码如下。
<body id="home">
<div id="top"></div>
<div id="header">
<div id="logoarea">
<h3 id="logo"><a href="#" title="从Hello World开始">Hello World</a></h3>
</div>
<div id="banner"></div>
</div>
<div id="main">
<div id="container">
<h1><a href="#" title="">给DIV CSS初学者的建议</a></h1>
<p>普及Web标准与CSS技术已成为一种潮流与趋势，目前以DIV CSS进行Web开发已成为一种时尚。需要不断的提高自己的技能以适应这种变革已迫在眉睫。在学习的过程中会面临许多疑惑与困难，应该静下心来认真的思考这样的开发模式，仔细的去理解变革对于Web发展的意义，切不可片面的认为Web标准即是以DIV CSS进行网页布局。学习的目标在于以XHTML建立良好的语义化的结构，结合CSS最大程度使表现与内容相分离。这也是Web标准化的意义所在。并不是说以DIV CSS构架网站就是Web标准化，如果以Table时代的思路去开发，只是将Table标签替换为DIV标签，毫无意义。<a href="#" title="">详情>>></a></p>
</div>
<div id="linkarea">
<dl id="article">
<dd>CSS 网页布局的相关文章，其中发布了很多实例教程，以及关于Web 标准理念的文章等。内容精彩丰富，并且尽量做到每日更新，相信它一定会成为您学习的良师益友。<a href="#" title="">详情>>></a></dd>
</dl>
<dl id="showcase">
<dd>建立符合Web 标准的网站在国内已经形成风气，相对而言还是比较落后，更多的是形式主义而并非是实质上的符合标准，CSS 酷站欣赏提供众多的实例是您学习的典范。<a href="#" title="">详情>>></a></dd>
</dl>
<dl id="template">
<dd>CSS模板下载，提供丰富的CSS共享模板，您可以看到别人的编码与布局技巧，您可以看看别人是如何工作的，这里也可能解决您布局中的一些困惑，您一定会有收获。<a href="#" title="">详情>>></a></dd>
</dl>
</div>
</div>
<div id="footer">
</div>
</body>