怎么使用web Foundation框架快速创建跨平台的网站页面原型
这篇文章主要介绍“怎么使用web Foundation框架快速创建跨平台的网站页面原型”，在日常操作中，相信很多人在怎么使用web Foundation框架快速创建跨平台的网站页面原型问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用web Foundation框架快速创建跨平台的网站页面原型”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
资源概览
首先到foundation.zurb.com（http://foundation.zurb.com/）下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构：
◆ index.html - 我们将从这里开始创建***个页面。
◆ javascripts和stylesheets路径 - 主要的静态资源文件，包括jQuery及所需的样式表。
◆ humans.txt和robots.txt - 里面的代码算是不错的样板，有空的时候可以溜几眼。
JS方面的东西基本不在本文讨论范围，我们继续来看看stylesheets路径中的文件：
◆ global.css - 全局基础样式表，包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。
◆ ui.css - 用来对那些组成原型的常规UI元素进行样式定义。
◆ mobile.css - 负责移动设备方面的样式，涉及响应式的样式定义都在这里。
分别在浏览器和代码编辑器中打开index.html文件。在浏览器中，我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。
接下来，我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。
网格系统
首先来简单看看global.css中的网格系统。如果你熟悉960网格系统或是Blueprint CSS框架，那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代码：
<div class="container"> <div class="row"> <div class="eight columns" id="mainContent"> ... </div> <div class="four columns" id="sidebarContent"> ... </div> </div> </div>该结构由三部分组成：外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。
行容器拥有一个固定的***宽度值，防止页面在大显示器中过宽;当然，如果你想打造纯粹的液态布局，也可以在样式表中去掉这个属性。
列容器是最内层的内容容器，在我们的网格系统中，每行最多可以放置12个列容器。上面的代码中，我们创建的是典型的“内容+侧边栏”布局，宽度分别为全宽的2/3和1/3。
网格布局可以进行嵌套：
<div class="container"> <div class="row"> <div class="eight columns"> <div class="row"> <div class="four columns"> ... </div> <div class="four columns"> ... </div> <div class="four columns"> ... </div> </div> </div> <div class="four columns"> ... </div> </div> </div>Foundation官网中有一些布局范例可以参考。
快速创建原型
开始动手。我们要为一个简单的新闻资讯类网站制作首页和文章内页的原型;整个过程包括两部分：使用Foundation快速创建基础原型，以及为不同类型的设备进行移动化处理。首先来看***部分。
***拿起纸和笔，在创建原型之前将构思勾画出来。下面是我们为基础版本的首页(桌面显示器版本)画的草图：
可以看到，首页的大致布局包括页头、主要文章内容图文、侧边的次级内容图文、特色文章图文列表。对这个页面，我们可以用到一些Foundation自带的布局结构，以及一个不错的外部服务。
◆ 页面整体布局方面，使用前面介绍过的网格系统。
◆ 全局主导航使用Foundation预设的tab结构。
◆ 对于每个图文单元中的图片，我们使用placehold.it提供的服务。它会按照指定的比例输出可以填满容器的示范内容，包括用来占位的图片，以及可以自定义的文案等。
OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5，所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构，所以我们还要为它添加class="row"。代码如下：
<div class="container"> <header class="row"> <div class="two columns"> <img class="lazy" data-src="http://placehold.it/200x120" /> </div> <div class="eight columns"> <h2 class="centered">The Foundation Times</h2> <h6 class="centered">December 1, 2011</h6> </div> <div class="two columns"> <img class="lazy" data-src="http://placehold.it/200x120" /> </div> </header>可以看到，在外部容器container中，我们将header作为完整的一行，其中放置了三列，宽度方面是1:4:1的关系。在***列和第三列中，我们使用了placehold.it提供的占位图片，用来表示logo等元素。在第二列中，我们使用h2标签作为网站标题的容器，副标题则使用h6。
接下来是导航。我们要使用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 class="lazy" data-src="http://placehold.it/800x340" /> <h4><a href="#">Llamas: Great Pets or the Best Pets?</a></h4> <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 class="lazy" data-src="http://placehold.it/120x100" /> </div> <div class="seven columns"> <h6><a href="">Alpaca Farm Closed</a></h6> <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 class="lazy" data-src="http://placehold.it/260x190" /> <h6><a href="#">Feature 1</a></h6> <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代码，我们就已经创建好了基础版本的原型;当前的实际效果如下图所示。
如果仅仅需要为桌面设备制作页面原型，那么到这里我们的任务就已经完成了。不过在本次实例中，我们还要演示怎样使原型针对不同类型移动设备进行响应式的兼容，实现跨平台。
移动化
用户使用移动设备访问网站时，期望会有所不同。对于眼前这个内容类网站，我们希望用户在使用移动设备进行访问的时候，可以在首屏直接看到主要内容部分。移动设备用户在浏览网页时，很厌恶的一点就是，在忍受了网站页头和全局导航的加载过程之后，仍然无法立刻看到主要内容。(关于在移动设备中，网站内容呈现方式的策略，可以参考我们之前关于响应式网站产品需求及设计流程方面的文章)
在不做任何移动化处理之前，我们的原型在小屏幕移动设备中的呈现方式如下图所示：
首屏中，我们只能看到logo、网站标题等与主要内容、全局导航无关的元素。真心不靠谱。我们接下来要使用一些Foundation提供的的专门用来处理不同设备视图的class，让原型中某些元素在小屏幕移动设备中发生变化。
当前，我们的基础版页面原型中，header部分的代码是这样的：
<header class="row"> <div class="two columns"> <img class="lazy" data-src="http://placehold.it/200x120" /> </div> <div class="eight columns"> <h2 class="centered">The Foundation Times</h2> <h6 class="centered">December 1, 2011</h6> </div> <div class="two columns"> <img class="lazy" data-src="http://placehold.it/200x120" /> </div> </header>添加了移动化的class之后：
<header class="row hide-on-phones"> <div class="two columns"> <img class="lazy" data-src="http://placehold.it/200x120" /> </div> <div class="eight columns"> <h2 class="centered">The Foundation Times</h2> <h6 class="centered">December 1, 2011</h6> </div> <div class="two columns"> <img class="lazy" data-src="http://placehold.it/200x120" /> </div> </header> <header class="row show-on-phones"> <div class="twelve columns"> <img class="lazy" data-src="http://placehold.it/480x100" /> <h2 class="centered">The Foundation Times</h2> <h6 class="centered">December 1, 2011</h6> </div> </header>重点在于两个新的class，一个是hide-on-phones，另外一个是show-on-phones。顾名思义，它们用来控制元素在手机设备上的显示和隐藏。Foundation预设了一些这样的class，用来根据不同类型的设备，响应式的调整页面元素的呈现方式。
现在，当使用手机浏览页面原型时，只有第二个简化的header会显示出来。接下来，我们为这个移动版本的header写几行样式：
h2.centered { text-align: center; margin-bottom: 0; } h6.centered { text-align: center; } .show-on-phones h2.centered { font-size: 24px; font-size: 2.4rem; } .show-on-phones h6.centered { font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }来看看到目前的成果：
好多了。现在的问题是，导航项在小屏幕中显得太多了，布局发生了错乱。一个常见的解决方案是，对手机设备，将导航移至页面底部。当然，我们并不是要真的移动它，而是像前面那样设置不同的显示规则。对于目前的全局导航，在class中增加一个hide-on-phones：
<div class="row hide-on-phones"> <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>接下来，在页面底部，footer之前，添加一个新的导航;HTML结构与头部的全局导航基本一致：
<div class="row show-on-phones"> <div class="twelve columns"> <dl class="tabs mobile"> <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>区别在于两点：一是在容器的class中使用了show-on-phones，使该导航只在手机中显示;另外，在导航列表的class里增加了一个“mobile”，这样可以使每个导航tab都成为全宽，整个导航将成为一个纵向列表。
现在，我们的原型在手机中的首屏效果是这样的：
基于网格系统，编写了少量的高语义化HTML代码，配合Foundation原生提供的一些样式工具class，我们已经创建出了可以用来进行跨平台演示和测试的首页原型。
到此，关于“怎么使用web Foundation框架快速创建跨平台的网站页面原型”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
