碼農(nóng)如何快速打造一個有設計感的網(wǎng)站_策劃盈利教程
推薦:傳百度360競購2345網(wǎng)址導航 流量大戰(zhàn)或開啟網(wǎng)址導航領域或?qū)⒂瓉硇乱惠啿①。?jù)消息人士透露,百度、360正在競購2345網(wǎng)址導航站,目前合作最終歸屬尚未敲定。
[核心提示] 還在用 WordPress 建站嗎?落后了親!趕緊試試 Twitter Bootstrap 吧。
注:擁有屬于自己的網(wǎng)站是很多人的夢想,但大多數(shù)人只能借助像 WordPress 這樣的 CMS 實現(xiàn),甚至很多公司網(wǎng)站也是這樣。但這些網(wǎng)站大多數(shù)看起來都比較缺乏設計感,通俗來講就是有點“土”。那么對于像程序員以及其他對設計比較小白們來說,如何能讓你的網(wǎng)站看起來更加前衛(wèi),有范,有設計感呢?極客公園編譯了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 為您提供解決方法。
像我這樣的程序員來說經(jīng)常被“設計”這個詞嚇到,因為我是一名程序員而不是設計師,我擁有的是計算機學位證,另外我對 Comic Sans 字體并不介意。(注:Comic Sans 字體是 Win95 附帶的一種漫畫字體,設計行業(yè)極為排斥,設計師或那些擁有美學情結的人不屑與之為伍。更多查看這篇為什么不要使用 Comic sans 字體)
雖然只是一名程序員,但我還是想讓自己的網(wǎng)站看起來更加吸引人,一方面出于虛榮,因為這樣可以顯得我更加“專業(yè)”,而另一方面是出于現(xiàn)實,因為研究機構調(diào)查發(fā)現(xiàn)用戶會更加信任那些網(wǎng)站“看起來”很好的網(wǎng)站。但是因為很長時間一直從事的是編程工作,對設計并不是熟悉,甚至害怕,因為在我這個外行看來設計是由很多只能感受不能言傳身教的規(guī)則以及所謂的設計感悟組成的,知識壁壘比較高。
但是不久之前我決定要盡我最大努力讓我網(wǎng)站看起來顯得更加專業(yè)一點,即使比不上真正由設計師操刀做出來的效果,但對像我這種沒有設計能力的人來說還是很有幫助的。
1. 使用 Bootstrap
如果你還沒有使用 Bootstrap 的話那么趕緊開始吧,這個來自 Twitter 的開源項目使得網(wǎng)站設計真正進入大眾化時代。
本質(zhì)上 Bootstrap 是一種隔柵系統(tǒng),由兩名 twitter 員工 Mark Otto 和 Jacob Thornton 開發(fā)的開源前端框架[注:想了解更多請查看什么是 Twitter Bootstrap?],它集成了很多 CSS 樣式的合集,可以幫助那些不懂或者不擅長 CSS 的開發(fā)人員快速的建立一個外觀看起來很不錯的網(wǎng)站。
使用 Bootstrap 的另一個好處就是網(wǎng)站本身就是自適應的(Responsive),可以省去各種為移動設備等的適配工作。此外,Bootstrap 還是可定制的,可以根據(jù)你的需求自己配置。(注:英文不好的可以查看中文版的 Bootstrap 文檔或 Bootstrap中文網(wǎng))
2. Bootstrap 定制指南
決定使用 Bootstrap 是邁出的重要一步,相比其他可以在前端開發(fā)上節(jié)省很多精力,但有利有弊,如果你決定使用 Bootstrap 的話就意味著很有可能會和其他人“撞框架”,就像默認的 WordPress 皮膚一樣,如果大家都完全用 Bootstrap 的樣式的話,會讓不少見得多的人心生厭煩。
所以,如果實在抽不出時間的話可以去Wrap Bootstrap購買一份主題皮膚,這些主題皮膚都是由專業(yè)的設計師設計的,雖然不會成為唯一定制的,但已經(jīng)看起來相當不錯了,而且這種方法是最快速的。接下來就是以 Narrow marketing 這個模板(下圖)為例教你如何自己定制一份完全屬于你自己的 Bootstrap 。
一. 字體
修改網(wǎng)頁字體是讓網(wǎng)站看起來更有特色、有現(xiàn)代感的捷徑,我們可以去谷歌的字體服務(免費正版)中隨意挑選自己喜歡的字體,但是要注意字體間的搭配,在這里我們選擇由 DesignShack 推薦的谷歌字體搭配中的一種:Cardo(用于標題) 和 Nobile(用于主體內(nèi)文)。
在網(wǎng)頁頭部中加入此代碼:
在 CSS 樣式表 custom.css 中加入以下代碼:h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}
添加完后刷新即可查看效果了,現(xiàn)在我們的網(wǎng)站樣式已經(jīng)變成下面這樣了,看起來比默認好多了。
此外,除了谷歌的字體服務外還可以使用像 Fontdeck或 Typekit 字體服務,它們的字體更多,更多的字體搭配方案可以參考Type Connection。
二. 紋理
知道如何讓一個網(wǎng)站看起來更加高雅優(yōu)雅一些嗎?是的,紋理。就像 24WAY 的背景紋理一樣。
但是這些紋理效果應該去哪里尋找呢?設計師 Atle Mo 的 Subtle Patterns 網(wǎng)站是個不錯的去處,我們接下來就使用這個網(wǎng)站上的 Cream Dust 紋理。點擊下載,將紋理圖片保存到本地,然后放到根目錄下的 /img/ 目錄文件夾中,最后到 CSS 樣式表中加入代碼 body { background: url(/img/cream_dust.png) repeat 0 0;} 即可。(如果需要更多樣式的紋理或紋理的其他用法的話可以看看 Smashing 的這篇文章)
添加紋理前后對比(大圖)
三. 圖標
這里的圖標并不是指那些透明的 PNG 圖片圖標,而是圖標字體,其加載方式和字體一樣,由 CSS 樣式控制,比起圖片圖標來說這種圖標字體加載速度更加,對資源的消耗也更低。在去年 24WAY 曾經(jīng)有一篇如何在網(wǎng)站中使用圖標字體的文章。
對于 Bootstrap 框架來說,整合的圖標字體是Font Awesome(Shifticons也是一個不錯的選擇),和谷歌的字體服務一樣也是免費開源的。要使用它只需將其下載下來,然后在根目錄下創(chuàng)建 /fonts/ 文件夾,將其放進去。然后再將 font-awesome.css 文件放到 /css/ 目錄文件夾。
分享:解讀京東商業(yè)模式: 立足零售 展望增值服務“京東的商業(yè)模式到底是什么?”這個問題一次次的被提出來,在此,我也想跟大家一起聊聊京東的商業(yè)模式。
- 相關鏈接:
- 教程說明:
策劃盈利教程-碼農(nóng)如何快速打造一個有設計感的網(wǎng)站。