网页中组件设计方法及装置与流程

本发明涉及网页设计技术领域，具体而言，涉及一种网页中组件设计方法及装置。

背景技术：

目前，为了便于网页设计人员快速创建网页，达到网页可视化制作的目的，通常把一组html(HyperText Markup Language，超级文本标记语言)代码片段定义为组件，网页设计的过程主要为：设计人员通过网页编辑器选择待设计的组件，对该组件进行操作，设计该组件的外观或者功能，如通过拖拽操作改变组件的位置或大小、以及通过修改组件的属性值设置组件的属性等，设计人员通过网页编辑器将各个设计好的组件进行合成，得到设计好的网页。

通常情况下，网页中可操作的组件外层包有一层包裹容器，该包裹容器用于限定组件的位置和大小，在组件设计过程中，通常在组件的包裹容器上通过浏览器提供的点击、鼠标移入等事件方式识别并确定目标组件，进而对目标组件进行设计。

由于组件本身存在用户交互操作，如链接跳转、移上弹出菜单等，这类操作将影响组件的设计类动作，组件的设计类动作指的是在组件设计过程中对组件执行的动作，如通过拖拽操作改变组件的位置或大小等。通过相关技术中的组件设计方法，无法避免组件的用户交互操作对设计类动作的干扰，导致网页设计效率降低，网页设计操作不便。

技术实现要素：

有鉴于此，本发明的目的在于提供一种网页中组件设计方法及装置，以解决相关技术中的组件设计方法网页设计效率降低，网页设计操作不便的问题。

第一方面，本发明实施例提供了一种网页中组件设计方法，所述方法包括：

调用预先存储的隔离层和待设计网页；

使所述隔离层覆盖所述待设计网页；

接收用户在所述隔离层上对所述待设计网页进行编辑操作的操作指令；

根据所述操作指令编辑所述待设计网页。

结合第一方面，本发明实施例提供了第一方面第一种可能的实施方式，其中，使所述隔离层覆盖所述待设计网页，包括：

按照所述待设计网页的尺寸调整所述隔离层的尺寸，使尺寸调整后的所述隔离层位于所述待设计网页上方，覆盖所述待设计网页。

结合第一方面，本发明实施例提供了第一方面第二种可能的实施方式，其中，所述操作指令携带有用户在所述隔离层上点击所述待设计网页中的组件的点击位置坐标和用户发送的组件编辑参数，根据所述操作指令编辑所述待设计网页，包括：

获取所述待设计网页中各个所述组件之间的层级关系和各个所述组件的平面坐标范围信息；

在各个所述组件中，确定所述平面坐标范围信息包含所述点击位置坐标且所述层级关系排序最前的一个所述组件作为目标组件；

根据所述组件编辑参数编辑所述目标组件。

结合第一方面第二种可能的实施方式，本发明实施例提供了第一方面第三种可能的实施方式，其中，获取所述待设计网页中各个所述组件之间的层级关系，包括：

递归所述待设计网页的部件树，根据所述部件树中各个部件的层级属性确定各个所述部件之间的层级关系，记为父层级关系，其中，所述部件包括容器和所述组件，所述容器中嵌套有至少一个组件；

遍历各个所述容器，获取所述容器嵌套的各个所述组件在所述容器内的层级关系，记为所述容器的子层级关系；

将所有所述容器的所述子层级关系引入到所述父层级关系相应的层级中，得到所述待设计网页中各个所述组件之间的层级关系。

结合第一方面第二种可能的实施方式，本发明实施例提供了第一方面第四种可能的实施方式，其中，确定所述平面坐标范围信息包含所述点击位置坐标且所述层级关系排序最前的一个所述组件作为目标组件，包括：

查询包含所述点击位置坐标的所述平面坐标范围信息，选取查询到的所述平面坐标范围信息所属的组件；

将选取的所述组件中层级关系排序最前的所述组件作为目标组件。

结合第一方面第二种可能的实施方式，本发明实施例提供了第一方面第五种可能的实施方式，其中，确定所述平面坐标范围信息包含所述点击位置坐标且所述层级关系排序最前的一个所述组件作为目标组件，包括：

按照所述层级关系由高到低的顺序遍历各个所述组件，将遍历到的首个包含所述点击位置坐标的所述平面坐标范围信息对应的组件作为目标组件。

结合第一方面上述的实施方式，本发明实施例提供了第一方面第六种可能的实施方式，其中，所述方法还包括：

检测所述待设计网页的尺寸是否发生变化；

当检测到所述待设计网页的尺寸发生变化时，按照变化后的所述待设计网页的尺寸调整所述隔离层的尺寸。

第二方面，本发明实施例提供了网页中组件设计装置，所述装置包括：

调用模块，用于调用预先存储的隔离层和待设计网页；

覆盖模块，用于使所述隔离层覆盖所述待设计网页；

接收模块，用于接收用户在所述隔离层上对所述待设计网页进行编辑操作的操作指令；

编辑模块，用于根据所述操作指令编辑所述待设计网页。

结合第二方面，本发明实施例提供了第二方面第一种可能的实施方式，其中，所述覆盖模块具体用于：

按照所述待设计网页的尺寸调整所述隔离层的尺寸，使尺寸调整后的所述隔离层位于所述待设计网页上方，覆盖所述待设计网页。

结合第二方面上述的实施方式，本发明实施例提供了第二方面第二种可能的实施方式，其中，所述装置还包括：

检测模块，用于检测所述待设计网页的尺寸是否发生变化；

调整模块，用于当检测到所述待设计网页的尺寸发生变化时，按照变化后的所述待设计网页的尺寸调整所述隔离层的尺寸。

本发明实施例中的方法及装置，首先调用预先存储的隔离层和待设计网页，其次使隔离层覆盖待设计网页，然后接收用户在隔离层上对待设计网页进行编辑操作的操作指令，最后根据操作指令编辑待设计网页。由于隔离层覆盖待设计网页，使得用户的编辑操作都是在隔离层上进行的，不直接操作待设计网页本身，从而避免了组件的用户交互操作对设计类动作的干扰，解决了相关技术中的组件设计方法网页设计效率降低，网页设计操作不便的问题。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例提供的网页中组件设计方法的第一种流程示意图；

图2示出了本发明实施例提供的隔离层的应用示意图；

图3示出了本发明实施例提供的网页中组件设计方法的第二种流程示意图；

图4示出了本发明实施例所提供的网页中组件设计装置的第一种模块组成示意图；

图5示出了本发明实施例所提供的网页中组件设计装置的第二种模块组成示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

考虑到通过相关技术中的组件设计方法，无法避免组件的用户交互操作对设计类动作的干扰，导致网页设计效率降低，网页设计操作不便，本发明提供了一种网页中组件设计方法及装置，下面通过实施例进行具体描述。

这里首先介绍组件的含义，组件是网页开发过程中涉及到的一类元素，其包括表格、下拉框、能够弹出的对话框、图片、按钮等，通常情况下，能够在网页开发过程中显示并能够调节大小、位置、颜色、样式等参数的元素都可以归为组件。

本实施例中所指的用户交互操作，指的是网页设计好之后，用户操作网页中的组件时，组件对用户操作的响应动作，比如用户将鼠标放到组件上时，组件进行链接跳转、移上弹出菜单等响应动作。

本实施例中所指的设计类动作，指的是在组件设计过程中对组件执行的动作，如通过拖拽操作改变组件的位置或大小等。

图1示出了本发明实施例提供的网页中组件设计方法的第一种流程示意图，该方法的执行主体为安装有网站设计编辑器的服务器，如图1所示，该方法包括以下步骤：

步骤S102，调用预先存储的隔离层和待设计网页。

本发明实施例中，服务器内部预先存储有隔离层和待设计网页，当用户启动服务器中的网站设计编辑器时，服务器调用预先存储的隔离层，当用户向服务器输入指定打开某个待设计网页的指令时，服务器根据该指令调用相应的待设计网页，其中，待设计网页又可以称为待设计页面。

优选地，服务器通过框架(iframe)的方式调用待设计网页。

步骤S104，使隔离层覆盖待设计网页。

服务器按照待设计网页的尺寸调整隔离层的尺寸，使尺寸调整后的隔离层位于待设计网页上方，覆盖待设计网页。

本实施例中所指的覆盖，指的是完全覆盖，其包括隔离层的尺寸大于待设计网页的尺寸这种情况，还包括隔离层的尺寸等于待设计网页的尺寸这种情况，另外，完全覆盖的标准是，待设计网页的任意一个位置均被隔离层覆盖。

优选地，调整隔离层的尺寸与待设计网页的尺寸相等，并使尺寸调整后的隔离层位于待设计网页上方，覆盖待设计网页。本实施例中，还使隔离层的平面坐标系与待设计网页的平面坐标系一致，以便于根据用户在隔离层上的操作确认用户操作的目标组件。

步骤S106，接收用户在隔离层上对待设计网页进行编辑操作的操作指令。

本实施例中，用户可以通过鼠标点击或者触屏的方式在隔离层上对待设计网页进行编辑操作，服务器接收用户在隔离层上对待设计网页进行编辑操作的操作指令。

步骤S108，根据操作指令编辑待设计网页。

该操作指令携带有用户在隔离层上点击待设计网页中的组件的点击位置坐标和用户发送的组件编辑参数，根据操作指令编辑待设计网页，其具体实现方式可以为：

过程(1)，获取待设计网页中各个组件之间的层级关系和各个组件的平面坐标范围信息；

过程(2)，在各个组件中，确定平面坐标范围信息包含上述点击位置坐标且层级关系排序最前的一个组件作为目标组件；

过程(3)，根据组件编辑参数编辑该目标组件。

其中，待设计网页包括多个组件，各个组件之间具有层级关系，各个组件也分别具有对应的平面坐标范围，比如，在xyz三维坐标系中，定义沿z轴方向表示各个组件之间的层级关系，每一个组件在z轴方向上具有特定的层级级别，隔离层覆盖在所有组件之上，组件的层级关系排序越靠前，距离隔离层的距离越近，每一个组件在x-y平面上占用一定的平面区域，定义在x-y平面上表示各个组件的平面坐标范围信息。

当操作指令携带有用户在隔离层上点击待设计网页中的组件的点击位置坐标时，在各个组件中，确定平面坐标范围信息包含用户输入的点击位置坐标、且层级关系排序最前的一个组件作为目标组件，该目标组件为用户选择的组件，为包含该点击位置坐标且层级级别最高的组件，即包含该点击位置坐标且最靠近隔离层的组件，根据组件编辑参数编辑目标组件，从而达到编辑待设计网页的目的。

上述过程(1)中，通过以下方式获取待设计网页中各个组件之间的层级关系：

过程(11)，递归待设计网页的部件树，根据部件树中各个部件的层级属性确定各个部件之间的层级关系，记为父层级关系，其中，部件包括容器和组件，容器中嵌套有至少一个组件；

过程(12)，遍历各个容器，获取容器嵌套的各个组件在容器内的层级关系，记为容器的子层级关系；

过程(13)，将所有容器的子层级关系引入到父层级关系相应的层级中，得到待设计网页中各个组件之间的层级关系。

其中，部件树由网页设计编辑器提供，部件树中记载待设计网页中各个部件的层级属性，如部件A的层级属性为一级，部件B的层级属性为二级，根据部件树中各个部件的层级属性确定各个部件之间的层级关系，如部件A的层级大于部件B的层级，将各个部件之间的层级关系记为父层级关系。

本实施例中所指的部件有两种类型，一种是容器，容器中嵌套有至少一个组件，另一种是单独的组件，不嵌套在容器中。根据父层级关系可以获知各个部件之间的层级关系，然而，无法获知嵌套在容器内的组件之间的层级关系，因此还需要通过过程(12)遍历各个容器，获取容器嵌套的各个组件在容器内的层级关系，记为容器的子层级关系。

由于每个容器有单独的层级上下文，如，容器A的层级高于容器B，则容器B中任意一个组件的层级级别均不会高于容器A及容器A中任意一个组件的层级级别，且通过过程(11)获知了各个部件之间的层级关系，因此将容器的子层级关系引入到父层级关系相应的层级中，就能够得到待设计网页中各个组件之间的层级关系。

接下来，在本发明提供的实施例中给出过程(2)的两种实现方式，第一种实现方式为：

(21)查询包含点击位置坐标的平面坐标范围信息，选取查询到的平面坐标范围信息所属的组件；

(22)将选取的组件中层级关系排序最前的组件作为目标组件。

在本发明提供的实施例中，先在多个组件中查询到平面坐标范围信息包含点击位置坐标的组件，再在查询到的组件中将层级关系排序最前的组件作为目标组件。

第二种实现方式为：

(21’)按照层级关系由高到低的顺序遍历各个组件，将遍历到的首个包含点击位置坐标的平面坐标范围信息对应的组件作为目标组件。

本发明实施例中，首先对各个组件按照层级关系由高到低的顺序进行排序，按照排序之后的组件顺序，依次将各个组件的平面坐标范围信息与点击位置坐标进行对比，将首个包含点击位置坐标的平面坐标范围信息对应的组件作为目标组件，其中，首个包含点击位置坐标的平面坐标范围信息对应的组件的层级顺序最靠前。

动作(21’)一种具体的实现方式可以是：根据层级关系和平面坐标范围信息生成组件信息列表，组件信息列表中的平面坐标范围信息按照各个组件的层级由高至低排序；按照层级由高至低的顺序遍历组件信息列表中各个组件的平面坐标范围信息，并将平面坐标范围信息与点击位置坐标进行对比；将遍历到的首个包含点击位置坐标的平面坐标范围信息对应的组件作为目标组件，其中，遍历到的首个包含点击位置坐标的平面坐标范围信息对应的组件的层级顺序最靠前。

具体的，首先，根据各个组件的层级关系和平面坐标范围信息生成组件信息列表，然后，在该组件信息列表中，依次判断各个组件的平面坐标范围信息是否包含该点击位置坐标，挑选出第一个包含该点击位置坐标的平面坐标范围信息，最后，将该平面坐标范围信息对应的组件作为目标组件。

第一种实现方式和第二种实现方式相比，第一种实现方式需要将点击位置坐标依次与各个组件的平面坐标范围信息进行比对，数据处理量大，不合适组件数量比较大的情况下，第二种实现方式通过增加排序动作，减少了点击位置坐标与平面坐标范围信息的对比次数，提高了确定目标组件的效率，在组件数量比较大的情况下，采用第二种方式确定目标组件可以大大提高目标组件的确定速度。

进一步的，整个网页中可能包括用户不可见的区域，为了提高后续确定目标组件的效率，在确定目标组件时，过滤掉用户不可见区域内的不可见组件，仅从用户可见区域内的可见组件中查找目标组件，进一步提高目标组件的确定速度，基于此，获取待设计网页中各个组件之间的层级关系和各个组件的平面坐标范围信息，包括：

获取待设计网页中可见范围内的各个组件之间的层级关系和各个组件的平面坐标范围信息。

本发明实施例中，首先调用预先存储的隔离层和待设计网页，其次使隔离层覆盖待设计网页，然后接收用户在隔离层上对待设计网页进行编辑操作的操作指令，最后根据操作指令编辑待设计网页。由于隔离层覆盖待设计网页，使得用户的编辑操作都是在隔离层上进行的，不直接操作待设计网页本身，从而避免了组件的用户交互操作对设计类动作的干扰，解决了相关技术中的组件设计方法网页设计效率降低，网页设计操作不便的问题。

图2示出了本发明实施例提供的隔离层的应用示意图，如图2所示，本实施例中隔离层位于待设计网页上方，与待设计网页尺寸相同，覆盖待设计网页，隔离层的平面坐标系与待设计网页的平面坐标系一致，用户所有操作都是在隔离层上进行，不直接操作网页本身，从而通过隔离层隔离开用户交互操作和设计类动作，避免了组件的用户交互操作对设计类动作的干扰，解决了相关技术中的组件设计方法网页设计效率降低，网页设计操作不便的问题。

考虑到在待设计网页的尺寸在设计过程中可能发生变化，如图3所示，本发明实施例中的方法还包括：

步骤S110，检测待设计网页的尺寸是否发生变化；

步骤S112，当检测到待设计网页的尺寸发生变化时，按照变化后的待设计网页的尺寸调整隔离层的尺寸。

具体地，通过定时轮询的方式检测待设计网页的尺寸是否发生变化，其中，待设计网页的尺寸包括待设计网页的高度和宽度，当待设计网页的尺寸发生变化时，按照变化后的待设计网页的尺寸调整隔离层的尺寸，使隔离层的尺寸与待设计网页的尺寸始终保持一致。

本发明实施例中，通过调整隔离层的尺寸，使隔离层的尺寸与待设计网页的尺寸始终保持一致，能够保证在网页设计过程中隔离层都起到隔离作用，保证在网页设计过程中准确避免组件的用户交互操作对设计类动作的干扰。

另一种实施方式中，还可以对组件进行合理设计，为组件增加设计状态，当组件处于该设计状态被调用时，组件对自身的用户交互操作进行屏蔽，不加载自身的用户交互操作，从而避免组件的用户交互操作对设计类动作的干扰，提高网页设计效率。

对应上述的网页中组件设计方法，本发明实施例还提供了一种网页中组件设计装置，图4示出了本发明实施例所提供的网页中组件设计装置的第一种模块组成示意图，如图4所示，该装置包括：

调用模块41，用于调用预先存储的隔离层和待设计网页；

覆盖模块42，用于使隔离层覆盖待设计网页；

接收模块43，用于接收用户在隔离层上对待设计网页进行编辑操作的操作指令；

编辑模块44，用于根据该操作指令编辑待设计网页。

其中，覆盖模块42具体用于：按照待设计网页的尺寸调整隔离层的尺寸，使尺寸调整后的隔离层位于待设计网页上方，覆盖待设计网页。

上述操作指令携带有用户在隔离层上点击待设计网页中的组件的点击位置坐标和用户发送的组件编辑参数，编辑模块44包括：获取子模块，用于获取待设计网页中各个组件之间的层级关系和各个组件的平面坐标范围信息；确定子模块，用于在各个组件中，确定平面坐标范围信息包含点击位置坐标且层级关系排序最前的一个组件作为目标组件；编辑子模块，用于根据组件编辑参数编辑目标组件。

其中，获取子模块具体用于：递归待设计网页的部件树，根据部件树中各个部件的层级属性确定各个部件之间的层级关系，记为父层级关系，其中，部件包括容器和组件，容器中嵌套有至少一个组件；遍历各个容器，获取容器嵌套的各个组件在容器内的层级关系，记为容器的子层级关系；将所有容器的子层级关系引入到父层级关系相应的层级中，得到待设计网页中各个组件之间的层级关系。

其中，确定子模块具体用于：查询包含点击位置坐标的平面坐标范围信息，选取查询到的平面坐标范围信息所属的组件；将选取的组件中层级关系排序最前的组件作为目标组件。

另一个实施例中，确定子模块具体用于：按照层级关系由高到低的顺序遍历各个组件，将遍历到的首个包含点击位置坐标的平面坐标范围信息对应的组件作为目标组件。

本发明实施例中，首先调用预先存储的隔离层和待设计网页，其次使隔离层覆盖待设计网页，然后接收用户在隔离层上对待设计网页进行编辑操作的操作指令，最后根据操作指令编辑待设计网页。由于隔离层覆盖待设计网页，使得用户的编辑操作都是在隔离层上进行的，不直接操作待设计网页本身，从而避免了组件的用户交互操作对设计类动作的干扰，解决了相关技术中的组件设计方法网页设计效率降低，网页设计操作不便的问题。

图5示出了本发明实施例所提供的网页中组件设计装置的第二种模块组成示意图，如图5所示，本发明实施例中的装置还包括：

检测模块45，用于检测待设计网页的尺寸是否发生变化；

调整模块46，用于当检测到待设计网页的尺寸发生变化时，按照变化后的待设计网页的尺寸调整隔离层的尺寸。

本发明实施例中，通过调整隔离层的尺寸，使隔离层的尺寸与待设计网页的尺寸始终保持一致，能够保证在网页设计过程中隔离层都起到隔离作用，保证在网页设计过程中准确避免组件的用户交互操作对设计类动作的干扰。

本发明实施例所提供的网页中组件设计装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

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

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

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

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

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。