页面内容区包括文档标题和文档正文，—，该区域是本案例页面的核心内容。但页面编码比较简洁，看下面的XHTML编码。
<div id="container">
<h1>简洁布局之变幻的CSS</h1>
<p>天津网站建设编码中添加适当的注释可以辅助编码，使XHTML代码有更加清晰的结构。本案例页面结构相对简单，不难看出div结束标记是针对哪一个元素。面对团队其他成员或者页面结构复杂，无法快速看出相应的结束标记是属于哪一个元素，页面的结构会相对混乱，给Web开发工作带来不便。虽然Adobe Dreamweaver提供“选择父标签”工具，但不是每一位Web开发人员都使用此软件。所以通过简单的注释标识这些信息，可以让XHTML代码更加清晰易读。为了减小文件大小，在最终发布时可以去掉这些额外的注释信息。</p>
<p>表单中id与name都是为了标记对象名称。id是后来引入的，在这之前Netscape用name属性来达到这样的功能。目前很多网站后台程序，通过name属性来获取表单元素的值，所以目前有必要同时包括id与name标记，不但考虑到页面表现的CSS样式定义（通过id选择器），还可以兼顾到表单接收页面能正确的获取表单元素的值（通过name获取表单数据）。或许将来只用id就能满足这两种需求了。</p>
<p>为每一个列表项li都赋予了独立的id。如：id="menu_1"、id="menu_2"等。这样编码便于以后的控制，为CSS样式精准的找到目标。“网站当前页”效果就是一个典型的应用，如在“天津网站制作布局实例”栏目浏览时，该菜单呈现出区别于其他菜单的效果。</p>
</div>
上述代码中将文档标题置于一级标题hl中是因为文档标题是此页面的重点，所以给予权重最高的hl标签。文档正文作为段落，分别包含在不同的段落p标签中。XHTML中的标题标签共分为<h1>、<h2>、<h3>、<h4>、<h5>和<h6>6个级别，它们分别表示标题在文档中从高到低的优先顺序。其中<h1>最高、<h6>最低。：在默认情况下。浏览器会根据这样的优先顺序以不同的文字大小、加粗等方式来排列这些标题。可以通过、CSS样式对它们的外观重新定义。在编写XHTML代码时，一般可作如下考虑：用<bl>表1示文档标题，用<h2>表示各个部分的标题或文档副标题，依此类推。可以给网站栏目名称分配不同级别的标题，这主要取决于整站结构与栏目组织情况。总之，要努力做到选择最合适的XTHML标签来组织页面内容。左侧边栏两块区域的构成相似，对其中一个进行解析，在编码时用class类选择器，在天津软膜天花后面的CSS样式中只需定义一次即可统一它们的外观样式。建立一个class为siderlist的层作为容器，将侧边栏的栏目名称、说明文字和3个图片链接置入其中。然后再复制一份并作相应调整即可作为第二个区域的代码。述述代：目名名称的杓标题用h3标签，即用标题标签作为栏目名称的XHTML标记，吣这样更能准确地表述内容的属性。至于用几级标题，需要根据页面以及整个网站的情况来斟酌。本案例中文档标题用hl标签，预留h2标签作为文档副标题（虽然目前没有副标题但不代表以后改版时不会增加），而h3标签就可以用于栏目名称。栏目的说明文字应用段落p标签。将3个图片链接看成一个无序列表，建立一个无序列表ul作为它们的容器，每一个图片链接定义为一个列表项li。在列表项li标签的内部建立一个超链接标签a，在a标签内部用img标签引入图片。每一个列表项li单独定义了class类，这与菜单项li的id设置有相通之处，都是便于控制以及预留扩展。至此，XHTML编码已经完成。。现在没有任何CSS样式，可以更加清晰地看出页面元素的结构与“真面目”