CN104090979B - 一种网页编辑方法及装置 - Google Patents

Abstract

本发明公开了一种网页编辑方法及装置，用于实现PC端与移动终端的网页编辑的同步。所述方法包括：当接收到网页编辑请求后，在当前页面上生成移动终端预览层，所述预览层包含与所述移动终端的显示界面一致的编辑界面，所述编辑界面与所述移动终端的显示界面的全局变量相同；识别用户对所述编辑界面的编辑操作；根据所述编辑操作，执行对所述编辑界面的编辑。在编辑网页时，模拟移动终端的显示界面对网页进行编辑，从而方便预览所编辑的网页在移动终端上的显示效果，避免了网页内容发布后，移动终端上显示效果不满意而反复修改的问题，极大地降低了编辑网页的工作量，使得用户能够更好地通过移动终端浏览网页内容。

Description

一种网页编辑方法及装置

技术领域

本发明涉及信息发布技术领域，尤其涉及一种网页编辑方法及装置。

背景技术

现有技术中，对网页进行编辑时，只能简单的对数据进行管理和排序，以及基于PC端的页面预览。由于PC端的浏览器的分辨率和手机的浏览器分辨率差异巨大，往往在PC端上浏览美观的页面，在手机上却会出现变形走样，或者与预期的效果不一致，导致需要反复地对网页进行调试修改。这样不仅增加了编辑者的工作量，也使得手机用户对网页浏览不满意，甚至无法及时浏览新发布的网页内容。

发明内容

本发明实施例提供一种网页编辑方法及装置，用于实现PC端与移动终端的网页编辑的同步。

一种网页编辑方法，包括以下步骤：

当接收到网页编辑请求后，在当前页面上生成移动终端预览层，所述预览层包含与所述移动终端的显示界面一致的编辑界面，所述编辑界面与所述移动终端的显示界面的全局变量相同；

识别用户对所述编辑界面的编辑操作；

根据所述编辑操作，执行对所述编辑界面的编辑。

本发明实施例的一些有益效果可以包括：在编辑网页时，模拟移动终端的显示界面对网页进行编辑，从而方便预览所编辑的网页在移动终端上的显示效果，避免了网页内容发布后，移动终端上显示效果不满意而反复修改的问题，极大地降低了编辑网页的工作量，使得用户能够更好地通过移动终端浏览网页内容。

可选的，所述预览层以半透明的浮层为背景。

在可选方案中，以半透明浮层的方式模拟移动终端的显示界面，从而实现对网页编辑效果的预览。

可选的，所述编辑界面包括标题区、视频预览区和数据列表区，其中，所述标题区中包含标题文字，所述数据列表区中包含数据条；

所述识别用户对所述编辑界面的编辑操作，包括：

识别用户对所述标题文字及所述数据条的编辑操作。

在可选方案中，通过对标题区中的标题文字及数据列表区中的数据条进行编辑，从而实现对网页的编辑及预览效果。

可选的，所述识别用户对所述编辑界面的编辑操作，包括：

识别用户对所述数据条的拖动操作；

所述根据所述编辑操作，执行对所述编辑界面的编辑，包括：

根据所述拖动操作，对所述数据条的位置进行调整。

在可选方案中，通过用户对数据条的上下拖动，可实现网页编辑过程中对数据条位置的调整。

可选的，所述预览层包含二维码生成选项；

在执行对所述编辑界面的编辑之后，所述方法还包括：

识别用户对所述二维码生成选项的点击操作；

根据所述点击操作，生成编辑后的编辑界面的二维码，所述二维码用于为所述移动终端提供所述编辑后的编辑界面的页面信息。

在可选方案中，在编辑界面上编辑网页后，生成该网页的二维码，使得移动终端能够通过二维码中包含的页面信息浏览编辑后的网页。

可选的，所述页面信息包括所述编辑后的编辑界面的地址信息。

在可选方案中，移动终端通过扫描页面信息中的地址信息，获得编辑后的网页的地址，从而浏览编辑后的网页。

一种网页编辑装置，其特征在于，包括：

第一生成模块，用于当接收到网页编辑请求后，在当前页面上生成移动终端预览层，所述预览层包含与所述移动终端的显示界面一致的编辑界面，所述编辑界面与所述移动终端的显示界面的全局变量相同；

第一识别模块，用于识别用户对所述编辑界面的编辑操作；

执行模块，用于根据所述编辑操作，执行对所述编辑界面的编辑。

可选的，所述编辑界面包括标题区、视频预览区和数据列表区，其中，所述标题区中包含标题文字，所述数据列表区种包含数据条；

所述第一识别模块，还用于识别用户对所述标题文字及所述数据条的编辑操作。

可选的，所述第一识别模块，还用于识别用户对所述数据条的拖动操作；

所述执行模块，还用于根据所述拖动操作，对所述数据条的位置进行调整。

可选的，所述预览层包含二维码生成选项；

所述装置还包括：

第二识别模块，用于识别用户对所述二维码生成选项的点击操作；

第二生成模块，根据所述点击操作，生成编辑后的编辑界面的二维码，所述二维码用于为所述移动终端提供所述编辑后的编辑界面的页面信息。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例中一种网页编辑方法的流程图；

图2为本发明实施例中预览层上编辑界面的显示图；

图3为本发明实施例中调整编辑界面上数据条的位置的流程图；

图4为图2所示实施例中调整数据条的位置后的界面显示图；

图5为本发明实施例中生成编辑界面的二维码的方法的流程图；

图6为本发明实施例中二维码编辑选项的界面图；

图7为本发明实施例中一种网页编辑装置的框图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

本发明提供了一种网页编辑的方法，如图1所示，包括以下步骤：

步骤S101，当接收到网页编辑请求后，在当前页面上生成移动终端预览层，预览层包含与移动终端的显示界面一致的编辑界面，编辑界面与移动终端的显示界面的全局变量相同；

步骤S102，识别用户对编辑界面的编辑操作；

步骤S103，根据编辑操作，执行对编辑界面的编辑。

采用本发明的技术方案，在编辑网页时，模拟移动终端的显示界面对网页进行编辑，从而方便预览所编辑的网页在移动终端上的显示效果，避免了网页内容发布后，移动终端上显示效果不满意而反复修改的问题，极大地降低了编辑网页的工作量，使得用户能够更好地通过移动终端浏览网页内容。

在步骤S101中，当用户在PC端编辑网页时，PC端的当前页面上弹出一个移动终端的预览层，该预览层以半透明的浮层为背景。在移动终端的预览层上，包含可编辑的编辑界面，该编辑界面与移动终端上的显示界面一致。编辑界面采用iframe(行内框架)嵌入的方式显示所要编辑的网页，网页内容在预览上自适应显示，即，使用100％的相对宽度，自适应预览页面以及移动终端的显示界面，从而实现了模拟移动终端界面的预览及编辑功能。

此外，预览层上的编辑界面与移动终端的显示界面的全局变量相同。即，编辑界面与移动终端的显示界面共享一个全局变量，当用户在编辑界面编辑网页时，对当前网页的编辑操作就会通过全局变量实时传递到外部的实际网页，移动终端的显示界面显示实际网页时，与在编辑界面上编辑后的网页内容同步。

在步骤S102中，用户在编辑界面上对所要编辑的网页进行编辑，终端接收用户的编辑操作并识别。

在预览层的编辑界面上，包括有标题区、视频预览区和数据列表区，其中，标题区中包含标题文字，数据列表区中包含数据条。

标题区、视频预览区以及数据列表区三个区域是相互独立的，用户可单独对某一区域进行编辑。标题区和数据列表区中的文字采用文本输入框的形式显示，当鼠标悬浮时呈现竖线“|”状态，即用户可对文本输入框中的文字进行编辑和预览。数据条包括图片和文字，在视频预览区内，用户可浏览当前编辑的数据条的图片。

图2所示为一实施例中预览层上编辑界面的显示图。如图2所示，在预览层20上，编辑界面与移动终端的显示界面内容一致，编辑界面可自适应各种移动终端的屏幕。在编辑界面上，从上到下依次为标题区、视频预览区和数据列表区。在数据列表区中，包括如图所示的四个数据条：数据条1、数据条2、数据条3和数据条4。标题区和数据列表区中的文字采用文本输入框的形式显示，当鼠标呈现的竖线“|”位于文本输入框时，即可编辑该文本输入框中的文字。图中所示的“|”位于标题区，因此，用户可对标题区中的标题文字进行编辑。当用户编辑其中某一数据条时，例如“数据条1”，则可在视频预览区内预览数据条1的图片。

可选的，在编辑界面内，用户不仅可以编辑标题区和数据列表区中的文字，也可对数据列表区中的数据条的位置进行调整。

数据列表区中的数据条为单独的层，因此，可通过上下拖动数据条的位置来进行调整。如图3所示，包括以下步骤：

步骤S301，当接收到网页编辑请求后，在当前页面上生成移动终端预览层，预览层包含与移动终端的显示界面一致的编辑界面，编辑界面包括标题区、视频预览区和数据列表区；

步骤S302，识别用户对数据列表区中的数据条的拖动操作；

步骤S303，根据拖动操作，对数据条的位置进行调整。

在图2所示的实施例中，用鼠标拖动“数据条1”的位置，拖动到“数据条2”与“数据条3”之间的位置放开，即可改变数据列表区中数据条的位置，如图4所示。

可选的，在预览层上，还包含二维码生成选项。用户可通过点击二维码生成选项来生成编辑后的编辑界面的二维码。如图5所示，包括以下步骤：

步骤S501，识别用户对二维码生成选项的点击操作；

步骤S502，根据点击操作，生成编辑后的编辑界面的二维码，二维码用于为移动终端提供编辑后的编辑界面的页面信息。

图6所示为预览层上二维码生成选项的界面图。如图6所示，在预览层20上，用户在左侧的编辑界面上编辑好网页后，即可通过右侧的二维码生成选项生成编辑界面的二维码。在二维码生成选项中，用户点击“生成二维码”，即可在二维码生成区域显示所生成的编辑界面的二维码。

二维码中包含编辑界面的页面信息，页面信息包括编辑后的编辑界面的地址信息。当用户使用移动终端浏览页面时，通过扫描二维码，获取二维码提供的该页面的地址信息，即可浏览编辑后的页面，编辑后的页面与编辑界面的内容一致。

图7所示为本发明实施例一种网页编辑装置的框图。如图7所示，包括以下步骤：

第一生成模块71，用于当接收到网页编辑请求后，在当前页面上生成移动终端预览层，预览层包含与移动终端的显示界面一致的编辑界面，编辑界面与移动终端的显示界面的全局变量相同；

第一识别模块72，用于识别用户对编辑界面的编辑操作；识别用户对标题文字及数据条的编辑操作；识别用户对所述数据条的拖动操作；

执行模块73，用于根据编辑操作，执行对编辑界面的编辑；根据拖动操作，对数据条的位置进行调整；

第二识别模块74，用于识别用户对二维码生成选项的点击操作；

第二生成模块75，根据点击操作，生成编辑后的编辑界面的二维码，二维码用于为移动终端提供编辑后的编辑界面的页面信息。

当接收到网页编辑请求后，首先，第一生成模块71在当前页面上生成移动终端预览层，该预览层包含与移动终端的显示界面一致的编辑界面。其次，第一识别模块72识别用户对编辑界面的编辑操作。最后，执行模块73根据编辑操作对编辑界面进行编辑。在编辑完网页后，用户在预览层上的二维码生成选项进行点击操作，第二识别模块74识别用户对二维码生成选项的点击操作，通过第二生成模块75生成编辑后的编辑界面的二维码。这样，用户即可通过移动终端扫描二维码浏览编辑后的网页。

采用本发明的技术方案，在编辑网页时，模拟移动终端的显示界面对网页进行编辑，从而方便预览所编辑的网页在移动终端上的显示效果，避免了网页内容发布后，移动终端上显示效果不满意而反复修改的问题，极大地降低了编辑网页的工作量，使得用户能够更好地通过移动终端浏览网页内容。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (8)

1.一种网页编辑方法，其特征在于，包括：

当接收到网页编辑请求后，在当前页面上生成移动终端预览层，所述预览层包含与所述移动终端的显示界面一致的编辑界面，所述编辑界面与所述移动终端的显示界面的全局变量相同；

识别用户对所述编辑界面的编辑操作；

根据所述编辑操作，执行对所述编辑界面的编辑；

所述编辑界面包括标题区、视频预览区和数据列表区，其中，所述标题区中包含标题文字，所述数据列表区中包含数据条；

所述识别用户对所述编辑界面的编辑操作，包括：

识别用户对所述标题文字及所述数据条的编辑操作。

2.根据权利要求1所述的方法，其特征在于，所述预览层以半透明的浮层为背景。

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

所述识别用户对所述编辑界面的编辑操作，包括：

识别用户对所述数据条的拖动操作；

所述根据所述编辑操作，执行对所述编辑界面的编辑，包括：

根据所述拖动操作，对所述数据条的位置进行调整。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述预览层包含二维码生成选项；

在执行对所述编辑界面的编辑之后，所述方法还包括：

识别用户对所述二维码生成选项的点击操作；

根据所述点击操作，生成编辑后的编辑界面的二维码，所述二维码用于为所述移动终端提供所述编辑后的编辑界面的页面信息。

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

所述页面信息包括所述编辑后的编辑界面的地址信息。

6.一种网页编辑装置，其特征在于，包括：

第一生成模块，用于当接收到网页编辑请求后，在当前页面上生成移动终端预览层，所述预览层包含与所述移动终端的显示界面一致的编辑界面，所述编辑界面与所述移动终端的显示界面的全局变量相同；

第一识别模块，用于识别用户对所述编辑界面的编辑操作；

执行模块，用于根据所述编辑操作，执行对所述编辑界面的编辑；

所述编辑界面包括标题区、视频预览区和数据列表区，其中，所述标题区中包含标题文字，所述数据列表区种包含数据条；

所述第一识别模块，还用于识别用户对所述标题文字及所述数据条的编辑操作。

7.根据权利要求6所述的装置，其特征在于，

所述第一识别模块，还用于识别用户对所述数据条的拖动操作；

所述执行模块，还用于根据所述拖动操作，对所述数据条的位置进行调整。

8.根据权利要求6-7任一项所述的装置，其特征在于，所述预览层包含二维码生成选项；

所述装置还包括：

第二识别模块，用于识别用户对所述二维码生成选项的点击操作；

第二生成模块，根据所述点击操作，生成编辑后的编辑界面的二维码，所述二维码用于为所述移动终端提供所述编辑后的编辑界面的页面信息。