英文原文： How to Make Your Site Look Half-Decent in Half an Hour；編譯：極客公園
注：擁有屬於自己的網站是很多人的夢想，但大多數人只能藉助像 WordPress 這樣的 CMS 實現，甚至很多公司網站也是這樣。但這些網站大多數看起來都比較缺乏設計感，通俗來講就是有點“土”。那麼對於像程式設計師以及其他對設計比較小白們來說，如何能讓你的網站看起來更加前衛，有範，有設計感呢？極客公園編譯了 24WAYS 的文章《How to Make Your Site Look Half-Decent in Half an Hour》為您提供解決方法。
像我這樣的程式設計師來說經常被“設計”這個詞嚇到，因為我是一名程式設計師而不是設計師，我擁有的是計算機學位證，另外我對 Comic Sans 字型並不介意。（注：Comic Sans 字型是 Win95 附帶的一種漫畫字型，設計行業極為排斥，設計師或那些擁有美學情結的人不屑與之為伍。更多檢視這篇為什麼不要使用 Comic sans 字型）
雖然只是一名程式設計師，但我還是想讓自己的網站看起來更加吸引人，一方面出於虛榮，因為這樣可以顯得我更加“專業”，而另一方面是出於現實，因為研究機構調查發現使用者會更加信任那些網站“看起來”很好的網站。但是因為很長時間一直從事的是程式設計工作，對設計並不是熟悉，甚至害怕，因為在我這個外行看來設計是由很多隻能感受不能言傳身教的規則以及所謂的設計感悟組成的，知識壁壘比較高。
但是不久之前我決定要盡我最大努力讓我網站看起來顯得更加專業一點，即使比不上真正由設計師操刀做出來的效果，但對像我這種沒有設計能力的人來說還是很有幫助的。
1. 使用 Bootstrap
如果你還沒有使用 Bootstrap 的話那麼趕緊開始吧，這個來自 Twitter 的開源專案使得網站設計真正進入大眾化時代。
本質上 Bootstrap 是一種隔柵系統，由兩名 twitter 員工 Mark Otto 和 Jacob Thornton 開發的開源前端框架[注：想了解更多請檢視什麼是 Twitter Bootstrap？]，它整合了很多 CSS 樣式的合集，可以幫助那些不懂或者不擅長 CSS 的開發人員快速的建立一個外觀看起來很不錯的網站。
使用 Bootstrap 的另一個好處就是網站本身就是自適應的（Responsive），可以省去各種為移動裝置等的適配工作。此外，Bootstrap 還是可定製的，可以根據你的需求自己配置。(注：英文不好的可以檢視中文版的 Bootstrap 文件或 Bootstrap中文網)
2. Bootstrap 定製指南
決定使用 Bootstrap 是邁出的重要一步，相比其他可以在前端開發上節省很多精力，但有利有弊，如果你決定使用 Bootstrap 的話就意味著很有可能會和其他人“撞框架”，就像預設的 WordPress 皮膚一樣，如果大家都完全用 Bootstrap 的樣式的話，會讓不少見得多的人心生厭煩。
所以，如果實在抽不出時間的話可以去Wrap Bootstrap購買一份主題皮膚，這些主題皮膚都是由專業的設計師設計的，雖然不會成為唯一定製的，但已經看起來相當不錯了，而且這種方法是最快速的。接下來就是以 Narrow marketing 這個模板(下圖)為例教你如何自己定製一份完全屬於你自己的 Bootstrap 。
一. 字型
修改網頁字型是讓網站看起來更有特色、有現代感的捷徑，我們可以去谷歌的字型服務（免費正版）中隨意挑選自己喜歡的字型，但是要注意字型間的搭配，在這裡我們選擇由 DesignShack 推薦的谷歌字型搭配中的一種：Cardo（用於標題） 和 Nobile（用於主體內文）。
- 在網頁頭部中加入此程式碼：
- 在 CSS 樣式表 custom.css 中加入以下程式碼：h1, h2, h3, h4, h5, h6 {font-family: ‘Corben’, Georgia, Times, serif;} p, div {font-family: ‘Nobile’, Helvetica, Arial, sans-serif;}
新增完後重新整理即可檢視效果了，現在我們的網站樣式已經變成下面這樣了，看起來比預設好多了。
此外，除了谷歌的字型服務外還可以使用像 Fontdeck或 Typekit 字型服務，它們的字型更多，更多的字型搭配方案可以參考Type Connection。
二. 紋理
知道如何讓一個網站看起來更加高雅優雅一些嗎？是的，紋理。就像 24WAY 的背景紋理一樣。
但是這些紋理效果應該去哪裡尋找呢？設計師 Atle Mo 的 Subtle Patterns 網站是個不錯的去處，我們接下來就使用這個網站上的 Cream Dust 紋理。點選下載，將紋理圖片儲存到本地，然後放到根目錄下的 /img/ 目錄資料夾中，最後到 CSS 樣式表中加入程式碼 body { background: url(/img/cream_dust.png) repeat 0 0;} 即可。(如果需要更多樣式的紋理或紋理的其他用法的話可以看看 Smashing 的這篇文章)
三. 圖示
這裡的圖示並不是指那些透明的 PNG 圖片圖示，而是圖示字型，其載入方式和字型一樣，由 CSS 樣式控制，比起圖片圖示來說這種圖示字型載入速度更加，對資源的消耗也更低。在去年 24WAY 曾經有一篇如何在網站中使用圖示字型的文章。
對於 Bootstrap 框架來說，整合的圖示字型是Font Awesome(Shifticons也是一個不錯的選擇)，和谷歌的字型服務一樣也是免費開源的。要使用它只需將其下載下來，然後在根目錄下建立 /fonts/ 資料夾，將其放進去。然後再將 font-awesome.css 檔案放到 /css/ 目錄資料夾。
接著將引用寫入網頁頭部中，程式碼為 ，這時候我們可以隨時在網站上任意地方自由使用這些圖示字型了，如要想將一個卡車圖示新增到註冊按鈕的話只需宣告一下就可以，Sign up today。同時為了防止加入圖示字型後引起按鈕拉伸變形，還需要一點點額外的工作，將按鈕寬度加大一點（.jumbotron .btn i { margin-right: 8px; }）。最後效果如下：
四. CSS3
將上面都搞定後接下來要做的就是再加點 CSS3 特效了，如果時間不夠的話簡單的新增上盒陰影box-shadow和字型陰影text-shadow就可以讓網站增色不少，CSS 程式碼如下。
h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }
如果時間足夠的話還可以新增一個放射漸變填充效果，可以讓標題的顯示效果更重一些，如下面對比圖所示。(如果想要更多 CSS 效果的話可以去學習一下 CodeSchool 的線上教程)
五. jQuery
其實到這裡了話網站看起來已經很不錯了，但為了讓它更加個性化，還需要再新增上一張背景圖片。對很多程式設計師來說這一步是比較難以進行的，那麼應該如何選擇一張設計師可能會使用的圖片呢？答案就是去iStockPhoto或類似的付費相簿中去尋找。
這裡我們將使用 Winter Sun 這張照片，為了讓網站保持自適應佈局，還需要使用 Backstretch 這個 jQuery 外掛讓背景圖可以隨時自動調整大小。
- 首先需要付費下載背景圖片，然後放到 /img/ 檔案目錄中去。
- 將此圖片設定為的背景圖(background-image): $.backstretch(“/img/winter.jpg”);
- 加入背景圖後網頁主題部分會產生遮擋，所以可以讓其透明，這樣網站效果看起來會更加現代、有設計感。這裡可以使用這個技巧將網站變得透明，程式碼見右邊，.container-narrow {background: url(/img/cream_dust_transparent.png) repeat 0 0;}
效果
六. 色調
到這幾乎差不多已經完成調整了，但如果你夠細心的話會發現按鈕以及導航選單的顏色還是 Bootstrap 預設的藍色系。在有著設計師存在網站，設計師都會負責進行網站色調的調整，為了保證網站的一致性，所有按鈕和導航一般是三到四種顏色(更多可以檢視極客公園之間的文章小按鈕大學問)。
在這裡，雖然不可能像大公司網站那樣取色嚴謹，但還是有一些快速的方法使網站看起來很搭配的。
- 使用 GIMP 的取色器讀取背景圖片的主題顏色，確認其 GBR 十六進位制值；
- 使用 Color Scheme Designer確認與差異大但同時又互補的顏色；
- 最後根據確定的顏色來制定按鈕，可以用[Bootstrap Buttons][]等線上直接生成。
這樣首頁上那個大大的註冊按鈕就搞定了，接下來是修改導航選單的顏色，這個比較簡單，寫入程式碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。看看咋樣。
結語
如果經歷過了上面所說的流程的話，相信你已經可以在比較短的時間內製作出了一個還能拿得出手的網站了。