個人網站建設與製作

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

  的步驟

  框架構建

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

  引入 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 在頁面載入完成後再載入並渲染地圖。

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