[0120] 子步骤1321，将所述图片或者多媒体上传到指定服务器，并获取指定服务器中的 图片或者多媒体的网址；
[0121] 子步骤1322,基于所述图片或者多媒体的网址，转换得到网页文档中相应页面元 素代码。
[0122] 由于HTML代码中，不能直接写入图片或者多媒体，而是写入的图片或者多媒体的 网址，那么本发明实施例在将图片页面元素或者多媒体页面元素转换为HTML代码时，如果 图片页面元素中的图片是由本地上传得到，或者多媒体页面元素中多媒体是由本地上传得 到，那么为了得到图片或者多媒体的网址，则将图片或者上传到指定的服务器，获得相应的 图片网址，则将图片或者多媒体上传到指定的服务器，获得相应的多媒体网址。从而可以将 网址写入相应的标签中。
[0123] 子步骤133,根据各个页面元素在操作页面中的位置信息，各操作页面在页面操作 框架中的位置信息，确定每个父div标签和每个子div标签的CSS位置信息；
[0124] 针对各个div，其在网页中有展示位置，那么可以根据其位置信息去构建浏览器引 擎解析的css文件。
[0125] 比如对于body，当前的背景是白色，内边距padding和外边距margin都默认为0， 那么body的css样式如{margin:0 ;padding:0 ;background:#ffffff} 〇
[0126] 对于只有一个操作页面的情况，其操作页面与页面操作框架一样大，比如前述 sencel的div，那么其css样式选其最近的父级元素也即body的位置信息进行定位，如 {position:absolute;left:0 ;top:0 ;}当然，如果有背景，还可以加background。对于每 个页面元素，可以采用其父级元素定位，在本发明实施例中，每个页面元素的对应子div标 签，其父级元素为所在操作页面的父div标签，其代码如{position:absolute;left:10px; top: 20px;}，其中px在本发明实施例中为距离单位：像素；其中position:absolute表示 当前标签以最近的父级元素定位。
[0127] 对于有多个操作页面的情况，由于各个操作页面大小一致，后一个操作页面的顶 部与前一个操作页面的底部连接，而各个操作页面的宽高也容易获取，那么可以根据操作 页面的宽高确定第一个操作页面之后的操作页面的top值，其left值为0。对于每个操作 页面内部的页面元素，其CSS位置信息与前述一致。
[0128] 当然，在本发明实施例中，CSS位置信息可以采用外部CSS样式表的形式，也可以 采用内部CSS样式表的形式。本发明不对其加以限制。
[0129] 子步骤134,根据所述body标签、所述父div标签、所述子div标签、每个父div标 签和每个子div标签的CSS位置信息，生成页面文档。
[0130] 在得到带有页面元素的主要HTML代码和各个标签的CSS样式信息后，即可生成最 后的HTML文档。
[0131] 如果选择外部CSS样式表的形式，则将外部级联样式表上传到服务器，那么生成 的最后HTML代码如：
[0132]
[0134] 如果选择外部内部样式表的形式，则直接将每个div标签的CSS样式写入相应的 标签中，那么生成的最后HTML代码如：
[0135]
[0137] 如此，一个HTML文档即生成。
[0138] 优选的，在生成页面文档之后，还包括：
[0139] 步骤140,接收对所述页面文档的导出操作；
[0140] 在本发明实施例中，还提供了页面文档导出接口，当用户点击文档导出接口，则将 前述HTML文档导出，然后可将HTML文档存储在指定的存储位置。用户可将该导出的HTML 文档放到指定的服务器中，并为该HTML文档设置访问网站，方便网络中的用户访问该HTML 文档对应的页面。
[0141] 或者，步骤150,针对所述页面文档生成对应的访问网址。
[0142] 本发明实施例，还可直接对所述页面文档生成一个访问网址，直接将该页面文档 发布到线上，方便网络中的用户访问该HTML文档对应的页面。
[0143] 在本发明实施例中，各种操作的均封装为指令，当用户在编辑界面中执行相应操 作时，系统侦听相应操作，触发相应指令，然后执行相应的动作。
[0144] 本发明实施例针对应用页面，由于应用页面的内容和结构简单，能够简化为扁平 化的DOM树结构，因此本发明构建了页面操作框架、操作页面和页面元素三级结构，其中操 作页面和页面元素对用户来说是可视化的，用户能够以可视化的状态构建应用页面，应用 页面的构建过程简单，不用编辑源代码，节省人力成本；并且可以在可视化状态下，一次性 的将用户需求的结构进行编辑，避免了通过编辑源代码的情况下，靠想象去确定页面元素 结构和位置，而导致的页面元素结构和位置的不精确性，提高了应用页面的编辑效率。
[0145] 实施例二
[0146] 参照图2,其示出了本发明一种页面可视化生成方法的流程示意图，具体可以包 括：
[0147] 步骤210,启动页面操作框架；所述页面操作框架中包括一个或多个操作页面；
[0148] 步骤220,在各个操作页面中，接收用户插入的页面元素，并确定所述页面元素在 所述操作页面中的位置信息；
[0149] 步骤230,接收对所述页面元素的编辑操作，并确定编辑操作后的页面元素在操作 页面中的位置信息；
[0150] 步骤240,接收对操作页面的翻页操作，当所述翻页操作指示的操作页面不存在， 则在所述页面操作框架中添加一个新的操作页面，在所述新的操作页面中接收用户插入的 页面元素。
[0151] 如果所述翻页操作指示的操作页面存在，则进入相应操作页面，接收用户插入的 页面元素。
[0152] 当然接收对操作页面的翻页操作，也可以在接收用户插入的页面元素，并确定所 述页面元素在所述操作页面中的位置信息之后进行。
[0153] 在本发明实施例中，对于只有一个操作页面的情况，在页面可视化编辑工具101 的初始状态下，中只有一个操作页面，当用户在该操作页面中插入页面元素，或者进一步进 行编辑后。如果执行向下翻页操作，比如向下滚动鼠标，由于没有更多的操作页面，则会在 页面操作框架中新建一个操作页面，该操作页面在第一个操作页面之后，102展示的为新建 的这个操作页面，那么用户则可在该操作页面中插入页面元素，或者进一步进行编辑。
[0154] 在本发明实施例中，默认第一个操作页面向上不在允许创建新的操作页面。当然， 也可不进行限定。
[0155] 在第二个操作页面中，当用户向上执行翻页操作，比如向上滚动鼠标，因为存在第 一个操作页面，则102切换到第一操作页面中，当前展示第一个操作页面，用户可对第一个 操作页面中的页面元素进行编辑。
[0156] 在在第二个操作页面中，当用户向下执行翻页操作，比如向下滚动鼠标，由于第二 个操作页面中没有更多的操作页面，则在页面操作框架中新建一个操作页面，102展示新建 的操作页面，用户可在该新建的操作页面中插入页面元素，并进行编辑。
[0157] 在本发明实施例中，对于有多个操作页面的情况，比如有2个操作页面，在页面可 视化编辑工具102的初始状态下，展示第一个操作页面，当用户在该操作页面中插入页面 元素，或者进一步进行编辑后。如果执行向下翻页操作，比如向下滚动鼠标，由于有第二个 操作页面，则直接进入第二个操作页面，那么用户则可在该操作页面中插入页面元素，或者 进一步进行编辑。
[0158] 当用户在第二个操作页面中，再进行向下翻页操作，由于没有更多的操作页面，则 会在页面操作框架中新建一个操作页面，该操作页面在第一个操作页面之后，102展示的为 新建的这个操作页面，那么用户则可在该操作页面中插入页面元素，或者进一步进行编辑。
[0159] 在本发明实施例中，默认第一个操作页面向上不在允许创建新的操作页面。当然， 也可不进行限定。
[0160] 在第三个操作页面中，当用户向上执行翻页操作，比如向上滚动鼠标，因为存在第 一个操作页面，则102切换到第一操作页面中，当前展示第一个操作页面，用户可对第一个 操作页面中的页面元素进行编辑。
[0161] 在在第三个操作页面中，当用户向下执行翻页操作，比如向下滚动鼠标，由于第二 个操作页面中没有更多的操作页面，则在页面操作框架中新建一个操作页面，102展示新建 的操作页面，用户可在该新建的操作页面中插入页面元素，并进行编辑。
[0162] 其他情况依此类推。
[0163] 步骤250,根据页面操作框架，操作页面，操作页面中的各个页面元素，以及各个页 面元素在操作页面中的位置信息，生成页面文档。
[0164] 本发明实施例中，对页面元素的插入相关步骤和翻页操作相关步骤不限定先后 顺序。
[0165] 本发明实施例与实施例一类似的步骤原理类似，在此不再赘叙。
[0166] 本发明实施例针对应用页面，由于应用页面的内容和结构简单，能够简化为扁平 化的DOM树结构，因此本发明构建了页面操作框架、操作页面和页面元素三级结构，其中操 作页面和页面元素对用户来说是可视化的，用户能够以可视化的状态构建应用页面，应用 页面的构建过程简单，不用编辑源代码，节省人力成本；并且可以在可视化状态下，一次性 的将用户需求的结构进行编辑，避免了通过编辑源代码的情况下，靠想象去确定页面元素 结构和位置，而导致的页面元素结构和位置的不精确性，提高了应用页面的编辑效率。
[0167] 实施例三
[0168] 参照图3,其示出了本发明一种页面可视化生成方法的流程示意图，具体可以包 括：
[0169] 步骤310,启动页面操作框架；
[0170] 步骤320,在一操作页面中，接收用户插入的页面元素；
[0171] 步骤330,在所述操作页面中，接收对所述页面元素的编辑操作，并确定所述页面 元素在所述操作页面中的位置信息；
[0172] 如果用户结束对页面元素的编辑过程，则进入步骤360;如果需要在其他操作页 面继续编辑，则进入步骤340。
[0173] 在初始情况下，展示的是第一个操作页面，用户可在该页面中插入页面元素，对页 面元素进行各种编辑操作。
[0174] 步骤340,接收对操作页面的翻页操作，判断翻页操作指示的操作页面是否存在； 如果翻页操作指示的操作页面存在，进入所述翻页操作指示的操作页面之后，进入步骤 320 ;如果翻页操作指示的操作页面不存在，则进入步骤350 ;
[0175] 步骤350在所述页面操作框架中添加一个新的操作页面，进入步骤320;
[0176] 用户可以在某个操作页面中执行翻页操作，比如在第一个操作页面中执行一次向 下翻页操作，如果第一个操作页面之后有第二个操作页面，则直接进入第二个操作页面，进 入步骤320,用户可在该页面中插入页面元素，对页面元素进行各种编辑操作。
[0177] 如果第一个操作页面之后没有第二个操作页面，则在所述页面操作框架中添加一 个新的操作页面，并展示该新的操作页面，然后进入步骤320,用户可在该页面中插入页面 元素，对页面元素进行各种编辑操作。
[0178] 当用户在第二个操作页面中，执行一次向上的翻页操作，因为前面有第一个操作 页面，则进入第一个操作页面，进入步骤320。