我的個人網(wǎng)站是怎么做出來的
您當(dāng)前位置：首頁 > 紅訊頻道 > 站長經(jīng)驗
紅軟基地 推薦
2013-10-03
我個人網(wǎng)站的 2013 版上線已經(jīng)兩個多月了，沒想到這個并沒有下多少功夫去設(shè)計和制作的網(wǎng)站卻受到了不少人的喜愛和專業(yè)設(shè)計師的抬愛，我甚至還接到了相關(guān)的工作邀請。上線第一天，單日訪問量竟然超過了建站三年以來的總和。上線后，我一直都想寫一篇博文，簡述一下網(wǎng)站的建設(shè)過程。但因為工作太多，一直沒有心情寫，忙完后又去中國的東北地區(qū)旅行了一個月，直到今天才有時間和心情寫這篇博文。
上線以來，幾乎每天都有人通過 Email 和微博問我：“你的網(wǎng)站是怎么做出來的？”，對于如此籠統(tǒng)的問題，我實在不知道該如何回答�，F(xiàn)在，這個問題的所有答案幾乎都在這篇博文里。
某一天的搜索引擎入口記錄里，竟然有這么奇葩的關(guān)鍵詞
我有個強迫癥，做網(wǎng)站到每一個關(guān)鍵點時都會截圖留念，所以現(xiàn)在可以展示一個相對連續(xù)的建設(shè)過程。這里不談域名解析和服務(wù)器搭建，也不談 HTML、CSS 和 JavaScript 的具體代碼，互聯(lián)網(wǎng)上相關(guān)的優(yōu)秀文章和教程已經(jīng)相當(dāng)豐富，大家自行查閱即可，我不再贅述。
建設(shè)過程 基本構(gòu)想
國內(nèi)外很多網(wǎng)頁設(shè)計師都建議在開工之前先畫草稿（線框）圖，可我從來都不畫，只是在一個記事本里記下所有在腦海里一閃而過的靈感。因為我往往是在打算做一個網(wǎng)站的時候，腦海里就已經(jīng)大概浮現(xiàn)出了它的樣子，雖然很模糊，但我認(rèn)為它沒必要太清晰。很多創(chuàng)意的靈感都是在做的過程中發(fā)現(xiàn)的，所以只要腦子里有一個大概的方向就可以開工了，具體的細(xì)節(jié)部份一邊做一邊想就好了，沒必要一開始就自己把自己的思維給框住。根據(jù)大概的構(gòu)想，我先整理出了一個大概的制作流程：
基本構(gòu)想 → 設(shè)計規(guī)劃 → 框架構(gòu)建 → 優(yōu)化文字 → 細(xì)節(jié)粗調(diào) → Retina 處理 → 響應(yīng)式處理 → 動畫制作 → 細(xì)節(jié)微調(diào) → 回遷上線 → 離線緩存和 Web App → 多語言版本
設(shè)計規(guī)劃
談到設(shè)計，就不得不談到 Bootstrap。這是我首次使用 Bootstrap 框架制作網(wǎng)站。其實開始我一直在猶豫要不要用它，因為它預(yù)置了很多 CSS 樣式和框架，用起來太方便了，以致于我覺得會減少那種完全自己設(shè)計制作的成就感。后來由于時間緊迫，加上 Bootstrap 的風(fēng)格也正好是我想要的那種，所以就采用了它。頁面由七個獨立模塊組成，按順序分別是：簡述、旅行、攝影、創(chuàng)造、Apple、聯(lián)系和關(guān)于，每個模塊都有它自己的特點。這種模塊化的設(shè)計也方便做響應(yīng)式處理。
注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請移步到建站教程頻道。
1 2 3 4 5 6 下一頁原標(biāo)題：我的個人網(wǎng)站是怎么做出來的 來源：Dandy's Blog