WEB前端开发经验总结之实战篇（2）

首先是页面最上面的子导航，它就是3个（靠有对齐的）链接。所以没有什么大的疑问，XHTML代码如下：

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

下面接着是我们的LOGO和主导航（2008 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)，所以这里的代码就应该是这样的。（网页广告 banner 设计图文手册）

<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标签了。