Foundation框架 - 快速创建跨平台的网站页面原型
快速创建原型
开始动手。我们要为一个简单的新闻资讯类网站制作首页和文章内页的原型；整个过程包括两部分：使用Foundation快速创建基础原型，以及为不同类型的设备进行移动化处理。首先来看第一部分。
最好拿起纸和笔，在创建原型之前将构思勾画出来。下面是我们为基础版本的首页(桌面显示器版本)画的草图：
可以看到，首页的大致布局包括页头、主要文章内容图文、侧边的次级内容图文、特色文章图文列表。对这个页面，我们可以用到一些Foundation自带的布局结构，以及一个不错的外部服务。
- 页面整体布局方面，使用前面介绍过的网格系统。
- 全局主导航使用Foundation预设的tab结构。
- 对于每个图文单元中的图片，我们使用placehold.it提供的服务。它会按照指定的比例输出可以填满容器的示范内容，包括用来占位的图片，以及可以自定义的文案等。
OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5，所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构，所以我们还要为它添加class="row"。代码如下：
<div class="container">
<header class="row">
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
<div class="eight columns">
<h1 class="centered">The Foundation Times</h1>
<h5 class="centered">December 1, 2011</h5>
</div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
</header>可以看到，在外部容器container中，我们将header作为完整的一行，其中放置了三列，宽度方面是1:4:1的关系。在第一列和第三列中，我们使用了placehold.it提供的占位图片，用来表示logo等元素。在第二列中，我们使用h1标签作为网站标题的容器，副标题则使用h5。
接下来是导航。我们要使用Foundation预设的tab形式；代码结构如下：
<div class="row">
<div class="twelve columns">
<dl class="tabs">
<dd><a href="#" class="active">All News</a></dd>
<dd><a href="#">Llamas</a></dd>
<dd><a href="#">Alpacas</a></dd>
<dd><a href="#">Vicunas</a></dd>
<dd><a href="#">Other Dromedaries</a></dd>
</dl>
</div>
</div>虽然在这一行中只有一套导航元素，但是我们仍然需要将导航元素列表dl放置在一个列容器中，并且将这个列容器设置为12列全宽，否则布局将出现问题。
对于页面其他部分的内容，基本方式是类似的，我们将会用到网格系统、一些基本的元素、以及Foundation自带的UI组件。下面是页面剩余部分的HTML代码：
<div class="row">
<div class="eight columns">
<img src="http://placehold.it/800x340" />
<h3><a href="#">Llamas: Great Pets or the Best Pets?</a></h3>
<p>Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!</p> <a href="#" class="small radius nice blue button">Read More →</a>
</div>
<div class="four columns">
<div class="row">
<div class="five columns">
<img src="http://placehold.it/120x100" />
</div>
<div class="seven columns">
<h5><a href="">Alpaca Farm Closed</a></h5>
<p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>
</div>
</div>
... [repeat this row twice more]
</div>
</div>
<div class="row">
<div class="twelve columns">
<hr />
</div>
</div>
<div class="row">
<div class="three columns">
<img src="http://placehold.it/260x190" />
<h5><a href="#">Feature 1</a></h5>
<p>Description<br /><a href="#">Read More →</a></p>
</div>
... [repeat this column 3 more times]
</div>
<footer class="row">
<div class="seven columns">
<p><strong>The Foundation Times</strong><br />© 2025 no rights reserved.</p>
</div>
<div class="five columns">
<p><a href="#">All News</a> | <a href="#">Llamas</a> | <a href="#">Alpacas</a> | <a href="#">Vicunas</a> | <a href="#">Other Dromedaries</a></p>
</div>
</footer>我们可以看到，HTML原型中每个部分的代码结构其实都是相当基础和简单的。需要注意的是class中带有“button”的元素，这些是Foundation预设的按钮，包括几种不同的风格样式。我们可以用这样的方式将a标签或是button类型的input元素定义为风格化按钮，并通过“small”、“radius”等class为其设置具体的样式：
- small或large - 可选；控制按钮的尺寸；如果不做设置，默认将为中等尺寸。
- radius - 可选；为按钮增加几像素的圆角效果。该值还可以是round，样式为左右两侧完全圆弧。不做设置时，默认样式是矩形。
- nice - 可选；添加少许高光等细节效果。
- blue - 可选；设置颜色；该值还可以是red、black、grey，或是在样式表中进行过自定义的任何名称。
- button - 唯一的必要class，用来将元素格式化为按钮。
通过这样一些很基本的HTML代码，我们就已经创建好了基础版本的原型；当前的实际效果如下图所示。
如果仅仅需要为桌面设备制作页面原型，那么到这里我们的任务就已经完成了。不过在本次实例中，我们还要演示怎样使原型针对不同类型移动设备进行响应式的兼容，实现跨平台。
译文代表原作者观点。欢迎发表评论，或到译者微博进一步交流探讨。