基于Bootstrap技術(shù)的企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

謝建華

摘 要： 目前企業(yè)官網(wǎng)對(duì)個(gè)性化需求和響應(yīng)式布局的要求越來(lái)越緊迫。通過(guò)闡述企業(yè)網(wǎng)站的需求和功能，分析系統(tǒng)的前端設(shè)計(jì)、UI設(shè)計(jì)和系統(tǒng)結(jié)構(gòu)布局等，基于Bootstrap技術(shù)采用“PHP+MySQL”開(kāi)發(fā)模式實(shí)現(xiàn)了響應(yīng)式企業(yè)網(wǎng)站，極大地提高了網(wǎng)站的開(kāi)發(fā)效率，并使網(wǎng)站適應(yīng)不同移動(dòng)設(shè)備的瀏覽。

關(guān)鍵詞： Bootstrap； 響應(yīng)式布局； Web開(kāi)發(fā)； 移動(dòng)設(shè)備

中圖分類號(hào)：TP39 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2017）08-17-03

Abstract： At present， the demands for the individual requirements and the responsive layout of enterprise's official website are becoming more and more urgent. By describing the requirements and functions of the whole enterprise's official website， the front-end design， UI design and system layout of the system are analyzed， and with Bootstrap framework， "PHP + MySQL" development model is used to achieve a responsive enterprise website， which greatly improves the efficiency of the development of the website， and makes the website adapt different mobile devices.

Key words： Bootstrap； responsive layout； Web development； mobile device

0引言

在信息技術(shù)高速發(fā)展的這個(gè)時(shí)代，網(wǎng)絡(luò)作為最為方便快捷的媒介越來(lái)越被人們所接受，網(wǎng)絡(luò)已融入我們的生活。自2015年HTML5在國(guó)內(nèi)興起，新技術(shù)不斷推進(jìn)著信息時(shí)代的發(fā)展，網(wǎng)站也逐漸脫離了傳統(tǒng)的枯燥頁(yè)面風(fēng)格，如今的HTML5比以前的HTML更容易維護(hù)和管理，而且還能實(shí)現(xiàn)跨平臺(tái)開(kāi)發(fā)，減少開(kāi)發(fā)成本。

近年來(lái)，移動(dòng)互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，移動(dòng)端的上網(wǎng)率高于傳統(tǒng)PC，而在移動(dòng)端上，傳統(tǒng)網(wǎng)站又難以做到兼容所有的設(shè)備尺寸，越來(lái)越多的商家傳統(tǒng)門(mén)戶官網(wǎng)已經(jīng)不能滿足用戶的體驗(yàn)，各大商家、大企業(yè)都開(kāi)始重構(gòu)新的HTML5+Bootstrap響應(yīng)式網(wǎng)站，以求將自己的產(chǎn)品信息和企業(yè)動(dòng)態(tài)，更直接展示給用戶，并通過(guò)豐富的交互去優(yōu)化與用戶溝通的過(guò)程。網(wǎng)頁(yè)內(nèi)容更加多姿多彩，板塊、內(nèi)容更加豐富，而且能夠適應(yīng)不同屏幕尺寸，在這個(gè)移動(dòng)設(shè)備逐步普及的時(shí)代，能更快更好地將第一手信息送到用戶手上[1-2]，不僅方便了企業(yè)的宣傳和銷售工作，同樣也普及了人們的需要。因此，立足于設(shè)計(jì)一個(gè)兼顧不同尺寸的移動(dòng)設(shè)備，同時(shí)兼顧網(wǎng)站開(kāi)發(fā)的資金、技術(shù)、時(shí)間以及人力成本的響應(yīng)式官網(wǎng)，以體現(xiàn)各大企業(yè)官網(wǎng)轉(zhuǎn)型做響應(yīng)式也是勢(shì)在必得的過(guò)程。

1 需求分析

1.1 用例圖

用例圖用來(lái)描述系統(tǒng)與參與者之間的相互作用，也可以說(shuō)它是從用戶角度出發(fā)來(lái)描述如何使用系統(tǒng)。首先要理清下面幾個(gè)概念。

角色：角色代表某一事件發(fā)生的參與者，用一個(gè)小人表示。在通常的網(wǎng)絡(luò)項(xiàng)目中，角色常被用來(lái)代表使用網(wǎng)站的用戶，但角色的作用并不局限于此，它也可以用來(lái)代表與系統(tǒng)交互的其他實(shí)體。

用例：用例代表系統(tǒng)可以實(shí)現(xiàn)的功能，通常一個(gè)用例代表一組功能，它實(shí)質(zhì)上規(guī)定了系統(tǒng)實(shí)現(xiàn)功能的范圍。在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，一個(gè)項(xiàng)目中往往涉及很多個(gè)用例，此時(shí)需要將其分解成若干個(gè)子系統(tǒng)實(shí)現(xiàn)，以便于理解。在UML中，用例用一個(gè)橢圓表示。本網(wǎng)站管理系統(tǒng)如圖1所示。

1.2 網(wǎng)站功能

本網(wǎng)站是企業(yè)類型網(wǎng)站，具有如下幾個(gè)功能。

⑴ 建立企業(yè)形象，詮釋企業(yè)發(fā)展、結(jié)構(gòu)以及一些企業(yè)的產(chǎn)品。

⑵ 本網(wǎng)站上的圖片，文字等信息可以隨意的更改，可以根據(jù)企業(yè)的戰(zhàn)略發(fā)展進(jìn)行合適的調(diào)整。

⑶ 本網(wǎng)站的采用良好的標(biāo)簽技術(shù)，通過(guò)標(biāo)簽的使用可以減少網(wǎng)站的大小和占用的資源。

⑷ 網(wǎng)站建設(shè)是按照網(wǎng)站屬性進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的，設(shè)計(jì)風(fēng)格按照用戶瀏覽習(xí)慣。

具體網(wǎng)站前端構(gòu)建方案如表1所示。

2 系統(tǒng)前端設(shè)計(jì)

2.1 前端總體開(kāi)發(fā)流程與設(shè)計(jì)

Web前端開(kāi)發(fā)主要包括三個(gè)基本技能要素：HTML5、CSS3和JavaScript，前端工程師不僅要掌握這些基本技能，還要熟悉網(wǎng)站的性能優(yōu)化。

2.1.1 分層開(kāi)發(fā)

在響應(yīng)式企業(yè)網(wǎng)站的具體概要確定之后，就要著手進(jìn)行分層開(kāi)發(fā)的劃分，根據(jù)項(xiàng)目?jī)?nèi)容的不同，劃分出不同的功能模塊，分步完成，以便合理地安排開(kāi)發(fā)時(shí)間，有條理地完成模塊和需要功能，降低開(kāi)發(fā)成本，提高開(kāi)發(fā)效率。整個(gè)分層開(kāi)發(fā)大致分為：總體結(jié)構(gòu)搭建，模塊制作，頁(yè)面設(shè)置制作，底層JS腳本搭建，JS交互效果，內(nèi)部測(cè)試，代碼優(yōu)化。

2.1.2 代碼編寫(xiě)

在整個(gè)代碼編號(hào)過(guò)程中，應(yīng)先劃分好各模塊的開(kāi)發(fā)次序，先編寫(xiě)HTML布局，設(shè)計(jì)圖完成后再進(jìn)行CSS的開(kāi)發(fā)，可大大節(jié)省開(kāi)發(fā)時(shí)間，提高開(kāi)發(fā)效率。這體現(xiàn)了模塊化開(kāi)發(fā)的重要性，強(qiáng)調(diào)編寫(xiě)規(guī)范，利于后期維護(hù)，減少維護(hù)成本。模塊化開(kāi)發(fā)是工程師必備的技能，是敏捷開(kāi)發(fā)所必須的，易于復(fù)用與組件管理[2-3]。

2.1.3 內(nèi)部測(cè)試與后續(xù)優(yōu)化

前端內(nèi)部測(cè)試，主要是觀察頁(yè)面與設(shè)計(jì)圖的差異，優(yōu)化頁(yè)面細(xì)節(jié)樣式，及時(shí)發(fā)現(xiàn)問(wèn)題并進(jìn)行修改。利用不同設(shè)備查看頁(yè)面的兼容性，當(dāng)所有細(xì)節(jié)與兼容問(wèn)題修改完畢后，對(duì)制作文件進(jìn)行代碼優(yōu)化，盡可能地壓縮文件大小，優(yōu)化訪問(wèn)速度。

2.2 前端UI設(shè)計(jì)

2.2.1 模塊分布

UI設(shè)計(jì)是指對(duì)頁(yè)面的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓頁(yè)面變得有個(gè)性有品味，還要讓頁(yè)面的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)頁(yè)面的定位和特點(diǎn)。所以UI設(shè)計(jì)師設(shè)計(jì)中最重要的一點(diǎn)，也可以發(fā)揮出更多有創(chuàng)意的設(shè)計(jì)想法；其中體現(xiàn)出層次感設(shè)計(jì)的就是從屬關(guān)系，點(diǎn)構(gòu)成線，線構(gòu)成面，主次清晰明了。

2.2.2 顏色配置

網(wǎng)站采用灰白色系符合網(wǎng)站整體風(fēng)格，體現(xiàn)簡(jiǎn)潔，自然，穩(wěn)重的色彩效果。背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的顏色。

2.3 網(wǎng)站結(jié)構(gòu)布局與設(shè)計(jì)

2.3.1 網(wǎng)站結(jié)構(gòu)

本網(wǎng)站主要用于公司的信息發(fā)布，產(chǎn)品展示，文化展示，產(chǎn)品預(yù)約定制等功能。整個(gè)網(wǎng)站由相對(duì)獨(dú)立的功能模塊整合而成。網(wǎng)站系統(tǒng)根據(jù)功能劃分為8大模塊，每個(gè)頁(yè)面包含豐富的內(nèi)容，每個(gè)大的模塊下又細(xì)分幾個(gè)小的功能模塊，具體如圖2所示。

制作前臺(tái)頁(yè)面模塊，包括主頁(yè)及各個(gè)子頁(yè)面，建立各個(gè)頁(yè)面之間的相關(guān)鏈接。整體網(wǎng)站遵循響應(yīng)式企業(yè)網(wǎng)站的設(shè)計(jì)思路，擁有完善的功能，風(fēng)格要求簡(jiǎn)潔大方不單調(diào)，功能要求使用簡(jiǎn)單全面，容易操作[4-5]。

2.3.2 主題鮮明，富有特色

在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。

整個(gè)網(wǎng)頁(yè)采用動(dòng)畫(huà)設(shè)計(jì)，力求做到主題鮮明突出，網(wǎng)站頁(yè)面簡(jiǎn)潔，要點(diǎn)明確，以簡(jiǎn)單動(dòng)作與交互讓用戶更好地了解網(wǎng)站的主題內(nèi)容，吸引對(duì)本站點(diǎn)有需求的人的視線，給人留下良好的印象。調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站的個(gè)性和情趣，突出個(gè)性，這樣才能辦出網(wǎng)站的特色。

2.4 網(wǎng)站后臺(tái)設(shè)計(jì)

2.4.1 數(shù)據(jù)庫(kù)搭建

本網(wǎng)站采用MySQL數(shù)據(jù)庫(kù)，它體積小、速度快、總成本低，開(kāi)放源代碼，在網(wǎng)站建設(shè)中應(yīng)用非常普遍[6]。本系統(tǒng)主要?jiǎng)?chuàng)建的表，具體如表2所示。

2.4.2 連接數(shù)據(jù)庫(kù)

利用PHP把頁(yè)面和數(shù)據(jù)庫(kù)連接起來(lái)，實(shí)現(xiàn)連接到數(shù)據(jù)庫(kù)、在PHP中顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)以及更復(fù)雜的插入、修改和刪除。

3 結(jié)束語(yǔ)

本文研究了企業(yè)網(wǎng)站的需求分析、前端系統(tǒng)設(shè)計(jì)、功能模塊設(shè)計(jì)、后臺(tái)數(shù)據(jù)庫(kù)設(shè)計(jì)等基本工作流程，采用PHP+MySQL開(kāi)發(fā)技術(shù)實(shí)現(xiàn)了基于HTML5+Bootstrap響應(yīng)式企業(yè)網(wǎng)站。該網(wǎng)站注重用戶體驗(yàn)，界面簡(jiǎn)潔大方，功能完善，跨平臺(tái)性好，能滿足不同移動(dòng)設(shè)備的良好體驗(yàn)，接下來(lái)將加強(qiáng)交互式設(shè)計(jì)，實(shí)現(xiàn)與用戶更有效的互動(dòng)，促進(jìn)企業(yè)網(wǎng)站的宣傳。

參考文獻(xiàn)（References）：

[1] 舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)[J].北京印刷學(xué)院學(xué)報(bào)，2016.2：47-52

[2] 季嘉明.基于Bootstrap+SSI的跨平臺(tái)企業(yè)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].東華大學(xué)碩士學(xué)位論文，2015.

[3] 員志超，李本圖.基于Bootstrap+SSI的跨平臺(tái)旅行社管理信息系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].軟件工程，2016.5：51-54

[4] 舒遠(yuǎn)仲，黃文強(qiáng)，梅夢(mèng)喆.基于HTML5跨平臺(tái)高校就業(yè)信息服務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2016.3：93-96

[5] 周靈，王莉莉，宋燕燕等.一種基于HTML5的品牌宣傳網(wǎng)站設(shè)計(jì)[J].計(jì)算機(jī)時(shí)代，2016.8：19-22

[6] 李張永，陳和平，顧進(jìn)廣.跨平臺(tái)移動(dòng)Web開(kāi)發(fā)框架與數(shù)據(jù)交互方法[J].計(jì)算機(jī)工程與設(shè)計(jì)，2014.35（5）：1827-1832