新時代Web前端頁面設計的實踐

張敏

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

關鍵詞：新時期;Web前端頁面;設計實踐分析

0? ? 引言

在現實Web的前端頁面設計過程中需要熟悉各項技術的特質，明確功能覆蓋的范圍。在此基礎之上需要關注網頁設計目標對象的現實需要，適當增加設計美感，明確主題風格，突出展示文字信息，根據網頁需要達到的運營目的做出相應的調整。

1? ? Web前端頁面設計的現實意義

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

2? ? Web前端設計實踐要點

2.1? 突出目標的特質

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

2.2? 加強網頁的交互性

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

2.3? 加強Web的個性化設計

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

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

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

3? ? Web前端開發工具簡述

3.1? MyEclipse

MyEclipse企業級工作平臺（MyEclipse Enterprise Workbench，以下簡稱“MyEclipse”）是對EclipseIDE的擴展，利用它我們可以在數據庫和JavaEE的開發，發布以及應用程序服務器的整合方面極大的提高工作效率。它是功能豐富的JavaEE集成開發環境，包括了完備的編碼，調試，測試和發布功能，完整支持HTML，Struts， JSP， CSS， JavaScript， Spring， SQL， Hibernate。

MyEclipse結構上的這種模塊化，可以讓我們在不影響其他模塊的情況下，對任一模塊進行單獨的擴展和升級。

3.2? Dreamweare

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

3.3? HBuilder

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

4? ? Web前端頁面布局設計

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

5? ? 結語

在網絡信息成為日常生活不可獲取的一部分的新時期，在進行Web的前端頁面設計的時候需要熟練掌握基礎的編程語言使用之外，還要根據網頁自身的特質加強個性化設計，實現便于受眾使用和信息交互傳播的目標。

[參考文獻]

[1]付效梅.新時代web前端頁面設計的實踐研究[J].計算機產品與流通，2020（11）：148.

[2]張曉龍.Web前端開發技術的優化發展[J].電腦知識與技術，2020（11）：78-79.

[3]高慧.淺談Web前端開發技術以及優化[J].中國信息化，2019（12）：59-60.

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

[5]張德發.Web前端開發技術與優化工作研究[J].計算機產品與流通，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