[发明专利]一种WEB页面布局的方法及系统

说明书

技术领域

本发明涉及页面显示技术，尤其是一种页面布局的方法及系统。 

背景技术

一个Web页面是由很多个HTML元素构成的，每个HTML元素展示在计算机屏幕上时，都具有一个实际的物理尺寸，默认以像素(px)为单位。 

在任何系统中，页面布局都是一项重要的技术，好的布局可以使系统的界面组织的更加合理，在Web系统中，通常使用面板方式来组织布局，所述面板可以是一个层(DIV)，也可以是一个表格(TABLE)等具有规则形状(通常为矩形)的元素，通过制这些元素的尺寸来调整页面的布局。并且，制定元素尺寸的方式包括绝对尺寸或者百分比尺寸。 

所谓绝对尺寸是指为元素的宽度或高度指定一个绝对的值。如图1所示，对于左边的标题部分，可以指定为“宽度＝80px”，右边的输入框部分可以指定为“宽度＝200px”。 

对于绝对尺寸而言，由于左边标题指定宽度为80px，右边输入框部分指定宽度为200px，因此，不论浏览器窗口如何改变大小，页面中元素始终是不动的，其变化结果如图2所示。 

所谓百分比尺寸是指为页面中元素指定相对于元素父容器的百分比尺寸。如图3所示，该示例中以整个页面作为父容器，将左边的标题部分宽度指定为30％，右边的输入框部分指定为70％，那么，随着窗口的变化，页面元素也将根据百分比的规则发生变化，其变化结果如图4所示。 

图5示出了一种典型应用中的页面，整个页面基本分为上中下三个元素，分别是：查询条件区、查询结果展示区、命令按钮区。由于“查询条件区”和“命令按钮区”，所包含的内容是固定的；对于“查询结果展示区域”，所包含的内容是动态的，是根据查询条件查询出来的结果集，取决于数据库中 的记录数。 

对于该页面而言，本领域技术人员期望，无论浏览器窗口如何变化，查询条件区和命令按钮区两部分的高度都固定(例如检索条件区高度为80px，命令按钮区高度为25px)，并且中间的查询结果展示区域尽量充满页面所显示的剩余空间。具体的，上述需求具体可理解为：查询条件区尺寸固定；查询结果展示区域的上边缘紧贴查询条件区的下边缘；查询结果展示区域的下边缘紧贴命令按钮区的上边缘；命令按钮区的下边缘紧贴页面底部且尺寸固定。 

发明人发现，对于上述需求，采用绝对尺寸的方式可以实现对查询条件区和命令按钮区的布局要求，即该两个区域的尺寸固定不变。 

然而，对于查询结果展示区域而言，如果采用绝对尺寸的方式进行布局，则无论窗口尺寸如何变化，查询结果展示区域的尺寸都不会发生变化，不能实现恰好填充所述剩余空间的目的；另一方面，如果采用百分比尺寸进行布局的方式将查询结果展示区域百分比设置为100％，则按照现有技术中浏览器解释百分比布局的原则，“查询结果展示区域”的高度，将会被翻译为整个页面的高度；进而，无论怎样调整窗口大小，“查询条件区尺寸与查询结果展示区域尺寸的和将超过浏览器窗口的尺寸，从而使得命令按钮区会被挤压到页面显示的窗口之外，并且整个页面都将会有一条滚动条。 

综上所述，采用现有的页面布局方法无法满足图5所示页面的需求。 

发明内容

本发明实施例目的在于提供一种WEB页面布局方法。 

本发明目的是通过以下实施例实现的。一种HTML语言形成的Web页面中矩形页面元素布局方法，包括：获取页面布局命令，计算父容器绝对尺寸；遍历所述父容器中的元素，获取具有第一标识的元素绝对尺寸的和；获取所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和的差值；按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面； 

所述获取具有第一标识的元素绝对尺寸包括： 

首先在HTML元素中增加自定义属性，采用一定的标识予以标记，将元素分为具有第一标识的元素和具有第二标识的元素； 

根据元素的自定义属性的标识，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的绝对值；或者， 

获取具有第一标识的元素的属性，获取所述属性中元素尺寸的百分比值，计算所述百分比与所述父容器的绝对尺寸的积，得到绝对值。 

本发明实施例另一目的在于提供一种HTML语言形成的WEB页面中矩形页面元素布局系统。