怎么使用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 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 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 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 &rarr;</a>   </div>   <div class="four columns">     <div class="row">       <div class="five columns">         <img 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 &rarr;</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" />     <h6><a href="#">Feature 1</a></h6>     <p>Description<br /><a href="#">Read More &rarr;</a></p>   </div>   ... [repeat this column 3 more times]  </div>                   <footer class="row">   <div class="seven columns">     <p><strong>The Foundation Times</strong><br />&copy; 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 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 src="http://placehold.it/200x120" />   </div> </header>

添加了移動化的class之后：

<header class="row hide-on-phones">      <div class="two columns">     <img 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 src="http://placehold.it/200x120" />   </div> </header>     <header class="row show-on-phones">   <div class="twelve columns">     <img 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框架快速創建跨平臺的網站頁面原型”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！