CN101894168A - 移动终端网页页面的排版显示方法及系统 - Google Patents

Abstract

本发明提供一种移动终端网页页面的排版显示方法及系统，其中的方法包括：把网页按照预定规则划分为多个包含网页元素控件的版面；记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标；根据版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标；移动终端根据所述版面和网页元素控件的绝对坐标调取网页数据进行显示。本发明使用数量上相对远少于网页元素控件的版面作为查找网页元素控件的索引，对庞大的网页数据进行重新排版布局，从而能够使得网页在移动终端进行较为快速的优化显示，进而提高用户通过移动终端进行上网操作的体验。

Description

移动终端网页页面的排版显示方法及系统

技术领域

本发明涉及网页浏览技术领域，具体地说，涉及一种利用layout排版元素进行移动终端网页页面的排版显示方法及系统。

背景技术

在网络信息技术日益发展的今天，通过网络进行信息发布、查询等操作成为信息交流的重要方式。而随着硬件技术的发展以及手机的普及应用，手机上网正变成这个时代的潮流。比如，日本最大的社交网络Mixi，在一年多前通过手机上网的人仅仅10％，一年后通过手机上这家网站的人已经超过了60％。这种趋势也正在国内发生，2008年7月份，中国互联网信息中心发布的一份报告显示，仅在2008年上半年，使用手机上网的网民数量增长了2265万人。

因为手机的方便快捷，而且使用手机上网可以不受硬件等设备以及时间、地点等的限制，人们也越来越喜欢用手机看新闻、看天气以及查询股票。用户在上网过程中，经常需要通过浏览器执行上、下、左、右翻页、移动等操作，从而实现对网页元素控件查找、定位，其中使用的最关键的工具就是浏览器。不同的手机浏览器有不同的兼容性和浏览体验，使用不同浏览器上网所消耗的GPRS流量也不相同，各种浏览器虽然功能不仅相同，也各有千秋，但基本上都涵盖了网页浏览、搜索、查询、下载以及很多个性化的功能，大多数浏览器还与有关服务商合作推出手机视频功能，可以收看到CCTV、省市区的上星卫视、凤凰台等在线电视节目，与家庭电视基本同步播出，此外浏览器中还有很多录像资料可选。但是对于通过移动终端进行网页信息浏览的用户来说，由于所浏览的网页往往比较大，而手机由于其本身的显示范围、数据处理能力以及网络接入带宽等的限制，内存往往不大，或者网速缓慢影响上网效果。通过网页的压缩虽然能够在一定程度上解决手机内存小以及网速慢的缺陷，但是压缩网页的同时，也带来了网页扭曲比较厉害的弱点，被压缩的网页，大多不如正常的电脑浏览网页那么自如，页面也不显美观。

因此，对于通过手机进行网页浏览来说，调整网页内部设置、选择合适的字体等对网页进行重新排版显示成为网页浏览的重要前提。

发明内容

为了解决上述问题，本发明提供一种移动终端网页页面的排版显示方法，包括：

把网页按照预定规则划分为多个包含网页元素控件的版面；

记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标；

根据版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标；

移动终端根据所述版面和网页元素控件的绝对坐标调取网页数据进行显示。

此外，优选的方案是，所述被划分的多个版面按顺序存放在队列中，并且每一个版面均基于其索引值与其相邻的版面之间相关联。

此外，优选的方案是，通过为版面建立标签的方式来定位版面以及建立版面间的关联关系。

此外，优选的方案是，在将网页划分为多个版面之后，将当前版面的标签到下一个版面的标签之间的网页控件元素确定为属于当前版面的网页控件元素。

此外，优选的方案是，所述划分网页的规则包括：

按照网页中网页元素控件的底色不同划分版面；或者

按照网页中网页元素控件的不同对齐方式划分；或者

将网页上的所有网页元素控件进行平均划分；或者

通过网页上的折叠栏进行网页元素控件的划分；或者

通过网页上的表格结构对网页元素控件进行划分。

再者，优选的方案是，在记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值的过程中，当前版面上定点位置的绝对坐标根据上一版面定点位置的绝对坐标与上一版面或者当前版面的大小计算。

再者，优选的方案是，当选用版面的左上角位置为定点位置时，如果版面左上角位置的绝对坐标按照顺序依次为(X₁，Y₁)、(X₂，Y₂)、(X₃，Y₃)…(X_n，Y_n)，则对于适应屏幕浏览模式的排版来说，X₁＝X₂＝X₃＝…＝X_n，Y_n＝Y_n-1+H_n-1；对于缩放模式的排版来说，X_n＝X_n-1+W_n-1，Y_n＝Y_n-1+H_n-1；其中H_i表示第i个版面的纵向长度，W_i表示第i个版面的横向宽度，i＝1…n，n表示所划分的版面的个数。

再者，优选的方案是，在把网页按照预定规则划分为多个包含网页元素控件的版面的过程中，通过Layout来实现所述对网页的划分。

另一方面，本发明还提供一种移动终端网页页面的排版显示系统，包括：

版面划分单元，用于将服务提供商提供的网页按照预定规则划分为多个包含网页元素控件的版面；

索引数据库创建单元，用于在所述版面划分单元划分版面之后记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标；

网页元素控件定位单元，用于根据所述索引数据库创建单元所创建的索引数据库中记载的版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标；

显示单元，用于根据所述索引数据库创建单元所记录的版面的绝对坐标以及网页元素控件定位单元所计算出的网页元素控件的绝对坐标调取网页数据进行显示。

本发明适用于移动终端的网页浏览、媒体(音频、视频)播放、文件下载、用户交互和及时通信以及网络游戏等方面，本发明使用数量上相对远少于网页元素控件的版面作为查找网页元素控件的索引，对庞大的网页数据进行重新排版布局，从而能够使得网页在移动终端进行较为快速的优化显示并且便于用户浏览，较快的定位网页元素控件，进而提高用户通过移动终端进行上网操作的体验。

附图说明

通过下面结合附图对其实施例进行描述，本发明的上述特征和技术优点将会变得更加清楚和容易理解。

图1是表示本发明为网页元素控件建立索引的树状结构示意图；

图2是表示本发明移动终端网页页面的排版显示方法的流程图；

图3是表示本发明移动终端网页页面的排版显示系统的逻辑结构框图

具体实施方式

下面结合附图和具体实施例对本发明做进一步详细的描述。

为了解决通过移动终端上网过程中由于网页内容庞大而导致浏览效果差、浏览效率低的问题，本发明提供的移动终端网页页面的排版显示方法将网页按照预定顺序划分为多个版面，网页中的网页元素控件被包含在上述多个版面中，从而使用数量上相对远少于网页元素控件的版面作为定位网页元素控件的索引，提高网页元素控件定位效率，并通过这种方法对网页数据进行重新排版布局，从而能够使得网页在移动终端进行较为快速的显示并且便于用户浏览，进而提高用户通过移动终端进行上网操作的体验。

每个Web页面都是由一大堆的HTML元素组成的，我们把每对<element>...</element>这样的结构称为box，在Web页面的排版布局中，浏览器把这样的box作为排版的元素，这个box内是可以容纳很多其它的HTML标签的，但是不管它的内部有多少的TAGs，box都被我们看成是一个排版元素，比如：<div style＝″border：solid lpx blue″>abc</div>和<table><tr><td><span><i>abc</i></span></td></tr></table>就可以被看成是两个排版元素div和table(当然div和table的内部还可以继续细分子的box)。

图1是表示本发明为网页元素控件建立索引的树状结构图。如图1所示，本发明把网页按照一定的顺序划分为1个或N个以版面为基础的排版元素，并将被划分的多个版面按顺序存放在队列中，并且使每一个版面均与其相邻的版面之间相关联。每个排版元素均包含M个网页元素控件(其中N，M均为整数)，通过这种网页—版面—网页元素控件的结构重组，实现对网页数据进行重新排版布局，使得对网页上特定网页元素空间的定位能够通过排版元素快速实现，从而实现在移动终端上进行网页显示优化的目的。

在本发明的一个优选实施例中，采用Layout来实现对网页的划分。为了表述的方便，下面的实施例均以采用Layout划分网页为例来进行说明。但Layout并不是本发明必须要求使用的，也可以直接使用对版面进行数字定位和设置大小的方式来划分网页。

在进行版面划分之后，记录每个版面上某一定点位置的绝对坐标，并以该绝对坐标作为定位该版面的索引值，此外还要为每个版面中的网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标。然后，根据版面的索引值和归属该版面的网页元素控件的相对坐标就可以计算出网页元素控件的绝对坐标；计算出每个网页元素控件的绝对坐标后，移动终端就可以根据所计算出来的网页元素控件的绝对坐标以及之前记录的版面的绝对坐标调取网页数据进行显示。

在本发明的一个优选实施方式中，将被划分的多个版面按顺序存放在队列中，并且每一个版面均基于其索引值与其相邻的版面之间相关联，从而建立起页面重新排版过程中所必需的相邻版面之间的关联关系。

在本发明的又一优选实施方式中，采用为网页所划分的所有Layout建立标签的方式使得相邻的版面之间相关联，该标签作为网页中所有Layout的标识，用于区分不同的Layout；并且，Layout标签的建立也使得每一个Layout能够与与其相邻的Layout相关联起来，从而便于在遍历网页元素控件数据的过程中快速的跳过一整块不含有目标网页元素控件的Layout，实现在网页页面的排版显示过程中网页元素控件的快速定位。

需要说明的是，在本实施方式中，Layout的标签相对于用户来说是一个不可见的元素，也是一个不可以焦点的元素，只是后台处理过程中在版面之间建立起关联关系的一个工具；显示在用户面前的只是与Layout的标签所对应的版面，而不会因为Layout标签的引入而给用户浏览带来多余的视觉负担。

Layout是用来对容器(Composite)中的各种元素进行排版、定位和设置大小的通用手段，其中所使用的排版算法会根据不同的操作系统而不尽相同。由于Layout处理能够为网页布局管理提供基本的定位(Positioning)和设置大小(Sizing)功能外，还能够给Composite提供一个合适的初始大小，当容器改变大小时，其所有的子控件自动进行重新布局，并且这种布局是和操作系统、语言无关的，从而使维护这种布局比直接进行位置和大小控制要简单地多。因此，Layout处理这种根据容器大小自动对子空间进行重新布局的特点能够使得本发明在移动终端的应用中更为灵活方便。

为了在移动终端上对网页页面进行重新排版显示，不仅需要每个版面的绝对坐标，还需要每个版面所包含的网页元素控件的绝对坐标，才能通过坐标的定位显示完整地网页数据。在本发明所提供的方法中，通过将每个Layout与其所包含的网页元素控件相关联的方式建立起版面与网页元素控件之间的联系，具体来说，本发明为每个网页元素控件设定一与其所归属版面相对应的相对坐标，从而根据网页元素控件的相对于其所归属的版面的相对坐标和其所归属的版面的绝对坐标计算出网页元素控件的绝对坐标，进而根据绝对坐标进行网页数据的准确定位显示。

其中，具体的计算方法不是本发明所关注的重点，可以根据应用系统以及应用环境的需求具体选择合适的坐标计算方法，故在此不再对网页元素控件绝对坐标的具体算法做详细的表述。

在记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值的过程中，本发明根据上一版面相同定点位置的绝对坐标与上一版面或者当前版面的大小计算当前版面上该定点位置的绝对坐标，其中的定点位置优选版面四个角的位置，即版面的左上角位置、左下角位置、右上角位置或者右下角位置。当然也可以选用版面上其它位置，位置选择的不同对绝对坐标的计算方法没有根本的影响。

在本发明的一个具体实施方式中，记录每个版面左上角位置的绝对坐标作为定位该版面的索引值，而当前版面左上角位置的绝对坐标则是根据上一版面左上角位置的绝对坐标与上一版面的版面大小计算出来的，即如果版面左上角位置的绝对坐标按照顺序依次为(X₁，Y₁)、(X₂，Y₂)、(X₃，Y₃)…(X_n，Y_n)，则对于适应屏幕浏览模式的排版来说，每一版面的横向宽度都是相同的，版面的高度则根据版面内容的多少而定，故：X₁＝X₂＝X₃＝…＝X_n，Y_n＝Y_n-1+H_n-1；对于缩放模式的排版来说，每一版面的横向宽度和纵向高度都不确定，所以：X_n＝X_n-1+W_n-1，Y_n＝Y_n-1+H_n-1，其中H_i表示第i个版面的纵向长度，W_i表示第i个版面的横向宽度，i＝1…n，n表示所划分的版面的个数。

比如，对于缩放模式的排版来说，假设有3个版面，第一版面的纵向高度H₁和横向宽度W₁分别为a和b，第一版面的纵向高度H₁和横向宽度W₁分别为c和d；如果将第一版面左上角位置的绝对坐标记录为(0，0)，则第二版面左上角位置的绝对坐标为(a，b)，第三版面左上角位置的绝对坐标为(a+c，b+d)。

当然也可以采用版面其他位置的绝对坐标作为定位版面的索引值，其定位方法和上述以版面左上角位置的绝对坐标作为定位该版面的索引值的方法类似。比如，如果以版面右下角位置的绝对坐标作为定位该版面的索引值，则当前版面右下角位置的绝对坐标则是根据上一版面右下角位置的绝对坐标与当前版面的版面大小计算出来的，对于适应屏幕浏览模式的排版来说，X₁＝X₂＝X₃＝…＝X_n，Y_n＝Y_n-1+H_n；对于缩放模式的排版来说，X_n＝X_n-1+W_n，Y_n＝Y_n-1+H_n。如果以版面左下角位置的绝对坐标作为定位该版面的索引值，则当前版面左下角位置的绝对坐标则是根据上一版面左下角位置的绝对坐标与上一版面和当前版面的版面大小计算出来的，对于适应屏幕浏览模式的排版来说，X₁＝X₂＝X₃＝…＝X_n，Y_n＝Y_n-1+H_n；对于缩放模式的排版来说，X_n＝X_n-1+W_n-1，Y_n＝Y_n-1+H_n；

相对坐标表示网页元素控件在其所归属版面中的位置，用于在版面中定位特定的网页元素控件，在本发明的一个具体实施方式中，将版面左上角的相对坐标设置为(0，0)，该版面内的所有网页元素控件均左上角(0，0)点为参照点，按照与左上角(0，0)点的位置关系以二维坐标的方式进行表示。

本发明通过上述Layout标签和相对坐标的引入，将网页的基本组成单位设定为版面，一个网页的页面包含一个或者多个版面，每个版面中包含着不同的网页元素控件。也就是说，网页中的每个网页控件元素都必定属于某一个版面，在版面中网页控件元素以相对坐标的方式进行定位。这样在网页数据的排版显示过程中不仅能够达到使用版面来定位网页元素控件的目的，还能够实现一组网页元素控件的隐藏显示和移动，使用户所浏览的网页内容尽量简单明了，提升用户的浏览体验。

具体划分网页的规则可以根据不同的网页特点或者特定应用环境来灵活确定，比如，可以按照网页中网页元素控件的底色不同划分版面，或者按照网页中网页元素控件的不同对齐方式划分，或者将网页上的所有网页元素控件进行平均划分，或者通过网页上的折叠栏进行网页元素控件的划分，或者通过网页上的表格结构对网页元素控件进行划分等等。

在本发明的一个优选实施方式中，为划分的版面建立Layout标签后，将当前Layout标签到下一个Layout标签之间的网页控件元素定为属于当前Layout标签的网页控件元素。例如：

Layout A[0]，button[1]，text[2]，image[3]，text[4]，text[5]；

Layout B[6]，text[7]

其中，layout表示版面，button、text、image表示网页元素控件。上述示例表示：0号版面layoutA包含1至5号网页元素控件，1到5号网页元素控件的坐标和显示范围都在版面layout A的范围内；6号版面layoutB仅包含7号网页元素控件。

通过图1所示的树状结构图可以看出，该树状结构分为三层：根节点、版面和网页元素控件，用户直接浏览的网页被视为根节点，通过根节点可以直接访问作为网页基本组成部分的版面，在每一个版面中则可以直接访问该版面所包含的各个网页元素控件，如之前提到的button、text、image等。

图2为本发明移动终端网页页面的排版显示方法的流程图，如图2所示，在用户需要进行网页浏览操作前，首先需要将服务提供商提供的网页按照预定的规则划分为多个包含一定个数的网页元素控件的版面(步骤S201)；然后记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标(步骤S202)；经过步骤S202，就为网页中的数量众多的所有网页元素控件建立了以相对数量较少的版面为查找索引的网页索引数据库，当需要定位网页元素控件从而在移动终端对网页页面进行排版显示时，就可以根据版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标(步骤S203)，然后再根据所述版面和网页元素控件的绝对坐标调取网页数据进行显示(步骤S204)。

较之于现有的网页数据显示方法，本发明这种通过索引来进行特定网页控件元素的定位从而实现网页数据的快速显示的方法能够更加快速的定位需要显示的对象，提高版面以及网页元素控件定位效率，从而提升移动终端用户的网页浏览体验。

并且，由于前述的Layout处理自身的特性，对于一个网页来说，一旦为网页元素控件建立了以版面为索引的索引数据库，只要网页中的网页元素控件没有发生改变，即使在终端网络中断后重新联网载入网页数据，也无需重新建立索引数据库；并且用户进行翻译、GIF、前进或者后退等操作也无需对索引数据库进行更新。

相应的，与上述移动终端网页页面的排版显示方法相对应，本发明还提供一种移动终端网页页面的排版显示系统，图3是表示本发明移动终端网页页面的排版显示系统的逻辑结构框图。如图3所示，移动终端网页页面的排版显示系统包括版面划分单元301、索引数据库创建单元302、网页元素控件定位单元303和显示单元304。

其中，版面划分单元301用于将服务提供商提供的网页按照预定规则划分为多个包含一定个数的网页元素控件的版面，索引数据库创建单元302用于在所述版面划分单元301划分版面之后记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标，从而在相邻版面以及版面与归属于版面的网页元素控件之间建立起可以实现定位的关联关系，为页面的快速排版显示建立起网页、版面和网页元素控件的索引数据库；在索引数据库创建单元302完成索引数据库的创建之后，当网页页面排版显示过程中需要定位某一网页元素控件时，网页元素控件定位单元303就可以根据索引数据库创建单元302所创建的索引数据库中记载的版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标；在确定了版面和网页元素控件的绝对坐标后，显示单元304再根据索引数据库创建单元302所记录的版面的绝对坐标以及网页元素控件定位单元303所计算出的网页元素控件的绝对坐标调取网页数据进行显示。

本发明适用于网页浏览、媒体(音频、视频)播放、文件下载、用户交互和及时通信以及网络游戏等诸多方面，通过为网页上数量众多的网页元素控件建立以版面为索引的索引数据库的方式使得移动终端在进行网页页面的重新排版显示过程中能够对版面和网页元素控件进行快速定位，从而能够较快的实现页面在移动终端的排版显示，提高用户的上网浏览效率；并且该方法在联网重新载入网页数据或者进行前进或者后退等操作时也无需重建或者更新已建立的索引数据库，具有更强的稳定性和广泛的适用性。

在本发明的上述教导下，本领域技术人员可以在上述实施例的基础上进行各种改进和变形，而这些改进和变形，都落在本发明的保护范围内，本领域技术人员应该明白，上述的具体描述只是更好的解释本发明的目的，本发明的保护范围由权利要求及其等同物限定。

Claims (11)

1.一种移动终端网页页面的排版显示方法，包括：

把网页按照预定规则划分为多个包含网页元素控件的版面；

记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标；

根据版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标；

所述移动终端根据所述版面和网页元素控件的绝对坐标调取网页数据进行显示。

2.按照权利要求1所述的方法，其中，

所述被划分的多个版面按顺序存放在队列中，并且每一个版面均基于其索引值与其相邻的版面之间相关联。

3.按照权利要求2所述的方法，其中，

通过为版面建立标签的方式来定位版面以及建立版面间的关联关系。

4.按照权利要求3所述的方法，其中，

在将网页划分为多个版面之后，将当前版面的标签到下一个版面的标签之间的网页控件元素确定为属于当前版面的网页控件元素。

5.按照权利要求4所述的方法，其中，所述划分网页的规则包括：

按照网页中网页元素控件的底色不同划分版面；或者

按照网页中网页元素控件的不同对齐方式划分；或者

将网页上的所有网页元素控件进行平均划分；或者

通过网页上的折叠栏进行网页元素控件的划分；或者

通过网页上的表格结构对网页元素控件进行划分。

6.按照权利要求4所述的方法，其中，在记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值的过程中，

当前版面上定点位置的绝对坐标根据上一版面定点位置的绝对坐标与上一版面或者当前版面的大小计算。

7.按照权利要求6所述的方法，其中，

所述定点位置为版面的左上角位置、左下角位置、右上角位置或者右下角位置。

8.按照权利要求7所述的方法，其中，当选用版面的左上角位置为定点位置时，如果版面左上角位置的绝对坐标按照顺序依次为(X₁，Y₁)、(X₂，Y₂)、(X₃，Y₃)…(X_n，Y_n)，则

对于适应屏幕浏览模式的排版来说，X₁＝X₂＝X₃＝…＝X_n，Y_n＝Y_n-1+H_n-1；

对于缩放模式的排版来说，X_n＝X_n-1+W_n-1，Y_n＝Y_n-1+H_n-1；

其中H_i表示第i个版面的纵向长度，W_i表示第i个版面的横向宽度，i＝1…n，n表示所划分的版面的个数。

9.按照权利要求8所述的方法，其中，

在把网页按照预定规则划分为多个包含网页元素控件的版面的过程中，通过Layout来实现所述对网页的划分。

10.一种移动终端网页页面的排版显示系统，包括：

版面划分单元(301)，用于将服务提供商提供的网页按照预定规则划分为多个包含网页元素控件的版面；

索引数据库创建单元(302)，用于在所述版面划分单元(301)划分版面之后记录每个版面上某一定点位置的绝对坐标作为定位该版面的索引值，并且为网页元素控件设置该网页元素控件相对于其所归属版面的相对坐标；

网页元素控件定位单元(303)，用于根据所述索引数据库创建单元(302)所创建的索引数据库中记载的版面的索引值和归属该版面的网页元素控件的相对坐标计算出网页元素控件的绝对坐标；

显示单元(304)，用于根据所述索引数据库创建单元(302)所记录的版面的绝对坐标以及网页元素控件定位单元(303)所计算出的网页元素控件的绝对坐标调取网页数据进行显示。

11.按照权利要求10所述的系统，其特征在于，

在所述索引数据库创建单元(302)中，将被所述版面划分单元(301)划分的多个版面按顺序存放在队列中，并且使得每一个版面均基于其索引值与其相邻的版面之间相关联。

Images