CN102457528A - 面向手机终端的自适应发布Web内容的方法与系统 - Google Patents

Abstract

本发明公开了一种面向手机终端的自适应发布Web内容的方法，设置为手机终端用户提供面向手机终端的自适应发布Web内容的服务器系统，包括内容标签生成单元、内容布局单元和Web页面生成单元，获取手机终端用户对页面的访问请求时，获取所请求页面中各组成部分的标签，获取各组成部分的各种属性信息、各组成部分之间的关联关系；Web页面生成单元获取用户的手机终端的型号与配置信息，根据用户请求页面中各组成部分的各种属性信息以及各组成部分之间的关联关系，进行显示模板的匹配，为页面请求用户生成适用于所述用户手机终端显示的页面；服务器系统将生成的Web页面发送给用户的手机终端并显示。本发明同时公开了一种实现上述方法的系统。实现了内容的自适应显示。

Description

面向手机终端的自适应发布Web内容的方法与系统

技术领域

本发明涉及Web内容发布技术，尤其涉及一种面向手机终端的自适应发布Web内容的方法与系统。

背景技术

随着移动互联网的发展，越来越多的用户倾向于通过移动终端来访问特定内容提供商，于是内容提供纷纷构建了适合自己服务内容的面向移动终端的内容发布站点，这无疑为内容提供商抓住了大量的客户群体。那么如何使发布的内容在各种型号的移动终端上都能合理展现，并且能独立、自动地执行便成了信息服务领域最需要解决的问题。

随着移动通信技术的不断发展，无线互联网进入了宽带时代，手机上网将成为用户访问互联网的主要手段，用户使用各种手持终端高速登录Internet以访问各种内容服务必然成为趋势。这昭示着各种各样移动互联网应用已经到来，其中以内容为核心价值的信息服务便是其中尤为重要的一类，是未来移动办公所采用的主要形式。多种类型的手持终端具有不同的屏幕参数，若不加处理，相同的内容在投送到这些终端上时便会呈现不同的效果，一部分内容可能会勉强满足用户的需求，而另一部分可能会由于内容中图片与文本的大小而无法正常显示。

发明内容

有鉴于此，本发明的主要目的在于提供一种面向手机终端的自适应发布Web内容的方法与系统，能根据手机终端的型号自适应显示适于其屏幕的Web页面。

为达到上述目的，本发明的技术方案是这样实现的：

一种面向手机终端的自适应发布Web内容的方法，设置为手机终端用户提供面向手机终端的自适应发布Web内容的服务器系统；所述服务器系统至少包括内容标签生成单元、内容布局单元和Web页面生成单元，其中，内容标签生成单元用于为内容发布方提供内容上载的标签，所述标签至少包括上载内容的属性、与同一Web页面中其它内容的关系；所述内容布局单元至少包括用于在不同手机终端上显示内容的模板；Web页面生成单元用于根据手机终端的类型以及用户所请求的Web页面，为用户生成适用于所述用户手机终端显示的Web页面，并发送给手机用户终端供显示；所述方法包括：

服务器系统获取手机终端用户对Web页面的访问请求时，获取所请求Web页面中各组成部分的标签，获取各组成部分的各种属性信息、各组成部分之间的关联关系；

所述Web页面生成单元获取用户的手机终端的型号信息，根据用户请求Web页面中各组成部分的各种属性信息以及各组成部分之间的关联关系，进行显示内容模板的匹配，为Web页面请求用户生成适用于所述用户手机终端显示的Web页面；

服务器系统将生成的Web页面发送给用户的手机终端并显示。

一种面向手机终端的自适应发布Web内容的系统，至少包括内容标签生成单元、内容布局单元和Web页面生成单元，其中，内容标签生成单元用于为内容发布方提供内容上载的标签，所述标签至少包括上载内容的属性、与同一Web页面中其他内容的关系；所述内容布局单元至少包括用于在不同手机终端上显示内容的模板；Web页面生成单元用于根据手机终端的类型以及用户所请求的Web页面，为用户生成适用于所述用户手机终端显示的Web页面，并发送给手机用户终端供显示；所述系统还包括：

获取单元，用于获取手机终端用户对Web页面的访问请求时，获取所请求Web页面中各组成内容的标签，获取各组成内容的各种属性信息、各组成内容之间的关联关系；

所述Web页面生成单元进一步获取用户的手机终端的型号信息，根据用户请求Web页面中各组成内容的各种属性信息以及各组成内容之间的关联关系，进行显示内容模板的匹配，为Web页面请求用户生成适用于所述用户手机终端显示的Web页面；

发送单元，用于将生成的Web页面发送给用户的手机终端并显示。

本发明中，通过设置针对不同手机终端屏幕显示的显示模板，并在接收到用户对Web页面的访问请求后，根据用户终端的型号即可为用户确定出待显示的Web页面，并提供给请求的手机终端即可。本发明可以将页面编辑人员指定要发布的信息内容转换为适应于不同终端访问的页面，该页面形式包括Web页面和Wap页面两种。该系统可以作为支撑系统，为那些意欲将互联网信息服务转移至移动互联网领域的客户提供网络页面批量转换的服务。

附图说明

图1为本发明面向手机终端的自适应发布Web内容的系统的组成结构示意图；

图2为本发明手机终端屏幕显示模板1的结构示意图；

图3为本发明手机终端屏幕显示模板2的结构示意图；

图4为本发明手机终端屏幕显示模板3的结构示意图；

图5为本发明手机终端屏幕显示模板4的结构示意图；

图6为本发明手机终端屏幕显示模板5的结构示意图；

图7为本发明手机终端屏幕显示模板6的结构示意图；

图8为本发明手机终端屏幕显示模板7的结构示意图；

图9为本发明手机终端屏幕显示模板8的结构示意图；

图10为本发明手机终端屏幕显示表格的模板的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下举实施例并参照附图，对本发明进一步详细说明。

本发明首先设置为手机终端用户提供面向手机终端的自适应发布Web内容的服务器系统；服务器系统至少包括Web前台单元、内容标签生成单元、内容布局单元、Web页面生成单元和设备管理单元；以下分别介绍上述各处理单元所执行的功能。

本发明首先为内容提供的Web页面维护人员提供内容上载的接口，通过该内容上载接口，内容维护人员可以将需要发布的内容上载到相应的服务器系统并显示，以供手机终端用户利用手机终端浏览Web页面内容。

本发明中，内容上载功能主要由以下两个单元来执行：Web前台单元和内容标签生成单元；Web前台单元的作用是为用户提供附件上传，或上传自定义脚本的Web前台页面，即系统用户界面。Web前台单元主要是向用户提供显示内容上载的界面，界面中设置有用户加载内容的接口，如加载内容的地址栏，加载内容的名称、内容摘要描述信息、内容格式、内容大小；本发明不限定具有的内容提供格式。内容标签生成单元的功能是将用户上传的附件，或者用户手写的标签转换为自定义标签(XML格式)。这个自定义标签只包含了内容信息(内容信息包括文本内容，表格内容，图片地址及分辨率，各附件的关键字等)，但是没有包含任何模板信息。下文要介绍的页面模板计算(页面优化)和页面生成都是在此步骤基础上进行的。内容标签生成单元用于为内容发布方提供内容上载的标签，所述标签至少包括上载内容的属性、与同一Web页面中其他内容的关系；所述内容布局单元至少包括用于在不同手机终端上显示内容的模板；Web页面生成单元用于根据手机终端的类型以及用户所请求的Web页面，为用户生成适用于所述用户手机终端显示的Web页面，并发送给手机用户终端供显示；服务器系统获取手机终端用户对Web页面的访问请求时，获取所请求Web页面中各组成内容的标签，获取各组成内容的各种属性信息、各组成内容之间的关联关系；所述Web页面生成单元获取用户的手机终端的型号信息，根据用户请求Web页面中各组成内容的各种属性信息以及各组成内容之间的关联关系，进行显示内容模板的匹配，为Web页面请求用户生成适用于所述用户手机终端显示的Web页面；

服务器系统将生成的Web页面发送给用户的手机终端并显示。

上述内容布局单元根据Web页面中内容的内容大小、内容所属文本的格式获取内容的显示格式，根据内容的显示格式、内容之间的关联程度以及各种手机终端屏幕的分辨率大小，进行Web页面的排版；其中，属性相同或相近的内容设于相邻区域；和/或，有关联关系的内容显示于相邻的区域。确定Web页面中所有内容的显示格式大小以及手机终端显示屏的分辨率，确定各内容显示格式应显示的区域；对于图片内容，以图片占据整个显示屏幕的宽度并纵向连续为准则，图片大小相当时分配相同的显示区域，各图片大小差距较大时，以宽度和/或长度为二分之一、四分之一以及八分之一的比例为各图片分配显示区域，或以宽度和/或长度为三分之二、三分之一、六分之一的比例为各图片分配显示区域；对于文本文件，以流式布局方式分配显示区域；对于表格，根据手机终端屏幕的分辨率对表格的显示格式进行缩放后，置于Web页面最后；其中，对于包含有图片、文本及表格的综合内容，以文本流布局方式分配显示区域。Web页面生成单元获取用户的手机终端的型号信息，根据用户请求Web页面中各组成内容的各种属性信息以及各组成内容之间的关联关系，进行显示内容模板的匹配具体为：根据用户注册的手机终端型号或发送Web页面请求时携带的手机终端型号获取手机终端的型号信息；根据用户请求页面中包含的具体页面内容，各内容的大小以及显示格式等，进行所确定手机终端型号对应的显示模板的匹配；根据所确定的显示模板提供的显示区域，将Web页面的各内容分按所述模板设定的显示区域进行显示设置：图片大小与显示区域不完全匹配时，以能在所分配显示区域内最大显示完整图片的原则放置图片，未覆盖区域以图片的背景色填充；文本文件以手机屏幕整个宽度为限，横向流式显示，文本显示格式大小为设定值，其中，对于PDF文本，提取其中的显示内容，以流式方式进行显示。

其中，对于Web页面的内容，将关联度高的内容作为一组，所述组包括文本和/或图片和/或其他内容；其中，内容的关键字达到设定的重合程度时作为一组；再根据一组中两个以上内容之间相互联系的紧密程度，确定同属于一组的内容之间的优先级，关联度高的内容优先级高，优先显示。

设备管理单元是检测手机终端的型号，并在手机型号数据库中查找该手机型号，并确定该手机型号的各个属性。当一个超文本传输协议(HTTP，HyperTextTransfer Protocol)请求进入系统，设备管理器通过比较设备头部信息与设备库中存储的设备属性确定设备类型。然后根据HTTP请求和设备属性产生并缓存一个会话设备概况信息。它的主要功能就是通过HTTP请求中的包头查询数据库，与数据库中相关的设备类型进行匹配，并读取设备的详细的特性参数(如屏幕的宽度，高度，是否是彩屏等等)。设备概况信息是根据用户设备动态创建的，设备概况信息包括从HTTP请求中截取的信息和设备库中存储的设备属性。

本发明系统支持用户通过上传界面来上传文档，也支持通过编写标签文档来上传文档、图片等页面元素，为用户提供了另外一种上传的途径，用户根据不同情况可选择不同的上传方式，提高了系统的上传方式的多样性。

自定义标签严格符合标准通用标记语言(SGML，Standard GeneralizedMarkup Language)规范，它与可扩展标记语言(XML，Extensible MarkupLanguage)、超文本标记语言(HTML，HyperText Mark-up Language)不同之处在于这套自定义标签更加简化易懂，非计算机专业人士易学易用，最重要的不同之处在于它侧重于传达上传文件的信息，而不关注这个文件如何布局和显示等；该套标签的优点不仅是简单易懂，还在于它的良好的可扩展性，它可以遵循SGML规范对其进行扩展，来丰富上传过程的信息。

用户根据各个标签表示的意义来使用该套标签，用户只需要将要上传的文件所在路径、文件的关键字以及上传者等信息填写在标签的相应位置；系统对这套自定义标签进行解析，根据对文件的描述信息来对文件解析上传到服务器，调用页面生成算法进行页面生成。

自定义标签的文档结构具体如下：

<？xml version＝″1.0″encoding＝″GB2312″？>

<mis>

<！--files：发布者上传的文本文档的相关信息-->

<files>

      <src>文件所在路径</src>

      <format>文件格式，如txt、doc、pdf、xls，图片格式可以是gif、jpg、bmp、png等</format>

      <nickname>描述文件的多个关键字，以空格隔开</nickname>

      <！--content：转换后的文档的正文-->

      <content>

         <font size＝“字号”color＝“颜色”fcce＝“采用字体”>

         <！[CDATA[

             正文内容

         ]]>

         </font>

     </content>

</files>

<！--uploader：发布者的相关信息-->

<uploader>

      <username>上传者姓名</username>

      <date>上传日期</date>

      <rank>发布者的等级</rank>

</uploader>

<！--priority：页面的阅读权限，可取public、private、protected三个值，各值含义如下：-->

<！--public：所有用户都可阅读-->

<！--private：只有自己和等级比自己高的用户可以阅读-->

<！--protected：和自己同等级以及比自己等级高的用户可以阅读-->

<priority>该上传文档所在页面的阅读权限</priority>

</mis>

以下介绍以Java生成上述各处理单元的实现方式，具体的：

Web前台单元以下述方式生成：如表1所示

类名	描述
		AttachmentUploadServlet	记录系统用户上传的附件的Servlet
Scri ptUploadServlet	记录系统用户上传的脚本的Servlet

表1

其中，AttachmentUploadServlet类如表2所示，ScriptUploadServlet类如表3所示：

表2

表3

其中，用户上传附件的接口为：com.bupt.servlet.AttachmentUploadServletpublic class AttachmentUploadServlet extends HttpServlet

     {

       public void doPost(HttpServletRequest request，HttpServletResponse

response)

          throws ServletException，IOException

       {

          //处理上传的附件

       }

    }

    用户上传脚本的接口为：com.bupt.servlet.ScriptUploadServlet

    public class ScriptUploadServlet extends HttpServlet

    {

      public void doPost(HttpServletRequest request，HttpServletResponse

response)

         throws ServletException，IOException

       {

         //处理上传的mis脚本

       }

}

内部接口即基于系统各个系统模块之间的接口，其中，调用pdf文件解析接口为：

public String readFromPDF(String path){......}

调用word文件解析接口为：

public String process(String path){.....}

调用excel文件解析接口为：

public String readFromExcel(String path){......}

调用内容标签生成单元的接口为：

public int createXMLFile(UploadInfo uploadInfo，String xmlDocumentName){......}

调用把用户上传的标签脚本生成UploadInfo的接口为：

public int transXMLFile(String fromPath)throws DocumentException{......}

调用页面生成模块接口为：

public void travelXML(String filename，String filename2){

       //生成页面文档

}

调用Web页面布局单元的接口为：

public void process(List<ElementGroup>els){

//写入模板信息

}

内容标签生成单元实现方式具体如表4所示：

表4

内容布局单元实现方式具体如表5所示：

表5

页面生成单元实现方式具体如表6所示：

类名	描述
		IFactory	所有工厂类的父类
BuilderFactory	用于生成Html页面相关的Builder
		WmlBuilderFactory	用于生成Wml页面相关的Builder
HtmlContentBuilder	所有Builder的父类
		HtmlDocBuilder	用于处理pdf、doc格式的附件并生成Html页面中的内容
HtmlImgBuilder	用于生成Html页面图片内容
		HtmlTableBuilder	用于生成Html页面表格内容
HtmlTextBuilder	用于生成Wml页面纯文本内容
		WmlDocBuilder	用于处理pdf、doc格式的附件并生成Wml页面中的内容
WmlImgBui lder	用于生成Wml页面图片内容
		WmlTableBuilder	用于生成Wml页面表格内容
WmlTextBuilder	用于生成Wml页面纯文本内容

表6

(1)该自定义标签遵循XML语法规范，以<？xml version＝″1.0″encoding＝″GB2312″？>开头，则系统会按照XML规则进行解析，字符编码使用″GB2312″，目的是正常显示中文字符。

(2)自定义标签文档中除第一行外，每一个标签都是以<a></a>形式成对出现，每一个标签代表不同的意义，两个成对标签中间再嵌套描述该标签表示的相关信息。

(3)<files></files>中间描述的是关于上传文件的信息，<src></src>中填写的是要上传的文件的所在路径，<format></format>中是上传文件的格式，<nickname></nickname>中是描述该上传文件的关键字组，每个关键字以空格隔开，以上几个标签是用户可以编辑使用的。

<content></content>标签中是关于上传解析后的具体的文档内容及格式，这些是系统可用的，上传用户不可用。

(4)<uploader></uploader>标签是用来描述关于上传者信息的标签，他们之前要嵌套如下几个标签：<username></username>描述上传者姓名，<date></date>描述上传日期，<rank></rank>描述上传者等级

(5)<priority></priority>描述该上传文档所在页面的阅读权限。具体有如下几个取值，public：所有用户都可阅读；private：只有自己和等级比自己高的用户可以阅读；protected：和自己同等级以及比自己等级高的用户可以阅读。

(6)以上标签中，一对<files></files>标签描述一个上传文件的信息，一个文档中可以包括多个<files></files>标签用来描述多个上传文件的信息。一个文档中只允许出现一个<uploader></uploader>标签表示本次上传的用户的信息，如果没有出现该标签，则系统解析时会取默认的上传者信息。一个文档中只允许出现一个<priority></priority>标签表示该上传文档所在页面的阅读权限，如果没有出现该标签，则系统会取默认的阅读权限。

FileBean：文件类的父类，具体结构如表7所示：

表7

AppBean：Word、excel、pdf类型的文件，结构具体如表8所示：

字段名	类型	含义
			src	String	附件相对路径
absSrc	String	附件绝对路径
			format	String	文件格式
nickname	String	文件别名
			content	String	文件正文
filesize	String	文件大小

表8

ImgBean：图片类型的文件，ImgBean结构具体如表9所示：

表9

IntervalBean：图片类型的文件，具体结构如表10所示：

字段名	类型	含义
			startIndex	int	数据的起始位置
endIndex	int	数据的结束位置
			type	String	数据的类型

表10

UploadInfo：记录了用户本次上传的内容信息，具体结构如表11所示：

字段名	类型	含义
			uploaderName	String	上传者姓名
uploadDate	Date	上传日期
			uploaderRank	String	发布者的等级
modifierName	String	修改者姓名
			modifyDate	String	修改日期
modifierRank	String	修改者的等级
			priority	St ring	阅读权限

表11

MisElement：Html中文本元素、图片元素、表格元素的父类，具体结构如表12所示：

字段名	类型	含义
			keywords	List<String>	关键字的存放数组
id	int	元素id

表12

TxtElement：Html中的文本元素，具体结构如表13所示：

表13

ImgElement：Html中的图片元素，表13中的ImgElement逻辑结构具体如表14所示：

表14

TableElement：Html中的表格元素，TableElement逻辑结构具体如表15所示：

表15

ElementGroup：用于存放群信息，包括群内的元素以及模板号，具体结构如表16所示：

字段名	类型	含义
			elements	List<MisElement>	元素的存放数组
styleid	int	该群采用的模板号

表16

对于用户导入的一系列文本、图片(对于word文档、txt文档及pdf文档的内容都当作文本，对于表格当作图片处理)等进行分组处理，将关联度高、联系紧密的图片和文本作为一组，称作一个群。一个群可以包括一段文本和单张或多张图片、单独的文本、单独的图片。

本发明中，两个关键字达到一定的重合程度，则认为这两个关键字匹配。图片与文本关键字吻合的程度，它用来衡量图片和文本的内容匹配的程度，为确定图片和哪一段文本作为一个群提供依据。只有当图片对于文本的匹配度以及文本对于图片的匹配度均大于某个值时，才认为此图片与文本属于同一个群。它的计算公式为：文本匹配度m1＝可匹配的关键字对数/文本关键字数；图片匹配度m2＝可匹配的关键字对数/图片关键字数。例如：文本的关键字包括如下：A、B、C、D、E、F、G、H，而图片的关键字包括C+、D-、E、I、J则文本的关键字个数为8，图片关键字个数为5，可以形成匹配的关键字有三对：C和C+、D和D-、E和E，则匹配度m1＝3/8＝0.375，匹配度m2＝3/5＝0.6。

图片和文本两者之间相互联系的紧密程度，用来确定同属于一个群的图片之间的优先级，关联度高的图片优先级高，优先显示。例如：文本的关键字包括如下：A、B、C、D、E、F、G、H，而图片的关键字包括C+、D-、E、I、J则文本的关键字个数为8，图片关键字个数为5，可匹配的关键字总数为6，文本和图片的关键字总数为13，则关联度为6/13＝0.46。

用户导入多个文本和多张图片后，进入该模块，首先识别各个文本和各张图片，存储各自的关键字在一个数据结构中，然后对于每张图片，调用图片文本匹配函数，对它的关键字与每段文本的关键字进行匹配，如果匹配结果达到了一定的匹配程度，则认为该图片和该文本可以组成一个群，接着比较此次得到的图片和文本的匹配度与该图片和其它文本的匹配度的最大值，如果此次得到匹配度大，则将此次的匹配信息记录下来，否则，不记录。最后，按图片记录的匹配的信息将图片分到相应的文本中组成一个群，如果图片没有记录相应的与之匹配的文本信息，则独自成为一个群。

图片文本关联度算法：先完成对某张图片和一段文本的所有关键字的比较，并计算它们之间的匹配度和关联度，最后确定该图片和该文本是否可以组成一个群。

该方法的实现过程如下：对于图片的每一个关键字与文本的所有关键字，使用关键字匹配算法进行匹配，如果两个关键字能够匹配，则匹配关键字的对数加1，否则，继续比较下一对关键字。全部比较完毕后，根据匹配度和关联度的计算公式计算匹配度，接下来将匹配度与系统约定的最小匹配度比较，如果两者计算而得的匹配度都大于最小匹配度，则认为该图片和该文本可以组成一个群，记录下关联度与关联的文本身份。

关键字匹配算法：判断两个关键字的最大公共字串长度是否大于系统规定的值(假设为M)认定关键字间匹配。

经过关联计算后，可以将混乱的内容分成若干个“群”。同一群中的内容关联紧，排版时将同群的内容置于同一区域。

根据同一群中的内容元素不同，可以分为以下几种：单文单图群、单文多图群、纯文群、纯图群。

在不考虑表格的情况下，群类型只需按“是否有文本”与“图片数量”分类。

单文本多图片中，用户上传的图片可能大小不等，如果不对图片大小进行标准化处理，会破坏网页的美观。按以下规则对图片的大小进行标准化处理：

1)采用正方形的“像框”作为图片的容器。

2)设“像框”边长为d，屏幕宽度为s。“像框”只有三种规格，即T4型、T2型、T1型：T4型像框为d＝s；T2型像框为d＝0.5×s；T1型像框为d＝0.25×S。

3)每张图片选取宽或高中较长的一边设为L。若L≥s，将图片等比像压缩至L＝s放入像框内；若0.5s≤L＜s，将图片等比像压缩至L＝0.5s放入像框内；若0.25s≤L＜0.5s，将图片等比像压缩至L＝0.25s放入像框内；若L＜0.25s，将图片直接放入L＝0.25s像框内。像框宽度、高度作为图像的宽度、高度。

网页的代码是按线性顺序编写的，也就是代码中的各个元素之间只有先后顺序，没有其他顺序。而在浏览器中呈现出的网页效果是平面的，页面中的元素不仅有先后顺序，也会存在并排或并列的。例如，网页中有一张图片与一段文字，在代码中，它们只有先后顺序；而在浏览器中呈现时，图片可以在文字的上方或下方，也可以在文字的左侧或右侧。这样，线性结构的代码实现平面结构的页面就要引入辅助的代码。

目前常见的方法是手工写CSS(Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”)来确定元素在平面上的位置与大小。手工编写CSS代码表出现重复性操作过多、样式结构会随编码人员主观选择而发生变化。

可以引入模板来解决上述问题。本发明中所采用的模板是编写好的CSS模板，它的优点是可复用性高、结构稳定，不会随编码人员的主观选择而发生变化。同时，针对自适应系统，当需求加入新的终端设备时，修改CSS模板更容易，可扩展性良好。

本发明中，在不考虑表格的情况下(表格的布局方式是请参考正文的“含表格的群模板”)，模板根据文本与图片的数量分为：单文单图模板、单文多图模板、纯文模板、纯模板。

当仅有一张图片且有文本时采用单文单图群模板。这种模板以“对图片改动最小”为原则，一般不对图片进行缩放，只有当图片宽度超过屏幕宽度时才将图片等比像压缩至等于屏幕宽。按图片的宽度、高度不同可分为模板1、模板2、模板3。

图2至图9分别为本发明手机终端屏幕显示模板1至模板8的结构示意图；如图2至图9分别所示，上述模板的特征如下：

模板1为正文与图片并排。当图片宽度不超过屏幕宽度的100％、文本域高度在图片高度的80％～120％之间时，选用这种模板。(文本宽度是屏幕宽度除掉图片宽度后留下的宽度。)

模板2为正文环绕图片。当图片宽度不超过屏幕宽度的80％，且图片高度小于文本域高度的80％时，选用这种模板。

模板3为传统的流式布局，将图片统一置于文本内容之后。单文单图群中不符合上述两种模板的群都采用这种模板。

当有多张图片时，为了消除图片大小不规则而造成的不美观，人为的将图片归为三类：(1)图片长或宽中最大值小于终端屏幕宽度的一半，压缩到边长为终端屏幕宽度四分之一的正方形div中，称为T1类图片；(2)不属于第(1)类且图片长或宽中最大值小于终端屏幕宽度，压缩到边长为终端屏幕宽度二分之一的正方形div中，称为T2类图片(3)不属于第(1)(2)类且图片长或宽中最大值大于等于终端屏幕宽度，压缩到边长为终端屏幕宽度的正方形div中，称为T4类图片。

模板4正文与T2、T1类图片并排，T2类图片单排由上到下排列，T1图片放在T2图片后，T1图片双排先左后上下排列。T4图片在正文与T2、T1图片后，T4图片单排由上到下排列。

模板5正文与T2类图片并排，T2类图片单排由上到下排列。T4图片在正文与T2图片后，T4图片单排由上到下排列，T1图片放在T4图片后T1类图片双排先左后上下排列，

模板6正文与T1类图片并排，T1图片双排先左后上下排列。T4图片在正文与T1图片后，T4图片单排由上到下排列。T2图片放在T4图片后，T2类图片双排先左后上下排列。

模板7正文与T1类图片并排，T1图片单排由上到下排列。T4图片在正文与T1图片后，T4图片单排由上到下排列。T2图片放在T4图片后，T2类图片双排先左后上下排列。

模板8正文不与图片并排。T4图片在正文后，T4图片单排由上到下排列。T2图片放在T4图片后，T2类图片双排先

纯文群按流式布局显示文本。

纯图群的图片处理方法与单图多图群中模板8的图片处理方法相同，图片排列时按T4、T2、T1，关联度由左到右、由上到下递减的顺序排列，不足处留空白。

T4型图片参照模板3直接把图片放在文本下方。有多张T4型图片时，按关联度由高到低进行先后排序，关联度越高，离文本越近。

因为T2、T1型图片宽度不超过屏幕宽度的一半，如果存在T2或T1型图片，可以参考模板1把这两种类型图片与文本并排布局。步骤如下：

1)将T2型排成一纵列，计算总高度h2；将T1型排成并排两列，计算总高度h1；分别计算单列T2型、单列T1型时的文本域高度为H1、H2。计算H1/(h1+h2)、H1/h2、H1/h1、H2/2h1的值是否介于80％～120％，如果有几个值合格，只选第一种。

2)若是H1/(h1+h2)合格，则单列T2型图片下接双列T1型图片，然后文本域在左、T2与T1型图片在右，文本域与图片并排布局(模板4)；若为H1/h2合格，则文本域与单列T2型图片并排，T1型图片排列在T4型图片后(模板5)；若为H1/h1合格，则文本域与双列T1型图片并排，T2型图片排列在T4型图片后(模板6)；若为H1/2h1合格，则文本域与单列T1型图片并排，T2型图片排列在T4型图片后(模板7)；若没有合格的值，则文本域间单独占据屏幕宽，T2型图片排列在T4型图片后，T1型图片排列在T2型图片后(模板8)。

对于纯文群，按流式布局显示文本。

图片处理方法与单图多图群中模板8的图片处理方法相同，图片排列时按T4、T2、T1，关联度由左到右、由上到下递减的顺序排列，不足处留空白。

需要指出的是，表格是一种形状、大小很难变化的内容，所以上述群类型中没有提到表格，表格的处理方法是：群内的文本、图片按群类型布局优化后，统一将表格按流式模板置于其后，如图10所示。

本发明中，上述模板仅是为说明本发明技术方案而设置的，并非用于限定本发明的手机终端的显示模板。本发明之所以给定了上述各显示模板，恰恰说明了本发明技术方案实现的灵活性。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。

Claims (9)

1.一种面向手机终端的面向手机终端的自适应发布Web内容的方法，其特征在于，设置为手机终端用户提供面向手机终端的自适应发布Web内容的服务器系统；所述服务器系统至少包括内容标签生成单元、内容布局单元和Web页面生成单元，其中，内容标签生成单元用于为内容发布方提供内容上载的标签，所述标签至少包括上载内容的属性、与同一Web页面中其它内容的关系；所述内容布局单元至少包括用于在不同手机终端上显示内容的模板；Web页面生成单元用于根据手机终端的类型以及用户所请求的Web页面，为用户生成适用于所述用户手机终端显示的Web页面，并发送给手机用户终端供显示；所述方法包括：

服务器系统获取手机终端用户对Web页面的访问请求时，获取所请求Web页面中各组成部分的标签，获取各组成部分的各种属性信息、各组成部分之间的关联关系；

所述Web页面生成单元获取用户的手机终端的型号与配置信息，根据用户请求Web页面中各组成部分的各种属性信息以及各组成部分之间的关联关系，进行显示内容模板的匹配，为Web页面请求用户生成适用于所述用户手机终端显示的Web页面；

服务器系统将生成的Web页面发送给用户的手机终端并显示。

2.根据权利要求1所述的方法，其特征在于，所述内容的属性信息至少包括内容名称、内容所属文本的格式、内容的大小、内容信息摘要；

所述内容布局单元根据Web页面中内容的内容大小、内容所属文本的格式获取内容的显示格式，根据内容的显示格式、内容之间的关联程度以及各种手机终端屏幕的分辨率大小，进行Web页面的排版；其中，属性相同或相近的内容设于相邻区域；和/或，有关联关系的内容显示于相邻的区域。

3.根据权利要求2所述的方法，其特征在于，根据内容的显示格式、内容之间的关联程度以及各种手机终端屏幕的分辨率大小，进行Web页面的排版具体为：

确定Web页面中所有内容的显示格式大小以及手机终端显示屏的分辨率，确定各内容显示格式应显示的区域；对于图片内容，以图片占据整个显示屏幕的宽度并纵向连续为准则，图片大小相当时分配相同的显示区域，各图片大小差距较大时，以宽度和/或长度为二分之一、四分之一以及八分之一的比例为各图片分配显示区域，或以宽度和/或长度为三分之二、三分之一、六分之一的比例为各图片分配显示区域；对于文本文件，以流式布局方式分配显示区域；对于表格，根据手机终端屏幕的分辨率对表格的显示格式进行缩放后，置于Web页面最后；其中，对于包含有图片、文本及表格的综合内容，以文本流布局方式分配显示区域。

4.根据权利要求2所述的方法，其特征在于，所述Web页面生成单元获取用户的手机终端的型号信息，根据用户请求Web页面中各组成内容的各种属性信息以及各组成内容之间的关联关系，进行显示内容模板的匹配具体为：

根据用户注册的手机终端型号或发送Web页面请求时携带的手机终端型号获取手机终端的型号信息；根据用户请求页面中包含的具体页面内容，各内容的大小以及显示格式等，进行所确定手机终端型号对应的显示模板的匹配；

根据所确定的显示模板提供的显示区域，将Web页面的各内容分按所述模板设定的显示区域进行显示设置：图片大小与显示区域不完全匹配时，以能在所分配显示区域内最大显示完整图片的原则放置图片，未覆盖区域以图片的背景色填充；文本文件以手机屏幕整个宽度为限，横向流式显示，文本显示格式大小为设定值，其中，对于PDF文本，提取其中的显示内容，以流式方式进行显示。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

对于Web页面的内容，将关联度高的内容作为一组，所述组包括文本和/或图片和/或其他内容；其中，内容的关键字达到设定的重合程度时作为一组；再根据一组中两个以上内容之间相互联系的紧密程度，确定同属于一组的内容之间的优先级，关联度高的内容优先级高，优先显示。

6.一种面向手机终端的自适应发布Web内容的系统，其特征在于，至少包括内容标签生成单元、内容布局单元和Web页面生成单元，其中，内容标签生成单元用于为内容发布方提供内容上载的标签，所述标签至少包括上载内容的属性、与同一Web页面中其他内容的关系；所述内容布局单元至少包括用于在不同手机终端上显示内容的模板；Web页面生成单元用于根据手机终端的类型以及用户所请求的Web页面，为用户生成适用于所述用户手机终端显示的Web页面，并发送给手机用户终端供显示；所述系统还包括：

获取单元，用于获取手机终端用户对Web页面的访问请求时，获取所请求Web页面中各组成部分的标签，获取各组成部分的各种属性信息、各组成部分之间的关联关系；

所述Web页面生成单元进一步获取用户的手机终端的型号和配置信息，根据用户请求Web页面中各组成内容的各种属性信息以及各组成内容之间的关联关系，进行显示内容模板的匹配，为Web页面请求用户生成适用于所述用户手机终端显示的Web页面；

发送单元，用于将生成的Web页面发送给用户的手机终端并显示。

7.根据权利要求6所述的系统，其特征在于，所述内容的属性信息至少包括内容名称、内容所属文本的格式、内容的大小、内容信息摘要；

所述内容布局单元进一步地，根据Web页面中内容的内容大小、内容所属文本的格式获取内容的显示格式，根据内容的显示格式、内容之间的关联程度以及各种手机终端屏幕的分辨率大小，进行Web页面的排版；其中，属性相同或相近的内容设于相邻区域；和/或，有关联关系的内容显示于相邻的区域。

8.根据权利要求7所述的系统，其特征在于，所述内容布局单元进一步地，确定Web页面中所有内容的显示格式大小以及手机终端显示屏的分辨率，确定各内容显示格式应显示的区域；对于图片内容，以图片占据整个显示屏幕的宽度并纵向连续为准则，图片大小相当时分配相同的显示区域，各图片大小差距较大时，以宽度和/或长度为二分之一、四分之一以及八分之一的比例为各图片分配显示区域，或以宽度和/或长度为三分之二、三分之一、六分之一的比例为各图片分配显示区域；对于文本文件，以流式布局方式分配显示区域；对于表格，根据手机终端屏幕的分辨率对表格的显示格式进行缩放后，置于Web页面最后；其中，对于包含有图片、文本及表格的综合内容，以文本流布局方式分配显示区域。

9.根据权利要求7所述的系统，其特征在于，所述Web页面生成单元进一步获取用户的手机终端的型号信息，根据用户请求Web页面中各组成内容的各种属性信息以及各组成内容之间的关联关系，进行显示内容模板的匹配具体为：

根据用户注册的手机终端型号或发送Web页面请求时携带的手机终端型号获取手机终端的型号信息；根据用户请求页面中包含的具体页面内容，各内容的大小以及显示格式等，进行所确定手机终端型号对应的显示模板的匹配；

根据所确定的显示模板提供的显示区域，将Web页面的各内容分按所述模板设定的显示区域进行显示设置：图片大小与显示区域不完全匹配时，以能在所分配显示区域内最大显示完整图片的原则放置图片，未覆盖区域以图片的背景色填充；文本文件以手机屏幕整个宽度为限，横向流式显示，文本显示格式大小为设定值，其中，对于PDF文本，提取其中的显示内容，以流式方式进行显示。

Images