碼農若何快速挨制一個有計劃感的網站

  [焦點提醒] 借正在用 WordPress 建站嗎?落伍瞭親!趕快嘗嘗 Twitter Bootstrap 吧。

  註:具有屬於本身的網站是許多人的妄想,但年夜多半人隻能借助像 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;} 便可。看看咋樣。

  


  結語

  假如閱歷過瞭上裡所道的流程的話,信任您已能夠正在比擬短的時光內制造出瞭一個借能拿得脫手的網站瞭。

  除非特殊聲明,極客不雅察均為極客公園本創報導,轉載請說明本文鏈接。

  本文地點:/read/view/176891