張敏

摘 要：文章指出，信息技術(shù)的快速發(fā)展使得人們的生活離不開互聯(lián)網(wǎng)網(wǎng)頁信息，網(wǎng)站頁面的展示不只是傳遞信息，還能夠起到宣傳相關(guān)組織、說明工作內(nèi)容、提升影響力等作用。新時(shí)期對(duì)Web的前端頁面設(shè)計(jì)還提出了設(shè)計(jì)美觀、專業(yè)知識(shí)展示鮮明、便于維護(hù)管理等要求。

關(guān)鍵詞：新時(shí)期;Web前端頁面;設(shè)計(jì)實(shí)踐分析

0? ? 引言

在現(xiàn)實(shí)Web的前端頁面設(shè)計(jì)過程中需要熟悉各項(xiàng)技術(shù)的特質(zhì)，明確功能覆蓋的范圍。在此基礎(chǔ)之上需要關(guān)注網(wǎng)頁設(shè)計(jì)目標(biāo)對(duì)象的現(xiàn)實(shí)需要，適當(dāng)增加設(shè)計(jì)美感，明確主題風(fēng)格，突出展示文字信息，根據(jù)網(wǎng)頁需要達(dá)到的運(yùn)營目的做出相應(yīng)的調(diào)整。

1? ? Web前端頁面設(shè)計(jì)的現(xiàn)實(shí)意義

隨著我國的經(jīng)濟(jì)發(fā)展社會(huì)進(jìn)步，互聯(lián)網(wǎng)的普及度得到了空前的增長。網(wǎng)頁能夠承載的媒體樣式也更加豐富。網(wǎng)頁瀏覽方便展示信息，能夠滿足不同年齡層次，不同職業(yè)，不同背景的人群的需求。網(wǎng)絡(luò)頁面的作用也從傳統(tǒng)的快速獲取信息，廣告宣傳，傳遞散播信息的基礎(chǔ)作用延伸到辦理相關(guān)業(yè)務(wù)等更具有深度和廣度的功能作用。借助網(wǎng)站這種切合現(xiàn)代社會(huì)發(fā)展需要的媒介，一方面能夠拉近互動(dòng)的距離實(shí)現(xiàn)親民，從另一方面還有助于現(xiàn)代社會(huì)的人們彰顯自我，實(shí)現(xiàn)個(gè)人價(jià)值。網(wǎng)頁能夠打破時(shí)空限制，突破時(shí)間層面的束縛，空間意識(shí)形態(tài)之上的禁錮，幫助人們獲取信息的同時(shí)，也能幫助對(duì)應(yīng)目標(biāo)樹立良好的正面形象。網(wǎng)頁的前端設(shè)計(jì)能夠有效實(shí)現(xiàn)信息的系統(tǒng)整合，從便于邏輯思考的角度出發(fā)，平衡外界社會(huì)和目標(biāo)需要的關(guān)系，幫助信息宣傳的效果能夠無限延長[1]。網(wǎng)絡(luò)信息自身具備的海量存儲(chǔ)功能，能夠使得網(wǎng)頁自身就成為其中一個(gè)數(shù)據(jù)庫，實(shí)現(xiàn)網(wǎng)頁隨時(shí)隨地傳播到世界各地。網(wǎng)頁的前端設(shè)計(jì)從數(shù)據(jù)存儲(chǔ)的分析角度出發(fā)能夠分為縱向和橫向兩個(gè)思考方向?？v向來看網(wǎng)頁的前端設(shè)計(jì)單一板塊之間的內(nèi)容并不是一成不變的，是需要結(jié)合時(shí)事進(jìn)行周期性的動(dòng)態(tài)更新的。橫向分析能夠發(fā)現(xiàn)網(wǎng)頁安排的各個(gè)板塊之間需要有密切的聯(lián)系且需要具有存在的必要性和唯一性，順利實(shí)現(xiàn)網(wǎng)頁微型數(shù)據(jù)庫的邏輯性和合理性[2]。

2? ? Web前端設(shè)計(jì)實(shí)踐要點(diǎn)

2.1? 突出目標(biāo)的特質(zhì)

Web頁面作為目標(biāo)向大眾展示形象的主要數(shù)字媒體陣地，需要在進(jìn)行前端頁面設(shè)計(jì)的時(shí)候突出目標(biāo)的特征。這樣類似于將Web的整體頁面打造成目標(biāo)的“商標(biāo)”。這樣鮮明的特征能夠方便用戶快速識(shí)別，及時(shí)判斷。還可以幫助目標(biāo)完成宣傳和品牌建設(shè)的任務(wù)。發(fā)揮Web的信息數(shù)據(jù)庫的特征，將信息快速傳播至各個(gè)角落，突出目標(biāo)的特征，加深人們的印象[3]。

2.2? 加強(qiáng)網(wǎng)頁的交互性

網(wǎng)絡(luò)的數(shù)據(jù)龐雜用戶眾多，網(wǎng)絡(luò)使用的途徑較為方便。網(wǎng)頁作為信息資源再次分配的重要渠道，能夠幫助用戶和目標(biāo)建立良好的互利互惠關(guān)系。這樣能夠使得目標(biāo)的信息發(fā)布獲得更多的關(guān)注，同時(shí)也方便用戶第一時(shí)間獲取相應(yīng)的信息資源。拿學(xué)院的網(wǎng)頁設(shè)計(jì)舉例說明，網(wǎng)頁的存在能夠方便學(xué)生和教師的交流，幫助學(xué)生獲得專業(yè)知識(shí)的培訓(xùn)和教育，教師則可以根據(jù)學(xué)生的反饋及時(shí)調(diào)整自身工作方法中存在的落后成分，提升自己的素養(yǎng)。除此之外，還能收獲來自外界第三方的意見，幫助反思Web設(shè)計(jì)存在的現(xiàn)實(shí)合理性，打破傳統(tǒng)的交流壁壘，活化思維[3]。

2.3? 加強(qiáng)Web的個(gè)性化設(shè)計(jì)

網(wǎng)聯(lián)物聯(lián)化使得用戶端之間的物品、信息、資源融合，并創(chuàng)建最新的網(wǎng)頁信息管理平臺(tái)。在此基礎(chǔ)之上完成公共基礎(chǔ)設(shè)施的服務(wù)架構(gòu)，活用數(shù)字化產(chǎn)品，進(jìn)行個(gè)性化服務(wù)設(shè)定，促使生產(chǎn)模式的精確度提升。這就使得在進(jìn)行Web前端設(shè)計(jì)的時(shí)候要著重突出目標(biāo)的特性，彰顯其個(gè)性。同前文提到的打造商標(biāo)和品牌的概念有所區(qū)別的是，這個(gè)觀點(diǎn)是在強(qiáng)調(diào)網(wǎng)頁設(shè)計(jì)的唯一性。這樣能夠加深用戶的印象，幫助用戶在互聯(lián)網(wǎng)信息泛濫的龐大的信息流中對(duì)目標(biāo)留存更加鮮明的印象。策略制定需要同受眾的主觀感受保持一致[4]。最近熱門的VR、圖片、視頻等體驗(yàn)方式充分調(diào)動(dòng)了群眾對(duì)移動(dòng)互聯(lián)網(wǎng)頁面的感官認(rèn)知。

2.4? 加深Web的信息傳播教育意義

Web作為信息流承載的媒介，在現(xiàn)代社會(huì)還需要肩負(fù)著監(jiān)督和教化大眾的使命。這就要求在頁面設(shè)計(jì)上要安排舉報(bào)板塊和教學(xué)板塊。實(shí)現(xiàn)完成群眾監(jiān)督舉報(bào)不良違法現(xiàn)象的作用。同時(shí)借助新媒體慕課等全新的教學(xué)方式，提高受眾的受教育水平。MOOC這種開放教育資源的方法能夠使受眾在查詢信息的過程中順便學(xué)習(xí)相關(guān)專業(yè)知識(shí)。查詢相關(guān)的知識(shí)，鞏固延伸知識(shí)點(diǎn)，建立有效的知識(shí)關(guān)系網(wǎng)絡(luò)，提升我國的全民素質(zhì)。這一點(diǎn)主要是從新時(shí)期Web前端頁面設(shè)計(jì)需要滿足的社會(huì)作用提出的兩點(diǎn)要求，具體實(shí)踐還要根據(jù)現(xiàn)實(shí)的設(shè)計(jì)安排進(jìn)行取舍[4]。

3? ? Web前端開發(fā)工具簡述

3.1? MyEclipse

MyEclipse企業(yè)級(jí)工作平臺(tái)（MyEclipse Enterprise Workbench，以下簡稱“MyEclipse”）是對(duì)EclipseIDE的擴(kuò)展，利用它我們可以在數(shù)據(jù)庫和JavaEE的開發(fā)，發(fā)布以及應(yīng)用程序服務(wù)器的整合方面極大的提高工作效率。它是功能豐富的JavaEE集成開發(fā)環(huán)境，包括了完備的編碼，調(diào)試，測(cè)試和發(fā)布功能，完整支持HTML，Struts， JSP， CSS， JavaScript， Spring， SQL， Hibernate。

MyEclipse結(jié)構(gòu)上的這種模塊化，可以讓我們?cè)诓挥绊懫渌K的情況下，對(duì)任一模塊進(jìn)行單獨(dú)的擴(kuò)展和升級(jí)。

3.2? Dreamweare

Dreamweare能夠同時(shí)完成Web的設(shè)計(jì)開發(fā)和后期的Web運(yùn)營工作。自身的顯著特征是視覺化網(wǎng)頁開發(fā)工具，實(shí)現(xiàn)Web前端頁面設(shè)計(jì)的動(dòng)態(tài)化展示。這種突破瀏覽器和平臺(tái)禁錮的設(shè)計(jì)軟件，能夠借助網(wǎng)站地圖快速實(shí)現(xiàn)網(wǎng)頁的初步設(shè)計(jì)。這樣的操作有助于實(shí)現(xiàn)網(wǎng)頁內(nèi)容板塊的重組設(shè)計(jì)，順利更新網(wǎng)頁內(nèi)容需要的連接，內(nèi)容檔案的所處位置。借助文字代碼，HTML等標(biāo)簽和搜尋方法置換更新網(wǎng)頁。Dreamweare的使用操作方法較為簡單，成為網(wǎng)頁設(shè)計(jì)開發(fā)使用的主要軟件之一[5]。

3.3? HBuilder

HBuilder是DCloud（數(shù)字天堂）推出一款支持HTML5的Web開發(fā)IDE?？焓荋Builder的最大優(yōu)勢(shì)，通過完整的語法提示和代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML，js，css的開發(fā)效率。以“快”為核心的HBuilder，引入了“快捷鍵語法”的概念，巧妙地解決了困擾許多開發(fā)者的快捷鍵過多而記不住的問題。開發(fā)者只需要記住幾條語法，就可以快速實(shí)現(xiàn)跳轉(zhuǎn)、轉(zhuǎn)義和其他操作。比如alt+[是跳轉(zhuǎn)到括號(hào)，alt+是跳轉(zhuǎn)到引號(hào)，alt+字母是跳轉(zhuǎn)菜單項(xiàng)，而alt+左則是跳轉(zhuǎn)到上一次光標(biāo)位置。而Ctrl則是各種操作，比如ctrl+d就是刪除一行。另外，HBuilder的生態(tài)系統(tǒng)可能是最豐富的Web IDE生態(tài)系統(tǒng)，因?yàn)樗瑫r(shí)兼容Eclipse插件和Ruby Bundle。SVN，git，ftp，PHP，less等各種技術(shù)都有Eclipse插件。HBuilder的編寫用到了Java，C，Web和Ruby。HBuilder本身主體是由Java編寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。但因?yàn)镴ava效率太低，所以用C寫了啟動(dòng)器。HBuilder柔和的綠色界面設(shè)計(jì)需要?jiǎng)討B(tài)調(diào)節(jié)屏幕亮度，它還支持手機(jī)數(shù)據(jù)線真機(jī)聯(lián)調(diào)，而這些都是用C寫的。

4? ? Web前端頁面布局設(shè)計(jì)

根據(jù)設(shè)計(jì)目標(biāo)的自身性質(zhì)先對(duì)整個(gè)網(wǎng)站的內(nèi)容進(jìn)行初步設(shè)計(jì)，網(wǎng)站統(tǒng)一頂部為導(dǎo)航條站標(biāo)，系內(nèi)概況、系內(nèi)新聞、教務(wù)信息、專業(yè)介紹、選題系統(tǒng)、教學(xué)研究、科研創(chuàng)作。這部分內(nèi)容參考以往的學(xué)校官方頁面板塊安排一般為固定模式。網(wǎng)站的上中部位置需要做好圖片展示和板塊導(dǎo)航，從頁面布局和使用者的習(xí)慣角度來考慮一般采用這樣的安排。網(wǎng)站的中部位置安排介紹學(xué)院需要展示的圖文信息，網(wǎng)站信息公布欄，站點(diǎn)數(shù)據(jù)公式，網(wǎng)站使用導(dǎo)航。最后在網(wǎng)頁底部根據(jù)固定安排需要做好網(wǎng)頁或者版面的制作，確定版權(quán)信息所屬。為了保證使用者的視覺舒適度和審美體驗(yàn)的統(tǒng)一，盡量選擇鄰近色從而避免網(wǎng)頁色彩雜亂無法統(tǒng)一的問題。根據(jù)學(xué)院官網(wǎng)這一主題，需要選擇色彩較為素雅，花紋簡單的背景設(shè)計(jì)，著重突出網(wǎng)頁的實(shí)用性[5]。還需要注意的是鼠標(biāo)點(diǎn)擊相關(guān)的導(dǎo)航文字時(shí)，文字會(huì)變色，這個(gè)色彩的選擇需要加強(qiáng)層次感，以便受眾使用。注意信息排版的層次感，方便受眾信息關(guān)鍵詞的快速檢索，提升使用感受。

5? ? 結(jié)語

在網(wǎng)絡(luò)信息成為日常生活不可獲取的一部分的新時(shí)期，在進(jìn)行Web的前端頁面設(shè)計(jì)的時(shí)候需要熟練掌握基礎(chǔ)的編程語言使用之外，還要根據(jù)網(wǎng)頁自身的特質(zhì)加強(qiáng)個(gè)性化設(shè)計(jì)，實(shí)現(xiàn)便于受眾使用和信息交互傳播的目標(biāo)。

[參考文獻(xiàn)]

[1]付效梅.新時(shí)代web前端頁面設(shè)計(jì)的實(shí)踐研究[J].計(jì)算機(jī)產(chǎn)品與流通，2020（11）：148.

[2]張曉龍.Web前端開發(fā)技術(shù)的優(yōu)化發(fā)展[J].電腦知識(shí)與技術(shù)，2020（11）：78-79.

[3]高慧.淺談Web前端開發(fā)技術(shù)以及優(yōu)化[J].中國信息化，2019（12）：59-60.

[4]李曉薇.Web前端開發(fā)技術(shù)以及優(yōu)化方向[J].電子技術(shù)與軟件工程，2019（19）：48-49.

[5]張德發(fā).Web前端開發(fā)技術(shù)與優(yōu)化工作研究[J].計(jì)算機(jī)產(chǎn)品與流通，2019（9）：145.

（編輯 傅金睿）

Practice of Web front-end page design in the new era

Zhang Min

（Guiyang Vocational and Technical College， Guiyang 550081， China）

Abstract：The rapid development of information technology makes peoples life can not be separated from the Internet Web page information， the display of the Web page is not only a single transmission of information， but also can play the role of propaganda related organizations， explain the work content， improve the influence and so on. In the new era， the front-end page design of Web also puts forward the functions of beautiful design， bright display of professional knowledge and easy maintenance and management.

Key words：new period; Web front-end page; design practice analysis