CN114625365A - 网页编辑界面、网页编辑方法、电子设备和存储介质 - Google Patents

Abstract

本公开实施例公开了一种网页编辑界面、网页编辑方法以及电子设备和存储介质，该网页编辑界面包括：组件列表区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和DOM树显示控件，其中，通过触控DOM树隐藏控件，可隐藏网页编辑界面中展示的网页DOM树结构区；通过触控DOM树显示控件，可显示网页编辑界面中隐藏的网页DOM树结构区；网页DOM树结构区在隐藏状态下，网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；以及网页DOM树结构区在显示状态下，网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑。

Description

网页编辑界面、网页编辑方法、电子设备和存储介质

技术领域

本发明涉及网页设计技术领域，具体涉及一种网页编辑界面、网页编辑方法、电子设备、存储介质和计算机程序产品。

背景技术

现有的网页编辑页面往往包括多个固定区域。例如，在某一具体应用场景中，包括的固定区域可以为组件列表区、DOM(Document Object Model，文档对象模型)树结构区、网页效果展示区和页面设置区。

由于现有的网页编辑页面包括的多个区域是固定的，因此，不同的用户群体无法根据其自身需求灵活地设置符合其偏好度的网页编辑页面，从而最终导致用户体验较差。

发明内容

基于此，有必要针对基于现有的基于网页编辑页面包括多个固定区域而导致的无法根据其自身需求进行灵活设置网页编辑页面问题，提供一种网页编辑界面、网页编辑方法、电子设备、存储介质和计算机程序产品。

第一方面，本公开实施例提供了一种网页编辑界面，包括：组件列表

区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和

DOM树显示控件，其中，

通过触控所述DOM树隐藏控件，可隐藏所述网页编辑界面中展示的网页DOM树结构区；

通过触控所述DOM树显示控件，可显示所述网页编辑界面中隐藏的网页DOM树结构区；

所述网页DOM树结构区在隐藏状态下，所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑；以及

所述网页DOM树结构区在显示状态下，所述网页DOM树结构区和/或所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑。

在一种实施方式中，还包括：页面设置区，以及页面设置隐藏控件和页面设置显示控件，其中，

通过触控所述页面设置隐藏控件，可隐藏所述网页编辑界面中展示的页面设置区；

通过触控所述页面设置显示控件，可显示所述网页编辑界面中隐藏的页面设置区；

所述页面设置区在显示状态下，用于通过组件编辑操作对所述网页DOM树结构区中各组件节点对应的组件和/或所述网页效果展示区中展示的组件进行组件样式和组件参数配置。

在一种实施方式中，所述DOM树隐藏控件和所述DOM树显示控件为同一控件的两个不同状态。

在一种实施方式中，所述页面设置隐藏控件和所述页面设置显示控件为同一控件的两个不同状态。

在一种实施方式中，所述组件操作包括：组件添加、组件复制、组件删除、组件嵌套和组件调序中的一个或多个。

在一种实施方式中，所述组件列表区提供的组件可被直接拖拽至所述网页DOM树结构区和/或所述网页效果展示区中。

在一种实施方式中，所述网页编辑界面包括移动端网页编辑界面或Web端网页编辑界面。

第二方面，本公开实施例提供了一种网页编辑方法，用于网页编辑界面，所述网页编辑界面包括：组件列表区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和DOM树显示控件；

所述方法包括：

响应于所述DOM树隐藏控件被触控，隐藏所述网页编辑界面中展示的网页DOM树结构区；

响应于所述DOM树显示控件被触控，显示所述网页编辑界面中隐藏的网页DOM树结构区；

其中，

所述网页DOM树结构区在隐藏状态下，所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑；

所述网页DOM树结构区在显示状态下，所述网页DOM树结构区和/或所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑。

在一种实施方式中，所述网页编辑界面还包括：页面设置区，以及页面设置隐藏控件和页面设置显示控件；

所述方法还包括：

响应于所述页面设置隐藏控件被触控，隐藏所述网页编辑界面中展示的页面设置区；

响应于所述页面设置显示控件被触控，显示所述网页编辑界面中隐藏的页面设置区；

其中，所述页面设置区在显示状态下，用于通过组件编辑操作对所述网页DOM树结构区中各组件节点对应的组件和/或所述网页效果展示区中展示的组件进行组件样式和组件参数配置。

第三方面，本公开实施例提供一种电子设备，所述电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述可执行指令以实现上述的方法步骤。

第四方面，本公开实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序用于执行上述的方法步骤。

第五方面，本公开实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现上述的方法步骤。

在本公开实施例中，网页编辑界面包括：组件列表区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和DOM树显示控件，其中，通过触控DOM树隐藏控件，可隐藏网页编辑界面中展示的网页DOM树结构区；通过触控DOM树显示控件，可显示网页编辑界面中隐藏的网页DOM树结构区；网页DOM树结构区在隐藏状态下，网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；以及网页DOM树结构区在显示状态下，网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑。本公开实施例提供的网页编辑界面，通过触控DOM树隐藏控件，可以隐藏网页DOM树结构区，这样，非技术人员可以在网页效果展示区通过组件操作和组件列表区提供的组件实现网页编辑；或者，通过触控DOM树显示控件，可以显示网页DOM树结构区，这样，技术人员可以在网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；这样，通过灵活配置网页编辑界面，能够满足不同用户群体对网页进行编辑的需求。

附图说明

通过参考下面的附图，可以更为完整地理解本发明的示例性实施方式。附图用来提供对本公开实施例的进一步理解，并且构成说明书的一部分，与本公开实施例一起用于解释本发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1为根据本公开一示例性实施例提供的网页编辑界面的一编辑界面示意图；

图2为根据本公开一示例性实施例提供的网页编辑界面的另一编辑界面示意图；

图3为根据本申请公开一示例性实施例提供的网页编辑界面的再一编辑界面示意图；

图4为根据本公开一示例性实施例提供的具体应用场景下的网页编辑界面的编辑界面示意图；

图5为根据本公开一示例性实施例提供的网页编辑方法的流程图；

图6为根据本公开一示例性实施例提供的具体应用场景下的网页编辑方法的流程图；

图7示出了本公开一示例性实施例提供的一种电子设备的示意图；

图8示出了本公开一示例性实施例提供的一种计算机可读介质的示意图。

具体实施方式

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

请参考图1，其示出了本申请的一些实施方式所提供的网页编辑界面的一编辑界面示意图，如图1所示的网页编辑界面，包括：组件列表区、网页DOM树结构区和网页效果展示区。

除了如图1所示的上述区域之外，网页编辑界面还包括DOM树显示控件和DOM树隐藏控件。在实际应用场景中，DOM树隐藏控件和DOM树显示控件可以为同一控件的两个不同状态。示例性的，DOM树显示控件和DOM树隐藏控件可以用如图1所示的控件表示，其中，图1中控件的当前状态可以表示DOM树隐藏控件。例如，如图1所示的应用场景下，通过触控如图1所示的左侧控件(此时该控件为DOM树隐藏控件)，可将网页编辑界面中显示的网页DOM树结构区隐藏起来；再者，通过再次触控该控件(此时该控件为DOM树显示控件)，就可以将已隐藏的网页DOM树结构区展示成如图1所示的样子。

在其他实施例中，DOM树隐藏控件和DOM树显示控件也可以是两个不同的控件。

通过触控DOM树隐藏控件，可隐藏网页编辑界面中展示的网页DOM树结构区；

通过触控DOM树显示控件，可显示网页编辑界面中隐藏的网页DOM树结构区；

网页DOM树结构区在隐藏状态下，网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；以及

网页DOM树结构区在显示状态下，网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑。

正如图1所示，该网页编辑界面从左到右依次为组件列表区、网页DOM树结构区和网页效果展示区。

在实际应用场景中，通过触控DOM树隐藏控件，可以隐藏网页DOM树结构区，这样，非技术人员可以在网页效果展示区通过组件操作和组件列表区提供的组件实现网页编辑；或者，通过触控DOM树显示控件，可以显示网页DOM树结构区，这样，技术人员可以在网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；这样，通过灵活配置网页编辑界面，能够满足不同用户群体对网页进行编辑的需求。

在实际应用场景中，组件操作示例性的可以包括：组件添加、组件复制、组件删除、组件嵌套和组件调序中的一个或多个。除了上述常见的组件操作之外，还可以根据不同应用场景的需求，引入其它的组件操作，在此不再赘述。

在一种可能的实现方式中，组件列表区提供的组件可被直接拖拽至网页DOM树结构区中；这样，便于技术人员操作，通过组件操作和组件列表区提供的组件实现网页编辑，最终得到想要实现的网页界面效果。

在一种可能的实现方式中，组件列表区提供的组件可被直接拖拽至网页效果展示区中；这样，便于非技术人员操作，通过组件操作和组件列表区提供的组件实现网页编辑，最终得到想要实现的网页界面效果。

在一种可能的实现方式中，组件列表区提供的组件可被直接拖拽至网页DOM树结构区和网页效果展示区中；这样，便于技术人员操作，通过组件操作和组件列表区提供的组件实现网页编辑，通过同时使用网页DOM树结构区和网页效果展示区进行网页编辑，不仅可以得到想要实现的网页界面效果，还能够有效地提高网页界面编辑的编辑效率。

在本公开实施例提供的网页编辑界面中，网页编辑界面包括移动端网页编辑界面或Web端网页编辑界面。

请参考图2，其示出了本申请的一些实施方式所提供的网页编辑界面的另一编辑界面示意图。如图2所示，本公开实施例提供的网页编辑界面还包括页面设置区。

正如图2所示，该网页编辑界面从左到右依次为组件列表区、网页DOM树结构区、网页效果展示区和页面设置区。

针对如图2所示的左侧控件1的DOM树隐藏控件的描述，具体参见如图1所示的描述，在此不再赘述。

本公开实施例提供的网页编辑界面还包括页面设置隐藏控件和页面设置显示控件。在实际应用场景中，页面设置隐藏控件和页面设置显示控件也可以为同一控件的两个不同状态。示例性的，页面设置隐藏控件和页面设置显示控件可以通过如图2所示的控件2表示，其中，图2中控件的当前状态可以表示页面设置隐藏控件。例如，如图2所示的应用场景下，通过触控如图2所示的右侧控件2(此时该控件2为页面设置隐藏控件)，可将网页编辑界面中显示的页面设置区隐藏起来；通过再次触控如图2所示的右侧控件2(此时该控件2为页面设置显示控件)，就可以将如图2所示的已隐藏的页面设置区重新展示出来。

通过触控页面设置隐藏控件，可隐藏网页编辑界面中展示的页面设置区；

通过触控页面设置显示控件，可显示网页编辑界面中隐藏的页面设置区；

页面设置区在显示状态下，用于通过组件编辑操作对网页DOM树结构区中各组件节点对应的组件和/或网页效果展示区中展示的组件进行组件样式和组件参数配置。

请参考图3，其示出了本申请的一些实施方式所提供的网页编辑界面的再一编辑界面示意图。

如图3所示的网页编辑界面，相比于如图2所示的网页编辑界面，通过触控DOM树隐藏控件，已隐藏网页编辑界面中的网页DOM树结构区；这样的页面配置比较适合非技术人员编辑页面时使用，便于非技术人员通过组件操作和组件列表区提供的组件实现网页编辑，最终得到想要实现的网页界面效果。

此外，如图3所示的网页编辑界面，相对于如图2所示的网页编辑界面更加简洁，使得网页编辑界面的组件列表区、网页效果展示区和页面设置区的三个区域有更多的编辑空间；这样，即使在移动端网页编辑界面(因移动端设备的屏幕有限而导致的网页编辑界面有限)也能方便目标用户在网页效果展示区通过组件操作和组件列表区提供的组件实现网页编辑。

如图4所示，为根据本申请一示例性实施例提供的具体应用场景下的网页编辑界面的编辑界面示意图。

如图4所示，网页编辑界面包括：组件列表区、网页DOM树结构区、网页效果展示区。网页编辑界面还包括DOM树隐藏控件和DOM树显示控件。在实际应用场景中，DOM树隐藏控件和DOM树显示控件可以为同一控件的两个不同状态。针对该控件的描述参见前述图1和图2的相同或相似部分描述，在此不再赘述。

通过触控DOM树隐藏控件，可隐藏网页编辑界面中展示的网页DOM树结构区；通过触控DOM树显示控件，可显示网页编辑界面中隐藏的网页DOM树结构区；网页DOM树结构区在隐藏状态下，网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；以及网页DOM树结构区在显示状态下，网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑。

如图4所示，网页编辑界面除了包括上述DOM树隐藏控件和DOM树显示控件之外，还包括页面设置隐藏控件和页面设置显示控件。在实际应用场景中，页面设置隐藏控件和页面设置显示控件为同一控件的两个不同状态。针对该控件的描述参见前述图2的相同或相似部分描述，在此不再赘述。

本公开实施例提供的网页编辑界面，通过触控DOM树隐藏控件，可以隐藏网页DOM树结构区，这样，非技术人员可以在网页效果展示区通过组件操作和组件列表区提供的组件实现网页编辑；或者，通过触控DOM树显示控件，可以显示网页DOM树结构区，这样，技术人员可以在网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；这样，通过灵活配置网页编辑界面，能够满足不同用户群体对网页进行编辑的需求。

请参考图5，其示出了本申请的一些实施方式所提供的一种网页编辑方法的流程图。由于方法实施例基本相似于网页编辑界面实施例，所以描述得比较简单，相关之处参见网页编辑界面实施例的部分说明即可。下述描述的方法实施例仅仅是示意性的。

请参考图5，其示出了本申请的一些实施方式所提供的一种网页编辑方法的流程图，该网页编辑方法用于网页编辑界面，该网页编辑界面包括：组件列表区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和DOM树显示控件；如图5所示，所述网页编辑方法可以包括以下步骤：

步骤S501：响应于DOM树隐藏控件被触控，隐藏网页编辑界面中展示的网页DOM树结构区；

步骤S502：响应于DOM树显示控件被触控，显示网页编辑界面中隐藏的网页DOM树结构区；

其中，网页DOM树结构区在隐藏状态下，网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；

网页DOM树结构区在显示状态下，网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑。

在实际应用场景中，通过触控DOM树隐藏控件，可以隐藏网页DOM树结构区，这样，非技术人员可以在网页效果展示区通过组件操作和组件列表区提供的组件实现网页编辑；或者，通过触控DOM树显示控件，可以显示网页DOM树结构区，这样，技术人员可以在网页DOM树结构区和/或网页效果展示区用于通过组件操作和组件列表区提供的组件实现网页编辑；这样，通过灵活配置网页编辑界面，能够满足不同用户群体对网页进行编辑的需求。

在一种可能的实现方式中，所述网页编辑界面还包括：页面设置区，以及页面设置隐藏控件和页面设置显示控件；

本公开实施例提供的网页编辑方法还包括以下步骤：

响应于页面设置隐藏控件被触控，隐藏网页编辑界面中展示的页面设置区；

响应于页面设置显示控件被触控，显示网页编辑界面中隐藏的页面设置区；

其中，页面设置区在显示状态下，用于通过组件编辑操作对网页DOM树结构区中各组件节点对应的组件和/或网页效果展示区中展示的组件进行组件样式和组件参数配置。

如图6所示，为根据本申请一示例性实施例提供的具体应用场景下的网页编辑方法的流程图。

基于如图6所示的网页编辑方法与如图5所示的网页编辑方法类似，具体描述参见前述相同或相似部分的描述，在此不再赘述。

在本公开实施例的一些实施方式中本公开实施例提供的网页编辑方法，与本申请前述实施例提供的网页编辑界面出于相同的发明构思，具有相同的有益效果。

本申请实施方式还提供一种与前述实施方式所提供的网页编辑方法对应的电子设备，所述电子设备可以是用于服务端的电子设备，例如服务器，包括独立的服务器和分布式服务器集群等，以执行上述网页编辑方法；所述电子设备也可以是用于客户端的电子设备，例如手机、笔记本电脑、平板电脑、台式机电脑等，以执行上述网页编辑方法。

请参考图7，其示出了本申请的一些实施方式所提供的一种电子设备的示意图。如图7所示，所述电子设备70包括：处理器700，存储器701，总线702和通信接口703，所述处理器700、通信接口703和存储器701通过总线702连接；所述存储器701中存储有可在所述处理器700上运行的计算机程序，所述处理器700运行所述计算机程序时执行本申请前述网页编辑方法。

其中，存储器701可能包含高速随机存取存储器(RAM：Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口703(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网、广域网、本地网、城域网等。

总线702可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。其中，存储器701用于存储程序，所述处理器700在接收到执行指令后，执行所述程序，前述本公开实施例任一实施方式揭示的网页编辑方法可以应用于处理器700中，或者由处理器700实现。

处理器700可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器700中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器700可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本公开实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本公开实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器701，处理器700读取存储器701中的信息，结合其硬件完成上述方法的步骤。

本公开实施例提供的电子设备与本公开实施例提供的网页编辑方法出于相同的发明构思，具有与其采用、运行或实现的方法相同的有益效果。

本申请实施方式还提供一种与前述实施方式所提供的网页编辑方法对应的计算机可读介质，请参考图8，其示出的计算机可读存储介质为光盘80，其上存储有计算机程序(即程序产品)，所述计算机程序在被处理器运行时，会执行前述网页编辑方法。

需要说明的是，所述计算机可读存储介质的例子还可以包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他光学、磁性存储介质，在此不再一一赘述。

本申请的上述实施例提供的计算机可读存储介质与本公开实施例提供的网页编辑方法出于相同的发明构思，具有与其存储的应用程序所采用、运行或实现的方法相同的有益效果。

需要说明的是，附图中的流程图和框图显示了根据本申请的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围，其均应涵盖在本申请的权利要求和说明书的范围当中。

Claims (12)

1.一种网页编辑界面，包括：组件列表区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和DOM树显示控件，其中，

通过触控所述DOM树隐藏控件，可隐藏所述网页编辑界面中展示的网页DOM树结构区；

通过触控所述DOM树显示控件，可显示所述网页编辑界面中隐藏的网页DOM树结构区；

所述网页DOM树结构区在隐藏状态下，所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑；以及

所述网页DOM树结构区在显示状态下，所述网页DOM树结构区和/或所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑。

2.根据权利要求1所述的网页编辑界面，还包括：页面设置区，以及页面设置隐藏控件和页面设置显示控件，其中，

通过触控所述页面设置隐藏控件，可隐藏所述网页编辑界面中展示的页面设置区；

通过触控所述页面设置显示控件，可显示所述网页编辑界面中隐藏的页面设置区；

所述页面设置区在显示状态下，用于通过组件编辑操作对所述网页DOM树结构区中各组件节点对应的组件和/或所述网页效果展示区中展示的组件进行组件样式和组件参数配置。

3.根据权利要求1或2所述的网页编辑界面，其中，所述DOM树隐藏控件和所述DOM树显示控件为同一控件的两个不同状态。

4.根据权利要求2所述的网页编辑界面，其中，所述页面设置隐藏控件和所述页面设置显示控件为同一控件的两个不同状态。

5.根据权利要求1所述的网页编辑界面，其中，所述组件操作包括：组件添加、组件复制、组件删除、组件嵌套和组件调序中的一个或多个。

6.根据权利要求1所述的网页编辑界面，其中，所述组件列表区提供的组件可被直接拖拽至所述网页DOM树结构区和/或所述网页效果展示区中。

7.根据权利要求1所述的网页编辑界面，其中，所述网页编辑界面包括移动端网页编辑界面或Web端网页编辑界面。

8.一种网页编辑方法，用于网页编辑界面，其中，

所述网页编辑界面包括：组件列表区、网页DOM树结构区、网页效果展示区，以及DOM树隐藏控件和DOM树显示控件；

所述方法包括：

响应于所述DOM树隐藏控件被触控，隐藏所述网页编辑界面中展示的网页DOM树结构区；

响应于所述DOM树显示控件被触控，显示所述网页编辑界面中隐藏的网页DOM树结构区；

其中，

所述网页DOM树结构区在隐藏状态下，所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑；

所述网页DOM树结构区在显示状态下，所述网页DOM树结构区和/或所述网页效果展示区用于通过组件操作和所述组件列表区提供的组件实现网页编辑。

9.根据权利要求8所述的方法，其中：

所述网页编辑界面还包括：页面设置区，以及页面设置隐藏控件和页面设置显示控件；

所述方法还包括：

响应于所述页面设置隐藏控件被触控，隐藏所述网页编辑界面中展示的页面设置区；

响应于所述页面设置显示控件被触控，显示所述网页编辑界面中隐藏的页面设置区；

其中，所述页面设置区在显示状态下，用于通过组件编辑操作对所述网页DOM树结构区中各组件节点对应的组件和/或所述网页效果展示区中展示的组件进行组件样式和组件参数配置。

10.一种电子设备，其特征在于，所述电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述可执行指令以实现上述权利要求1至9中任一项所述的方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1至9中任一项所述的方法。

12.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1至9中任一项所述的方法。

Images