今天介紹的是一位僅18歲，年紀(jì)不大但藝驚四座的有為少年@DandyWeng ，是一個(gè)真正的 Homeschooler。愛好攝影、計(jì)算機(jī)和數(shù)碼產(chǎn)品，他的個(gè)人簡(jiǎn)介上寫著：整個(gè)世界都是我的學(xué)校，學(xué)自己之所想所愛。自由的身心定能使我成為一個(gè)一直朝前行走的行者 : ）這是他的文章，分享關(guān)于自己創(chuàng)建第一個(gè)網(wǎng)站的過程：

少年的網(wǎng)站：dandyweng

我個(gè)人網(wǎng)站（www.dandyweng.com）的 2013 版上線已經(jīng)兩個(gè)多月了，沒想到這個(gè)網(wǎng)站受到了不少人的喜愛和專業(yè)設(shè)計(jì)師的抬愛。上線第一天，單日訪問量超過了建站三年以來的總和。上線后，我一直都想寫一篇博文，簡(jiǎn)述一下網(wǎng)站的建設(shè)過程。但因?yàn)榉N種原因，直到今天才有時(shí)間寫這篇博文。

上線以來，常常都有人通過 Email 或微博問我："你的網(wǎng)站是怎么做出來的？"，這樣的問題，還真不是三言兩語(yǔ)就能說清楚的，希望這篇博文能夠提供一些答案吧。

某一天的搜索引擎入口記錄里，還見到了這樣的關(guān)鍵詞

我有個(gè)習(xí)慣，做網(wǎng)站到每一個(gè)關(guān)鍵點(diǎn)時(shí)都會(huì)截圖留念，所以現(xiàn)在將所有圖片貼在一起就可以展示出一個(gè)比較連續(xù)的建設(shè)過程。

建設(shè)過程

基本構(gòu)想

國(guó)內(nèi)外很多網(wǎng)頁(yè)設(shè)計(jì)師都建議在開工之前先畫草稿（線框）圖，但我一般不用這種方法，只是在一個(gè)記事本里記下在腦海里一閃而過的想法。因?yàn)槊看斡?jì)劃做 一個(gè)網(wǎng)站的時(shí)候，我腦子里就已經(jīng)浮現(xià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 → 多語(yǔ)言版本

設(shè)計(jì)規(guī)劃

談到這個(gè)網(wǎng)站的設(shè)計(jì)，就必然要談到 Bootstrap。這是我首次使用 Bootstrap 框架制作網(wǎng)站。其實(shí)開始我一直在猶豫要不要用它，因?yàn)樗A(yù)置了很多 CSS 樣式和框架，用起來太方便了，以致于我覺得會(huì)減少那種完全自己設(shè)計(jì)制作的成就感。后來由于開發(fā)時(shí)間有限，就采用了它，但主要只使用了它的框架系統(tǒng)，界面元 素部份以自己寫的為主。頁(yè)面由七個(gè)獨(dú)立模塊組成，按順序分別是：簡(jiǎn)述、旅行、攝影、創(chuàng)造、Apple、聯(lián)系和關(guān)于，每個(gè)模塊都有它自己的特點(diǎn)。這種模塊化 的設(shè)計(jì)也方便做響應(yīng)式處理。

框架構(gòu)建

解析測(cè)試版域名，掛一個(gè)簡(jiǎn)單的頁(yè)面測(cè)試

引入 Bootstrap，測(cè)試

研究了一下 Bootstrap 的文檔，做出了大概的框架，開始做地圖的部份

細(xì)節(jié)粗調(diào)

這一步把所有的元素都擺到位，實(shí)現(xiàn)各元素基本的功能。

逐步錄入地圖的坐標(biāo)點(diǎn)數(shù)據(jù)

坐標(biāo)點(diǎn)數(shù)據(jù)錄入完成，簡(jiǎn)單做一下完善地圖的細(xì)節(jié)

給 header 換個(gè)背景看看

用簡(jiǎn)單的文字先拼出各個(gè)模塊大概的樣子

當(dāng)時(shí)的記事本草稿

Retina 處理

Retina 也就算高清視網(wǎng)膜屏幕的支持，作為一個(gè)"果粉"，這點(diǎn)當(dāng)然不能放過。技術(shù)方面，我先試用了一些 jQuery Retina 插件，但普遍都有加載速度慢的問題?？磥磉€是不能偷懶，只有自己寫。思路是用 JavaScript 檢測(cè) devicePixelRatio，若是 Retina 屏幕就將值寫入 Cookie，然后刷新頁(yè)面，再用 PHP 讀取該 Cookie，輸出對(duì)應(yīng)的圖片（高清或普通）。在 Retina 的 Macbook Pro 上測(cè)試還遇到了各種各樣的奇葩問題，逐個(gè)修復(fù)后最終效果確實(shí)不錯(cuò)。后來發(fā)現(xiàn) iPhone 等小屏幕 Retina 設(shè)備不需要使用針對(duì) Retina Macbook / iPad 制作的大尺寸圖片，只要將普通尺寸的圖片縮小即可，所以再給 JS 增加了檢測(cè) screenwidth，PHP 再做相應(yīng)的調(diào)整，提高了小屏幕 Retina 設(shè)備的加載速度。

響應(yīng)式處理

其實(shí)我在響應(yīng)式設(shè)計(jì)開始流行之前，就已經(jīng)在試著應(yīng)用了，到現(xiàn)在可以說已經(jīng)比較熟悉了，所以沒有遇到太多技術(shù)問題。

動(dòng)畫制作

動(dòng)畫的設(shè)計(jì)和制作花費(fèi)了不少時(shí)間，既要有特色，又要夠酷炫，又不可浮夸，還要考慮性能和兼容性等等。本來還設(shè)計(jì)了一些動(dòng)畫，但經(jīng)過反復(fù)調(diào)試，發(fā)現(xiàn)容 易使在某些設(shè)備和瀏覽器崩潰，于是又移除掉了。但這個(gè)聯(lián)系方式的交互還是我比較喜歡的，在一個(gè)郵箱地址中隱藏了幾個(gè)不同的聯(lián)系信息，可以分別切換顯示。

細(xì)節(jié)微調(diào)

這里優(yōu)化了不少細(xì)節(jié)，譬如字體、字色、陰影、紋理、滾動(dòng)條等等，均是使用 CSS 3 來實(shí)現(xiàn)的，包括標(biāo)題文字的漸變和倒影。最后 header 背景還是選了我在甘南的尕海拍的一幅作品。

有一些略為浮夸的設(shè)計(jì)也換掉了，比如下面這兩個(gè)就是被換掉的頭像彩色陰影和 Apple 模塊的角標(biāo)

回遷上線

測(cè)試完成，從測(cè)試服務(wù)器遷回主服務(wù)器，解析域名。把網(wǎng)站發(fā)給身處各地、使用不同網(wǎng)絡(luò)的朋友們測(cè)試。

離線緩存和 Web App

說實(shí)話，這倆功能其實(shí)沒有什么實(shí)際的意義。這畢竟不是什么功能型網(wǎng)站，絕大多數(shù)訪客都只會(huì)訪問一次，而這兩個(gè)功能都是經(jīng)常訪問時(shí)才能發(fā)揮作用。但是 考慮到這兩項(xiàng)技術(shù)我已經(jīng)在別的網(wǎng)站已經(jīng)應(yīng)用過了，相對(duì)比較熟悉，搬到這上面來也用不了多少時(shí)間，所以順手就做了，讓大家體驗(yàn)一下 HTML 5 離線緩存在一秒內(nèi)加載完一個(gè)網(wǎng)頁(yè)是多爽的一件事?？紤]到旅行模塊的地圖需要?jiǎng)討B(tài)更新，所以沒有緩存它，而是用 AJAX 在頁(yè)面載入完成后再加載并渲染地圖。

多語(yǔ)言版本

一開始的計(jì)劃是要做多語(yǔ)言版本的，包括香港粵語(yǔ)繁體版、中國(guó)臺(tái)灣正體版和英文版，但到現(xiàn)在還沒有時(shí)間制作（其實(shí)也沒啥必要，嘿嘿）。

常見問題 FAQ

最近常常有人問我一些問題，我在這里按問題出現(xiàn)的頻率排序，一起回答一下吧。
如果你還有其他問題，也可以在此評(píng)論提出。不過如果是技術(shù)方面的問題，建議還是先在網(wǎng)上搜索一下吧，這樣可以找到更全面的答案。

網(wǎng)頁(yè)設(shè)計(jì)是怎么學(xué)的？

在這方面，我沒怎么讀過相關(guān)的書，只是先學(xué)習(xí)好基礎(chǔ)知識(shí)之后，參考一些優(yōu)秀網(wǎng)站的代碼，遇到不懂問題的就上網(wǎng)搜索一下。我對(duì)感興趣的事物有著較大的 好奇心，而且因?yàn)槲沂且粋€(gè) homeschooler，能有比較多的時(shí)間來學(xué)習(xí)這方面的知識(shí)。不過，我畢竟不是專業(yè)設(shè)計(jì)師或程序猿，只是愛好而已，并沒有系統(tǒng)地學(xué)習(xí)過這方面的知識(shí)， 在學(xué)習(xí)其他的知識(shí)和技能也占用了我不少時(shí)間，所以我的程序代碼（特別是 JS 和 PHP）寫得真是一般般，還需提高，見笑了，嘿嘿。

網(wǎng)站用了多長(zhǎng)時(shí)間開發(fā)？

我的個(gè)人網(wǎng)站每年都會(huì)徹底地重新設(shè)計(jì)和制作一次。前幾年的更新一般是在過年前完成，但今年事情太多，拖至四月中旬才開工，直到五月中旬才上線。平均每天大概忙活一兩個(gè)小時(shí)，這期間還心血來潮做了一個(gè)智能手表 Pebble 的應(yīng)用下載平臺(tái)"Pebbapps"，后來發(fā)現(xiàn)實(shí)際意義不大，浪費(fèi)了不少時(shí)間。真正花在個(gè)人網(wǎng)站制作上的時(shí)間應(yīng)該在 20 多小時(shí)。

網(wǎng)站是用什么軟件做的？

其實(shí)，理論上只要能進(jìn)行文本編輯的軟件都可以用作網(wǎng)站開發(fā)。我以前是用 Windows / Mac 自帶的記事本，簡(jiǎn)簡(jiǎn)單單，沒有復(fù)雜的功能，沒有代碼提示器也養(yǎng)成了我寫代碼比較嚴(yán)謹(jǐn)?shù)牧?xí)慣。后來做的網(wǎng)站程序類的代碼多了，記事本就有點(diǎn)不太夠用了，就開 始用 Office FrontPage，至少代碼能上色和糾錯(cuò)了。后來在 Mac 上用 Dreamweaver 習(xí)慣之后，在 PC 上也開始用了，但也很少用那些高級(jí)功能，最喜歡它的一點(diǎn)就是可以把編輯器調(diào)成黑色背景，保護(hù)視力。

網(wǎng)站的加載速度怎么這么慢？

這有兩個(gè)原因：
其一，網(wǎng)站本身的前端性能確實(shí)不夠好，也是網(wǎng)站采用大量圖片和動(dòng)畫的代價(jià)之一。我曾在加載速度和展示效果間做過權(quán)衡，后來考慮到這畢竟不是功能型網(wǎng)站，大 多數(shù)訪客只會(huì)訪問一次，所以還是將效果放在第一位。后來我也發(fā)現(xiàn)一些可以提高加載速度的改進(jìn)方法，但現(xiàn)在暫時(shí)還沒有時(shí)間實(shí)現(xiàn)；
其二，因?yàn)槲疫€是未成年無(wú)法備案，無(wú)法將服務(wù)器放在國(guó)內(nèi)，所以只能放在國(guó)外，并且它只有一個(gè)節(jié)點(diǎn)，所以我所有網(wǎng)站的訪問速度都普遍較慢。
補(bǔ)充：9 月 8 日做了一個(gè)小更新，啟用鏡像 CDN 加速，優(yōu)化了前端性能，加載速度現(xiàn)在基本上已經(jīng)沒有什么問題了。

網(wǎng)站能開源嗎？

由于這個(gè)網(wǎng)站沒有多少需要?jiǎng)討B(tài)更新的內(nèi)容，主要是以前端為主，沒有多么復(fù)雜的后臺(tái)，數(shù)據(jù)庫(kù)也只是用于統(tǒng)計(jì)訪問數(shù)據(jù)而已，所以用瀏覽器的開發(fā)者工具就能幾乎看到全部有用的代碼。
這個(gè)網(wǎng)站的代碼可供學(xué)習(xí)或參考，但最好不要直接整個(gè)復(fù)制喔，那樣學(xué)不到什么東西。并且希望你能注明來源、不要外鏈圖片。

網(wǎng)站的地圖里為什么沒有中國(guó)臺(tái)灣？

曾經(jīng)主頁(yè)上的地圖里沒有中國(guó)臺(tái)灣，后來考慮到這個(gè)原本用地圖為背景的模塊、僅用于標(biāo)示我旅行足跡的"地圖"會(huì)刺激一部分愛國(guó)人士的神經(jīng)，還是把寶島臺(tái)灣加上去了。

你真的才 17 歲？

慚愧慚愧，我也希望能再大一點(diǎn)。但這個(gè)還是假不了的，我又不是天一，嘿嘿嘿。

原文地址：dandyweng
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：