個人網站建設與製作

　　要自己創業建設個人網站，但又不知從何入手，下面小編就告訴大家，僅供大家參考!

　　的步驟

　　框架構建

　　解析測試版域名，掛一個簡單的頁面測試

　　引入 Bootstrap，測試

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

　　細節粗調

　　這一步把所有的元素都擺到位，實現各元素基本的功能。

　　逐步錄入地圖的座標點資料

　　座標點資料錄入完成，簡單做一下完善地圖的細節

　　給 header 換個背景看看

 

　　用簡單的文字先拼出各個模組大概的樣子

　　當時的記事本草稿

　　Retina 處理

　　Retina 也就算高清視網膜螢幕的支援，作為一個”果粉”，這點當然不能放過。技術方面，我先試用了一些 jQuery Retina 外掛，但普遍都有載入速度慢的問題。看來還是不能偷懶，只有自己寫。思路是用 JavaScript 檢測 devicePixelRatio，若是 Retina 螢幕就將值寫入 Cookie，然後重新整理頁面，再用 PHP 讀取該 Cookie，輸出對應的圖片***高清或普通***。在 Retina 的 Macbook Pro 上測試還遇到了各種各樣的奇葩問題，逐個修復後最終效果確實不錯。後來發現 iPhone 等小螢幕 Retina 裝置不需要使用針對 Retina Macbook / iPad 製作的大尺寸圖片，只要將普通尺寸的圖片縮小即可，所以再給 JS 增加了檢測 screenwidth，PHP 再做相應的調整，提高了小螢幕 Retina 裝置的載入速度。

　　響應式處理

　　其實我在響應式設計開始流行之前，就已經在試著應用了，到現在可以說已經比較熟悉了，所以沒有遇到太多技術問題。

　　動畫製作

　　動畫的設計和製作花費了不少時間，既要有特色，又要夠酷炫，又不可浮誇，還要考慮效能和相容性等等。本來還設計了一些動畫，但經過反覆除錯，發現容 易使在某些裝置和瀏覽器崩潰，於是又移除掉了。但這個***的互動還是我比較喜歡的，在一個郵箱地址中隱藏了幾個不同的聯絡資訊，可以分別切換顯示。

　　細節微調

　　這裡優化了不少細節，譬如字型、字色、陰影、紋理、滾動條等等，均是使用 CSS 3 來實現的，包括標題文字的漸變和倒影。最後 header 背景還是選了我在甘南的尕海拍的一幅作品。

 

　　有一些略為浮誇的設計也換掉了，比如下面這兩個就是被換掉的頭像彩色陰影和 Apple 模組的角標

 

　　回遷上線

　　測試完成，從測試伺服器遷回主伺服器，解析域名。把網站發給身處各地、使用不同網路的朋友們測試。

　　離線快取和 Web App

　　說實話，這倆功能其實沒有什麼實際的意義。這畢竟不是什麼功能型網站，絕大多數訪客都只會訪問一次，而這兩個功能都是經常訪問時才能發揮作用。但是 考慮到這兩項技術我已經在別的網站已經應用過了，相對比較熟悉，搬到這上面來也用不了多少時間，所以順手就做了，讓大家體驗一下 HTML 5 離線快取在一秒內載入完一個網頁是多爽的一件事。考慮到旅行模組的地圖需要動態更新，所以沒有快取它，而是用 AJAX 在頁面載入完成後再載入並渲染地圖。

　　以上是小編為大家解答的，希望對大家有幫助!