本章案例是一个古典风格的天津软膜天花网页，古色古香的气息扑面来，相对较为复杂的结构给HTML与CSS编码造成一定难度。通过细致的分析与规划，逐步理清各元素的关系，看似复杂的页面也能轻松地编写代码，形成嵌套合理且语义明确的HTML文档。利用浮动将各元素于合适的位置，并尽量减少嵌套，将相对重要的内容置于文档前部。灵活地运用CSS背景设置，将多个图片集成于同一个图片文件，利用背景图片的定位设置显示不同的区域。使用列表元素别致的链接悬停交互效果为页面增加良好的气氛。
首先开始案例效果图分析，本案例共有3个页面，分别是天津网站制作首页、栏目列表页和内容终端页。逐一“读图”为HTML与CSS编码提供基础。在分析过程中注意这3个页面的共同之处，进一步规划时将它们标识出来。页面看起来比较复杂，形成“多行多列式”的结构，但经过仔细观察可以将页面划分为“三列式”布局。左侧为标签文字链接区域，右侧为标签链接、网站LOGO与图片推荐，中部主内容区域形成多行式布局，从上至下分别是Banner图片、网站导航、中部内容区和底部导航与友情链接。其中的“中部内容区”由6个页面元素组成，它们分别是6个网站栏目的内容调用。栏目列表页与网站首页在“中部内容区”有着很大的差别，栏目列表页与网站首页在页面布局方面没有变化，只是栏目列表页“中部内容区”由4乙个元素组成：栏目名称与当前页面位置、右侧图片链接、栏目内容列表和翻页链接条。内容终端页与网站首页也只是在“中部内容区”有所区别，内容终端页与网站首页在页面布局方面同样没有变化，内容终端页“中部内容区”也由4个元素组成：栏目名称与当前页面位置、文章标题、文章副标题和文章内容。
经过“读图”形成大概的印象，下面天津网站建设开始页面布局规划与图片的切割导出。在进行规划时考虑最大可能的共用页面元素，对于网站首页、栏目列表页和内容终端页都有的一些元素，在规划时进行恰当的组织，以利于HTML，编码以及图片共用。网站首页、栏目列表页和内容终端页的基本页面布局相同，都是左中右三列式结构，这3个页面最大的变化在“中部内容区”，可以将这些相同的页面元素标识出来，后面统一编写HTML与定义CSS样式直接共用。下面开始这些共有元素的布局规划，建立一个“包围”层wrap作为三列的容器，可以实现页面在浏览器窗口水平居中对齐；左侧标签链接区域置人column层；右侧标签链接、网站LOGO和图片推荐置人sider层；中部主内容区域置人main层。在main层内3个页面共有的元素为Banner图片、网站导航以及底部导航与友情链接，将它们单独标识出来。“中部内容区”是3个页面所不同的地方，根据不同的页面进一步规划。三烈中，sider层包括3块内容：标签链接、、网站LOGO和图片推荐。由于它是网站的主要内容，有别于一般网站的侧边栏只是放置辅助内容的特点，可以在HTML编码中将这部分内容置于前面，而将main层置于它的后面，通过应用CSS反向浮动使它们居于合适的位置。
网站首页的“中部内容区”为6个网站栏目的内容调用，将它们分别置于div容器中，对div容器进行CSS样式定义即可实现它们的统一布局。这6个网站栏目的内容调用中，最后一个栏目没有图片的调用，在编写代码时需要注意区分，，单独某一栏目区域包括栏目标题、图片调用和文章ul列表。栏目列表页的“中部内容区”由4块内容组成：栏目名称当前页面位置、左侧图片链接、栏目内容列表和翻页链接条。内容终端页的“中部内容区”也由4块内容组成：栏目名称当前页面位置、文章标题、文章副标题和文章内容。