CN101146098A

CN101146098A - 一种基于网络脚本语言的页面布局方法

Info

Publication number: CN101146098A
Application number: CNA2007100537346A
Authority: CN
Inventors: 李亮; 胡志勇; 魏三川
Original assignee: HONGXU INFORMATION TECHNOLOGY Co Ltd WUHAN
Current assignee: HONGXU INFORMATION TECHNOLOGY Co Ltd WUHAN
Priority date: 2007-11-01
Filing date: 2007-11-01
Publication date: 2008-03-19

Abstract

一种基于网络脚本语言的页面布局方法，其特征在于：页面布局引入参照物和网络脚本语言进行布局；参照物是页面组件，或是非页面组件；页面组件由页面语言标识，页面组件的样式由页面样式语言标识；页面非参照物组件根据浏览区尺寸和布局规则计算出各自的实际布局位置，并做出相应调整；页面非参照物组件位置调整使用网络脚本语言实现。本发明通过引入参照物和网络脚本语言实现页面的灵活布局，并可自适应不同分辨率的屏幕，尤其是重新设计布局时，修改更加简单。

Description

一种基于网络脚本语言的页面布局方法

技术领域

本发明属于计算机、通信领域，具体涉及一种基于网络脚本语言的页面布局方法。

背景技术

近年来，随着网络技术不断发展，尤其是基于Web的信息发布和检索技术、Java计算技术以及网络分布式对象技术的飞速发展，导致了很多应用系统的体系结构从C/S结构(Client/Server的简称，客户机/服务器模式)向更加灵活的多级分布结构演变，使得软件系统的网络体系结构跨入一个新阶段，即B/S体系结构(Browser/Server的简称，浏览器/服务器模式)。这样客户任何时间、任何地点、任何系统，只要可以使用浏览器上网，就可以使用B/S系统的终端。

早期的网页布局技术主要使用Table方式，存在如下问题：

1).把格式数据混入内容中。

2).这使得文件的大小无谓地变大。

3).重新设计现有页面的布局极为消耗劳力，且昂贵。

4).当显示屏分辨率变化时，影响页面的布局效果。

5).设计非常规布局比常规布局(如：T型布局、口型布局、三型布局等)要困难的多。

目前比较流行的DIV+CSS抽象设计，一定程序的解决了上述问题，但是仍然存在以下一些问题：

1).当显示屏分辨率变化时，影响页面的布局效果。

2).设计非常规布局比常规布局(如：T型布局、口型布局、三型布局等)要困难的多。

3).重新更换现有的页面布局，需要对CSS文件做较大的修改和计算，尤其是采用绝对定位方式。

发明内容

本发明目的在于克服上述方法的不足，提出一种基于网络脚本语言的页面布局方法，通过引入参照物和网络脚本语言实现页面的灵活布局，并可自适应不同分辨率的屏幕，尤其是重新设计布局时，修改更加简单。

本发明的技术方案是：一种基于网络脚本语言的页面布局方法，其特征在于：页面布局引入参照物和网络脚本语言进行布局；参照物是页面组件，或是非页面组件，比如浏览区中心点、浏览区左上角等；

页面组件由页面语言标识，比如在HTML3.2中，可以使用div进行标识；页面组件的样式由页面样式语言标识，比如在HTML语言中，使用CSS进行标识；

页面非参照物组件根据浏览区尺寸和布局规则计算出各自的实际布局位置，并做出相应调整；页面非参照物组件位置调整使用网络脚本语言实现。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：页面布局时需要选定1个或者多个参照物。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：页面中参照物组件是显示出来的，或者隐藏。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：页面中参照物组件的位置是绝对位置，或者是相对位置。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：布局规则根据页面布局需要进行设计，不是一成不变的，比如按圆分布、按扇形分布、按正八边形分布等。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：根据布局规则在页面中增加绘制一些辅助标识以标识关联关系，比如在组件间绘制连线，辅助标识的绘制使用网络脚本语言实现；通过网络脚本语言标识出关联关系时，采用调整后的组件位置信息。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：页面非参照物组件调整自己的实际布局位置是自动完成方式，或是响应用户操作方式，比如鼠标单击等。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：页面非参照物组件调整自己的实际布局位置采用自动完成方式时，调整过程应在浏览区显示页面之前。

如上所述的基于网络脚本语言的页面布局方法，其特征在于：网页组件自动布局的流程如下：

1).浏览器根据输入的页面URL开始装载页面；

2).使用网络脚本语言获取浏览器最大化时浏览区大小；

3).使用网络脚本语言计算出参照物组件的位置信息；

4).使用网络脚本语言根据浏览区尺寸和布局规则计算出页面非参照物组件的位置；

5).使用网络脚本语言修改页面非参照物组件的位置；

6).浏览器在浏览区中显示页面。

有益效果

本发明的有益效果是，利用本发明提出的页面布局方法，可以对页面中组件灵活布局，并可自适应不同分辨率的屏幕，尤其是重新设计布局时，修改更加简单。

附图说明

图1为本发明实施例的页面布局示意图。

图2为本发明实施例的网页组件自动布局示意流程图。

图3为本发明实施例的网页组件自动布局实例图。

具体实施方式

本发明的实施例如图1所示，其中浏览器1，页面2，参照物组件3，非参照物组件4。

页面2显示在浏览器1的浏览区，页面2中的组件根据参照物方式进行位置调整。非参照物组件4根据参照物组件3的位置进行位置调整，在本例图中，参照物组件3的位置为页面内容中央，布局规则是非参照物组件4分布在参照物组件3的圆周围，间隔为45度，圆半径为浏览区尺寸值中较小值的一半。

例如：

1).屏幕分别率大小为1024×768；

2).浏览区尺寸为1004×620

3).布局规则中圆半径为：310。

如图2所示，网页组件自动布局示意流程图。

1)浏览器根据输入的页面URL开始装载页面；

2)使用网络脚本语言获取浏览器最大化时浏览区大小；

3)使用网络脚本语言计算出参照物组件的位置信息；

4)使用网络脚本语言根据浏览区尺寸和布局规则计算出页面非参照物组件的位置；

5)使用网络脚本语言修改页面非参照物组件的位置；

6)浏览器在浏览区中显示页面。

例如：在Internet Exporer6.0中显示九个图片A和B1、B2、B3、B4、B5、B6、B7、B8，A图片位于浏览区中央，B1、B2、B3、B4、B5、B6、B7、B8以圆方式分布在A图片的周围，偏转角度分别是0°、45°、90°、135°、180°、225°、270°、315°、并且A图片和B1、B2、B3、B4、B5、B6、B7、B8图片分别通过一条连线动态连接。采用HTML和javascript语言的实现过程如下：

1).在html页面的<body></body>正文增加如下内容

<tr>

<！—增加图片A-->

</tr>

</table>

</div>

<tr>

<！—增加图片B1-->

</tr>

</table>

</div>

<tr>

<！—增加图片B2-->

</tr>

</table>

</div>

<tr>

<！—增加图片B3-->

</tr>

</table>

</div>

<tr>

<！—增加图片B4-->

</tr>

</table>

</div>

<tr>

<！—增加图片B5-->

</tr>

</table>

</div>

<tr>

<！—增加图片B6-->

</tr>

</table>

</div>

<tr>

<！—增加图片B7-->

</tr>

</table>

</div>

<tr>

<！—增加图片B8-->

</tr>

</table>

</div>

value＝″Maximize″></object>

2).编写获取组件左上角X坐标的函数，示例代码如下：

function getLeftPos(cell)

{

varpos；

varl＝cell.offsetLeft；

while(cell＝cell.offsetParent)

{

l+＝cell.offsetLeft；

}

pos＝l；

return pos；

}

</SCRIPT>

3).编写获取组件左上角Y坐标的函数，示例代码如下：

function getTopPos(cell)

{

var pos T；

vart＝cell.offsetTop；

while(cell＝cell.offsetParent)

{

t+＝cell.offsetTop；

}

posT＝t；

return posT；

}

</SCRIPT>

4).编写画线代码，示例代码如下：

<STYLE>

v\：＊{behavior：url(#default#VML)；}/＊声明V为VML变量＊/

</STYLE>

function drawLine(fromX，from Y，toX，toY)

{

var strElement＝″<v：Line id＝′line_″+fromX+″_″+fromY+″_″+toX+″_″+toY+″′from＝′″+fromX+″，″+

fromY+″′to＝″′+toX+″，″+toY+″′strokecolor＝′black′></v：Line>″；

var newPoint＝document.createElement(strElement)；

document.getElementById(″map″).appendChild(newPoint)；

}

</SCRIPT>

5).编写组件位置修改的代码，示例代码如下：

<SCRIPTlanguage＝″javascript″>

function modifyLocation(cell，num)

{

var radius＝Math.min(document.body.clientWidth/2-60，document.body.clientHeight/2-60)；

var fromX，fromY，toX，toY；

cell.style.left＝getLeftPos(Layer1)+radius＊Math.sin(2＊Math.PI/8＊uum)；

cell.style.top＝+getTopPos(Layer1)+radius＊Math.cos(2＊Math.PI/8＊num)；

fromX＝getLeftPos(Layer1)+Layer1.clientWidth/2；

fromY＝getTopPos(Layer1)+Layer1.clientHeight/2；

toX＝getLeftPos(cell)+cell.clientWidth/2；

toY＝getTopPos(cell)+cell.clientHeight/2；

drawLine(fromX，fromY，toX，toY)；

}

</SCRIPT>

6).编写动态布局的代码，示例代码如下：

function layout()

{

//将屏幕置于最大化状态

if(document.body.offsetWidth！＝window.screen.availWidth)

{

max.Click()；

}

map.style.left＝0；

map.style.top＝0；

map.style.width＝document.body.clientWidth；

map.style.height＝document.body.clientHeight；

Layer1.style.left＝document.body.clientWidth/2-Layer1.clientWidth/2；；

Layer1.style.top＝document.body.clientHeight/2-Layer1.clientHeight/2；

modifyLocation(Layer2，1)；

modifyLocation(Layer3，2)；

modifyLocation(Layer4，3)；

modifyLocation(Layer5，4)；

modifyLocation(Layer6，5)；

modifyLocation(Layer7，6)；

modifyLocation(Layer8，7)；

modifyLocation(Layer9，8)；

</SCRIPT>

7).在页面加载时进行动态布局，示例代码如下：

本发明的基于网络脚本语言的页面布局方法，页面布局时需要选定1个或者多个参照物；页面中参照物组件是显示出来的，或者隐藏；页面中参照物组件的位置是绝对位置，或者是相对位置；布局规则根据页面布局需要进行设计，不是一成不变的，比如按圆分布、按扇形分布、按正八边形分布等；根据布局规则在页面中增加绘制一些辅助标识以标识关联关系，比如在组件间绘制连线，辅助标识的绘制使用网络脚本语言实现；通过网络脚本语言标识出关联关系时，采用调整后的组件位置信息。

本发明的基于网络脚本语言的页面布局方法，其页面非参照物组件调整自己的实际布局位置可以是自动完成方式，也可以是响应用户操作方式，比如鼠标单击等。

页面非参照物组件调整自己的实际布局位置采用自动完成方式时，调整过程应在浏览区显示页面之前。

通过引入参照物和网络脚本语言进行页面布局，对页面中组件灵活布局，并可自适应不同分辨率的屏幕。

虽然通过实施例子描述了本发明，本领域普通技术人员知道，本发明有许多变形和变化而不脱离本发明的精神，希望所附的权利要求包括这些变形和变化而不脱离本发明的精神。

Claims

1.一种基于网络脚本语言的页面布局方法，其特征在于：页面布局引入参照物和网络脚本语言进行布局；参照物是页面组件，或是非页面组件；

页面组件由页面语言标识，页面组件的样式由页面样式语言标识；

2.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：页面布局时需要选定1个或者多个参照物。

3.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：页面中参照物组件是显示出来的，或者是隐藏的。

4.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：页面中参照物组件的位置是绝对位置，或者是相对位置。

5.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：布局规则根据页面布局需要进行设计，可以是圆分布、扇形分布或正八边形分布。

6.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：根据布局规则在页面中增加绘制一些辅助标识以标识关联关系，辅助标识的绘制使用网络脚本语言实现；通过网络脚本语言标识出关联关系时，采用调整后的组件位置信息。

7.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：页面非参照物组件调整自己的实际布局位置是自动完成方式，或是响应用户操作方式。

8.如权利要求1所述的基于网络脚本语言的页面布局方法，其特征在于：页面非参照物组件调整自己的实际布局位置采用自动完成方式时，调整过程应在浏览区显示页面之前。

9.如权利要求1或7或8所述的基于网络脚本语言的页面布局方法，其特征在于网页组件自动布局的流程如下：

1).浏览器根据输入的页面URL开始装载页面；

2).使用网络脚本语言获取浏览器最大化时浏览区大小；

3).使用网络脚本语言计算出参照物组件的位置信息；

5).使用网络脚本语言修改页面非参照物组件的位置；

6).浏览器在浏览区中显示页面。