网页页面布局动态生成方法

冯燕　博瑨

摘 要 网页页面布局动态生成方法，实质是解决系统网页页面针对不同用户在同一系统模块页面中所需展现的网页页面内容及侧重點不同，为系统的网页页面展示增加了灵活性、可配置性，使得不同用户可根据自身需求选择页面显示内容并拖拽出所需显示区域的位置和范围。

关键词 网页；页面布局；可配置

中图分类号 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.