呵呵，希望我选的这张图没有让大家失望。那，现在图形已经在我们的面前了，现在我们就开始结合我们的理论--合理的布局。我在前面讲了，一个合理布局的页面，要结构清晰，要讲求语意化。那么我们实际的开发的时候要怎么做呢？那现在这个页面，我们一开始，先别忙着切图，先来分析以下页面的结构，说“结构清晰”嘛，我们大家一开始肯定要对页面的布局结构有了个框架后，我们才好动手制作啊。这个图形我分析的结构如下图：
现在我们就基本把页面的布局结构分析出来了，我们现在对页面的布局结构有了一个很清晰的了解了。不过还不要急着写代码。现在我们还要做的就是分析页面的数据结构。怎么理解？呵呵，还记得我们前面提到的XHTML标签要语言意化吗？即“使用合理的标签显示相应特征的数据”，放心，我们不是在做C#的开发，这里的数据结构的意思是，我们要对页面中显示的数据的特征进行分析，看看使用什么XHTML标签来显示它才更加语意话。
好，我们现在就从上到下的开始分析吧！首先是页面最上面的子导航，它就是3个（靠有对齐的）链接。所以没有什么大的疑问，XHTML代码如下：
复制内容到剪贴板
下面接着是我们的LOGO和主导航，LOGO这部分我还是准备采取前面文章所采用的那个方法，至于导航菜单，用UL标签，我想大家一定没有什么异议，所以我们这里的XHTML代码如下：
代码:
<!--不清楚那些韩文是什么意思，我就用了我们常用的导航了-->
<div><a href="#1">Cart</a> | <a href="#1">Account</a> | <a href="#1">GuestBook</a> | <a href="#1">FAQs</a></div>复制内容到剪贴板
下面的Banner就更简单了，一张大图片，所以毫无疑问我们使用<img />标签，代码如下：
代码:
<div>
<h1><a href="#1" title="FrameDesign">Frame Design</a></h1>
<ul>
<li><a href="#1">ARTICLES</a></li>
<li><a href="#1">TOPICS</a></li>
<li><a href="#1">ABOUT</a></li>
<li><a href="#1">CONTACT</a></li>
<li><a href="#1">FEED</a></li>
</ul>
</div>复制内容到剪贴板
下面就是我们比较复杂的部分了，不过其实我们分析后页会发现，其实也不是我们想象中的那么复杂。先来看左边这部分，标题(h2)--标题banner(img)--新闻列表(ul)--标题(h2)--新闻列表(ul)，所以这里的代码就应该是这样的。
代码:
<div><img src="img/banner.gif" alt="Nature is the best physician" /></div>复制内容到剪贴板
中间的部分，其实结构也很简单，一段文字说明，然后是一张图片，文字说明我们用p标签，图片就用img标签了，那就不多分析了，只是要说明的是，我们看到，第一行的文字是要加粗的，代码如下：
代码:
<div>
<h2>What's News a person of artistic temperament[nature]</h2>
<div><img src="img/tlt-banner.gif" alt="What's News" /></a>
<ul>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>
<h2>Green event a person of artistic temperament</h2>
<ul>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>
</div>复制内容到剪贴板
接着是我们的左边部分。标题图片--这里采用我对LOGO的做法就再合适不过了，看上去是图片，而其实我们用的是<h2>标签，说明这里是标题。形式上是图片，结构（实际）上是标题文字，一举两得，我想现在大家看出这么处理的好处了吧？接着是说明的文字p标签，下面是两个banner图片，使用img标签。接着又是段说明文字（p标签了）。OK，这部分的代码如下：
代码:
<div>
<p>
<strong>a person of an artistic turnof mind;</strong><br />
a person of artistic temperament[nature] <br />
a person of an artistic turn
</p>
<div><img src="img/pic-1.gif" alt="picture-1" /></div>
<p>
<strong>a person of an artistic turnof mind;</strong><br />
a person of artistic temperament[nature] <br />
a person of an artistic turn
</p>
<div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>复制内容到剪贴板
OK，现在我们就可以把这3段代码合并起来，我们就得到了这块主体部分的代码了：
代码:
<div>
<h2>Couer Story</h2>
<p>
a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
</p>
<div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
<div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
<p>
a person of an artistic turnof mind;<br />
a person of artistic temperament[nature]
</p>
</div>复制内容到剪贴板
呵呵，稍微花点信息去分析，其实也不是那么难的，对吗？下面就是是我们的底部的导航--都是链接，用A标签没有问题，以及版权信息。总的来说，这部分都算是说明的文字，所以我们就用p标签，但是我们发现它们有属于不动的两个部分，而这两个部分有在同一行显示，所以我们这里就要用到一个很常用的行内元素--span标签了。代码:
<div>
<div><!--Left Part-->
<h2>What's News a person of artistic temperament[nature]</h2>
<div><img src="img/tlt-banner.gif" alt="What's News" /></a>
<ul>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>
<h2>Green event a person of artistic temperament</h2>
<ul>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>
</div>
<div><!--Center Part-->
<p>
<strong>a person of an artistic turnof mind;</strong><br />
a person of artistic temperament[nature] <br />
a person of an artistic turn
</p>
<div><img src="img/pic-1.gif" alt="picture-1" /></div>
<p>
<strong>a person of an artistic turnof mind;</strong><br />
a person of artistic temperament[nature] <br />
a person of an artistic turn
</p>
<div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>
<div><!--Right Part-->
<h2>Couer Story</h2>
<p>
a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
</p>
<div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
<div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
<p>
a person of an artistic turnof mind;<br />
a person of artistic temperament[nature]
</p>
</div>
</div>让我们再回顾一下行内元素的说明：行内元素在一个文本行内生成元素框，而不会打断这行文本。而我们这里要做的就是在一行内生成两个不同的元素框，而又不打破这行文本（直白的说法：在同一行显示）。好了，现在我们就得到了这部分的代码了：
复制内容到剪贴板
大功告成，现在我们就把这个页面里的全部XHTML代码都获得了，看看我们一步步的分析，对页面数据的的显示做了充分的语意化了。现在就把这个页面完整的代码给出来了，看看它是否也做到了，代码:
<div>
<p>
<span><a href="#1">Homepage</a> | <a href="#1">About Us</a> | <a href="#1">Contact Us</a> | <a href="#1">Site Map</a> | <a href="#1">FAQs</a></span>
<span>Copyright © 2004 FD, All rights reserved.</span>
</p>
</div>尽量少的嵌套
页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）
页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化
复制内容到剪贴板
看看我们得到的代码，是不是结构清晰啊，页面上都是运用合理的标签显示相应特征的数据（新闻标题、新闻列表、文字说明、图片、导航链接）了，做到了XHTML标签充分的语意化。大家也看到了，没有多余的嵌套，做到了尽量少的嵌套。而且页面里显示的基本是用户需要的数据，所以我们也做到了页面里基本只显示用户需要看的数据，而我们用CSS直接控制用户需要看的数据的显示的样式，由于我这里还没有添加任何的CSS样式，所以暂时我们还做不到，不过CSS的运用技巧会在我接下文章里介绍，很快我们做到这个也不是什么问题了。代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="Frame Design,a person of artistic mind,temperament,trun,What's News,Green event,Couer Story,Cooperation,Project Work" />
<meta name="description" content="Frame Design,a person of artistic mind,temperament,trun,What's News,Green event,Couer Story,Cooperation,Project Work" />
<meta name="author" content="Frame Design! Scripted by Yaohaixiao" />
<title>Frame Design</title>
</head>
<div><!--Top Sub Navigation-->
<a href="#1">Cart</a> | <a href="#1">Account</a> | <a href="#1">GuestBook</a> | <a href="#1">FAQs</a>
</div>
<div><!--LOGO and Main Navigation-->
<h1><a href="#1" title="FrameDesign">Frame Design</a></h1>
<ul>
<li><a href="#1">ARTICLES</a></li>
<li><a href="#1">TOPICS</a></li>
<li><a href="#1">ABOUT</a></li>
<li><a href="#1">CONTACT</a></li>
<li><a href="#1">FEED</a></li>
</ul>
</div>
<div><!--Banner-->
<img src="img/banner.gif" alt="Nature is the best physician" />
</div>
<div><!--Main Content-->
<div><!--Left Part-->
<h2>What's News a person of artistic temperament[nature]</h2>
<div><img src="img/tlt-banner.gif" alt="What's News" /></a>
<ul>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>
<h2>Green event a person of artistic temperament</h2>
<ul>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
<li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>
</div>
<div><!--Center Part-->
<p>
<strong>a person of an artistic turnof mind;</strong><br />
a person of artistic temperament[nature] <br />
a person of an artistic turn
</p>
<div><img src="img/pic-1.gif" alt="picture-1" /></div>
<p>
<strong>a person of an artistic turnof mind;</strong><br />
a person of artistic temperament[nature] <br />
a person of an artistic turn
</p>
<div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>
<div><!--Right Part-->
<h2>Couer Story</h2>
<p>
a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
</p>
<div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
<div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
<p>
a person of an artistic turnof mind;<br />
a person of artistic temperament[nature]
</p>
</div>
</div>
<div><!--Footer-->
<p>
<span><a href="#1">Homepage</a> | <a href="#1">About Us</a> | <a href="#1">Contact Us</a> | <a href="#1">Site Map</a> | <a href="#1">FAQs</a></span>
<span>Copyright © 2004 FD, All rights reserved.</span>
</p>
</div>
<body>
</body>
</html>最后我们来看看页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化，具体的SEO的优化的一些技巧我要在讲完CSS运用技巧后再来介绍了，不过现在我们来看看，我们这个没有任何CSS支持的页面，在浏览器中的显示效果图：
怎么样？虽然没有CSS，页面看上去不是那么漂亮，但是结构还是很清晰，导航，新闻标题，新闻列表，说明文字我们一眼就可以看出来。而且要在页面中找到你想要的数据，也很容易。还是我之前提到的，我们的搜索引擎，看到的页面，跟你现在看的差不多，它有觉得页面结构十分的清晰啊。^-^！
不过这里要讲一下的就是页面的中的banner我没有把图片显示出来，但是我们看到了"Nature is the best physician"的字样，这个就是写XHTML标签的一个规范的问题了，我们在使用img标签的时候，一定记得给它加上alt属性，这样在用户看不到图片（用户屏闭到了浏览器的图片显示或者由于服务器图片丢失访问不到）的时候，用户可以知道这里的图片大致是显示的什么内容。也就是说alt属性里面的值要是对这张图片的一个介绍。而这么做也是用户友好的一个体现。
多说两句，在我们的设计师设计页面的时候，其实就要考虑到用户友好的问题，页面为什么要这么设计，用什么色调（用户常时间浏览的时候，眼睛不会很容易就疲劳，不同分辨率下，页面的显示不会相差太多）、页面中的哪个位置放什么，标题要用什么字体等等，其实都是很讲究的。在这个时候其实就已经在做合理布局的工作了。好了，到这里我对怎么合理布局的经验就总结的差不多了，后面的文章就要开始介绍CSS的技巧了。期待哦