CN104932889A - 页面可视化生成方法和装置 - Google Patents

Abstract

本发明公开了一种页面可视化生成方法和装置，涉及网页技术领域。所述方法包括：启动页面操作框架；所述页面操作框架中包括至少一个操作页面；在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。本发明解决了通过编辑源代码获得网页文档的开发方式下，编辑过程麻烦，效率低的问题，取得了能够以可视化的方式编辑网页元素，快速获得网页文档，开发过程简单、效率高的有益效果。

Description

页面可视化生成方法和装置

技术领域

本发明涉及网页技术领域，具体涉及一种页面可视化生成方法和装置。

背景技术

随着浏览器的应用，越来越多的用户通过浏览器在互联网中访问各种网页。而随着互联网的发展，各种各样的页面也随之产生，其中一种就是应用页面，该种页面使用了简单的页面结构承载了简单的页面元素，方便用户快速获取信息。浏览器访问网页的过程大致是：发起网页请求到服务器；服务器返回网页文档给浏览器如HTML(Hypertext Markup Language，超文本标记语言)文档；浏览器解析网页文档，得到DOM(Document Object Model，文档对象模型)树和CSS(Cascading Style Sheets，级联样式表)文件，CSS文件中记录了DOM树中各个节点的展示坐标；然后浏览器即可根据DOM树和CSS文件渲染网页以进行展示。

在先技术中，对于服务器的网页文档，大都是直接通过编辑源代码的形式得到网页文档，在网页文档编辑完成之后，再利用浏览器引擎打开该网页文档进行浏览，如果网页哪里结构不合适，再回到源代码中对相应位置信息的代码进行修改。其在网页文档的开发过程中，编辑过程麻烦，效率低。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面可视化生成装置和相应的页面可视化生成方法。

依据本发明的一个方面，提供了一种页面可视化生成方法，包括：

启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

优选的，在所述页面操作框架中，接收用户插入的页面元素之后，还包括

接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

优选的，所述接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息包括：

接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

优选的，如果所述页面操作框架包括多个操作页面，则在各个操作页面中，接收用户插入的页面元素之后，还包括：

接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

优选的，所述在各个操作页面中，接收用户插入的页面元素之后，还包括：

接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

优选的，根据页面操作框架，操作页面，操作页面中的各个页面元素，操作页面在页面操作框架中的位置信息，以及各个页面元素在操作页面中的位置信息，生成页面文档，包括：

针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

优选的，在生成页面文档之后，还包括：

接收对所述页面文档的导出操作；

或者，针对所述页面文档生成对应的访问网址。

优选的，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

优选的，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述在各个操作页面中，接收用户插入的页面元素包括：

在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

优选的，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档包括：

将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒体的网址；

基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。

依据本发明的另外一个方面，本发明提供了一种页面可视化生成装置，包括：

页面操作框架启动模块，适于启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

页面元素插入模块，适于在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

页面生成模块，适于根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

优选的，在页面元素插入模块之后，还包括

编辑模块，适于接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

优选的，所述编辑模块包括：

元素拖拽模块，适于接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

优选的，在页面元素插入模块之后，还包括：

第一翻页模块，适于如果所述页面操作框架包括多个操作页面，接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

优选的，在页面元素插入模块之后，还包括：

第二翻页模块，适于接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

优选的，所述页面生成模块包括：

标签转换模块，适于标签转换模块针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

内容转换模块，适于在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

CSS位置信息确定模块，适于根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

文档转换模块，适于根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

优选的，在页面生成模块之后，还包括：

文档导出模块，适于接收对所述页面文档的导出操作；

或者，线上发布模块，适于针对所述页面文档生成对应的访问网址。

优选的，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

优选的，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述页面元素插入模块包括：

上传模块，适于在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

优选的，所述页面生成模块包括：

元素上传模块，适于将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒体的网址；

元素转换模块，适于基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。

根据本发明的一种页面可视化生成方法可以在可视化的页面操作框架中的操作页面中，插入各种类型的页面元素，在用户对页面元素的操作完成之后，可直接根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档，由此解决了通过编辑源代码获得网页文档的开发方式下，编辑过程麻烦，效率低的问题，取得了能够以可视化的方式编辑网页元素，快速获得网页文档，开发过程简单、效率高的有益效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的一种页面可视化生成方法的流程示意图；

图1A示出了本发明实施例的页面可视化编辑工具的示例；

图1B示出了本发明实施例的在操作页面中插入页面元素的示例；

图1C示出了本发明实施例的在操作页面中插入初始的页面元素的示例；

图2示出了根据本发明一个实施例的另一种页面可视化生成方法的流程示意图；

图3示出了根据本发明一个实施例的另一种页面可视化生成方法的流程示意图；

图4示出了根据本发明一个实施例的一种页面可视化生成装置的结构示意图；

图5示出了根据本发明一个实施例的另一种页面可视化生成装置的结构示意图；

以及

图6示出了根据本发明一个实施例的另一种页面可视化生成装置的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明实施例的核心思想之一在于，在可视化的页面操作框架中的操作页面中，插入各种类型的页面元素，在用户对页面元素的操作完成之后，可直接根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档，解决通过编辑源代码获得网页文档的开发方式下，编辑过程麻烦，效率低的问题，能够以可视化的方式编辑网页元素，快速获得网页文档，本发明实施例对网页文档的开发过程简单、效率高。

实施例一

参照图1，其示出了本发明一种页面可视化生成方法的流程示意图，具体可以包括：

步骤110，启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

在本发明实施例中，提供了一个页面可视化编辑工具，如图1A，整个界面为页面可视化编辑工具101，那么在用户启动开始编辑工具的进程之后，则在显示屏中显示如101的界面。在101的界面中，包括了编辑工具栏103，下面有各种编辑工具，比如“插入文本”、“插入图片”、“插入多媒体”、“背景”等工具条，其中“插入文本”、“插入图片”、“插入多媒体”工具条用于插入相应类型的页面元素，“背景”工具条用于修改页面元素的背景。通过滚动条104可以上下拖动，在工具栏界面中展示其他工具条。在101中，102所示位置信息即为一个操作页面。在本发明实施例中，页面操作框架可以理解为一个操作容器，接收各种数据和各种操作，该操作容器在图1A中没示出。如果只有一个操作页面，则操作容器与该操作大小一样，如果有多个操作页面，则该操作容器与多个操作页面的总大小一样。

步骤120，在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

在本发明实施例中，用户可以在某个操作页面中插入页面元素，如图1B，用户插入了一个文本类型的页面元素“坑了个爹的滑梯”和一张图片。

在本发明实施例中，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

当然，对于页面操作框架中包括多个操作页面的情况，用户也可以只在其中一个或几个页面中插入页面元素，其他页面放空。

在实际应用中，用户点击101中的插入某类页面元素的工具条后，首先插入的是默认的相应类型的页面元素，比如内容为空的文本页面元素，内容为空的图片页面元素，如图1C中初始插入的106为内容为空的文本页面元素，106内容为空的图片页面元素。当然页面元素的内容也可以设置其他默认值，然后对于页面元素的内容，可以再进行完善。比如在文本页面元素的虚框105中输入图1B中的“坑了个爹的滑梯”，在图片页面元素的虚框中写入图片的网址或者直接上传图片，如上传图1B中的图片，或者在图片页面元素的虚框中写入多媒体的网址或者直接上传多媒体。页面元素的大小自动根据文本大小、图片尺寸、多媒体尺寸自动更正。

当然，在实际应用中，也可以在点击插入页面元素的工具条时，弹出输入框，输入具体的内容。比如插入文本页面元素时，弹出输入框，用户可以在该输入框中输入文字；插入图片页面元素时，弹出输入框，用户可以在该输入框中输入图片的网址，或者通过用户的点击找到图片的本地磁盘路径，然后上传图片；插入多媒体页面元素时，弹出输入框，用户可以在该输入框中输入多媒体的网址，或者通过用户的点击找到多媒体的本地磁盘路径，然后上传多媒体。其中，所述多媒体比如视频、音频等。

优选的，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述在各个操作页面中，接收用户插入的页面元素包括：

子步骤121，在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

在本发明实施例中，所述页面元素为一个数据结构，其中的内容可以为空，可以为相应类型的页面内容。比如图1C中的文本页面元素中的内容就为空，图1B中的文本页面元素中的内容是文字。

在本发明实施例中，对于文本，可以直接进行输入，而对于图片或多媒体可以采用两种形式，其中一种是直接输入图片或者多媒体在图片服务器或者多媒体服务器中的网址，比如图片网址“http://img.yixiaoba.com/static/uploads/cons/20141011/6bed6f6023ad93ad.jpg”。但是，为了方便用户对图片的选择，可以直接对本地存储磁盘的中的存储的图片或者多媒体上传到操作页面中。

在本发明实施例中，对于插入的页面元素，可以根据其中的内容大小自动调整页面元素的大小。比如图1C中输入的文本页面元素中，输入大量文字后，根据文字的长度，调整文本页面元素的大小；图1C中图片页面元素中，根据上传的图片尺寸，调整图片页面元素的大小。当前，对于多媒体页面元素，对于上传的多媒体，根据多媒体的尺寸，调整多媒体页面元素的大小。其中所述尺寸可以理解为宽*高。

当然，对于图片页面元素或多媒体页面元素，如果用户输入的是图片或者多媒体的网址，本发明则可通过网址去访问相应服务器，获取图片或者多媒体的内容和尺寸，在相应页面元素中进行展示并相应调整页面元素的大小。

可以理解，本发明在插入页面元素后，可确定页面元素在操作页面中的位置信息，其中位置信息包括：，页面元素的顶部离操作页面顶部的距离，即top值，页面元素的左侧离操作页面左侧的距离，即left值，以及页面元素的宽、高。

当然，在本发明实施例中，确定上述top值和left值，可以通过如下方式进行：预先记录操作页面的四个顶点的在显示屏中的坐标{左上角(x1，y1),右上角(x2，y1),左下角(x1，y2)，右下角(x2，y2)}，然后在页面元素插入后，可以获取页面元素的四个顶点在显示屏中的坐标{左上角(m1，n1),右上角(m2，n1),左下角(m1，n2)，右下角(m2，n2)},那么前述页面元素top值为y1-n1，left值n1-x1。当然，也可以计算页面元素的宽为m2-m1，页面元素的搞n2-n1。

优选的，在所述页面操作框架中，接收用户插入的页面元素之后，还包括

子步骤122，接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

在本发明实施例中，对于已经插入的页面元素，可以在后续过程中对其进行编辑操作。比如对于文本页面元素，可以更改其中的字体大小、更改字体大小、更改字体类型、更改文本页面元素的背景、如对文字进行删除、添加新的文字、更改文字的动画效果，如使文字以波浪形式动态展示等编辑操作。

又比如对于已经插入的图片页面元素或者多媒体页面元素，将其中的图片或者多媒体进行替换，拉伸图片或者页面元素的大小等。

优选的，所述接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息包括：

子步骤123，接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

在本发明实施例中，还可以对插入的页面元素进行拖拽，移动页面元素在操作页面中的位置。那么拖拽结束后，即可根据拖拽操作确定页面元素最终的位置信息。

在本发明实施例中，可以只设置一个操作页面，用户直接在该页面中插入页面元素，进一步还可对页面元素进行编辑。然后进入步骤130。

优选的，如果所述页面操作框架包括多个操作页面，则在各个操作页面中，接收用户插入的页面元素之后，包括：

子步骤124，接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

对于存在多个操作页面的情况，比如3个，用户可以进行翻页，比如在第一个操作页面中页面元素插入完毕，可以向下翻页到第二个操作页面中插入页面元素，如果用户还想对第一个操作页面中的页面元素进行编辑，则可向上翻页到第一个操作页面，对其中的页面元素进行编辑。其他情况以此类推。

步骤130，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

在本发明实施例中，在用户插入了其所需求的页面元素之后，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档，如根据HTML语音的标准生成HTML文档。

优选的，根据页面操作框架，操作页面，操作页面中的各个页面元素，操作页面在页面操作框架中的位置信息，以及各个页面元素在操作页面中的位置信息，生成页面文档，包括：

子步骤131，针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

可以理解，以HTML文档为了，HTML文档对于结构有固定的标签进行限定，对于每个标签在页面中的展示位置也有相应的CSS文件进行限定。

比如一个HTML文档中，body标签标识页面内容展示部分，在body标签下，可以通过div标签进行分级，每个div标签内还可设置子div标签，具体的页面元素可以写入子div标签中。

那么本发明实施例中，为了将当前编辑的各操作页面中的页面元素生成HTML代码，则可以在转换HTML代码时，将页面操作框架转换为body标签；每个操作页面转换为div父标签，该div父标签在body标签之内；每个操作页面中的每个页面元素转换为div子标签，该div子标签在相应操作页面的div父标签之内。

当然，对于每个div父标签赋予和div子标签赋予唯一的class。

如此，HTML的整体结构则转换完毕。其页面结构示例如下：

然后在上述页面结构中添加具体的页面元素内容。

本发明实施例中，各个标签构成了一个DOM树，但是本发明实施例只存在有限的DOM节点层级，页面元素的标签对应DOM节点之间扁平化，计算过程简单，方便构建DOM树结构。

子步骤132，在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

比如文本，可以使用p标签，如<p>坑了个爹的滑梯</p>，或者直接在子div标签中添加文本，如<div class＝“wenben1”>坑了个爹的滑梯</div>。

比如，对于图片可以使用img标签，如<img src＝"http://img.yixiaoba.com/static/uploads/cons/20141011/6bed6f6023ad93ad.jpg"/>。img标签中的src引用图片网址。

比如对于多媒体，可以使用embed标签，如<embedsrchttp://f01.v1.cn/group2/M00/00/C1/ChQB0FV5YC6AE9LOA7bVxmHtjfE575-m.flv>。embed标签src引用多媒体网址。

如此可以得到带有页面元素的主要html代码，如：

优选的，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档包括：

子步骤1321，将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒体的网址；

子步骤1322，基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。

由于HTML代码中，不能直接写入图片或者多媒体，而是写入的图片或者多媒体的网址，那么本发明实施例在将图片页面元素或者多媒体页面元素转换为HTML代码时，如果图片页面元素中的图片是由本地上传得到，或者多媒体页面元素中多媒体是由本地上传得到，那么为了得到图片或者多媒体的网址，则将图片或者上传到指定的服务器，获得相应的图片网址，则将图片或者多媒体上传到指定的服务器，获得相应的多媒体网址。从而可以将网址写入相应的标签中。

子步骤133，根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

针对各个div，其在网页中有展示位置，那么可以根据其位置信息去构建浏览器引擎解析的css文件。

比如对于body，当前的背景是白色，内边距padding和外边距margin都默认为0，那么body的css样式如{margin:0；padding:0；background:#ffffff}。

对于只有一个操作页面的情况，其操作页面与页面操作框架一样大，比如前述sence1的div，那么其css样式选其最近的父级元素也即body的位置信息进行定位，如{position:absolute；left:0；top:0；}当然，如果有背景，还可以加background。对于每个页面元素，可以采用其父级元素定位，在本发明实施例中，每个页面元素的对应子div标签，其父级元素为所在操作页面的父div标签，其代码如{position:absolute；left:10px；top:20px；}，其中px在本发明实施例中为距离单位：像素；其中position:absolute表示当前标签以最近的父级元素定位。

对于有多个操作页面的情况，由于各个操作页面大小一致，后一个操作页面的顶部与前一个操作页面的底部连接，而各个操作页面的宽高也容易获取，那么可以根据操作页面的宽高确定第一个操作页面之后的操作页面的top值，其left值为0。对于每个操作页面内部的页面元素，其CSS位置信息与前述一致。

当然，在本发明实施例中，CSS位置信息可以采用外部CSS样式表的形式，也可以采用内部CSS样式表的形式。本发明不对其加以限制。

子步骤134，根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

在得到带有页面元素的主要HTML代码和各个标签的CSS样式信息后，即可生成最后的HTML文档。

如果选择外部CSS样式表的形式，则将外部级联样式表上传到服务器，那么生成的最后HTML代码如：

如果选择外部内部样式表的形式，则直接将每个div标签的CSS样式写入相应的标签中，那么生成的最后HTML代码如：

如此，一个HTML文档即生成。

优选的，在生成页面文档之后，还包括：

步骤140，接收对所述页面文档的导出操作；

在本发明实施例中，还提供了页面文档导出接口，当用户点击文档导出接口，则将前述HTML文档导出，然后可将HTML文档存储在指定的存储位置。用户可将该导出的HTML文档放到指定的服务器中，并为该HTML文档设置访问网站，方便网络中的用户访问该HTML文档对应的页面。

或者，步骤150，针对所述页面文档生成对应的访问网址。

本发明实施例，还可直接对所述页面文档生成一个访问网址，直接将该页面文档发布到线上，方便网络中的用户访问该HTML文档对应的页面。

在本发明实施例中，各种操作的均封装为指令，当用户在编辑界面中执行相应操作时，系统侦听相应操作，触发相应指令，然后执行相应的动作。

本发明实施例针对应用页面，由于应用页面的内容和结构简单，能够简化为扁平化的DOM树结构，因此本发明构建了页面操作框架、操作页面和页面元素三级结构，其中操作页面和页面元素对用户来说是可视化的，用户能够以可视化的状态构建应用页面，应用页面的构建过程简单，不用编辑源代码，节省人力成本；并且可以在可视化状态下，一次性的将用户需求的结构进行编辑，避免了通过编辑源代码的情况下，靠想象去确定页面元素结构和位置，而导致的页面元素结构和位置的不精确性，提高了应用页面的编辑效率。

实施例二

参照图2，其示出了本发明一种页面可视化生成方法的流程示意图，具体可以包括：

步骤210，启动页面操作框架；所述页面操作框架中包括一个或多个操作页面；

步骤220，在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

步骤230，接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息；

步骤240，接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

如果所述翻页操作指示的操作页面存在，则进入相应操作页面，接收用户插入的页面元素。

当然接收对操作页面的翻页操作，也可以在接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息之后进行。

在本发明实施例中，对于只有一个操作页面的情况，在页面可视化编辑工具101的初始状态下，中只有一个操作页面，当用户在该操作页面中插入页面元素，或者进一步进行编辑后。如果执行向下翻页操作，比如向下滚动鼠标，由于没有更多的操作页面，则会在页面操作框架中新建一个操作页面，该操作页面在第一个操作页面之后，102展示的为新建的这个操作页面，那么用户则可在该操作页面中插入页面元素，或者进一步进行编辑。

在本发明实施例中，默认第一个操作页面向上不在允许创建新的操作页面。当然，也可不进行限定。

在第二个操作页面中，当用户向上执行翻页操作，比如向上滚动鼠标，因为存在第一个操作页面，则102切换到第一操作页面中，当前展示第一个操作页面，用户可对第一个操作页面中的页面元素进行编辑。

在在第二个操作页面中，当用户向下执行翻页操作，比如向下滚动鼠标，由于第二个操作页面中没有更多的操作页面，则在页面操作框架中新建一个操作页面，102展示新建的操作页面，用户可在该新建的操作页面中插入页面元素，并进行编辑。

在本发明实施例中，对于有多个操作页面的情况，比如有2个操作页面，在页面可视化编辑工具102的初始状态下，展示第一个操作页面，当用户在该操作页面中插入页面元素，或者进一步进行编辑后。如果执行向下翻页操作，比如向下滚动鼠标，由于有第二个操作页面，则直接进入第二个操作页面，那么用户则可在该操作页面中插入页面元素，或者进一步进行编辑。

当用户在第二个操作页面中，再进行向下翻页操作，由于没有更多的操作页面，则会在页面操作框架中新建一个操作页面，该操作页面在第一个操作页面之后，102展示的为新建的这个操作页面，那么用户则可在该操作页面中插入页面元素，或者进一步进行编辑。

在本发明实施例中，默认第一个操作页面向上不在允许创建新的操作页面。当然，也可不进行限定。

在第三个操作页面中，当用户向上执行翻页操作，比如向上滚动鼠标，因为存在第一个操作页面，则102切换到第一操作页面中，当前展示第一个操作页面，用户可对第一个操作页面中的页面元素进行编辑。

在在第三个操作页面中，当用户向下执行翻页操作，比如向下滚动鼠标，由于第二个操作页面中没有更多的操作页面，则在页面操作框架中新建一个操作页面，102展示新建的操作页面，用户可在该新建的操作页面中插入页面元素，并进行编辑。

其他情况依此类推。

步骤250，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

本发明实施例中,对页面元素的插入相关步骤和翻页操作相关步骤不限定先后顺序。

本发明实施例与实施例一类似的步骤原理类似，在此不再赘叙。

本发明实施例针对应用页面，由于应用页面的内容和结构简单，能够简化为扁平化的DOM树结构，因此本发明构建了页面操作框架、操作页面和页面元素三级结构，其中操作页面和页面元素对用户来说是可视化的，用户能够以可视化的状态构建应用页面，应用页面的构建过程简单，不用编辑源代码，节省人力成本；并且可以在可视化状态下，一次性的将用户需求的结构进行编辑，避免了通过编辑源代码的情况下，靠想象去确定页面元素结构和位置，而导致的页面元素结构和位置的不精确性，提高了应用页面的编辑效率。

实施例三

参照图3，其示出了本发明一种页面可视化生成方法的流程示意图，具体可以包括：

步骤310，启动页面操作框架；

步骤320，在一操作页面中，接收用户插入的页面元素；

步骤330，在所述操作页面中，接收对所述页面元素的编辑操作，并确定所述页面元素在所述操作页面中的位置信息；

如果用户结束对页面元素的编辑过程，则进入步骤360；如果需要在其他操作页面继续编辑，则进入步骤340。

在初始情况下，展示的是第一个操作页面，用户可在该页面中插入页面元素，对页面元素进行各种编辑操作。

步骤340，接收对操作页面的翻页操作，判断翻页操作指示的操作页面是否存在；如果翻页操作指示的操作页面存在，进入所述翻页操作指示的操作页面之后，进入步骤320；如果翻页操作指示的操作页面不存在，则进入步骤350；

步骤350在所述页面操作框架中添加一个新的操作页面，进入步骤320；

用户可以在某个操作页面中执行翻页操作，比如在第一个操作页面中执行一次向下翻页操作，如果第一个操作页面之后有第二个操作页面，则直接进入第二个操作页面，进入步骤320，用户可在该页面中插入页面元素，对页面元素进行各种编辑操作。

如果第一个操作页面之后没有第二个操作页面，则在所述页面操作框架中添加一个新的操作页面，并展示该新的操作页面，然后进入步骤320，用户可在该页面中插入页面元素，对页面元素进行各种编辑操作。

当用户在第二个操作页面中，执行一次向上的翻页操作，因为前面有第一个操作页面，则进入第一个操作页面，进入步骤320。

在本发明实施例中，第一个操作页面设置为顶部，禁止向上执行翻页操作。当然也可以不设置上述限制，那么此时，向上翻页时，由于第一个操作页面上面没有操作页面，则在所述页面操作框架中添加一个新的操作页面，该新的操作页面变为第一个操作页面，原来的第一个操作页面变为第二个操作页面。

步骤360，在用户完成各种操作之后，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

在用户对操作页面中的页面元素的各种操作之后，如不再插入页面元素，也不再对页面元素进行编辑。在实际应用中可点击保存按钮，进入根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

当然，也可在操作的同时，逐步生成所述页面文档，并实时根据用户的后续操作修改页面文档。

本发明实施例与实施例一类似的步骤原理类似，在此不再赘叙。

本发明实施例针对应用页面，由于应用页面的内容和结构简单，能够简化为扁平化的DOM树结构，因此本发明构建了页面操作框架、操作页面和页面元素三级结构，其中操作页面和页面元素对用户来说是可视化的，用户能够以可视化的状态构建应用页面，应用页面的构建过程简单，不用编辑源代码，节省人力成本；并且可以在可视化状态下，一次性的将用户需求的结构进行编辑，避免了通过编辑源代码的情况下，靠想象去确定页面元素结构和位置，而导致的页面元素结构和位置的不精确性，提高了应用页面的编辑效率。

实施例四

参照图4，其示出了本发明一种页面可视化生成装置的结构示意图，具体可以包括：

页面操作框架启动模块410，适于启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

页面元素插入模块420，适于在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

页面生成模块430，适于根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

优选的，在页面元素插入模块之后，还包括

编辑模块，适于接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

优选的，所述编辑模块包括：

元素拖拽模块，适于接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

优选的，所述页面元素插入模块包括：

第一翻页模块，适于如果所述页面操作框架包括多个操作页面，接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

优选的，所述页面元素插入模块包括：

第二翻页模块，适于接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

优选的，所述页面生成模块包括：

标签转换模块，适于标签转换模块针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

内容转换模块，适于在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

CSS位置信息确定模块，适于根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

文档转换模块，适于根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

优选的，在页面生成模块之后，还包括：

文档导出模块，适于接收对所述页面文档的导出操作；

或者，线上发布模块，适于针对所述页面文档生成对应的访问网址。

优选的，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

优选的，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述页面元素插入模块包括：

上传模块，适于在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

优选的，所述页面生成模块包括：

元素上传模块，适于将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒体的网址；

元素转换模块，适于基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。

实施例五

参照图5，其示出了本发明一种页面可视化生成装置的结构示意图，具体可以包括：

页面操作框架启动模块510，适于启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

页面元素插入模块520，适于在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

编辑模块530，适于接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息；

第二翻页模块540，适于接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

页面生成模块550，适于根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

实施例六

参照图6，其示出了本发明一种页面可视化生成装置的结构示意图，具体可以包括：

页面操作框架启动模块610，适于启动页面操作框架；

页面元素插入模块620，适于在一操作页面中，接收用户插入的页面元素；

编辑模块630，适于在所述操作页面中，接收对所述页面元素的编辑操作，并确定所述页面元素在所述操作页面中的位置信息；

第二翻页模块640，适于接收对操作页面的翻页操作，判断翻页操作指示的操作页面是否存在；如果翻页操作指示的操作页面存在，进入所述翻页操作指示的操作页面之后，进入页面元素插入模块620；如果翻页操作指示的操作页面不存在，则进入页面新建模块650；

页面新建模块650，适于在所述页面操作框架中添加一个新的操作页面，进入页面元素插入模块620；。

页面生成模块660，适于根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的页面可视化生成设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

本发明公开了A1、一种页面可视化生成方法，包括：

启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

A2、如A1所述的方法，在所述页面操作框架中，接收用户插入的页面元素之后，还包括

接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

A3、如A2所述的方法，所述接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息包括：

接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

A4、如A1或A2所述的方法，

如果所述页面操作框架包括多个操作页面，则在各个操作页面中，接收用户插入的页面元素之后，还包括：

接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

A5、如A1或A2所述的方法，所述在各个操作页面中，接收用户插入的页面元素之后，还包括：

接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

A6、如A1所述的方法，根据页面操作框架，操作页面，操作页面中的各个页面元素，操作页面在页面操作框架中的位置信息，以及各个页面元素在操作页面中的位置信息，生成页面文档，包括：

针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

A7、如A1所述的方法，在生成页面文档之后，还包括：

接收对所述页面文档的导出操作；

或者，针对所述页面文档生成对应的访问网址。

A8、如A1所述的方法，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

A9、如A8所述的方法，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述在各个操作页面中，接收用户插入的页面元素包括：

在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

A10、如A9所述的方法，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档包括：

将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒体的网址；

基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。

本发明公开了B11、一种页面可视化生成装置，包括：

页面操作框架启动模块，适于启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

页面元素插入模块，适于在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

页面生成模块，适于根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

B12、如B11所述的装置，在页面元素插入模块之后，还包括

编辑模块，适于接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

B13、如B12所述的装置，所述编辑模块包括：

元素拖拽模块，适于接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

B14、如B11或B12所述的装置，在页面元素插入模块之后，还包括：

第一翻页模块，适于如果所述页面操作框架包括多个操作页面，接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

B15、如B11或B12所述的装置，在页面元素插入模块之后，还包括：

第二翻页模块，适于接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

B16、如B11所述的装置，所述页面生成模块包括：

标签转换模块，适于标签转换模块针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

内容转换模块，适于在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

CSS位置信息确定模块，适于根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

文档转换模块，适于根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

B17、如B11所述的装置，在页面生成模块之后，还包括：

文档导出模块，适于接收对所述页面文档的导出操作；

或者，线上发布模块，适于针对所述页面文档生成对应的访问网址。

B18、如B11所述的装置，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

B19、如B18所述的装置，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述页面元素插入模块包括：

上传模块，适于在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

B20、如B19所述的装置，所述页面生成模块包括：

元素上传模块，适于将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒体的网址；

元素转换模块，适于基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。

Claims (10)

1.一种页面可视化生成方法，包括：

启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。

2.根据权利要求1所述的方法，其特征在于，在所述页面操作框架中，接收用户插入的页面元素之后，还包括

接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息。

3.根据权利要求2所述的方法，其特征在于，所述接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的位置信息包括：

接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。

4.根据权利要求1或2所述的方法，其特征在于，

如果所述页面操作框架包括多个操作页面，则在各个操作页面中，接收用户插入的页面元素之后，还包括：

接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入的页面元素。

5.根据权利要求1或2所述的方法，其特征在于，所述在各个操作页面中，接收用户插入的页面元素之后，还包括：

接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元素。

6.根据权利要求1所述的方法，其特征在于，根据页面操作框架，操作页面，操作页面中的各个页面元素，操作页面在页面操作框架中的位置信息，以及各个页面元素在操作页面中的位置信息，生成页面文档，包括：

针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；

在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素内容代码；

根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；

根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子div标签的CSS位置信息，生成页面文档。

7.根据权利要求1所述的方法，其特征在于，在生成页面文档之后，还包括：

接收对所述页面文档的导出操作；

或者，针对所述页面文档生成对应的访问网址。

8.根据权利要求1所述的方法，其特征在于，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元素。

9.根据权利要求8所述的方法，其特征在于，

当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述在各个操作页面中，接收用户插入的页面元素包括：

在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类型的页面元素。

10.一种页面可视化生成装置，包括：

页面操作框架启动模块，适于启动页面操作框架；所述页面操作框架中包括至少一个操作页面；

页面元素插入模块，适于在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作页面中的位置信息；

页面生成模块，适于根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成页面文档。