页面可视化生成方法和装置的制造方法
【技术领域】
[0001] 本发明涉及网页技术领域，具体涉及一种页面可视化生成方法和装置。
【背景技术】
[0002] 随着浏览器的应用，越来越多的用户通过浏览器在互联网中访问各种网页。而随 着互联网的发展，各种各样的页面也随之产生，其中一种就是应用页面，该种页面使用了简 单的页面结构承载了简单的页面元素，方便用户快速获取信息。浏览器访问网页的过程大 致是：发起网页请求到服务器；服务器返回网页文档给浏览器如HTML(HypertextMarkup Language，超文本标记语言）文档；浏览器解析网页文档，得到DOM(DocumentObject Model，文档对象模型）树和CSS(CascadingStyleSheets，级联样式表）文件，CSS文件中 记录了DOM树中各个节点的展示坐标；然后浏览器即可根据DOM树和CSS文件渲染网页以 进行展示。
[0003] 在先技术中，对于服务器的网页文档，大都是直接通过编辑源代码的形式得到网 页文档，在网页文档编辑完成之后，再利用浏览器引擎打开该网页文档进行浏览，如果网页 哪里结构不合适，再回到源代码中对相应位置信息的代码进行修改。其在网页文档的开发 过程中，编辑过程麻烦，效率低。
【发明内容】
[0004] 鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上 述问题的页面可视化生成装置和相应的页面可视化生成方法。
[0005] 依据本发明的一个方面，提供了一种页面可视化生成方法，包括：
[0006]启动页面操作框架；所述页面操作框架中包括至少一个操作页面；
[0007] 在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在所述操作 页面中的位置信息；
[0008] 根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在 操作页面中的位置信息，生成页面文档。
[0009] 优选的，在所述页面操作框架中，接收用户插入的页面元素之后，还包括
[0010] 接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作页面中的 位置信息。
[0011] 优选的，所述接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在 操作页面中的位置信息包括：
[0012] 接收用户对所述操作页面中的页面元素的拖拽操作，并根据所述拖拽操作重新确 定所述页面元素在所述页面操作框架中的位置信息。
[0013] 优选的，如果所述页面操作框架包括多个操作页面，则在各个操作页面中，接收用 户插入的页面元素之后，还包括：
[0014] 接收对操作页面的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述 操作页面中接收用户插入的页面元素。
[0015] 优选的，所述在各个操作页面中，接收用户插入的页面元素之后，还包括：
[0016] 接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在，则在所述 页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的页面元 素。
[0017] 优选的，根据页面操作框架，操作页面，操作页面中的各个页面元素，操作页面在 页面操作框架中的位置信息，以及各个页面元素在操作页面中的位置信息，生成页面文档， 包括：
[0018] 针对页面操作框架对生成body标签，针对每个操作页面生成一个父div标签，针 对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；
[0019] 在每个子div标签中，针对相应的页面元素内容，生成相应的元素标签以及元素 内容代码；
[0020] 根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作框架中的位 置信息，确定每个父div标签和每个子div标签的CSS位置信息；
[0021] 根据所述body标签、所述父div标签、所述子div标签、每个父div标签和每个子 div标签的CSS位置信息，生成页面文档。
[0022] 优选的，在生成页面文档之后，还包括：
[0023] 接收对所述页面文档的导出操作；
[0024] 或者，针对所述页面文档生成对应的访问网址。
[0025] 优选的，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元 素。
[0026] 优选的，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述 在各个操作页面中，接收用户插入的页面元素包括：
[0027] 在操作页面中上传本地存储的图片或者多媒体，获得在所述操作页面中的相应类 型的页面元素。
[0028] 优选的，根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页 面元素在操作页面中的位置信息，生成页面文档包括：
[0029] 将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的图片或者多媒 体的网址；
[0030] 基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元素代码。
[0031] 依据本发明的另外一个方面，本发明提供了一种页面可视化生成装置，包括：
[0032] 页面操作框架启动模块，适于启动页面操作框架；所述页面操作框架中包括至少 一个操作页面；
[0033] 页面元素插入模块，适于在各个操作页面中，接收用户插入的页面元素，并确定所 述页面元素在所述操作页面中的位置信息；
[0034] 页面生成模块，适于根据页面操作框架，操作页面，操作页面中的各个页面元素， 以及各个页面元素在操作页面中的位置信息，生成页面文档。
[0035] 优选的，在页面元素插入模块之后，还包括
[0036] 编辑模块，适于接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素 在操作页面中的位置信息。
[0037]优选的，所述编辑模块包括：
[0038] 元素拖拽模块，适于接收用户对所述操作页面中的页面元素的拖拽操作，并根据 所述拖拽操作重新确定所述页面元素在所述页面操作框架中的位置信息。
[0039] 优选的，在页面元素插入模块之后，还包括：
[0040] 第一翻页模块，适于如果所述页面操作框架包括多个操作页面，接收对操作页面 的翻页操作，在进入所述翻页操作指示的操作页面之后，在所述操作页面中接收用户插入 的页面元素。
[0041] 优选的，在页面元素插入模块之后，还包括：
[0042] 第二翻页模块，适于接收对操作页面的翻页操作，当所述翻页操作指示的操作页 面不存在，则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收 用户插入的页面元素。
[0043] 优选的，所述页面生成模块包括：
[0044] 标签转换模块，适于标签转换模块针对页面操作框架对生成body标签，针对每个 操作页面生成一个父div标签，针对操作页面中的每个页面元素生成该操作页面的父div标签的子div标签；
[0045]内容转换模块，适于在每个子div标签中，针对相应的页面元素内容，生成相应的 元素标签以及元素内容代码；
[0046] CSS位置信息确定模块，适于根据各个页面元素在操作页面中的位置信息，各操作 页面在页面操作框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信 息；
[0047] 文档转换模块，适于根据所述body标签、所述父div标签、所述子div标签、每个 父div标签和每个子div标签的CSS位置信息，生成页面文档。
[0048] 优选的，在页面生成模块之后，还包括：
[0049] 文档导出模块，适于接收对所述页面文档的导出操作；
[0050] 或者，线上发布模块，适于针对所述页面文档生成对应的访问网址。
[0051] 优选的，所述页面元素包括文本类页面元素、图片类页面元素、多媒体类页面元 素。
[0052] 优选的，当所述页面元素包括图片类页面元素和/或多媒体类页面元素时，所述 页面元素插入模块包括：
[0053] 上传模块，适于在操作页面中上传本地存储的图片或者多媒体，获得在所述操作 页面中的相应类型的页面元素。
[0054] 优选的，所述页面生成模块包括：
[0055] 元素上传模块，适于将所述图片或者多媒体上传到指定服务器，并获取指定服务 器中的图片或者多媒体的网址；
[0056] 元素转换模块，适于基于所述图片或者多媒体的网址，转换得到网页文档中相应 页面元素代码。
[0057] 根据本发明的一种页面可视化生成方法可以在可视化的页面操作框架中的操作 页面中，插入各种类型的页面元素，在用户对页面元素的操作完成之后，可直接根据页面操 作框架，操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信 息，生成页面文档，由此解决了通过编辑源代码获得网页文档的开发方式下，编辑过程麻 烦，效率低的问题，取得了能够以可视化的方式编辑网页元素，快速获得网页文档，开发过 程简单、效率高的有益效果。
[0058] 上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段， 而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够 更明显易懂，以下特举本发明的【具体实施方式】。
【附图说明】
[0059] 通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通 技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明 的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
[0060] 图1示出了根据本发明一个实施例的一种页面可视化生成方法的流程示意图；
[0061] 图1A示出了本发明实施例的页面可视化编辑工具的示例；
[0062] 图1B示出了本发明实施例的在操作页面中插入页面元素的示例；
[0063] 图1C示出了本发明实施例的在操作页面中插入初始的页面元素的示例；
[0064] 图2示出了根据本发明一个实施例的另一种页面可视化生成方法的流程示意图；
[0065] 图3示出了根据本发明一个实施例的另一种页面可视化生成方法的流程示意图；
[0066] 图4示出了根据本发明一个实施例的一种页面可视化生成装置的结构示意图；
[0067] 图5示出了根据本发明一个实施例的另一种页面可视化生成装置的结构示意图；
[0068] 以及
[0069] 图6示出了根据本发明一个实施例的另一种页面可视化生成装置的结构示意图。
【具体实施方式】
[0070] 下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开 的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例 所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围 完整的传达给本领域的技术人员。
[0071] 本发明实施例的核心思想之一在于，在可视化的页面操作框架中的操作页面中， 插入各种类型的页面元素，在用户对页面元素的操作完成之后，可直接根据页面操作框架， 操作页面，操作页面中的各个页面元素，以及各个页面元素在操作页面中的位置信息，生成 页面文档，解决通过编辑源代码获得网页文档的开发方式下，编辑过程麻烦，效率低的问 题，能够以可视化的方式编辑网页元素，