TanXinNiao
commented
3 years ago 规划页面结构
就算写个再简单不过的页面，恐怕都得敲出几百行 HTML和 CSS。所以，事先规划 一下页面结构是非常必要的。记住两条：代码结构要符合逻辑，规划组织要考虑层 次。只有这样，才能确保 CSS与 HTML标记前后照应、协同一致。后面例子中的代 码就是遵循上述规则组织的，我想这应该是编写网页的最佳实践。
HTML结构
着手写HTML的时候，怎么才能把画好的设计图转换成恰当的HTML元素是个挑战 一般来说，这时候你应该有一张用 Photoshop 或 Fireworks 做的设计图，至少也是用铅笔在纸上画出的页面框架图。有一张图，才好跟客户沟 通，然后再调整，保证设计的风格还有内容的组织能够满足项目需要。设计图确定 之后，就要考虑编写页面代码了。此时，第一步应该先在设计图上画一些半透明的 矩形，分别代表主要的 HTML结构。
HTML 不是由矩形的元素构成的嘛，所以一上来就应该想，怎么把页面布局分成尽 可能大的矩形区块。据此，来确定页面标记结构中的顶级元素。然后，再把每个大 区块进一步划分成更小的区块，分别对应为结构中的子元素。
从图 7-2可以看出，页面最外层的粗框是一个外包装（ div#wrapper ），有了它就可以 轻易地设定布局宽度，并且让布局在浏览器窗口内居中。外包装内有 4 个与布局同 宽的矩形，它们的框稍细一些，算是布局中的顶级 HTML 元素。这时候，最好想一 想给这些元素添加什么类和 ID。不过， header 和 footer 元素是不需要类和 ID的， 因为它们在整个页面中都仅出现了一次。主要是中间两个 section 元素的矩形区块， 需要用不同的 ID来区分，我们就用 feature_area 和 book_area 。（不懂咋添加图片）
对 header 而言，其中内容可以分三部分：页面标题在左侧，导航菜单在中间，搜索 表单在右侧。在 feature_area 中，左边是博客正文的前几段，右边是一个 aside 元 素，包含登录表单和博文链接。这个 aside 区域在下一步还要细分。
再往下的 book_area 需要 4 个容器，因为要放 4 本书。最底下的 footer 包含一点文 本和一个结构化的 nav 元素。
接下来是第三级。先说 feature_area aside 吧，要把它分成两个独立的区块，一个 表单和一组链接。而在 book_area article 中，每张图片也分别用一个元素包装起来， 好为每本书的弹出层提供定位上下文。刚才说的这几个元素构成了结构化标记的第 三级。它们的方框在图 7-2 中比第二级的方框要深一点。
虽然实际写起网页来，可能还要额外加一些元素，但页面结构规划到这种程度已经 差不多了。下面就是根据以上分析，初步写出的一个标记结构。
<div id="wrapper">
<header>
<!-- 一级 -->
<section id="title">
<!-- 二级 -->
<!-- h1 和 h2 -->
</section>
<nav>
<!-- 二级 -->
<!-- 菜单 -->
</nav>
<form>
<!-- 二级 -->
<!-- 搜索框 -->
</form>
</header>
<section id="feature_area">
<!-- 一级 -->
<article id="blog_leadoff">
<!-- 二级 -->
<!-- 博客内容 -->
</article>
<aside>
<!-- 二级 -->
<form>
<!-- 三级 -->
<!-- 登录表单 -->
</form>
<nav>
<!-- 三级 -->
<!-- 博文链接 -->
</nav>
</aside>
</section>
<section id="promo_area">
<!-- 一级 -->
<article>
<!-- 二级 -->
<div class="inner">
<!-- 三级 -->
<!-- 图书封面及旋转的文字-->
</div>
</article>
<!-- article 重复 4 次-->
</section>
<footer>
<!-- 一级 -->
<!-- 页脚文本和 nav 元素 -->
</footer>
</div> <!-- wrapper 结束 -->仔细看一看这些标记就会知道，布局中嵌套的每一级区块，都对应着标记中嵌套的 元素。选择 HTML元素时，一定要考虑它的语义。比如，菜单列表显然应该放在一 个 nav 元素中。 写完结构化标记，可以先通过 body 元素设定页面的字体和颜色，再利用 wrapper 设 定布局宽度，并实现布局在页面上居中。
body {
font-family:helvetica, arial, sans-serif;
background:#efefef;
margin:0;
}
wrapper {width:980px; margin:0 auto 20px;}
我想先给大家讲一讲怎么规划页面的整体框架，之后再带大家一步一步地为页面每 个区域设定 CSS 样式。