实战篇

现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制作的页面的图：

呵呵，希望我选的这张图没有让大家失望。那，现在图形已经在我们的面前了，现在我们就开始结合我们的理论--合理的布局。我在前面讲了，一个合理布局的页面，要结构清晰，要讲求语意化。那么我们实际的开发的时候要怎么做呢？那现在这个页面，我们一开始，先别忙着切图，先来分析以下页面的结构，说“结构清晰”嘛，我们大家一开始肯定要对页面的布局结构有了个框架后，我们才好动手制作啊。这个图形我分析的结构如下图：

现在我们就基本把页面的布局结构分析出来了，我们现在对页面的布局结构有了一个很清晰的了解了。不过还不要急着写代码。现在我们还要做的就是分析页面的数据结构。怎么理解？呵呵，还记得我们前面提到的XHTML标签要语言意化吗？即“使用合理的标签显示相应特征的数据”，放心，我们不是在做C#的开发，这里的数据结构的意思是，我们要对页面中显示的数据的特征进行分析，看看使用什么XHTML标签来显示它才更加语意话。

好，我们现在就从上到下的开始分析吧！首先是页面最上面的子导航，它就是3个（靠有对齐的）链接。所以没有什么大的疑问，XHTML代码如下：

复制内容到剪贴板

代码:

<!--不清楚那些韩文是什么意思，我就用了我们常用的导航了-->
<div><a href="#1">Cart</a>&nbsp;|&nbsp;<a href="#1">Account</a>&nbsp;|&nbsp;<a href="#1">GuestBook</a>&nbsp;|&nbsp;<a href="#1">FAQs</a></div>

下面接着是我们的LOGO和主导航，LOGO这部分我还是准备采取前面文章所采用的那个方法，至于导航菜单，用UL标签，我想大家一定没有什么异议，所以我们这里的XHTML代码如下：

复制内容到剪贴板

代码:

<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>

下面的Banner就更简单了，一张大图片，所以毫无疑问我们使用<img />标签，代码如下：

复制内容到剪贴板

代码:

<div><img src="img/banner.gif" alt="Nature is the best physician" /></div>

下面就是我们比较复杂的部分了，不过其实我们分析后页会发现，其实也不是我们想象中的那么复杂。先来看左边这部分，标题(h2)--标题banner(img)--新闻列表(ul)--标题(h2)--新闻列表(ul)，所以这里的代码就应该是这样的。

复制内容到剪贴板

代码:

<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>

中间的部分，其实结构也很简单，一段文字说明，然后是一张图片，文字说明我们用p标签，图片就用img标签了，那就不多分析了，只是要说明的是，我们看到，第一行的文字是要加粗的，代码如下：

复制内容到剪贴板

代码:

<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>

接着是我们的左边部分。标题图片--这里采用我对LOGO的做法就再合适不过了，看上去是图片，而其实我们用的是<h2>标签，说明这里是标题。形式上是图片，结构（实际）上是标题文字，一举两得，我想现在大家看出这么处理的好处了吧？接着是说明的文字p标签，下面是两个banner图片，使用img标签。接着又是段说明文字（p标签了）。OK，这部分的代码如下：

复制内容到剪贴板

代码:

<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>

OK，现在我们就可以把这3段代码合并起来，我们就得到了这块主体部分的代码了：

复制内容到剪贴板

代码:

<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>

呵呵，稍微花点信息去分析，其实也不是那么难的，对吗？下面就是是我们的底部的导航--都是链接，用A标签没有问题，以及版权信息。总的来说，这部分都算是说明的文字，所以我们就用p标签，但是我们发现它们有属于不动的两个部分，而这两个部分有在同一行显示，所以我们这里就要用到一个很常用的行内元素--span标签了。

让我们再回顾一下行内元素的说明：行内元素在一个文本行内生成元素框，而不会打断这行文本。而我们这里要做的就是在一行内生成两个不同的元素框，而又不打破这行文本（直白的说法：在同一行显示）。好了，现在我们就得到了这部分的代码了：

复制内容到剪贴板

代码:

<div>
<p>
   <span><a href="#1">Homepage</a>&nbsp;|&nbsp;<a href="#1">About Us</a>&nbsp;|&nbsp;<a href="#1">Contact Us</a>&nbsp;|&nbsp;<a href="#1">Site Map</a>&nbsp;|&nbsp;<a href="#1">FAQs</a></span>
   <span>Copyright &copy 2004  FD, All rights reserved.</span>
</p>
</div>

大功告成，现在我们就把这个页面里的全部XHTML代码都获得了，看看我们一步步的分析，对页面数据的的显示做了充分的语意化了。现在就把这个页面完整的代码给出来了，看看它是否也做到了，

尽量少的嵌套
页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）
页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

复制内容到剪贴板

代码:

<!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>&nbsp;|&nbsp;<a href="#1">Account</a>&nbsp;|&nbsp;<a href="#1">GuestBook</a>&nbsp;|&nbsp;<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>&nbsp;|&nbsp;<a href="#1">About Us</a>&nbsp;|&nbsp;<a href="#1">Contact Us</a>&nbsp;|&nbsp;<a href="#1">Site Map</a>&nbsp;|&nbsp;<a href="#1">FAQs</a></span>
   <span>Copyright &copy 2004  FD, All rights reserved.</span>
</p>
</div>
<body>
</body>
</html>

看看我们得到的代码，是不是结构清晰啊，页面上都是运用合理的标签显示相应特征的数据（新闻标题、新闻列表、文字说明、图片、导航链接）了，做到了XHTML标签充分的语意化。大家也看到了，没有多余的嵌套，做到了尽量少的嵌套。而且页面里显示的基本是用户需要的数据，所以我们也做到了页面里基本只显示用户需要看的数据，而我们用CSS直接控制用户需要看的数据的显示的样式，由于我这里还没有添加任何的CSS样式，所以暂时我们还做不到，不过CSS的运用技巧会在我接下文章里介绍，很快我们做到这个也不是什么问题了。

最后我们来看看页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化，具体的SEO的优化的一些技巧我要在讲完CSS运用技巧后再来介绍了，不过现在我们来看看，我们这个没有任何CSS支持的页面，在浏览器中的显示效果图：

怎么样？虽然没有CSS，页面看上去不是那么漂亮，但是结构还是很清晰，导航，新闻标题，新闻列表，说明文字我们一眼就可以看出来。而且要在页面中找到你想要的数据，也很容易。还是我之前提到的，我们的搜索引擎，看到的页面，跟你现在看的差不多，它有觉得页面结构十分的清晰啊。^-^！

不过这里要讲一下的就是页面的中的banner我没有把图片显示出来，但是我们看到了"Nature is the best physician"的字样，这个就是写XHTML标签的一个规范的问题了，我们在使用img标签的时候，一定记得给它加上alt属性，这样在用户看不到图片（用户屏闭到了浏览器的图片显示或者由于服务器图片丢失访问不到）的时候，用户可以知道这里的图片大致是显示的什么内容。也就是说alt属性里面的值要是对这张图片的一个介绍。而这么做也是用户友好的一个体现。

多说两句，在我们的设计师设计页面的时候，其实就要考虑到用户友好的问题，页面为什么要这么设计，用什么色调（用户常时间浏览的时候，眼睛不会很容易就疲劳，不同分辨率下，页面的显示不会相差太多）、页面中的哪个位置放什么，标题要用什么字体等等，其实都是很讲究的。在这个时候其实就已经在做合理布局的工作了。好了，到这里我对怎么合理布局的经验就总结的差不多了，后面的文章就要开始介绍CSS的技巧了。期待哦