基于HTML5的新特性設計Web富客戶(hù)端網(wǎng)頁(yè), 需要從網(wǎng)頁(yè)整體框架以及服務(wù)功能等等入手, 整體規劃Web富客戶(hù)端網(wǎng)頁(yè)的表現內容以及媒體元素, 以Web富客戶(hù)端網(wǎng)頁(yè)設計方案構建入手, 實(shí)現Web富客戶(hù)端網(wǎng)頁(yè)設計的展現。本文將基于HTML5新特性, 結合對Web富客戶(hù)端網(wǎng)頁(yè)設計需求的研究, 探究如何應用HTML5實(shí)現Web富客戶(hù)端網(wǎng)頁(yè)設計, 拓展Web富客戶(hù)端網(wǎng)頁(yè)內容以及加快響應速度, 給予用戶(hù)優(yōu)質(zhì)的體驗與服務(wù)。
一、HTML5新特性闡述及簡(jiǎn)要分析
HTML5設計的研究目的在于支持多媒體在移動(dòng)設備上的訪(fǎng)問(wèn), 通過(guò)改變用戶(hù)與文檔的交互方式, 利用新語(yǔ)法特征簡(jiǎn)化編程工作, 為Web程序在各大設備及應用程序上的訪(fǎng)問(wèn)提供優(yōu)質(zhì)的平臺, 對比之前的HTML版本能夠更快、更簡(jiǎn)潔地實(shí)現移動(dòng)終端上的訪(fǎng)問(wèn), 并且還具備了更多的新特性:一是標記語(yǔ)言新標準, 通過(guò)更新標記語(yǔ)言以及附屬標準, 簡(jiǎn)化了編程工作, 尤其是訪(fǎng)問(wèn)和操作HTML文檔結構以及用于定義HTML文檔的外觀(guān)和呈現方式、Java Script腳本語(yǔ)言大大簡(jiǎn)化了用戶(hù)訪(fǎng)問(wèn)的中間過(guò)程, 加快移動(dòng)終端在網(wǎng)頁(yè)或者是多媒體上的訪(fǎng)問(wèn);二是富Web的實(shí)現, HTML5能夠在富應用上實(shí)現新API, 從而在網(wǎng)頁(yè)上展現出更多的媒體元素, 例如圖形、動(dòng)畫(huà)、多媒體, 不需要利用Flash等各類(lèi)插件就能夠實(shí)現這些功能, 所以大大提高了網(wǎng)站安全, 并且拓展了受眾范圍, 尤其是HTML5中的audio和video為媒體嵌入降低了門(mén)檻, 從而提高了瀏覽器廠(chǎng)商的自主開(kāi)放層面, 實(shí)現了瀏覽器的多樣媒體展現以及自主設計;三是結構更為優(yōu)化, HTML5引入的新元素能夠簡(jiǎn)化網(wǎng)頁(yè)構建, 利用一整套新元素可以使得標題元素聯(lián)合使用過(guò)程中, 以使用標題級別標記嵌套章節形式進(jìn)行展現, 這樣一來(lái)就能夠優(yōu)化網(wǎng)頁(yè)的構建結構, 使得網(wǎng)頁(yè)設計更加簡(jiǎn)潔以及個(gè)性化, 能夠滿(mǎn)足各個(gè)企業(yè)或者是用戶(hù)對網(wǎng)頁(yè)設計的開(kāi)發(fā)需求;四是設備兼容特性, HTML5能夠為網(wǎng)頁(yè)應用提供能多的優(yōu)化選擇, 在體驗功能上占據絕對的優(yōu)勢, 可以通過(guò)數據與應用接入的開(kāi)放結構, 實(shí)現外部應用與瀏覽器內部數據的連接, 在提高瀏覽器運行效果的同時(shí), 也降低了設備之間的兼容沖突, 為用戶(hù)提供更優(yōu)質(zhì)的體驗;五是連接特性, HTML5具有更快的連接速度, 其連接工作的效率更高, 能夠在實(shí)現頁(yè)面實(shí)施聊天的同時(shí)提供更快速的網(wǎng)頁(yè)游戲體驗, 使得在線(xiàn)交流與其他活動(dòng)同步進(jìn)行, 并且在不影響服務(wù)器推送的情況下, 可以將服務(wù)器數據直接推動(dòng)到客戶(hù)端上, 從而實(shí)現更為快速、優(yōu)質(zhì)的服務(wù)。
二、基于HTML5的Web富客戶(hù)端網(wǎng)頁(yè)設計探討
現階段Web程序界面的開(kāi)放模式為單頁(yè)面以及多頁(yè)面, 對于Web富客戶(hù)端網(wǎng)頁(yè)而言, 從用戶(hù)操作以及維護開(kāi)發(fā)角度而言, 基于HTML5的Web富客戶(hù)端頁(yè)面開(kāi)放應該選用單頁(yè)面, 從而為用戶(hù)提供更為簡(jiǎn)單的操作以及開(kāi)發(fā)維護服務(wù)。單頁(yè)面開(kāi)發(fā)模式可以利用彈出層實(shí)現增添或者是修改操作, 比起多頁(yè)面應用的頁(yè)面挑戰而言, 可以更快速、簡(jiǎn)潔地完成各項操作, 降低操作的復雜性, 提高友好度;再者單頁(yè)面模式能夠便于開(kāi)發(fā)及維護, 多個(gè)區域的功能進(jìn)行更新以及避免區域功能受到子頁(yè)面過(guò)多的影響出現假死狀態(tài), 不利于用戶(hù)操作。
Web富客戶(hù)端網(wǎng)頁(yè)一共有七個(gè)區域功能:一是客戶(hù)和登錄用戶(hù)信息區, 有上下兩部分組成, 上部分主要是用文字或者是圖片展示系統中的客戶(hù)信息, 下部分則是對用戶(hù)登錄的歡迎信息, HTML5在這部分主要是利用其富Web的實(shí)現特性, 將動(dòng)畫(huà)、文字以及圖片, 通過(guò)網(wǎng)頁(yè)結構的革新, 優(yōu)質(zhì)內容表現;二是系統標題欄區, HTML5中的一整套新元素可以實(shí)現標題聯(lián)合使用, 利用標題級別標記嵌套章節設置區域的內容, 可以通過(guò)與audio和video調整實(shí)現其動(dòng)靜態(tài)之間的標題轉變;三是報警信息顯示區, 可以自由配置文字、滾動(dòng)速度以及顯示條數;四是常用功能區, 主要是用于密碼修改、用戶(hù)注銷(xiāo)或者是主題切換;五是組織機構樹(shù)形菜單區, 主要是通過(guò)各級部門(mén)之間的所屬關(guān)系以及功能, 將部門(mén)以樹(shù)形的方式展現, 便于用戶(hù)信息查詢(xún)以及功能了解, 對用戶(hù)所屬部門(mén)進(jìn)行詳細解釋;六是主菜單以及二級菜單, 基于HTML5的Web富客戶(hù)端網(wǎng)頁(yè)設計中選擇時(shí)的Tab菜單模式, 針對系統的各個(gè)模塊設置Tab菜單項, 將各個(gè)操作作為每個(gè)Tab項的二級菜單, 通過(guò)工具欄對子模塊的頁(yè)面操作進(jìn)行集中, 這樣就能夠在每個(gè)二級菜單點(diǎn)擊過(guò)程中, 打開(kāi)相應的子模塊頁(yè)面, 便于用戶(hù)進(jìn)行選擇、操作;七是應用區的設計, 是基于HTML5的Web富客戶(hù)端網(wǎng)頁(yè)設計的重點(diǎn), 本身應用器是系統子模塊的功能展示操作區, 所以在設計中需要將單獨的HTML頁(yè)面與浮動(dòng)框架進(jìn)行綁定, 點(diǎn)擊不同的子模塊除卻移除上一個(gè)子模塊的浮動(dòng)框架以外, 還要顯示本身的子模塊的浮動(dòng)框架, 一是避免一個(gè)主頁(yè)面掛靠多個(gè)子頁(yè)面, 二是提高系統常用功能體現速度以及效果, 三是要實(shí)現這三個(gè)功能的優(yōu)化服務(wù):頂部面板中要包括常用功能以及報警信息顯示區;左部部門(mén)樹(shù)面板要實(shí)現上下級部門(mén)節點(diǎn)的聯(lián)動(dòng), 為用戶(hù)提供全面的信息搜索以及選擇模型;Tab菜單面板的要展現主菜單欄、副菜單欄以及客戶(hù)區, 一是為簡(jiǎn)化頁(yè)面的結構, 便于用戶(hù)功能瀏覽選擇, 二是要實(shí)現子頁(yè)面的及時(shí)載入及移除, 提高前臺部分的系統權限控制, 提高用戶(hù)在各個(gè)頁(yè)面切換的速度。
綜上所述, 基于HTML5新特性能夠降低瀏覽器插件的需求, 從而提高了網(wǎng)絡(luò )應用的實(shí)現效果, 在網(wǎng)頁(yè)上展現更多的媒體元素, 并且以?xún)?yōu)質(zhì)的響應機制提高頁(yè)面的響應速度, 所以基于HTML5新特性對Web富客戶(hù)端網(wǎng)頁(yè)設計, 可以提高Web富客戶(hù)端網(wǎng)頁(yè)的功能展現, 為用戶(hù)提供更為優(yōu)質(zhì)的體現與服務(wù)。