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