一種基于HTML5的品牌宣傳網(wǎng)站設計
2016-08-16 09:36:53周靈王莉莉宋燕燕段紅秀李云琳
計算機時代 2016年8期
周靈 王莉莉 宋燕燕 段紅秀 李云琳
摘 要： 基于HTML5與CSS3技術，配合Bootstrap框架，提出一種品牌宣傳網(wǎng)站的設計方案。該設計使用JavaScript和JQuery，引用輕量級插件，提升用戶體驗的交互效果，并結合后臺數(shù)據(jù)庫MySQL以及集成開發(fā)環(huán)境Eclipse和后臺服務器Tomcat，實現(xiàn)品牌宣傳型網(wǎng)站的后臺搜索功能，以提升用戶體驗以及網(wǎng)站的實用性。
關鍵詞： HTML5； CSS3； JavaScript； Bootstrap
中圖分類號：TP319 文獻標志碼：A 文章編號：1006-8228（2016）08-19-04
Abstract： Based on HTML5， CSS3 technology and Bootstrap framework， the design of a brand promotion website is proposed. The design uses JavaScript， JQuery and lightweight plug-in to improve the interaction effect of user experience， and combining the background database MySQL with the integrated development environment Eclipse and the backend server Tomcat， realizes the background search function of the brand promotion website to enhance the user experience and website usability.
Key words： HTML5； CSS3； JavaScript； Bootstrap
0 引言
HTML5是一種專門用來編寫Web內容的語言，是開放的Web網(wǎng)絡平臺的奠基石，將成為HTML、XHTML以及HTML DOM的新標準[1]。HTML5通過創(chuàng)建一種標準化的、直觀的UI標記語言的形式來簡化網(wǎng)頁的設計和構建，里面包含了自己有效的數(shù)據(jù)管理、繪制圖形、視音頻工具，適用于不同能力的設計師和開發(fā)團隊，使他們能夠發(fā)布簡單文本、豐富的交互式多媒體等各種形式的內容，它使面向網(wǎng)頁和便攜式設備的跨瀏覽器應用程序的開發(fā)變得簡單化。
本研究首先利用HTML5與CSS3配合Bootstrap框架，設計出品牌宣傳網(wǎng)站整體框架結構，然后使用JavaScript和JQuery，以及引用一些既輕量級又優(yōu)秀的插件，設計出能夠提高用戶體驗的交互效果。最終結合后臺數(shù)據(jù)庫MySQL，以及集成開發(fā)環(huán)境Eclipse和后臺服務器Tomcat，實現(xiàn)品牌宣傳型網(wǎng)站的后臺搜索功能。
1 基于HTML5的品牌宣傳網(wǎng)站的總體流程設計
1.1 網(wǎng)站整體設計流程
美國著名用戶界面設計專家Jesse James Garrett從用戶體驗角度提出網(wǎng)站設計的基本框架，從高到低五個層面的框架依次是戰(zhàn)略層、范圍層、結構層、框架層、表現(xiàn)層[2]。依據(jù)這五個層次要素，整合網(wǎng)站設計的重要步驟，我們可得出綜合型設計類網(wǎng)站信息構建的具體步驟如圖1所示。
1.2 導航欄Navbar的設計
導航欄是網(wǎng)頁設計中必不可少的部分，它是指通過某種技術方法，為網(wǎng)站用戶提供一定的途徑，使用戶可以便捷地訪問到所需的內容，并且在瀏覽網(wǎng)站時可以快速地從一個頁面轉到另一個頁面的快捷方式。利用導航欄，用戶就可以快速找到想要瀏覽的頁面，例如想要選擇瀏覽品牌咨詢，可以直接點擊“品牌”選擇里面的品牌名字便可進入該品牌的頁面。讓網(wǎng)站的層次結構以一種有條理的方式清晰展示，引導用戶毫不費力地找到并管理信息是導航欄的主要目的，讓用戶在瀏覽網(wǎng)站過程中不會“迷路”。導航欄一定要簡潔、直觀、明確，這樣才能讓網(wǎng)站信息可以有效地傳遞給用戶。
基于HTML5的品牌宣傳型網(wǎng)站的導航欄有三種不同的效果，第一種是主頁面的導航欄，即橫著排列鎖定的導航欄，不會隨著向下瀏覽網(wǎng)頁而改變位置。簡潔明了清晰的給出整體網(wǎng)站的結構布局。分為四大部分：主頁、品牌、品牌MV、所有品牌。為了使導航欄不生硬，提高用戶的交互體驗，在此HTML5結合了CSS3偽類hover的方法，制作出鼠標浮動效果。由于是品牌宣傳型網(wǎng)站，所以一定要有品牌分類，導航欄還需要結合下拉列表。這里使用HTML5的無序列表
- 標簽來實現(xiàn)。在此主頁面引用了Bootstrap框架中CSS部分里面定義了"dropdown"、"dropdown-menu"、"dropdown-inner"、"list-unstyled"類，可以直接讓
2017年02期
- 網(wǎng)絡天地
- UC的商業(yè)價值及企業(yè)應用案例分析
- 一種基于HTML5的品牌宣傳網(wǎng)站設計
- 基于SSH的Linux系統(tǒng)遠程登錄研究
- 內容中心網(wǎng)絡研究與進展
- 基于ARM的物聯(lián)網(wǎng)多網(wǎng)互聯(lián)網(wǎng)關的設計與實現(xiàn)
- 基于Web的學生辦公系統(tǒng)設計
- 高性能計算機系統(tǒng)搬遷與集成的規(guī)劃與實施
- 信息安全
- 一種基于異常入侵檢測的報警融合技術
- 應用實踐
- 海量隨機數(shù)碰撞率檢測的快捷方法
- HTML5中的Canvas動畫研究
- 圖書館自習室自動排座系統(tǒng)的設計
- 基于ZigBee與微信公眾平臺的停車場管理系統(tǒng)設計與實現(xiàn)
- 小波變換在醫(yī)學圖像處理中的應用
等標簽來繼承。第二種是品牌主頁的響應式導航欄，它和主頁面固定的導航欄有著本質的不同，區(qū)別在于它是可浮動的，也就是說該導航欄會隨著客戶瀏覽頁面的位置的不同一直顯示于頂部不會改變，方便用戶隨時進行導航切換頁面。該導航欄分為：Home、About、News、Products、Videos、返回主頁。香奈兒品牌網(wǎng)頁整體同樣引用了Bootstrap框架，但為了給導航欄添加響應式特性，還特意加載了Bootstrap的折疊（Collaps）插件。需將折疊的內容包裹在帶有.class、.collapse、.Navbar-collapse 的
