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