擁有屬于自己的網站是很多人的夢想，但大多數人只能借助像 WordPress 這樣的 CMS 實現，甚至很多公司網站也是這樣。但這些網站大多數看起來都比較缺乏設計感，通俗來講就是有點“土”。一個律師之所以選擇建站就是為了宣傳自己，得到更多的案源，讓自己打響名聲。那么對于律師來說如何能讓自己的網站看起來更加前衛，有范，有設計感呢? 下面一起來專業學習一下如何快速打造一個有設計感的律師網站。

　　1. 使用 Bootstrap

　　如果你還沒有使用 Bootstrap 的話那么趕緊開始吧，這個來自 Twitter 的開源項目使得網站設計真正進入大眾化時代。

　　本質上 Bootstrap 是一種隔柵系統，由兩名 twitter 員工 Mark Otto 和 Jacob Thornton 開發的開源前端框架，它集成了很多 CSS 樣式的合集，可以幫助那些不懂或者不擅長 CSS 的開發人員快速的建立一個外觀看起來很不錯的網站。

　　使用 Bootstrap 的另一個好處就是網站本身就是自適應的(Responsive)，可以省去各種為移動設備等的適配工作。此外，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;} 即可.

　　三. 圖標

　　這里的圖標并不是指那些透明的 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; }

　　如果時間足夠的話還可以添加一個放射漸變填充效果，可以讓標題的顯示效果更重一些，如下面對比圖所示。

　　五. jQuery

　　其實到這里了話網站看起來已經很不錯了，但為了讓它更加個性化，還需要再添加上一張背景圖片。對很多程序員來說這一步是比較難以進行的，那么應該如何選擇一張設計師可能會使用的圖片呢?答案就是去 iStockPhoto 或類似的付費圖庫中去尋找。

　　這里我們將使用 Winter Sun 這張照片，為了讓網站保持自適應布局，還需要使用 Backstretch 這個 jQuery 插件讓背景圖可以隨時自動調整大小。

　　1 首先需要付費下載背景圖片，然后放到 /img/ 文件目錄中去。

　　2 將此圖片設置為的背景圖(background-image): $.backstretch ("/img/winter.jpg");

　　3 加入背景圖后網頁主題部分會產生遮擋，所以可以讓其透明，這樣網站效果看起來會更加現代、有設計感。這里可以使用這個技巧將網站變得透明，代碼見右邊，.container-narrow {background: url (/img/cream_dust_transparent.png) repeat 0 0;}

　　六. 色調

　　到這幾乎差不多已經完成調整了，但如果你夠細心的話會發現按鈕以及導航菜單的顏色還是 Bootstrap 默認的藍色系。在有著設計師存在網站，設計師都會負責進行網站色調的調整，為了保證深圳網站建設的一致性，所有按鈕和導航一般是三到四種顏色。

　　在這里，雖然不可能像大公司網站那樣取色嚴謹，但還是有一些快速的方法使網站看起來很搭配的。

　　1 使用 GIMP 的取色器讀取背景圖片的主題顏色，確認其 GBR 十六進制值;

　　2 使用 Color Scheme Designer 確認與差異大但同時又互補的顏色;

　　3 最后根據確定的顏色來制定按鈕，可以用[Bootstrap Buttons][]等在線直接生成。

　　這樣首頁上那個大大的注冊按鈕就搞定了，接下來是修改導航菜單的顏色，這個比較簡單，寫入代碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。

　　當然，建站是一門專業性比較強的工作，律師也許對這方面的知識不是很懂，或者就算懂也難以做到，而且還需要花費大量的時間和心血。所以律師可以委托專門的律師營銷公司建站，并且在建站初期就要把自己在各方面的要求提出來，最好是帶有個人比較強的見解，尤其是在視覺上的設計，這樣才能快速打造一個有設計感的律師網站。