基于HTML5的Web富客戶端網頁設計方法

□魏巍巍

基于HTML5的新特性設計Web富客戶端網頁，需要從網頁整體框架以及服務功能等等入手，整體規劃Web富客戶端網頁的表現內容以及媒體元素，以Web富客戶端網頁設計方案構建入手，實現Web富客戶端網頁設計的展現。本文將基于HTML5新特性，結合對Web富客戶端網頁設計需求的研究，探究如何應用HTML5實現Web富客戶端網頁設計，拓展Web富客戶端網頁內容以及加快響應速度，給予用戶優質的體驗與服務。

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

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

二、基于HTML5的Web富客戶端網頁設計探討

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

圖1

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

圖2

三、結語

綜上所述，基于HTML5新特性能夠降低瀏覽器插件的需求，從而提高了網絡應用的實現效果，在網頁上展現更多的媒體元素，并且以優質的響應機制提高頁面的響應速度，所以基于HTML5新特性對Web富客戶端網頁設計，可以提高Web富客戶端網頁的功能展現，為用戶提供更為優質的體現與服務。