基于Boostrap技術的扁平化個人網站的設計
2017-01-01 00:00:00謝世華蔡虹
考試與評價 2017年4期
【摘 要】根據個人信息設計的一個個人的網站，類似于個人blog。方便了他人對自己的信息了解，以及個人作品的展示。網站基于Bootstrap 3.4.6版本，新浪云服務器，應用了Bootstrap的十二柵格系統，所以網站能夠自適應于各類型設備的使用。能夠很方便的讓他人了解自己。現在流行的個人形象設計已經成為一種龐大市場的需求，像凡客網站的網站設計就是很好的一種社會趨勢。
【關鍵詞】Bootstrap Canvas 微信小程序 Rem布局
一、引言
互聯網是社會發展的趨勢，很多人已經意識到網絡的強大生命力和他在未來將處于的重要地位。他們鉆研并且努力進入到這一個新的空間，新的領域。互聯網發展為人人都有話語權，人人都是中心。互聯網是一個互動性極強的平臺。本論文中，將前端技術Bootstrap的原理以及方法應用到整個網站，并對其進行移動端的適配，提出了解決問題的具體方法。個人網站對于前端開發人員能夠更好的展示自己，能讓人更快的了解自己所掌握的技術和學習能力。個人網站能夠更突出的自己的優點，能夠發揮自己的空間，設計出屬于自己的網站。在網站里可以展現自己平時所做的demo，以及自己學習的內容。基于個人網站的實現，我們可以在此基礎上更新出一套自己的網站系統。并且個人網站不限制訪問權限，能夠在他人學習的時候讓別人提出自己的想法，更夠豐富別人的同時，增強自己的能力。Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。Internet飛速發展使得網站不再是只有企業和公司才能擁有，互聯網讓人們是人們快速獲取信息的重要渠道，在人們的各個領域都有著重要的作用。因此網站建設應用的地位顯著提高，每個人都可以擁有自己的個人網站，創建一個體現自我風格和個人特色的網站已經成為互聯網用戶的新追求。
二、網站開發環境
在進行網站開發之前，由于個人對前端技術比較熱愛，對于后端技術了解不是也特別多，所以在服務器方面采用的是新浪云的免費服務器以及它的二級域名。前端主要采用Bootstrap技術，在個人作品方面采用了angular 微信小程序等技術支持。通過使用sublime開發工具開發界面，對頁面的整體效果的實現，在瀏覽器的控制臺進行修改。使用firework進行圖片美工與設計。測試時用wamp模擬服務器測試，最終發布在新浪云服務器。微信小程序的開發在微信開發工具上編寫。
三、個人網站整體要求
1.功能要求
第一，頁面簡介明了，采用扁平化設計理念，給人較好的視覺印象。
第二，用戶瀏覽、操作便捷，迅速。
2.系統系能要求
在程序設計時，盡量優化代碼，降低服務器的訪問時間，采用緩存機制，使得頁面加載更迅速，降低處理時間是比較重要的問題。
四、網站的分析與設計
第一，基于Bootstrap技術的個人網站，主要展示自己的個人信息，主要分為兩部分：一是個人信息的展示，具體的個人信息。二是個人的作品展示。
第二，頁面的實現。一是index.html為網站的首頁，展現個人的信息頁，以及個人作品的展示區，扁平化的設計能夠讓人更清晰的了解到自己，去除了繁瑣的頁面設計，采用扁平化設計突出個人特色。二是myresume/index.html為個人簡歷頁面，該網頁采用rem布局，適用于各類型的手機，解決了各內核瀏覽器的兼容性問題，涉及了一些css3的動畫操作，讓個人簡歷能夠有個人特色，更充分的展現了自己的能力.rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算三是lovefish/index.html為小游戲頁面，該網頁采用canvas技術，實現頁面效果，讓頁面看起來更豐富，通過事件控制魚的游動以及小魚的跟隨，采用定時器控制游戲的時間。HTML5
