CN102184249B - 基于移动终端的网页排版方法和装置 - Google Patents

Abstract

本发明提供了一种基于移动终端的PC排版方法，包括：将基于PC排版的WWW网页，按照如下排版规则进行重新排版：在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；在移动终端显示按照上述规则重新排版后的网页。利用本发明，不仅能够在网页的整体布局上保留PC排版的主要显示样式，又能在网页的局部区域根据手机屏幕做适应性调整，使得文字等内容可以在一个手机屏幕内连续显示，使得PC排版与移动终端的显示完美结合在一起，从而保证用户在不改变浏览习惯的基础上利用移动终端更为便利的进行上网浏览体验。

Description

基于移动终端的网页排版方法和装置

技术领域

本发明涉及移动网络的网页浏览技术领域，更为具体地，涉及一种基于移动终端的网页排版方法和装置。

背景技术

随着社会的进步和技术的发展，人们越来越多地使用接入终端来以无线的方式接入因特网来获取信息，但是，目前所有WWW网页的排版和显示都是针对电脑来进行设计的，这种排版方式可以被称之为PC排版方式。而由于以手机为主流的移动终端的显示屏幕往往远远小于通常的PC机，因此，在手机等移动终端中浏览PC排版方式的WWW网页之前都需要对网页进行适应移动终端显示方式的重新排版。

一般来说，WWW网页的PC排版方式是通过使用CSS样式设置页面的格式，从而将页面内容与页面的表现形式分离。WWW网页的页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。

组成WWW网页的html元素包括block(块)元素和inline(内联)元素。其中block元素主要负责网页的整体布局，一般是其他元素的容器元素，block元素一般都从新行开始，可以容纳内联元素和其他block元素，例如，<div>、<p>、<h>等，常见块元素是段落标签′P″。inline元素则主要负责网页的内容和信息，一般都是基于语义级(semantic)的基本元素，例如<a>、<img>、文字等，内联元素只能容纳文本或者其他内联元素。

由于移动终端尤其是以手机为主流的移动终端的显示屏幕比电脑的屏幕要小得多，而且由于其应用的特点一般也不会配置有鼠标，用户操作起来也远不如操作PC那么方便。

因此，如果在移动终端浏览器上严格按照PC排版来展现WWW网页，会对网页的显示效果和用户的操作体验产生比较大的不良影响。如果在移动终端浏览器展现WWW网页之前将网页内容从PC排版格式中完全剥离，然后再进行重新排版，一方面会增加大量的数据处理任务，过多的占用移动终端或者处理器的处理能力；另一方面，按照移动终端屏幕的需要完全重新排版后的网页，与PC排版网页的展现形式有很大不同，会使得习惯于PC排版形式的用户产生不习惯或者浏览不便的感觉，影响用户的浏览体验。

发明内容

鉴于上述问题，本发明结合WWW网页的原有效果和移动终端屏幕小、操作不便的实际特性，为移动终端浏览器提供一种结合了PC排版和移动终端浏览特性的基于移动终端的全新的排版方法和装置。

根据本发明的一个方面，提供了一种基于移动终端的网页排版方法，包括：

将基于PC排版的WWW网页，按照如下排版规则进行重新排版：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；

在所述移动终端显示按照上述规则重新排版后的网页。

根据本发明的另一方面，提供了一种移动终端，包括网页排版单元和显示单元，其中，

所述网页排版单元用于将基于PC排版的WWW网页，按照如下排版规则进行重新排版：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；

所述显示单元用于在所述移动终端显示经所述网页排版单元重新排版后的网页。

再一方面，本发明还提供一种基于移动终端的排版装置，包括网页排版单元和数据传输单元，其中，

所述网页排版单元用于将基于PC排版的WWW网页，按照如下排版规则进行重新排版：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；

所述数据传输单元用于根据移动终端的网页浏览请求从第三方接收网页，并将所述网页排版单元重新排版后的网页发送给所述移动终端。

利用上述根据本发明的基于移动终端的网页排版方法及装置，在网页的整体布局上保留了PC排版的主要显示样式；而在某块局部区域又根据手机屏幕做了调整，使得文字等内容可以在一个手机屏幕内连续显示，这样用户不需要做任何的左右移动就可以看完一段连续的内容；使得PC排版与移动终端的显示完美结合在一起，能够保证用户在不改变浏览习惯的基础上利用移动终端更为便利的进行上网浏览体验。

并且，移动终端在采用本发明提供的这种新的排版方式后还可以扩充一些辅助功能来进一步方便用户操作，从而为用户浏览网页提供更多的方便，再辅之以一些扩充功能，极大地提升用户体验。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1为根据本发明的基于移动终端的PC排版方法的流程图；

图2为一PC排版网页在PC机上的显示示例图；

图3a和图3b分别为应用本发明前后PC排版网页在移动终端屏幕上的显示示例图；

图4为根据本发明实施例的移动终端的方框示意图；

图5为根据本发明实施例的基于移动终端的网页排版服务器的方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

以下将结合附图对本发明的具体实施例进行详细描述。

首先需要说明的是，本发明中所设计的PC排版的概念，指的是针对同样PC来进行设计的WWW网页的排版和显示方式，在这种PC排版方式中，html元素由block(块)元素和inline(内联)元素组成，其中，block元素是其他元素的容器元素，可以容纳内联元素和其他块元素，它有如下特点：一般总是在新行上开始；高度、行高以及顶和底边距都可控制；宽度缺省是它的容器的100％，除非设定一个宽度。inline元素一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，内联元素有如下特点：和其他元素都在一行上；高、行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。

图1示出了根据本发明的基于移动终端的网页排版方法的流程图。

如图1所示，在用户需要通过手机等移动终端浏览原本是PC排版格式的WWW网页时，需要对网页进行适应移动终端屏幕的版面重排，即如步骤S110所示的将基于PC排版的WWW网页，按照如下排版规则进行重新排版：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；

由于对网页的重新排版是基于移动终端的屏幕宽度进行的，因此重新排版之后的网页显示能够完全适应移动终端的屏幕宽度，在步骤S120中，就能够在该移动终端显示按照上述规则重新排版后的网页了。

由于在WWW网页的网页格式是专门针对PC记得显示特点而排版的，因此其block内部的inline元素是以block的宽度来折行的，而block的宽度为PC屏幕的宽度，这样就能够是WWW网页正好显示在PC屏幕上。图2所示的http://news.sina.com.cn/c/2011-02-16/164021964805.shtml网页即为PC排版显示形式。

而以手机为主的移动终端的屏幕宽度远远小于PC的屏幕宽度，如果直接将PC排版的WWW网页显示在移动终端浏览器上，则由于屏幕宽度的缩小必然有相当一部分网页内容无法显示，其显示效果如图3a所示。应用本发明提供的上述在PC排版基础上仅仅将block内部的inline元素按照移动终端屏幕的宽度来进行折行重排，则可以在保持PC排版基本风格和形式的基础上使网页内容的展示与移动终端的屏幕相匹配，其显示效果如图3b所示。这样将PC排版与移动终端屏幕宽度结合在一起的重新排版方式，不仅不会对用户的网页浏览体验产生影响，相对减少的数据处理量也会在一定程度上提高用户的网页浏览速度。

另外，考虑到移动终端屏幕小的特点，为了进一步提供网页在移动终端的展现效果，对于一些特殊的block元素，其内部的inline元素在重排过程中还是以block的宽度来折行，比如：

block元素的“white-space”属性的取值为‘nowrap’或‘pre’；

block元素的“height”属性的取值小于预设范围，且“overflow”属性的取值为‘hidden’；

block元素的“height”属性的取值小于预设范围，且设置了背景图片；

block元素的“position”属性的取值为‘absolute’或‘fixed’；

block元素的“float”属性的取值为‘right’。

其中，对于block元素的“height”属性取值的预设范围来说，如果设置有“line-height”属性，那么block元素的“height”属性取值的预设范围就是1.8倍line-height；否则，block元素的“height”属性取值的预设范围就是1.8倍字体大小。

另外，如果block元素内的inline元素为表单控件内部的文字，则不折行。

从以上特例可以看出，在网页某一部分的展现效果不适合以屏幕宽度折行时(例如，网页中的一些标题栏或导航栏)，就保留PC排版的排版规则，以block的宽度来折行或者不折行，否则就以移动终端屏幕宽度来折行，以保证用户要浏览的内容不会溢出屏幕之外。

如上参照图1～图3描述了根据本发明的基于移动终端的基于移动终端的网页排版方法。本发明的上述基于移动终端的网页排版方法，可以采用软件实现，也可以采用硬件实现，或采用软件和硬件组合的方式实现；可以在移动终端实现，也可以在移动终端之外的服务器中实现。

图4示出了应用本发明的基于移动终端的网页排版方法的移动终端400的方框示意图。如图4所示，移动终端400包括网页排版单元420和显示单元440，其中，

网页排版单元420用于将基于PC排版的WWW网页，按照如下排版规则进行重新排版：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；

显示单元440用于在移动终端400显示经网页排版单元420重新排版后的网页。

图5示出了应用本发明的基于移动终端的网页排版方法的基于移动终端的网页排版服务器500的方框示意图。如图5所示，网页排版服务器500包括网页排版单元520和数据传输单元540，其中，

网页排版单元520用于将基于PC排版的WWW网页，按照如下排版规则进行重新排版：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行；

数据传输单元540用于根据移动终端的网页浏览请求从第三方接收网页，并将网页排版单元520重新排版后的网页发送给移动终端。

如上参照附图以示例的方式描述根据本发明的基于移动终端的网页排版方法和装置。但是，本领域技术人员应当理解，对于上述本发明所提出的基于移动终端的网页排版方法及装置，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (4)

1.一种基于移动终端的网页排版方法，包括：

将基于PC排版的WWW网页，按照如下排版规则进行重新排版，其中，组成所述WWW网页的html元素包括块元素和内联元素，所述块元素负责网页的整体布局，是其他元素的容器元素，用于容纳内联元素和其他块元素，所述内联元素负责网页的内容和信息，是基于语义级的基本元素，只能容纳文本或者其他内联元素：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行，除非，所述块元素内部的内联元素为表单控件内部的文字，并且，

当所述块元素内部的内联元素为表单控件内部的文字时，不折行；以及，

在下述情况下，块元素内部的内联元素在重新排版过程中以所述块元素的宽度来折行：

所述块元素的“white-space”属性的取值为‘nowrap’或‘pre’；

所述块元素的“height”属性的取值小于预设范围，且“overflow”属性的取值为‘hidden’；

所述块元素的“height”属性的取值小于预设范围，且设置了背景图片；

所述块元素的“position”属性的取值为‘absolute’或‘fixed’；

所述块元素的“float”属性的取值为‘right’；

在所述移动终端显示按照上述规则重新排版后的网页；

其中，所述内联元素包括文本元素和非文本元素<a>和<img>；

所述块元素的“height”属性的取值的预设范围为：如果设置有“line-height”属性，所述块元素的“height”属性的取值的预设范围为1.8倍line-height；否则，所述块元素的“height”属性的取值的预设范围为1.8倍字体大小。

2.如权利要求1所述的基于移动终端的网页排版方法，其中，

在所述移动终端或者外部服务器按照所述排版规则进行WWW网页的重新排版。

3.一种移动终端，包括网页排版单元和显示单元，其中，

所述网页排版单元用于将基于PC排版的WWW网页，按照如下排版规则进行重新排版，其中，组成所述WWW网页的html元素包括块元素和内联元素，所述块元素负责网页的整体布局，是其他元素的容器元素，用于容纳内联元素和其他块元素，所述内联元素负责网页的内容和信息，是基于语义级的基本元素，只能容纳文本或者其他内联元素：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行，除非，所述块元素内部的内联元素为表单控件内部的文字，并且，

当所述块元素内部的内联元素为表单控件内部的文字时，不折行；以及，

在下述情况下，块元素内部的内联元素在重新排版过程中以所述块元素的宽度来折行：

所述块元素的“white-space”属性的取值为‘nowrap’或‘pre’；

所述块元素的“height”属性的取值小于预设范围，且“overflow”属性的取值为‘hidden’；

所述块元素的“height”属性的取值小于预设范围，且设置了背景图片；

所述块元素的“position”属性的取值为‘absolute’或‘fixed’；

所述块元素的“float”属性的取值为‘right’；

所述显示单元用于在所述移动终端显示经所述网页排版单元重新排版后的网页；

其中，所述内联元素包括文本元素和非文本元素<a>和<img>；

所述块元素的“height”属性的取值的预设范围为：如果设置有“line-height”属性，所述块元素的“height”属性的取值的预设范围为1.8倍line-height；否则，所述块元素的“height”属性的取值的预设范围为1.8倍字体大小。

4.一种基于移动终端的网页排版服务器，包括网页排版单元和数据传输单元，其中，

所述网页排版单元用于将基于PC排版的WWW网页，按照如下排版规则进行重新排版，其中，组成所述WWW网页的html元素包括块元素和内联元素，所述块元素用于容纳内联元素和其他块元素，所述内联元素只能容纳文本或者其他内联元素：

在WWW网页PC排版规则的基础上，保持块元素的宽度不变，而将所述块元素内部的内联元素以所述移动终端的屏幕宽度进行折行，除非，所述块元素内部的内联元素为表单控件内部的文字，并且，

当所述块元素内部的内联元素为表单控件内部的文字时，不折行；以及，

在下述情况下，块元素内部的内联元素在重新排版过程中以所述块元素的宽度来折行：

所述块元素的“white-space”属性的取值为‘nowrap’或‘pre’；

所述块元素的“height”属性的取值小于预设范围，且“overflow”属性的取值为‘hidden’；

所述块元素的“height”属性的取值小于预设范围，且设置了背景图片；

所述块元素的“position”属性的取值为‘absolute’或‘fixed’；

所述块元素的“float”属性的取值为‘right’；

所述数据传输单元用于根据移动终端的网页浏览请求从第三方接收网页，并将所述网页排版单元重新排版后的网页发送给所述移动终端；

其中，所述内联元素包括文本元素非文本元素<a>和<img>；

所述块元素的“height”属性的取值的预设范围为：如果设置有“line-height”属性，所述块元素的“height”属性的取值的预设范围为1.8倍line-height；否则，所述块元素的“height”属性的取值的预设范围为1.8倍字体大小。