我们现在已经配置好了 Foundation 。笔者向来是一个主张尚用主义的人，因此疲于把开发文档复述一遍。我们更想要着手的是一个实际有用的项目，您可以很容易把这个项目改写成您自己的作品。顺便我们可以学习到那些真正有用的知识。当然在项目中我们不仅仅涉及的是 Foundation，还有 CSS3 和 HTML5 的一些知识。
那么为了能让所有读者都做一个有用的项目，那么我们就来做一个自我宣传的网站。您可以很容易把它改成一个电子简历或者是个人网站。但是我们要做的是一个自我宣传的网站——不会像简历那样正式，也不会像个人的社交站点那样私人化。更像是等着客户上门的那种宣传网站，或者说是那种兼职或远程服务的简历。不过只要您愿意，您可以把它改写的更私人一些（更像一个个人站点）或者更正式一些（更像一个电子简历）。
那么我们现在就正式开始制作这个网站，您可以用任何一个您喜欢的编辑器。如果您的电脑上还没有安装任何一个编辑器，那么我建议您试试看 Dreamweaver。
您知道吗？
Dreamweaver 是一个付费软件，而且它并不完全是一个编辑器。它有丰富的可视化的编辑功能和语法高亮。当然，您也可以选择较为经济的开发软件。Notepad++ 是一个不错的选择，但它并不包含像 Dreamweaver 那样丰富的功能。
在您的网页头部插入下面的代码：
<style>
.header {
text-align: center;
background: #990000;
background-size: cover;
position: relative;
overflow: visible;
padding-top: 2.5rem;
padding-bottom: 4.9rem;
}
.header .headline {
color: #ffe;
}
.header-subnav {
float: none;
position: absolute;
text-align: center;
margin: 0 auto;
bottom: 0;
width: 100%;
}
.header-subnav li {
float: none;
display: inline-block;
}
.header-subnav li a {
padding: 0.9rem 1rem;
font-size: 0.75rem;
color: #ffe;
text-transform: uppercase;
display: block;
font-weight: bold;
letter-spacing: 1px;
transition: all 0.35s ease-in-out;
}
.header-subnav li a.is-active {
background: rgba(250, 250, 250, 0.15);
}
.header-subnav li a:hover {
background: rgba(250, 250, 250, 0.15);
transition: all 0.35s ease-in-out;
}
</style>
这段代码包含在样式（style）标签中，它们的作用是添加一些样式来渲染您的 HTML 文档的。当然作为一个成熟的前端工程师会把它们写到层叠样式表（CSS）中。我们暂时就先这样摆着，以后再说重构的事情。
对于绝大多数成熟的工程师来说他们都是在编写代码时完成一些可以预知的重构，在整个项目大致完成之后才进行整体重构的。譬如说您应该知道把样式放到一个层叠样式表里这种事情。然后对于层叠样式表里面的事情暂时只是按照自己已有的编程习惯书写就可以了。重构的事情等有时间再说。而不是一味的追求重构而耽误了整个项目的进度。
简而言之，我们的项目本身应该在建立在保持很好的编程习惯的基础上，重构的事情有时间再说。然而笔者为了那简单明了的例子讲解如何重构以及什么才是好的编程习惯和架构。所以一开始的例子并没有维持一个好的编程习惯。或者说，笔者故意要让您先见识一下混乱的编程风格是什么样子的，而且刻骨铭心的记住它有什么危害。
您知道吗？
关于应该何时重构对于每一个工程师可能都有不同的答案。对于一些聪明绝顶的工程师来说，他们本身就规划了很好的架构。或者说成在编写代码的同时完成重构。但是这种方法很好但并不推荐所有人使用。因为一个好的架构的本身就能促进代码的重复使用（当然这是废话），更重要的则是一个好的架构应该具有可维护性和可扩展性。
好了，现在在您的文档的主体部分插入一下代码。您将会看到如图所示的效果。
<header class="header">
<h1 class="headline">Liu's Homepage</h1>
<ul class="header-subnav">
<li><a href="#" class="is-active">Index</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Notes</a></li>
<li><a href="#">Resume</a></li>
</ul>
</header>
为了方便您把它改成您自己的项目那么您可以修改这里：
<header class="header">
<h1 class="headline">您网站的标题</h1>
<ul class="header-subnav">
<li><a href="#" class="is-active">主页</a></li>
<li><a href="#">子页面之一</a></li>
<li><a href="#">子页面之二</a></li>
<li><a href="#">子页面之三</a></li>
</ul>
</header>
如果您不喜欢喜欢头部的背景颜色，也可以修改样式标签中的内容。
.header {
text-align: center;
background: #990000; /*这里修改头部背景颜色*/
background-size: cover;
position: relative;
overflow: visible;
padding-top: 2.5rem;
padding-bottom: 4.9rem;
}
接下来，如果您使用的是 Dreamweaver ，请在菜单中找到“插入”→“InContext Editing”→“创建可编辑区域”，点击它。不过并不是所有人都负担得起 Dreamweaver 的费用。所以我们尽可能的用廉价的方法来得到同一效果。我们要使用 Jekyll 。这是个免费的新鲜玩意儿，不需要花功夫去学。如果您已经决意要将自己的网站配置到 GitHub Pages 上门去的时候，您甚至都不需要安装它。
网友评论