基于HTML5的Web富客戶端網(wǎng)頁設(shè)計方法

□魏巍巍

基于HTML5的新特性設(shè)計Web富客戶端網(wǎng)頁，需要從網(wǎng)頁整體框架以及服務(wù)功能等等入手，整體規(guī)劃Web富客戶端網(wǎng)頁的表現(xiàn)內(nèi)容以及媒體元素，以Web富客戶端網(wǎng)頁設(shè)計方案構(gòu)建入手，實現(xiàn)Web富客戶端網(wǎng)頁設(shè)計的展現(xiàn)。本文將基于HTML5新特性，結(jié)合對Web富客戶端網(wǎng)頁設(shè)計需求的研究，探究如何應(yīng)用HTML5實現(xiàn)Web富客戶端網(wǎng)頁設(shè)計，拓展Web富客戶端網(wǎng)頁內(nèi)容以及加快響應(yīng)速度，給予用戶優(yōu)質(zhì)的體驗與服務(wù)。

一、HTML5新特性闡述及簡要分析

HTML5設(shè)計的研究目的在于支持多媒體在移動設(shè)備上的訪問，通過改變用戶與文檔的交互方式，利用新語法特征簡化編程工作，為Web程序在各大設(shè)備及應(yīng)用程序上的訪問提供優(yōu)質(zhì)的平臺，對比之前的HTML版本能夠更快、更簡潔地實現(xiàn)移動終端上的訪問，并且還具備了更多的新特性：一是標記語言新標準，通過更新標記語言以及附屬標準，簡化了編程工作，尤其是訪問和操作HTML文檔結(jié)構(gòu)以及用于定義HTML文檔的外觀和呈現(xiàn)方式、JavaScript腳本語言大大簡化了用戶訪問的中間過程，加快移動終端在網(wǎng)頁或者是多媒體上的訪問；二是富Web的實現(xiàn)，HTML5能夠在富應(yīng)用上實現(xiàn)新API，從而在網(wǎng)頁上展現(xiàn)出更多的媒體元素，例如圖形、動畫、多媒體，不需要利用Flash等各類插件就能夠?qū)崿F(xiàn)這些功能，所以大大提高了網(wǎng)站安全，并且拓展了受眾范圍，尤其是HTML5中的audio和video為媒體嵌入降低了門檻，從而提高了瀏覽器廠商的自主開放層面，實現(xiàn)了瀏覽器的多樣媒體展現(xiàn)以及自主設(shè)計；三是結(jié)構(gòu)更為優(yōu)化，HTML5引入的新元素能夠簡化網(wǎng)頁構(gòu)建，利用一整套新元素可以使得標題元素聯(lián)合使用過程中，以使用標題級別標記嵌套章節(jié)形式進行展現(xiàn)，這樣一來就能夠優(yōu)化網(wǎng)頁的構(gòu)建結(jié)構(gòu)，使得網(wǎng)頁設(shè)計更加簡潔以及個性化，能夠滿足各個企業(yè)或者是用戶對網(wǎng)頁設(shè)計的開發(fā)需求；四是設(shè)備兼容特性，HTML5能夠為網(wǎng)頁應(yīng)用提供能多的優(yōu)化選擇，在體驗功能上占據(jù)絕對的優(yōu)勢，可以通過數(shù)據(jù)與應(yīng)用接入的開放結(jié)構(gòu)，實現(xiàn)外部應(yīng)用與瀏覽器內(nèi)部數(shù)據(jù)的連接，在提高瀏覽器運行效果的同時，也降低了設(shè)備之間的兼容沖突，為用戶提供更優(yōu)質(zhì)的體驗；五是連接特性，HTML5具有更快的連接速度，其連接工作的效率更高，能夠在實現(xiàn)頁面實施聊天的同時提供更快速的網(wǎng)頁游戲體驗，使得在線交流與其他活動同步進行，并且在不影響服務(wù)器推送的情況下，可以將服務(wù)器數(shù)據(jù)直接推動到客戶端上，從而實現(xiàn)更為快速、優(yōu)質(zhì)的服務(wù)。

二、基于HTML5的Web富客戶端網(wǎng)頁設(shè)計探討

現(xiàn)階段Web程序界面的開放模式為單頁面以及多頁面，對于Web富客戶端網(wǎng)頁而言，從用戶操作以及維護開發(fā)角度而言，基于HTML5的Web富客戶端頁面開放應(yīng)該選用單頁面，從而為用戶提供更為簡單的操作以及開發(fā)維護服務(wù)。單頁面開發(fā)模式可以利用彈出層實現(xiàn)增添或者是修改操作，比起多頁面應(yīng)用的頁面挑戰(zhàn)而言，可以更快速、簡潔地完成各項操作，降低操作的復雜性，提高友好度；再者單頁面模式能夠便于開發(fā)及維護，多個區(qū)域的功能進行更新以及避免區(qū)域功能受到子頁面過多的影響出現(xiàn)假死狀態(tài)，不利于用戶操作，圖1是單頁面開發(fā)模式中的系統(tǒng)頁面中的后臺框架設(shè)計圖。

圖1

Web富客戶端網(wǎng)頁一共有七個區(qū)域功能：一是客戶和登錄用戶信息區(qū)，有上下兩部分組成，上部分主要是用文字或者是圖片展示系統(tǒng)中的客戶信息，下部分則是對用戶登錄的歡迎信息，HTML5在這部分主要是利用其富Web的實現(xiàn)特性，將動畫、文字以及圖片，通過網(wǎng)頁結(jié)構(gòu)的革新，優(yōu)質(zhì)內(nèi)容表現(xiàn)；二是系統(tǒng)標題欄區(qū)，HTML5中的一整套新元素可以實現(xiàn)標題聯(lián)合使用，利用標題級別標記嵌套章節(jié)設(shè)置區(qū)域的內(nèi)容，可以通過與audio和video調(diào)整實現(xiàn)其動靜態(tài)之間的標題轉(zhuǎn)變；三是報警信息顯示區(qū)，可以自由配置文字、滾動速度以及顯示條數(shù)；四是常用功能區(qū)，主要是用于密碼修改、用戶注銷或者是主題切換；五是組織機構(gòu)樹形菜單區(qū)，主要是通過各級部門之間的所屬關(guān)系以及功能，將部門以樹形的方式展現(xiàn)，便于用戶信息查詢以及功能了解，對用戶所屬部門進行詳細解釋；六是主菜單以及二級菜單，基于HTML5的Web富客戶端網(wǎng)頁設(shè)計中選擇時的Tab菜單模式，針對系統(tǒng)的各個模塊設(shè)置Tab菜單項，將各個操作作為每個Tab項的二級菜單，通過工具欄對子模塊的頁面操作進行集中，這樣就能夠在每個二級菜單點擊過程中，打開相應(yīng)的子模塊頁面，便于用戶進行選擇、操作；七是應(yīng)用區(qū)的設(shè)計，是基于HTML5的Web富客戶端網(wǎng)頁設(shè)計的重點，本身應(yīng)用器是系統(tǒng)子模塊的功能展示操作區(qū)，所以在設(shè)計中需要將單獨的HTML頁面與浮動框架進行綁定，點擊不同的子模塊除卻移除上一個子模塊的浮動框架以外，還要顯示本身的子模塊的浮動框架，一是避免一個主頁面掛靠多個子頁面，二是提高系統(tǒng)常用功能體現(xiàn)速度以及效果，三是要實現(xiàn)這三個功能的優(yōu)化服務(wù)：頂部面板中要包括常用功能以及報警信息顯示區(qū)；左部部門樹面板要實現(xiàn)上下級部門節(jié)點的聯(lián)動，為用戶提供全面的信息搜索以及選擇模型；Tab菜單面板的要展現(xiàn)主菜單欄、副菜單欄以及客戶區(qū)，一是為簡化頁面的結(jié)構(gòu)，便于用戶功能瀏覽選擇，二是要實現(xiàn)子頁面的及時載入及移除，提高前臺部分的系統(tǒng)權(quán)限控制，提高用戶在各個頁面切換的速度。圖2為頁面設(shè)計視圖。

圖2

三、結(jié)語

綜上所述，基于HTML5新特性能夠降低瀏覽器插件的需求，從而提高了網(wǎng)絡(luò)應(yīng)用的實現(xiàn)效果，在網(wǎng)頁上展現(xiàn)更多的媒體元素，并且以優(yōu)質(zhì)的響應(yīng)機制提高頁面的響應(yīng)速度，所以基于HTML5新特性對Web富客戶端網(wǎng)頁設(shè)計，可以提高Web富客戶端網(wǎng)頁的功能展現(xiàn)，為用戶提供更為優(yōu)質(zhì)的體現(xiàn)與服務(wù)。