一種基于HTML5的品牌宣傳網(wǎng)站設(shè)計(jì)

周靈　王莉莉　宋燕燕　段紅秀　李云琳

摘 要： 基于HTML5與CSS3技術(shù)，配合Bootstrap框架，提出一種品牌宣傳網(wǎng)站的設(shè)計(jì)方案。該設(shè)計(jì)使用JavaScript和JQuery，引用輕量級(jí)插件，提升用戶體驗(yàn)的交互效果，并結(jié)合后臺(tái)數(shù)據(jù)庫(kù)MySQL以及集成開發(fā)環(huán)境Eclipse和后臺(tái)服務(wù)器Tomcat，實(shí)現(xiàn)品牌宣傳型網(wǎng)站的后臺(tái)搜索功能，以提升用戶體驗(yàn)以及網(wǎng)站的實(shí)用性。

關(guān)鍵詞： HTML5； CSS3； JavaScript； Bootstrap

中圖分類號(hào)：TP319 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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內(nèi)容的語言，是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石，將成為HTML、XHTML以及HTML DOM的新標(biāo)準(zhǔn)[1]。HTML5通過創(chuàng)建一種標(biāo)準(zhǔn)化的、直觀的UI標(biāo)記語言的形式來簡(jiǎn)化網(wǎng)頁(yè)的設(shè)計(jì)和構(gòu)建，里面包含了自己有效的數(shù)據(jù)管理、繪制圖形、視音頻工具，適用于不同能力的設(shè)計(jì)師和開發(fā)團(tuán)隊(duì)，使他們能夠發(fā)布簡(jiǎn)單文本、豐富的交互式多媒體等各種形式的內(nèi)容，它使面向網(wǎng)頁(yè)和便攜式設(shè)備的跨瀏覽器應(yīng)用程序的開發(fā)變得簡(jiǎn)單化。

本研究首先利用HTML5與CSS3配合Bootstrap框架，設(shè)計(jì)出品牌宣傳網(wǎng)站整體框架結(jié)構(gòu)，然后使用JavaScript和JQuery，以及引用一些既輕量級(jí)又優(yōu)秀的插件，設(shè)計(jì)出能夠提高用戶體驗(yàn)的交互效果。最終結(jié)合后臺(tái)數(shù)據(jù)庫(kù)MySQL，以及集成開發(fā)環(huán)境Eclipse和后臺(tái)服務(wù)器Tomcat，實(shí)現(xiàn)品牌宣傳型網(wǎng)站的后臺(tái)搜索功能。

1 基于HTML5的品牌宣傳網(wǎng)站的總體流程設(shè)計(jì)

1.1 網(wǎng)站整體設(shè)計(jì)流程

美國(guó)著名用戶界面設(shè)計(jì)專家Jesse James Garrett從用戶體驗(yàn)角度提出網(wǎng)站設(shè)計(jì)的基本框架，從高到低五個(gè)層面的框架依次是戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層[2]。依據(jù)這五個(gè)層次要素，整合網(wǎng)站設(shè)計(jì)的重要步驟，我們可得出綜合型設(shè)計(jì)類網(wǎng)站信息構(gòu)建的具體步驟如圖1所示。

1.2 導(dǎo)航欄Navbar的設(shè)計(jì)

導(dǎo)航欄是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的部分，它是指通過某種技術(shù)方法，為網(wǎng)站用戶提供一定的途徑，使用戶可以便捷地訪問到所需的內(nèi)容，并且在瀏覽網(wǎng)站時(shí)可以快速地從一個(gè)頁(yè)面轉(zhuǎn)到另一個(gè)頁(yè)面的快捷方式。利用導(dǎo)航欄，用戶就可以快速找到想要瀏覽的頁(yè)面，例如想要選擇瀏覽品牌咨詢，可以直接點(diǎn)擊“品牌”選擇里面的品牌名字便可進(jìn)入該品牌的頁(yè)面。讓網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，引導(dǎo)用戶毫不費(fèi)力地找到并管理信息是導(dǎo)航欄的主要目的，讓用戶在瀏覽網(wǎng)站過程中不會(huì)“迷路”。導(dǎo)航欄一定要簡(jiǎn)潔、直觀、明確，這樣才能讓網(wǎng)站信息可以有效地傳遞給用戶。

基于HTML5的品牌宣傳型網(wǎng)站的導(dǎo)航欄有三種不同的效果，第一種是主頁(yè)面的導(dǎo)航欄，即橫著排列鎖定的導(dǎo)航欄，不會(huì)隨著向下瀏覽網(wǎng)頁(yè)而改變位置。簡(jiǎn)潔明了清晰的給出整體網(wǎng)站的結(jié)構(gòu)布局。分為四大部分：主頁(yè)、品牌、品牌MV、所有品牌。為了使導(dǎo)航欄不生硬，提高用戶的交互體驗(yàn)，在此HTML5結(jié)合了CSS3偽類hover的方法，制作出鼠標(biāo)浮動(dòng)效果。由于是品牌宣傳型網(wǎng)站，所以一定要有品牌分類，導(dǎo)航欄還需要結(jié)合下拉列表。這里使用HTML5的無序列表

• 標(biāo)簽來實(shí)現(xiàn)。在此主頁(yè)面引用了Bootstrap框架中CSS部分里面定義了"dropdown"、"dropdown-menu"、"dropdown-inner"、"list-unstyled"類，可以直接讓
• 等標(biāo)簽來繼承。

  第二種是品牌主頁(yè)的響應(yīng)式導(dǎo)航欄，它和主頁(yè)面固定的導(dǎo)航欄有著本質(zhì)的不同，區(qū)別在于它是可浮動(dòng)的，也就是說該導(dǎo)航欄會(huì)隨著客戶瀏覽頁(yè)面的位置的不同一直顯示于頂部不會(huì)改變，方便用戶隨時(shí)進(jìn)行導(dǎo)航切換頁(yè)面。該導(dǎo)航欄分為：Home、About、News、Products、Videos、返回主頁(yè)。香奈兒品牌網(wǎng)頁(yè)整體同樣引用了Bootstrap框架，但為了給導(dǎo)航欄添加響應(yīng)式特性，還特意加載了Bootstrap的折疊（Collaps）插件。需將折疊的內(nèi)容包裹在帶有.class、.collapse、.Navbar-collapse 的

  中。折疊起來的導(dǎo)航欄實(shí)際上是一個(gè)帶有

  .Navbar-toggle及data-target元素的按鈕。第一個(gè)是 data-toggle，用于告訴JavaScript需要對(duì)按鈕做什么。第二個(gè)是data-target，指示要切換到哪一個(gè)元素。三個(gè)帶有class .icon-bar的創(chuàng)建所謂的漢堡按鈕。這些會(huì)切換為.nav-collapse

  中的元素。導(dǎo)航欄的

  繼承了collapse、Navbar-collapse、scrollspy、smooth-scroll類。使用

  • 標(biāo)簽來制作分類，利用標(biāo)簽里的href屬性來制作target，可以使用戶點(diǎn)擊到哪一個(gè)模塊，然后就獲取模塊的ID號(hào)，切換到相應(yīng)ID的模塊。同時(shí)導(dǎo)航欄還加載了自動(dòng)更新導(dǎo)航插件，也就是滾動(dòng)監(jiān)聽（Scrollspy）插件，插件的作用在于導(dǎo)航欄可以根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是基于滾動(dòng)條的位置向?qū)Ш綑谔砑?active class。再與hover偽類相配合，就實(shí)現(xiàn)了滑動(dòng)或點(diǎn)擊到相應(yīng)模塊，相應(yīng)模塊的標(biāo)簽顏色變成藍(lán)色，其余的標(biāo)簽顏色是白色。因?yàn)橄隳蝺浩放祈?yè)面是整頁(yè)式設(shè)計(jì)，所以導(dǎo)航欄的導(dǎo)航方式也與主頁(yè)的不同，加載了smooth-scroll插件，使導(dǎo)航方式更改為滑動(dòng)導(dǎo)航。

  1 [2] 存入我的閱覽室

  • 

    《計(jì)算機(jī)時(shí)代》

    2017年02期

  技術(shù)廣角

  大規(guī)模計(jì)算機(jī)集群在地震勘探資料處理中的應(yīng)用探討

  基于Lenet—5的卷積神經(jīng)網(wǎng)絡(luò)改進(jìn)算法

  AOMDV多路徑協(xié)議的研究和改進(jìn)

  室內(nèi)定位技術(shù)的研究綜述

  網(wǎng)絡(luò)天地

  UC的商業(yè)價(jià)值及企業(yè)應(yīng)用案例分析

  一種基于HTML5的品牌宣傳網(wǎng)站設(shè)計(jì)

  基于SSH的Linux系統(tǒng)遠(yuǎn)程登錄研究

  內(nèi)容中心網(wǎng)絡(luò)研究與進(jìn)展

  基于ARM的物聯(lián)網(wǎng)多網(wǎng)互聯(lián)網(wǎng)關(guān)的設(shè)計(jì)與實(shí)現(xiàn)

  基于Web的學(xué)生辦公系統(tǒng)設(shè)計(jì)

  高性能計(jì)算機(jī)系統(tǒng)搬遷與集成的規(guī)劃與實(shí)施

  信息安全

  一種基于異常入侵檢測(cè)的報(bào)警融合技術(shù)

  應(yīng)用實(shí)踐

  海量隨機(jī)數(shù)碰撞率檢測(cè)的快捷方法

  HTML5中的Canvas動(dòng)畫研究

  圖書館自習(xí)室自動(dòng)排座系統(tǒng)的設(shè)計(jì)

  基于ZigBee與微信公眾平臺(tái)的停車場(chǎng)管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

  小波變換在醫(yī)學(xué)圖像處理中的應(yīng)用

  經(jīng)驗(yàn)技巧

  基于Contourlet變換和區(qū)域能量區(qū)域方差的圖像融合方法

  基于.NET技術(shù)的CMS響應(yīng)式頁(yè)面生成系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

  基于PowerPoint的快速視頻課件制作

  計(jì)算機(jī)教育

  面向南疆地區(qū)的操作系統(tǒng)課程教學(xué)改革探索

  基于閩臺(tái)合作的動(dòng)漫專業(yè)課程體系的構(gòu)建

  遞進(jìn)式項(xiàng)目教學(xué)法在C語言教學(xué)中的應(yīng)用

  項(xiàng)目教學(xué)法在計(jì)算機(jī)文化基礎(chǔ)課程教學(xué)中的應(yīng)用

  微信支持下的藏語教學(xué)研究

  物聯(lián)網(wǎng)專業(yè)“校中廠”建設(shè)的思考

  基于“互聯(lián)網(wǎng)+”的應(yīng)用型本科計(jì)算機(jī)專業(yè)教學(xué)改革研究

  以科技競(jìng)賽為載體的計(jì)算機(jī)專業(yè)研究生的創(chuàng)新能力培養(yǎng)研究

  IT行業(yè)人員職業(yè)教育問題探析

  計(jì)算機(jī)專業(yè)英語課程教學(xué)方法改革