原型图

在掌握了 CSS 的许多基础知识后，我们终于可以构建一个 HTML5 和 CSS3 的页面布局了，相信自己已经具备足够的知识，能够顺利实现而不会遇到重大问题。

我们将分几个步骤来完成这个布局：

• 原型图（Mockup）
• HTML 结构
• CSS 样式

首先，我们会先画出网站的粗略草图。然后将实际结构转换为 HTML 代码，最后借助 CSS 将其变成一个用户友好的界面。

原型图

对于一个简单的原型图，我们可以直接在纸上手绘，或者使用任何能绘制矩形的软件工具。

就这么简单！

有两点需要记住：

• 如果是简单布局，画出来不应超过五分钟。
• 这不是艺术品，只是一个用于指导的参考图。

假设你刚开始学习网页开发，那么应该尽量减少在原型图上花费的时间。

我们的布局的 HTML 代码

以下是将原型图转化为 HTML 代码的结果：

1<header>这是页头。</header>
2<aside>这是侧边栏。</aside>
3<main>这是主要内容区域。</main>
4<footer>这是页脚。</footer>

是不是很简单？

之所以这么容易，是因为我们的开发平台实际上隐藏了一些复杂性。这些隐藏的复杂性包括一些必要的额外 HTML 代码，如下所示：

1<!DOCTYPE html>
2<html>
3  <head>
4     <!-- meta 标签放在这里 -->
5  </head>
6  <body>
7    <header>这是页头。</header>
8    <aside>这是侧边栏。</aside>
9    <main>这是主要内容区域。</main>
10    <footer>这是页脚。</footer>
11  </body>
12</html>

如上所示，我们的实际代码被包裹在一个完整的结构中。这种包装结构是构建一个结构清晰的 HTML 页面所必需的。

注意： 我们使用的是语义化的 HTML5 标签——<header>、<aside>、<main> 和 <footer>。

为什么叫“语义化”？

从广义上讲，“语义”意味着“有意义”。换句话说，我们使用的元素类型本身就暗示了它的含义。

这比写成这样要好得多：

1<div>这是页头。</div>
2<div>这是侧边栏。</div>
3<div>这是主要内容区域。</div>
4<div>这是页脚。</div>

虽然上述代码语法上是正确的，但使用语义化的 HTML5 标签显然更优，正如我们之前所做的那样。

此时，我们的网页看起来还很普通。接下来，通过添加一些 CSS 代码，让它真正呈现出应有的样子。

我们的布局的 CSS 代码

在当前这个简单的布局开发阶段，查看完整示例会非常有帮助。

注意： 上面的布局并未体现构建网站布局的最佳实践！

我们距离能够创建一个用户友好且符合标准规范的 HTML 和 CSS 布局，还有很长的路要走。