7.1 规划页面结构

就算写个再简单不过的页面，恐怕都得敲出几百行HTML和CSS。所以，事先规划一下页面结构是非常必要的。记住两条：代码结构要符合逻辑，规划组织要考虑层次。只有这样，才能确保CSS与HTML标记前后照应、协同一致。后面例子中的代码就是遵循上述规则组织的，我想这应该是编写网页的最佳实践。虽然这种做法需要循规蹈矩，但它的回报也是巨大的。这样一来，不仅能方便地找到与任何标记相关的CSS，更能避免样式与标记混乱造成的困惑和时间浪费。最重要的，这样做不仅你自己将来容易理解，而且拿给别人去改的时候，别人也一样能很快看懂。

图7-1是本章结束时要完成的页面。

enter image description here图7-1 本章要完成的页面布局

HTML结构

着手写HTML的时候，怎么才能把画好的设计图转换成恰当的HTML元素是个挑战。别急，我有一个好办法。一般来说，这时候你应该有一张用Photoshop或Fireworks做的设计图，至少也是用铅笔在纸上画出的页面框架图。有一张图，才好跟客户沟通，然后再调整，保证设计的风格还有内容的组织能够满足项目需要。设计图确定之后，就要考虑编写页面代码了。此时，第一步应该先在设计图上画一些半透明的矩形，分别代表主要的HTML结构。

HTML不是由矩形的元素构成的嘛，所以一上来就应该想，怎么把页面布局分成尽可能大的矩形区块。据此，来确定页面标记结构中的顶级元素。然后，再把每个大区块进一步划分成更小的区块，分别对应为结构中的子元素。参见图7-2，这是我在本章页面设计图上划分区块的结果。

enter image description here图7-2 通过观察页面中的矩形区域，可以把页面标记分成三级

从图7-2可以看出，页面最外层的粗框是一个外包装（div#wrapper），有了它就可以轻易地设定布局宽度，并且让布局在浏览器窗口内居中。外包装内有4个与布局同宽的矩形，它们的框稍细一些，算是布局中的顶级HTML元素。这时候，最好想一想给这些元素添加什么类和ID。不过，header和footer元素是不需要类和ID的，因为它们在整个页面中都仅出现了一次。主要是中间两个section元素的矩形区块，需要用不同的ID来区分，我们就用feature_area和book_area。

有读者可能奇怪，为什么页眉中的导航元素会盖在页面标题和搜索表单上头？因为我已经决定让页面标题和搜索区域采用绝对定位了。这样，导航元素就会忽略它们，从而填满整个页眉。本章后面你就会看到，这样也方便我把它包含的菜单设定为在页面上居中。

然后第二级，也就是图7-2中再细一点的那些矩形框。在每个顶级元素中，需要用一个最大的子元素来组织内容。

对header而言，其中内容可以分三部分：页面标题在左侧，导航菜单在中间，搜索表单在右侧。在feature_area中，左边是博客正文的前几段，右边是一个aside元素，包含登录表单和博文链接。这个aside区域在下一步还要细分。

再往下的book_area需要4个容器，因为要放4本书。最底下的footer包含一点文本和一个结构化的nav元素。

接下来是第三级。先说feature_area aside吧，要把它分成两个独立的区块，一个表单和一组链接。而在book_area article中，每张图片也分别用一个元素包装起来，好为每本书的弹出层提供定位上下文。刚才说的这几个元素构成了结构化标记的第三级。它们的方框在图7-2中比第二级的方框要深一点。

虽然实际写起网页来，可能还要额外加一些元素，但页面结构规划到这种程度已经差不多了。下面就是根据以上分析，初步写出的一个标记结构。

  1. <div id="wrapper">
  2.     <header><!-- 一级 -->
  3.         <section id="title"><!-- 二级 -->
  4.             <!-- h1和h2 -->
  5.         </section>
  6.         <nav><!-- 二级 -->
  7.              <!-- 菜单 -->
  8.         </nav>
  9.         <form> <!-- 二级 -->
  10.             <!-- 搜索框 -->
  11.         </form> 
  12.     </header>
  14.     <section id="feature_area"><!-- 一级 -->
  15.         <article id="blog_leadoff"><!-- 二级 -->
  16.             <!-- 博客内容 -->
  17.         </article>
  18.         <aside><!-- 二级 -->
  19.             <form><!-- 三级 -->
  20.                 <!-- 登录表单 -->
  21.             </form>
  22.             <nav><!-- 三级 -->
  23.                 <!-- 博文链接 -->
  24.             </nav>
  25.         </aside>
  26.     </section>
  28.     <section id="promo_area"><!-- 一级 -->
  29.         <article><!-- 二级 -->
  30.             <div class="inner"><!-- 三级 -->
  31.                 <!-- 图书封面及旋转的文字-->
  32.             </div>
  33.         </article>
  34.         <!-- article重复4次-->
  35.     </section>
  37.     <footer><!-- 一级 -->
  38.         <!-- 页脚文本和nav元素 -->
  39.     </footer>
  40. </div> <!-- wrapper结束 -->

仔细看一看这些标记就会知道，布局中嵌套的每一级区块，都对应着标记中嵌套的元素。选择HTML元素时，一定要考虑它的语义。比如，菜单列表显然应该放在一个nav元素中。

写完结构化标记，可以先通过body元素设定页面的字体和颜色，再利用wrapper设定布局宽度，并实现布局在页面上居中。

  1. body {
  2.     font-family:helvetica, arial, sans-serif;
  3.     background:#efefef;
  4.     margin:0;
  5. }
  6. wrapper {width:980px; margin:0 auto 20px;}

好啦，下面就要一步一步地为页面的结构化元素添加内容，同时设定CSS样式了。