[焦點(diǎn)提醒] 還在用 WordPress 建站嗎?落伍了親!趕緊試試 Twitter Bootstrap 吧。
注：擁有屬于自己的網(wǎng)站是良多人的胡想，但年夜年夜都人只能借助像 WordPress 這樣的 CMS 實(shí)現(xiàn)，甚至良多公司網(wǎng)站也是這樣。但這些網(wǎng)站年夜年夜都看起來(lái)都斗勁缺乏設(shè)計(jì)感，通俗來(lái)講就是有點(diǎn)“土”。那么對(duì)于像軌范員以及其他對(duì)設(shè)計(jì)斗勁小白們來(lái)說(shuō)，若何能讓你的網(wǎng)站看起來(lái)加倍前衛(wèi)，有范，有設(shè)計(jì)感呢?極客公園編譯了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 為您供給解決體例。
像我這樣的軌范員來(lái)說(shuō)經(jīng)常被“設(shè)計(jì)”這個(gè)詞嚇到，因?yàn)槲沂且幻壏秵T而不是設(shè)計(jì)師，我擁有的是計(jì)較機(jī)學(xué)位證，此外我對(duì) Comic Sans 字體并不介意。(注：Comic Sans 字體是 Win95 附帶的一種漫畫(huà)字體，設(shè)計(jì)行業(yè)極為排斥，設(shè)計(jì)師或那些擁有美學(xué)情結(jié)的人不屑與之為伍。更多查看這篇為什么不要使用 Comic sans 字體)
雖然只是一名軌范員，但我仍是想讓自己的網(wǎng)站看起來(lái)加倍吸惹人，一方面出于虛榮，因?yàn)檫@樣可以顯得我加倍“專業(yè)”，而另一方面是出于現(xiàn)實(shí)，因?yàn)檠芯繖C(jī)構(gòu)發(fā)芽拜訪發(fā)現(xiàn)用戶會(huì)加倍信賴那些網(wǎng)站“看起來(lái)”很好的網(wǎng)站。可是因?yàn)楹荛L(zhǎng)時(shí)刻一向年夜事的是編程工作，對(duì)設(shè)計(jì)并不是熟悉，甚至害怕，因?yàn)樵谖疫@個(gè)外行看來(lái)設(shè)計(jì)是由良多只能感應(yīng)感染不能上行下效的軌則以及所謂的設(shè)計(jì)感悟組成的，常識(shí)壁壘斗勁高。
可是不久之前我抉摘要盡我最年夜全力讓我網(wǎng)站看起來(lái)顯得加倍專業(yè)一點(diǎn)，即使比不上真正由設(shè)計(jì)師操刀做出來(lái)的效不美觀，但對(duì)像我這種沒(méi)有設(shè)計(jì)能力的人來(lái)說(shuō)仍是很有輔佐的。
如不美觀你還沒(méi)有使用 Bootstrap 的話那么趕緊起頭吧，這個(gè)來(lái)自 Twitter 的開(kāi)源項(xiàng)目使得網(wǎng)站設(shè)計(jì)真正進(jìn)入公共化時(shí)代。
這里我們將使用 Winter Sun 這張照片，為了讓網(wǎng)站連結(jié)自順應(yīng)結(jié)構(gòu)，還需要使用 Backstretch 這個(gè) jQuery 插件讓布景圖可以隨時(shí)自動(dòng)調(diào)整巨細(xì)。
1. 使用 Bootstrap
素質(zhì)上 Bootstrap 是一種隔柵系統(tǒng)，由兩名 twitter 員工 Mark Otto 和 Jacob Thornton 開(kāi)發(fā)的開(kāi)源前端框架[注：想體味更多請(qǐng)查看什么是 Twitter Bootstrap?]，它集成了良多 CSS 樣式的合集，可以輔佐那些不懂或者不擅長(zhǎng) CSS 的開(kāi)發(fā)人員快速的成立一個(gè)外不美旁觀起來(lái)很不錯(cuò)的網(wǎng)站。
使用 Bootstrap 的另一個(gè)益處就是網(wǎng)站自己就是自順應(yīng)的(Responsive)，可以省去各類為移動(dòng)設(shè)備等的適配工作。此外，Bootstrap 仍是可定制的，可以按照你的需求自己設(shè)置裝備擺設(shè)。(注：英文欠好的可以查看中文版的 Bootstrap 文檔或 Bootstrap中文網(wǎng))
2. Bootstrap 定制指南
抉擇使用 Bootstrap 是邁出的主要一步，對(duì)比其他可以在前端開(kāi)發(fā)上節(jié)約良多精神，但有利有弊，如不美觀你抉擇使用 Bootstrap 的話就意味著很有可能會(huì)和其他人“撞框架”，就像默認(rèn)的 WordPress 皮膚一樣，如不美觀巨匠都完全用 Bootstrap 的樣式的話，會(huì)讓不少見(jiàn)得多的人心生厭惡。
在這里，雖然不成能像年夜公司網(wǎng)站那樣取色嚴(yán)謹(jǐn)，但仍是有一些快速的體例使網(wǎng)站看起來(lái)很搭配的。
所以，如不美觀其實(shí)抽不出時(shí)刻的話可以去Wrap Bootstrap采辦一份主題皮膚，這些主題皮膚都是由專業(yè)的設(shè)計(jì)師設(shè)計(jì)的，雖然不會(huì)成為唯必然制的，但已經(jīng)看起來(lái)相當(dāng)不錯(cuò)了，而且這種體例是最快速的。接下來(lái)就是以 Narrow marketing 這個(gè)模板(下圖)為例教你若何自己定制一份完全屬于你自己的 Bootstrap 。
這里的停筆并不是指那些透明的 PNG 圖片停筆，而是停筆字體，其加載體例和字體一樣，由 CSS 樣式節(jié)制，比起圖片停筆來(lái)嗣魅這種停筆字體加載速度加倍，對(duì)資本的耗損也更低。在去年 24WAY 曾經(jīng)有一篇若何在網(wǎng)站中使用停筆字體的文章。
改削網(wǎng)頁(yè)字體是讓網(wǎng)站看起來(lái)更有特色、有現(xiàn)代感的捷徑，我們可以去谷歌的字體處事(免費(fèi)正版)中隨意遴選自己喜歡的字體，可是要注重字體間的搭配，在這里我們選擇由 DesignShack 舉薦的谷歌字體搭配中的一種：Cardo(用于問(wèn)題) 和 Nobile(用于主體內(nèi)文)。
在 CSS 樣式表 custom.css 中插手以下代碼：h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}
添加完后刷新即可查看效不美觀了，此刻我們的網(wǎng)站樣式已經(jīng)釀成下面這樣了，看起來(lái)比默認(rèn)良多若干好多了。
二. 紋理
知道若何讓一個(gè)網(wǎng)站看起來(lái)加倍文雅優(yōu)雅一些嗎?是的，紋理。就像 24WAY 的布景紋理一樣。
原文地址：http://www.geekpark.net/read/view/176891
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示