網頁頁面布局動態生成方法

馮燕　博瑨

摘 要 網頁頁面布局動態生成方法，實質是解決系統網頁頁面針對不同用戶在同一系統模塊頁面中所需展現的網頁頁面內容及側重點不同，為系統的網頁頁面展示增加了靈活性、可配置性，使得不同用戶可根據自身需求選擇頁面顯示內容并拖拽出所需顯示區域的位置和范圍。

關鍵詞 網頁；頁面布局；可配置

中圖分類號 TP2 文獻標識碼 A 文章編號 2095-6363（2017）11-0141-02

值班信息系統主要是解決各級值班數據的錄入和顯示，由于不同節點對值班數據的需求不同，甚至系統同一頁面的數據顯示需求也可能不盡相同，這就要求系統對同一頁面顯示具備多樣性。為滿足各級節點的不同需求和個性化展示，要求系統數據展現具備靈活性，并且用戶可自行配置網頁頁面布局。傳統網頁頁面布局方式需要對各個應用場景由編程人員專門定制頁面布局樣式，這將是一個龐大的工作量，同時可能由于編程人員對于不同應用場景的需求并不是十分明確，導致頁面布局樣式需反復修改。為實現各級節點根據權限不同、需求不同，可對系統頁面布局進行動態配置，要求研制一種網頁頁面布局動態配置方法。

將系統將網頁布局的處理、展現與存儲進行分離，用戶通過配置界面配置父模塊對應的子模塊以及各子模塊展示的區域位置及范圍，系統換算并存儲用戶在頁面配置界所配置和拖拽出的區域參數，系統讀取并換算父模塊所對應各子模塊的位置、區域參數展現于相應的網頁頁面。實現了網頁頁面布局的編輯、網頁頁面顯示等上層應用展示與頁面布局數據存儲的分離與對應關系，從而實現各級節點網頁頁面布局的靈活擴展，以及各網頁頁面布局的個性化定制[1]。

在網頁頁面布局動態顯示與管理中使用抽象技術、封裝技術等將對頁面布局的操作分解為強內聚、松耦合的功能模塊。對各類不同的網頁頁面排版數據，通過提取、換算、分類以及通用的網頁前臺代碼，個性化展現網頁頁面，同時達到網頁頁面自適應性。

1 具體實現步驟

1.1 建立用于存儲網頁頁面布局的數據庫表

為滿足網頁頁面布局的多樣性、不確定性要求，同時也為了增加網頁頁面布局的可擴展性，設計網頁頁面布局的數據結構如表1所示。

具體步驟：建立數據結構。節點內碼和部位號：確保了各級節點各部位頁面布局的唯一性。模塊號：系統頁面二級菜單唯一標識。CSSID：頁面布局編輯模塊區域的唯一標識。CSS名稱：頁面布局編輯模塊區域的名稱。TOP和LEFT：標記區域位置，以“%”為單位。WIDTH和HEIGHT：標記區域大小，以“%”為單位。

1.2 創建網頁頁面布局配置界面

具體步驟1：創建網頁頁面布局配置界面的工具欄。頁面布局下拉列表——系統頁面的一級菜單（父模塊名）；增加——為該界面增加排版區域；保存——保存該排版數據于數據庫；微調——點擊后展開，用戶可以通過選擇區域下拉列表中的區域，從而對指定區域的“X、Y、寬、高”進行微調。微調中數字單位是像素，網頁頁面布局配置界面是以彈出框的形式展現。

具體步驟2：創建網頁頁面布局配置界面的區域框。區域框的第一行分別是區域名和區域刪除按鈕。區域框的第二行為該區域工具欄：菜單下拉列表——為該區域添加二級菜單（子模塊名稱），選中后該區域內會增加所選中的二級菜單名稱；刪除——點擊具體要刪除的二級菜單，該區域中的刪除鍵顯示可用，用于刪除該區域中的二級菜單。

網頁頁面布局配置界面操作流程：頁面布局下拉列表中選擇要配置的一級菜單，系統默認對該一級菜單下的二級菜單分別創建對應區域。用戶可以通過鼠標拖拽區域的位置和大小，也可以通過微調對指定區域的位置和大小進行細微調節。用戶可以刪除指定區域或增加新區域。同時可對某一區域指定二級菜單或刪除二級菜單。配置完成后點擊保存。

1.3 排版數據錄入數據庫

存儲用戶在頁面配置界面對頁面各區域大小、區域位置、區域包含菜單的設定。讀取頁面區域大小（WIDTH和HEIGHT）、區域位置（LEFT和TOP）、區域所包含的二級菜單號（子模塊號）、區域ID（CSSID）、區域名稱（CSS名稱）、節點內碼、部位號；根據頁面布局配置界面尺寸和已讀取的區域大小、區域位置尺寸，換算后得到WIDTH、HEIGHT、LEFT和TOP，（單位為“%”，為了前臺頁面更好的自適應屏幕）；錄入數據庫。

1.4 網頁頁面顯示

為滿足網頁頁面展現的自適應性、可定制性要求，同時也為了增加網頁頁面布局的可擴展性，前臺頁面排版和數據顯示。根據數據庫存儲的頁面布局數據格式，編寫通用型網頁前臺代碼：根據網頁頁面的一級菜單讀取所對應的二級菜單，從而讀取該一級菜單網頁頁面下的排版數據；為滿足網頁頁面展現對屏幕尺寸的自適應性，首先讀取當前屏幕尺寸（單位為像素），根據數據庫中讀取的網頁頁面排版數據WIDTH、HEIGHT、LEFT和TOP，換算出在當前屏幕中各區域的WIDTH、HEIGHT、LEFT和TOP（單位為像素）。

當該一級菜單網頁頁面下二級菜單的區域ID出現相同時，利用TAB頁切換二級菜單的顯隱。讀取具體區域中二級菜單對應的三級菜單，換算出三級菜單數據顯示區（若無三級菜單，該區域整體為二級菜單數據顯示區）。由于系統的特殊性，大多數數據都以文字或數字形式展現，為確保每行數據顯示自適應顯示器尺寸[2]，不會因屏幕尺寸過大或過小出現不合理的數據顯示布局，規定了顯示每行數據的像素高度。根據三級菜單（或二級菜單）數據顯示區尺寸換算出該菜單下顯示最新數據的數量。

2 結論

網頁頁面布局動態生成方法用于網頁頁面布局的動態配置與展現中，在頁面配置管理中使用抽象技術、封裝技術等，編寫通用性網頁頁面布局代碼，通過配置界面個性化展示網頁頁面。使網頁頁面布局具有可擴展性，大大提高了系統網頁的適用范圍。將應用層和數據庫存儲分離開來處理的方法，大大減少網頁頁面布局交互、編寫和修改的工作量。對于前端網頁頁面展現進行自適應處理，確保了網頁頁面自適應不同尺寸的顯示屏。

參考文獻

[1]雷燁.運用DIV+CSS技術對網頁進行布局[J].電腦知識與技術，2016，12（7）：212-213.

[2]宗士強.基于虛擬視圖的網絡化數據共享[J].指揮信息系統與技術，2012，3（5）：74-77.

[3]馮興利，洪丹丹，羅軍鋒，等.自適應網頁設計中的關鍵技術[J].計算機應用，2016，36（s1）：249-251.