您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么使用web Foundation框架快速創(chuàng)建跨平臺(tái)的網(wǎng)站頁面原型”,在日常操作中,相信很多人在怎么使用web Foundation框架快速創(chuàng)建跨平臺(tái)的網(wǎng)站頁面原型問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”怎么使用web Foundation框架快速創(chuàng)建跨平臺(tái)的網(wǎng)站頁面原型”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
資源概覽
首先到foundation.zurb.com(http://foundation.zurb.com/)下載代碼包;果斷點(diǎn)擊大藍(lán)按鈕即可。代碼包中包含以下文件及結(jié)構(gòu):
◆ index.html - 我們將從這里開始創(chuàng)建***個(gè)頁面。
◆ javascripts和stylesheets路徑 - 主要的靜態(tài)資源文件,包括jQuery及所需的樣式表。
◆ humans.txt和robots.txt - 里面的代碼算是不錯(cuò)的樣板,有空的時(shí)候可以溜幾眼。
JS方面的東西基本不在本文討論范圍,我們繼續(xù)來看看stylesheets路徑中的文件:
◆ global.css - 全局基礎(chǔ)樣式表,包括相對(duì)常規(guī)的12列固定寬度的網(wǎng)格系統(tǒng)、快速創(chuàng)建復(fù)雜布局的可嵌套工具等。另外還有其他全局字體、布局等方面的樣式定義。
◆ ui.css - 用來對(duì)那些組成原型的常規(guī)UI元素進(jìn)行樣式定義。
◆ mobile.css - 負(fù)責(zé)移動(dòng)設(shè)備方面的樣式,涉及響應(yīng)式的樣式定義都在這里。
分別在瀏覽器和代碼編輯器中打開index.html文件。在瀏覽器中,我們可以看到該頁面包含了一些用于構(gòu)筑原型的基礎(chǔ)布局結(jié)構(gòu)及UI元素。
接下來,我們將從網(wǎng)格系統(tǒng)、快速創(chuàng)建原型、移動(dòng)化這三個(gè)方面依次進(jìn)行實(shí)例講解。
網(wǎng)格系統(tǒng)
首先來簡單看看global.css中的網(wǎng)格系統(tǒng)。如果你熟悉960網(wǎng)格系統(tǒng)或是Blueprint CSS框架,那么對(duì)Foundation的網(wǎng)格結(jié)構(gòu)也應(yīng)該不會(huì)陌生。下面是一段典型的結(jié)構(gòu)代碼:
<div class="container"> <div class="row"> <div class="eight columns" id="mainContent"> ... </div> <div class="four columns" id="sidebarContent"> ... </div> </div> </div>
該結(jié)構(gòu)由三部分組成:外層容器container、行容器row和列容器columns。外層容器的作用只是為頁面添加左右內(nèi)邊距(padding)。
行容器擁有一個(gè)固定的***寬度值,防止頁面在大顯示器中過寬;當(dāng)然,如果你想打造純粹的液態(tài)布局,也可以在樣式表中去掉這個(gè)屬性。
列容器是最內(nèi)層的內(nèi)容容器,在我們的網(wǎng)格系統(tǒng)中,每行最多可以放置12個(gè)列容器。上面的代碼中,我們創(chuàng)建的是典型的“內(nèi)容+側(cè)邊欄”布局,寬度分別為全寬的2/3和1/3。
網(wǎng)格布局可以進(jìn)行嵌套:
<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官網(wǎng)中有一些布局范例可以參考。
快速創(chuàng)建原型
開始動(dòng)手。我們要為一個(gè)簡單的新聞資訊類網(wǎng)站制作首頁和文章內(nèi)頁的原型;整個(gè)過程包括兩部分:使用Foundation快速創(chuàng)建基礎(chǔ)原型,以及為不同類型的設(shè)備進(jìn)行移動(dòng)化處理。首先來看***部分。
***拿起紙和筆,在創(chuàng)建原型之前將構(gòu)思勾畫出來。下面是我們?yōu)榛A(chǔ)版本的首頁(桌面顯示器版本)畫的草圖:
可以看到,首頁的大致布局包括頁頭、主要文章內(nèi)容圖文、側(cè)邊的次級(jí)內(nèi)容圖文、特色文章圖文列表。對(duì)這個(gè)頁面,我們可以用到一些Foundation自帶的布局結(jié)構(gòu),以及一個(gè)不錯(cuò)的外部服務(wù)。
◆ 頁面整體布局方面,使用前面介紹過的網(wǎng)格系統(tǒng)。
◆ 全局主導(dǎo)航使用Foundation預(yù)設(shè)的tab結(jié)構(gòu)。
◆ 對(duì)于每個(gè)圖文單元中的圖片,我們使用placehold.it提供的服務(wù)。它會(huì)按照指定的比例輸出可以填滿容器的示范內(nèi)容,包括用來占位的圖片,以及可以自定義的文案等。
OK我們從頁頭開始。Foundation框架會(huì)保證舊瀏覽器兼容HTML5,所以我們?cè)谶@里可以放心的使用更加語義化的header標(biāo)簽。因?yàn)轫擃^是一個(gè)包含多列內(nèi)容的塊級(jí)結(jié)構(gòu),所以我們還要為它添加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的關(guān)系。在***列和第三列中,我們使用了placehold.it提供的占位圖片,用來表示logo等元素。在第二列中,我們使用h2標(biāo)簽作為網(wǎng)站標(biāo)題的容器,副標(biāo)題則使用h6。
接下來是導(dǎo)航。我們要使用Foundation預(yù)設(shè)的tab形式;代碼結(jié)構(gòu)如下:
<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>
雖然在這一行中只有一套導(dǎo)航元素,但是我們?nèi)匀恍枰獙?dǎo)航元素列表dl放置在一個(gè)列容器中,并且將這個(gè)列容器設(shè)置為12列全寬,否則布局將出現(xiàn)問題。
對(duì)于頁面其他部分的內(nèi)容,基本方式是類似的,我們將會(huì)用到網(wǎng)格系統(tǒng)、一些基本的元素、以及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 →</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 →</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 →</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原型中每個(gè)部分的代碼結(jié)構(gòu)其實(shí)都是相當(dāng)基礎(chǔ)和簡單的。需要注意的是class中帶有“button”的元素,這些是Foundation預(yù)設(shè)的按鈕,包括幾種不同的風(fēng)格樣式。我們可以用這樣的方式將a標(biāo)簽或是button類型的input元素定義為風(fēng)格化按鈕,并通過“small”、“radius”等class為其設(shè)置具體的樣式:
◆ small或large - 可選;控制按鈕的尺寸;如果不做設(shè)置,默認(rèn)將為中等尺寸。
◆ radius - 可選;為按鈕增加幾像素的圓角效果。該值還可以是round,樣式為左右兩側(cè)完全圓弧。不做設(shè)置時(shí),默認(rèn)樣式是矩形。
◆ nice - 可選;添加少許高光等細(xì)節(jié)效果。
◆ blue - 可選;設(shè)置顏色;該值還可以是red、black、grey,或是在樣式表中進(jìn)行過自定義的任何名稱。
◆ button - 唯一的必要class,用來將元素格式化為按鈕。
通過這樣一些很基本的HTML代碼,我們就已經(jīng)創(chuàng)建好了基礎(chǔ)版本的原型;當(dāng)前的實(shí)際效果如下圖所示。
如果僅僅需要為桌面設(shè)備制作頁面原型,那么到這里我們的任務(wù)就已經(jīng)完成了。不過在本次實(shí)例中,我們還要演示怎樣使原型針對(duì)不同類型移動(dòng)設(shè)備進(jìn)行響應(yīng)式的兼容,實(shí)現(xiàn)跨平臺(tái)。
移動(dòng)化
用戶使用移動(dòng)設(shè)備訪問網(wǎng)站時(shí),期望會(huì)有所不同。對(duì)于眼前這個(gè)內(nèi)容類網(wǎng)站,我們希望用戶在使用移動(dòng)設(shè)備進(jìn)行訪問的時(shí)候,可以在首屏直接看到主要內(nèi)容部分。移動(dòng)設(shè)備用戶在瀏覽網(wǎng)頁時(shí),很厭惡的一點(diǎn)就是,在忍受了網(wǎng)站頁頭和全局導(dǎo)航的加載過程之后,仍然無法立刻看到主要內(nèi)容。(關(guān)于在移動(dòng)設(shè)備中,網(wǎng)站內(nèi)容呈現(xiàn)方式的策略,可以參考我們之前關(guān)于響應(yīng)式網(wǎng)站產(chǎn)品需求及設(shè)計(jì)流程方面的文章)
在不做任何移動(dòng)化處理之前,我們的原型在小屏幕移動(dòng)設(shè)備中的呈現(xiàn)方式如下圖所示:
首屏中,我們只能看到logo、網(wǎng)站標(biāo)題等與主要內(nèi)容、全局導(dǎo)航無關(guān)的元素。真心不靠譜。我們接下來要使用一些Foundation提供的的專門用來處理不同設(shè)備視圖的class,讓原型中某些元素在小屏幕移動(dòng)設(shè)備中發(fā)生變化。
當(dāng)前,我們的基礎(chǔ)版頁面原型中,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>
添加了移動(dòng)化的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>
重點(diǎn)在于兩個(gè)新的class,一個(gè)是hide-on-phones,另外一個(gè)是show-on-phones。顧名思義,它們用來控制元素在手機(jī)設(shè)備上的顯示和隱藏。Foundation預(yù)設(shè)了一些這樣的class,用來根據(jù)不同類型的設(shè)備,響應(yīng)式的調(diào)整頁面元素的呈現(xiàn)方式。
現(xiàn)在,當(dāng)使用手機(jī)瀏覽頁面原型時(shí),只有第二個(gè)簡化的header會(huì)顯示出來。接下來,我們?yōu)檫@個(gè)移動(dòng)版本的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; }
來看看到目前的成果:
好多了。現(xiàn)在的問題是,導(dǎo)航項(xiàng)在小屏幕中顯得太多了,布局發(fā)生了錯(cuò)亂。一個(gè)常見的解決方案是,對(duì)手機(jī)設(shè)備,將導(dǎo)航移至頁面底部。當(dāng)然,我們并不是要真的移動(dòng)它,而是像前面那樣設(shè)置不同的顯示規(guī)則。對(duì)于目前的全局導(dǎo)航,在class中增加一個(gè)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之前,添加一個(gè)新的導(dǎo)航;HTML結(jié)構(gòu)與頭部的全局導(dǎo)航基本一致:
<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>
區(qū)別在于兩點(diǎn):一是在容器的class中使用了show-on-phones,使該導(dǎo)航只在手機(jī)中顯示;另外,在導(dǎo)航列表的class里增加了一個(gè)“mobile”,這樣可以使每個(gè)導(dǎo)航tab都成為全寬,整個(gè)導(dǎo)航將成為一個(gè)縱向列表。
現(xiàn)在,我們的原型在手機(jī)中的首屏效果是這樣的:
基于網(wǎng)格系統(tǒng),編寫了少量的高語義化HTML代碼,配合Foundation原生提供的一些樣式工具class,我們已經(jīng)創(chuàng)建出了可以用來進(jìn)行跨平臺(tái)演示和測(cè)試的首頁原型。
到此,關(guān)于“怎么使用web Foundation框架快速創(chuàng)建跨平臺(tái)的網(wǎng)站頁面原型”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。