CN117520695A

CN117520695A - Page layout method, medium, device and computing equipment

Info

Publication number: CN117520695A
Application number: CN202311348507.1A
Authority: CN
Inventors: 汪韬; 阮佳丽; 欧璇
Original assignee: Hangzhou Netease Shuzhifan Technology Co ltd
Current assignee: Hangzhou Netease Shuzhifan Technology Co ltd
Priority date: 2023-10-17
Filing date: 2023-10-17
Publication date: 2024-02-06

Abstract

The embodiment of the disclosure provides a page layout method, medium, device and computing equipment. The page layout method comprises the following steps: deleting a first container of a page to be processed according to the acquired first instruction; if the number of the remaining sub-containers contained in the second container is greater than 1 after the first container is deleted, updating the CSS attribute of each remaining sub-container; and if the number of the remaining child containers contained in the second container is equal to 1 after the first container is deleted, adjusting the containers in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers. According to the technical scheme, the containers can be automatically aligned, the editing efficiency and intuitiveness of page design are effectively improved, and better experience is brought to users.

Description

Page layout method, medium, device and computing equipment

Technical Field

Embodiments of the present disclosure relate to the field of computers, and more particularly, to page layout methods, media, apparatuses, and computing devices.

Background

This section is intended to provide a background or context to the embodiments of the disclosure recited in the claims. The description herein is not admitted to be prior art by inclusion in this section.

In the web page development process, the layout design of the web page can influence the browsing experience of the user on the web page. The attractive page can attract the clicking of the user, and the retention rate of the user is improved, so that the competitiveness of the user in the market is improved. Therefore, page layout design is one of the most important links in web page development.

Currently, when a developer lays out a page, the layout is basically finished by a grid system, and mainly the grid is dragged into a page designer, so that the grid is abstracted into a container. Wherein the number of columns of containers is preset. However, the existing layout method requires to design the layout of the container by content or manual operation after the container is placed, and has the problems of difficult alignment of the container, non-intuitiveness and low editing efficiency.

Disclosure of Invention

The disclosure provides a page layout method, medium, device and computing equipment to solve the problems of difficult container alignment, non-intuitiveness and low editing efficiency.

In a first aspect of the embodiments of the present disclosure, there is provided a page layout method, including:

deleting a first container of a page to be processed according to the acquired first instruction;

if the number of the remaining sub-containers contained in the second container is greater than 1 after the first container is deleted, updating the CSS attribute of each remaining sub-container so that the updated remaining sub-container is full of the second container, wherein the second container is a parent container of the first container, and the CSS attribute of the container is used for determining the row width and the column width of the container;

And if the number of the remaining child containers contained in the second container is equal to 1 after the first container is deleted, adjusting the containers in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers, so that the adjusted remaining child containers are full of the corresponding parent containers, wherein the parent container information is used for indicating whether the second container has the corresponding parent containers, and the child container information is used for indicating whether the remaining child containers have the corresponding child containers.

In one embodiment of the present disclosure, if the number of remaining sub-containers included in the second container is greater than 1 after deleting the first container, updating the CSS attribute of each remaining sub-container, so that the updated remaining sub-container fills the second container, including:

determining a first proportion of each remaining sub-container in the second container according to the CSS attribute of each remaining sub-container;

calculating a second proportion among the remaining sub-containers according to the first proportion occupied by each remaining sub-container in the second container;

and updating the CSS attribute of each remaining sub-container according to the second proportion so that the updated remaining sub-containers are filled with the second container.

In another embodiment of the present disclosure, the adjusting the container in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers includes:

if the parent container information indicates that the second container does not have a corresponding parent container, and the child container information is used for indicating that the remaining child containers do not have a corresponding child container, deleting the CSS attribute of the second container and the remaining child containers;

if the parent container information indicates that the second container does not have a corresponding parent container, and the child container information is used for indicating that the remaining child containers have corresponding child containers, moving a third container to the second container, synchronizing CSS attributes of the remaining child containers to the second container, and deleting the remaining child containers, wherein the third container is the child container corresponding to the remaining child containers;

if the parent container information indicates that the second container has a corresponding parent container, and the child container information is used for indicating that the remaining child containers have no corresponding child containers, moving the remaining child containers to a fourth container, deleting the second container, wherein the fourth container is the parent container corresponding to the second container;

If the parent container information indicates that the second container has a corresponding parent container, and the child container information is used for indicating that the remaining child containers have corresponding child containers, replacing the second container with a third container, and recalculating the CSS attribute of the fourth container according to the proportion of the space occupied by the third container.

In another embodiment of the present disclosure, the method further comprises:

acquiring a second instruction, wherein the second instruction is used for indicating the target container to be cut according to the dividing line;

if the cutting direction of the dividing line is the same as the layout direction of the parent container of the target container, cutting the parent container of the target container according to the dividing line to obtain two adjacent containers obtained by cutting;

if the dividing direction of the dividing line is different from the layout direction of the father container of the target container, dividing the target container according to the dividing line to obtain two adjacent containers obtained by dividing;

wherein the splitting direction comprises a transverse splitting or a longitudinal splitting.

In another embodiment of the present disclosure, the acquiring the second instruction includes:

determining the position and the cutting direction of the cutting line in response to a first operation of a cutting control, wherein the cutting control is used for transversely cutting or longitudinally cutting the target container;

And responding to a second operation of the segmentation control, and generating the second instruction according to the position of the segmentation line and the segmentation direction.

In another embodiment of the present disclosure, after the determining the position of the dividing line and the dividing direction in response to the first operation of the dividing control, the method further includes:

and displaying the proportion of the space occupied by two adjacent containers corresponding to the dividing line according to the position of the dividing line.

In another embodiment of the present disclosure, the method further comprises:

and after the position of the dividing line is changed, updating the proportion of the space occupied by the two adjacent containers according to the changed position.

In another embodiment of the present disclosure, the method further comprises:

and performing zooming processing on the fifth container in response to the dragging operation on the boundary line of the fifth container.

In another embodiment of the present disclosure, the method further comprises:

and responding to the drag operation of the boundary line of the first control, and performing scaling processing on the first control.

In another embodiment of the present disclosure, the method further comprises:

and in response to a third operation on a second control, moving the second control to the target position.

In another embodiment of the present disclosure, the method further comprises:

in response to a click operation of the alignment control, performing an alignment process on a plurality of third controls, the alignment process including any one of: right, left, top, bottom, horizontal and vertical centering.

In another embodiment of the present disclosure, the method further comprises:

and adjusting the size of the sixth container in response to the received size editing instruction for the sixth container.

In a second aspect of the embodiments of the present disclosure, there is provided a page layout apparatus, including:

the deleting module is used for deleting the first container of the page to be processed according to the acquired first instruction;

the first adjustment module is configured to update CSS attributes of each remaining child container if the number of remaining child containers included in the second container is greater than 1 after the first container is deleted, so that the updated remaining child containers are filled with the second container, where the second container is a parent container of the first container, and the CSS attributes of the containers are used to determine a row width and a column width of the container;

and the second adjustment module is used for adjusting the containers in the page to be processed according to the father container information of the second container and the child container information of the remaining child containers if the number of the remaining child containers contained in the second container is equal to 1 after the first container is deleted, so that the adjusted remaining child containers are filled with the corresponding father containers, the father container information is used for indicating whether the second container has the corresponding father containers, and the child container information is used for indicating whether the remaining child containers have the corresponding child containers.

In one embodiment of the disclosure, the first adjusting module is specifically configured to:

In another embodiment of the disclosure, the second adjusting module is specifically configured to:

In one embodiment of the present disclosure, the apparatus further comprises:

the acquisition module is used for acquiring a second instruction, wherein the second instruction is used for indicating the target container to be segmented according to the segmentation line;

the first dividing module is used for dividing the parent container of the target container according to the dividing line if the dividing direction of the dividing line is the same as the layout direction of the parent container of the target container, and obtaining two adjacent containers obtained by dividing;

the second segmentation module is used for segmenting the target container according to the segmentation line if the segmentation direction of the segmentation line is different from the layout direction of the parent container of the target container, so as to obtain two adjacent containers obtained by segmentation;

In another embodiment of the present disclosure, the obtaining module is specifically configured to:

In another embodiment of the present disclosure, after the determining the position of the dividing line and the dividing direction in response to the first operation of the dividing control, the apparatus further includes:

and the display module is used for displaying the proportion of the space occupied by the two adjacent containers corresponding to the dividing line according to the position of the dividing line.

In another embodiment of the present disclosure, the apparatus further comprises:

and the updating module is used for updating the proportion of the space occupied by the two adjacent containers according to the changed positions after the positions of the dividing lines are changed.

and the first scaling module is used for responding to the drag operation of the boundary line of the fifth container and scaling the fifth container.

and the second scaling module is used for responding to the drag operation of the boundary line of the first control and scaling the first control.

and the moving module is used for responding to a third operation on the second control and moving the second control to the target position.

the alignment module is used for responding to clicking operation of the alignment control and performing alignment processing on a plurality of third controls, wherein the alignment processing comprises any one of the following steps: right, left, top, bottom, horizontal and vertical centering.

and the third adjusting module is used for responding to the received size editing instruction for the sixth container and adjusting the size of the sixth container.

In a third aspect of the disclosed embodiments, there is provided a computing device comprising: a processor, a memory and computer program instructions stored on the memory and executable on the processor, characterized in that the processor is adapted to implement the method according to the first aspect and embodiments when executing the computer program instructions.

In a fourth aspect of embodiments of the present disclosure, a computer-readable storage medium is provided, in which computer-executable instructions are stored, which when executed by a processor are adapted to carry out the method according to the first aspect and the embodiments.

According to the page layout method, medium, device and computing equipment of the embodiment of the disclosure, according to the acquired first instruction, a first container of a page to be processed is deleted; if the number of the remaining sub-containers contained in the second container is greater than 1 after the first container is deleted, updating the CSS attribute of each remaining sub-container so that the updated remaining sub-containers are filled in the second container; and if the number of the remaining child containers contained in the second container is equal to 1 after the first container is deleted, adjusting the containers in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers, so that the adjusted remaining child containers are full of the corresponding parent containers after adjustment. According to the technical scheme, after the container is deleted, other containers in the page are adjusted according to the nesting relation between the container and other containers, so that the remaining containers can still be filled with the whole upper container, the purpose of automatically aligning the containers is achieved, the editing efficiency and intuitiveness of page design are effectively improved, and better experience is brought to developers.

Drawings

The above, as well as additional purposes, features, and advantages of exemplary embodiments of the present disclosure will become readily apparent from the following detailed description when read in conjunction with the accompanying drawings. Several embodiments of the present disclosure are illustrated by way of example, and not by way of limitation, in the figures of the accompanying drawings, in which:

FIG. 1 is a schematic diagram of a page design interface provided in an embodiment of the present disclosure;

FIG. 2 is a schematic diagram of another page design interface provided by an embodiment of the present disclosure;

FIG. 3 is a schematic diagram of another page design interface provided by an embodiment of the present disclosure;

FIG. 4 is a schematic diagram of a page layout according to an embodiment of the disclosure;

FIG. 5 is a schematic diagram of another page layout according to an embodiment of the present disclosure;

fig. 6 is a schematic flow chart of a page layout method according to an embodiment of the disclosure;

FIG. 7 is a schematic diagram of another page layout according to an embodiment of the present disclosure;

FIG. 8 is a schematic diagram of another page layout according to an embodiment of the present disclosure;

FIG. 9 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 10 is a schematic diagram of another page layout according to an embodiment of the present disclosure;

FIG. 11 is a schematic diagram of another page layout according to an embodiment of the present disclosure;

FIG. 12 is a flowchart of another page layout method provided by an embodiment of the present disclosure;

FIG. 13 is a schematic flow chart of container segmentation according to an embodiment of the disclosure;

FIG. 14 is a schematic flow chart of another container segmentation provided in an embodiment of the present disclosure;

FIG. 15 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 16 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 17 is a schematic diagram of another page layout according to an embodiment of the present disclosure;

FIG. 18 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 19 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 20 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 21 is a schematic diagram of another page layout provided by an embodiment of the present disclosure;

FIG. 22 is a schematic diagram of a storage medium according to an embodiment of the present disclosure;

FIG. 23 is a page layout apparatus provided in an embodiment of the present disclosure;

FIG. 24 is another page layout apparatus provided by an embodiment of the present disclosure;

fig. 25 is a schematic structural diagram of a computing device provided by an embodiment of the present disclosure.

In the drawings, the same or corresponding reference numerals indicate the same or corresponding parts.

Detailed Description

The principles and spirit of the present disclosure will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are presented merely to enable one skilled in the art to better understand and practice the present disclosure and are not intended to limit the scope of the present disclosure in any way. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

Those skilled in the art will appreciate that embodiments of the present disclosure may be implemented as a system, apparatus, device, method, or computer program product. Accordingly, the present disclosure may be embodied in the following forms, namely: complete hardware, complete software (including firmware, resident software, micro-code, etc.), or a combination of hardware and software.

According to an embodiment of the disclosure, a page layout method, medium, device and computing equipment are provided.

In this context, it is to be understood that the terms involved:

page layout: page layout refers to the manner in which content and elements are organized and arranged on a web page. It is an important aspect in web page design that can affect the readability, ease of use, and aesthetics of the web page. Common page layouts include single column layouts, double column layouts, triple column layouts, grid layouts, and the like.

Page container (simply: container): a page container refers to a rectangular area used in the design of a web page to contain web page content. It can be created and controlled with hypertext markup language (Hyper Text Markup Language, HTML) elements and cascading style sheets (Cascading Style Sheets, CSS) styles, supporting nesting.

Page designer: a page designer is a tool or software for creating a web page interface. It typically provides a set of user interface elements and layout tools to assist the user in designing and arranging various elements on the web page, such as text, images, forms, buttons, and the like. Through the page designer, a user can create a web page layout, set styles and formats, add interactive elements and links, and the like through interaction modes such as dragging and placing. Page designers may be online tools or locally installed software, and common page designers include Adobe Dreamweaver, microsoft Expression Web, google Web Designer, and the like.

Grid system: grid systems are commonly used to implement responsive layout of web pages, i.e., automatically adjusting the layout and element size of web pages according to the screen size and resolution of different devices. By defining different grid cell sizes and layouts, the grid system may implement a variety of different web page layouts, such as a single column layout, a double column layout, a triple column layout, and so on. Common grid systems include Bootstrap, foundation, semantic UI, etc., which provide a series of predefined grid cells and layout styles so that web page designers can more conveniently create responsive web page layouts.

Furthermore, any number of elements in the figures is for illustration and not limitation, and any naming is used for distinction only and not for any limiting sense.

In addition, the data related to the disclosure may be data authorized by the user or fully authorized by each party, and the collection, transmission, use and the like of the data all conform to the requirements of national related laws and regulations, and the embodiments of the disclosure may be mutually combined.

Application scene overview

By way of example, the page layout method provided by the embodiments of the present disclosure may be applied to the page design interface shown in fig. 1, where the page design interface may be a display interface of a page designer. Fig. 1 is a schematic diagram of a page design interface according to an embodiment of the present disclosure. As shown in fig. 1, a rectangle composed of broken lines on the left side in fig. 1 is a page to be designed, and components and properties for designing the interface to be designed are on the right side. The components comprise a basic component and an extension component, wherein the basic component is used for realizing the basic function of page design, and the extension component is used for realizing the additional function of page design. The base component includes a variety of layout approaches such as a linear layout, a grid layout, and a column layout.

In this embodiment, when the user wants to add a container in the page to be designed, the grid layout control needs to be dragged to the page to be designed, so that the page designer abstracts the grid into the container in the page to be designed.

In abstracting the grid into a container, it is also necessary to determine the grid layout. Fig. 2 is a schematic diagram of another page design interface according to an embodiment of the present disclosure. As shown in fig. 2, the grid layout includes several ways, such as: 1 column, 2 columns (i.e., the above double column layout), 3 columns (i.e., the above triple column layout), and 2 columns 3/7 (i.e., the double column layout with a width ratio of 3/7 for the two columns of containers).

In connection with fig. 1, assuming that the grid layout manner determined by the user is 3 columns, the page design interface after abstracting the grid into a container may be as shown in fig. 3. Fig. 3 is a schematic diagram of another page design interface according to an embodiment of the present disclosure. As shown in fig. 3, the page to be designed of the page design interface includes 3 columns of containers.

The principles and spirit of the present disclosure are explained in detail below with reference to several representative embodiments thereof.

Summary of The Invention

The inventors have found that in the prior art, the width of the container inside the grid is somewhat unchanged, and that some can be changed by a user's drag operation, but the value of the change is substantially fixed. That is, after placing the container in the page to be designed, it is often necessary to prop open the layout by content or manually setting the container width and height. Illustratively, as shown in FIG. 3, the user may add content by clicking on an add control in the container (i.e., the "+" in the container of FIG. 3), thereby stretching the layout.

Furthermore, since the containers in the page are laid out by setting the width and height of the containers manually, when deleting the containers in the page, the layout needs to be re-laid out by setting the width and height of the remaining containers in the page manually, and the hierarchy of the containers needs to be designed in advance in the brain according to visual design, so that the problems of difficult alignment of the containers, non-intuitiveness and low editing efficiency exist.

Based on the above problems, the disclosure provides a page layout method, medium, device and computing equipment, after deleting a container of a page, the container in the page can be adjusted according to the number of remaining child containers contained in a parent container of the container, so that each adjusted container can be automatically aligned without manual dragging, and editing efficiency and intuitiveness are effectively improved.

Having described the basic principles of the present disclosure, various non-limiting embodiments of the present disclosure are specifically described below.

Exemplary method

A method for page layout according to an exemplary embodiment of the present disclosure will be described below with reference to fig. 4 in conjunction with the application scenarios shown in fig. 1 to 3. It should be noted that the above application scenario is only shown for the convenience of understanding the spirit and principles of the present disclosure, and the embodiments of the present disclosure are not limited in any way in this respect. Rather, embodiments of the present disclosure may be applied to any scenario where applicable.

The page layout of the present disclosure takes a horizontal or vertical as a basic unit, and there is a hierarchical concept between containers, with the outer container nesting the inner container. Before introducing the page layout method, the description of the related container structure is first given.

Exemplary, fig. 4 is a schematic structural diagram of a page layout according to an embodiment of the disclosure. As shown in fig. 4, the layout includes a transverse top-level container that is split into left and right containers, wherein the right container is a vertical container and the right container is split into two containers.

Wherein, the container structure that this overall arrangement corresponds is:

the Areatainer is a container, and the 'row', 'column', 'none' is the layout direction of the container, which is respectively 'by row (or transverse),' by column (or vertical), 'undefined', that is, areatainer 'row' represents a container arranged by row.

Further, indents represent parent-child relationships between containers.

Wherein, the display attribute value of the CSS attribute of the container is 'grid', and:

1. if the AreaContainer layout is per row, then the css attribute is grid-template-rows 1fr and grid-template-columns is the percentage for the column cut.

2. If the AreaContainer layout is column by column, then the css attribute is grid-template-columns 1fr and grid-template-rows is the percentage for the line cut.

Further, if the content needs to be placed inside the container, a container with a display attribute of flex needs to be automatically placed in the container to place the control (i.e. the content).

Illustratively, assume that a text control is placed in the lower right-hand container shown in FIG. 4, at which point the page layout is updated to the configuration shown in FIG. 5.

Fig. 5 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 5, the layout corresponds to the container structure as follows:

wherein, flexContainer is the container that is used for depositing text control "text".

Optionally, the text control also has a corresponding set of controls for displaying properties of the text control or for operating the text control. By way of example, the set of controls may implement at least one of the following functions: the type of text control used to display, the size of the text control used to display, the copy text control used to copy, and the delete text control used to delete.

Next, a page layout method will be described in conjunction with the above description of the container structure.

Fig. 6 is a flowchart of a page layout method according to an embodiment of the disclosure. The method of the embodiment of the disclosure can be applied to a computing device, which can be a terminal device, a server cluster, or the like. As shown in fig. 6, the page layout method includes the steps of:

and S61, deleting the first container of the page to be processed according to the acquired first instruction.

In this embodiment, when a user designs a page, operations such as merging, splitting, deleting, etc. are generally required to be performed on containers in the page, so as to change the layout of the page. For the delete operation, the computing device needs to obtain a first instruction triggered by the user performing the delete operation on the first container, and delete the first container in the page according to the first instruction.

The first instruction may be acquired in the following two ways.

A. The computing device generates a first instruction in response to a user deleting a first container of the page to be processed.

B. And the terminal equipment responds to the deleting operation of the first container of the page to be processed by the user, and sends a first instruction to the computing equipment, and the computing equipment receives the first instruction sent by the terminal equipment.

The deleting operation of the user on the first container of the page to be processed may be a clicking operation of the user on a deleting control corresponding to the first container, or a pressing operation of the user on a deleting key in the keyboard on the premise of selecting the first container. The delete key may be a "delete key" in the keyboard, or may be a combination of any two or more keys preconfigured in the keyboard, and may be preconfigured according to actual situations, which is not specifically limited herein.

After the first container is deleted, the space occupied by the original first container in the page to be processed is released, and at this time, the size of other containers needs to be adjusted, and the adjusted other containers can fill the space occupied by the original first container, and the specific adjustment manner will be described in detail in S62 and S63.

And S62, if the number of the remaining sub-containers contained in the second container is greater than 1 after the first container is deleted, updating the CSS attribute of each remaining sub-container so that the updated remaining sub-containers are filled with the second container.

The second container is a parent container of the first container, and the CSS attribute of the container is used to determine the row width and the column width of the container, which are specifically described in the embodiments corresponding to fig. 4 and fig. 5, and are not described herein again.

In one possible implementation manner, S62 may be implemented by the following steps (1) to (3):

and (1) determining a first proportion of each remaining sub-container in the second container according to the CSS attribute of each remaining sub-container.

Wherein the CSS attribute of a container is used to represent the percentage of column cuts and the percentage of row cuts for that container. Thus, the first proportion of each remaining sub-container to the second container may be determined based on the CSS properties of the remaining sub-containers.

Illustratively, assume that container 1 includes sub-container 11, sub-container 12, and sub-container 13, and that sub-container 11 and sub-container 13 are the remaining sub-containers after sub-container 12 is deleted. A first proportion of sub-containers 11 in container 1 and a first proportion of sub-containers 13 in container 1 are determined based on the CSS properties of sub-containers 11 and the CSS properties of sub-containers 13.

It should be noted that the first ratio determined here is the ratio of the sub-containers 11 and 13 in the container 1 before deleting the sub-container 12.

And (2) calculating a second proportion among the residual sub-containers according to the first proportion occupied by each residual sub-container in the second container.

In the example of the step (1), assuming that the determined first ratios of the sub-containers 11 and 13 are 1/3, the calculated second ratio of the sub-containers 11 and 13 is 1.

And (3) updating the CSS attribute of each remaining sub-container according to the second proportion so that the updated remaining sub-containers are filled with the second container.

Following the example in step (2), according to the second ratio of sub-containers 11 and 13 being 1, the CSS attributes of sub-containers 11 and 13 are updated, and the updated CSS attribute of sub-container 11 is used to indicate that the ratio of sub-container 11 to sub-container 1 is 1/2, and the updated CSS attribute of sub-container 13 is used to indicate that the ratio of sub-container 13 to sub-container 1 is 1/2.

Further, the size of the sub-container 11 is updated according to the updated CSS attribute of the sub-container 11, and the size of the sub-container 13 is updated according to the updated CSS attribute of the sub-container 13, so that the updated sub-container 11 and the updated sub-container 13 are filled with the sub-container 1.

Fig. 7 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 7, the page layout 1 includes a container a, where the container a includes 3 sub-containers, namely, a1, a2, and a3; page layout 2 is a page layout with container a2 deleted, page layout 2 includes container a including 2 sub-containers, container a1 and container a3, respectively

And S63, if the number of the remaining child containers contained in the second container is equal to 1 after the first container is deleted, adjusting the containers in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers, so that the adjusted remaining child containers are full of the corresponding parent containers after adjustment.

The parent container information is used for indicating whether the second container has a corresponding parent container, and the child container information is used for indicating whether the rest child containers have corresponding child containers.

In one possible implementation, S62 may be implemented by the following four aspects:

first aspect: if the parent container information indicates that the second container does not have a corresponding parent container and the child container information indicates that the remaining child containers do not have a corresponding child container, deleting the CSS attribute of the second container and the remaining child containers.

Illustratively, assuming that the parent container information indicates that the second container does not have a corresponding parent container P and the child container information indicates that the remaining child containers C do not have a corresponding child container X, the CSS attributes (i.e., grid-template-columns and grid-templates-rows) of the second container are directly deleted, as well as the remaining child containers C.

Fig. 8 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 8, the page layout 3 includes a container b including 2 sub-containers, container b1 and container b2, respectively; the page layout 4 is a page layout after deleting the container b2, and the page layout 4 includes the container b. Wherein the CSS attribute of container b is deleted.

Second aspect: if the parent container information indicates that the second container does not have a corresponding parent container and the child container information indicates that the remaining child containers have a corresponding child container, then moving the third container to the second container, synchronizing the CSS attributes of the remaining child containers to the second container, and deleting the remaining child containers.

The third container is a sub container corresponding to the remaining sub containers.

Illustratively, assuming that the parent container information indicates that the second container does not have a corresponding parent container P, and the child container information indicates that the remaining child container C has a corresponding child container X, moving the remaining child container X into the second container, synchronizing the CSS attribute of the remaining child container C to the second container, and deleting the remaining child container C.

Fig. 9 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 9, the page layout 5 includes a container c including 2 sub-containers, namely, a container c1 and a container c2 (rectangle with a broken line on a side), and the container c2 includes 3 sub-containers, namely, a container c21, a container c22 and a container c23; the page layout 6 is a page layout after deleting the container c1, and the page layout 6 includes a container c including 3 sub-containers, namely, a container c21, a container c22 and a container c23.

Third aspect: and if the parent container information indicates that the second container has a corresponding parent container and the child container information indicates that the remaining child containers have no corresponding child containers, moving the remaining child containers to a fourth container, and deleting the second container.

The fourth container is a parent container corresponding to the second container.

Illustratively, assuming that the parent container information indicates that the second container exists with the corresponding parent container P and the child container information indicates that the remaining child containers C do not exist with the corresponding child containers X, the remaining child containers C are moved into the parent container P and the second container is deleted.

Exemplary, fig. 10 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 10, the page layout 7 includes a container d including 2 sub-containers, namely, a container d1 and a container d2 (rectangle with a broken line side), and the container d2 includes 2 sub-containers, namely, a container d21 and a container d22; the page layout 8 is a page layout after deleting the container d22, and the page layout 8 includes a container d including 2 sub-containers, namely, a container d1 and a container d21.

Fourth aspect: if the parent container information indicates that the second container has a corresponding parent container and the child container information indicates that the remaining child containers have a corresponding child container, replacing the second container with a third container, and recalculating the CSS attribute of the fourth container according to the proportion of the space occupied between the third containers.

Illustratively, assuming that the parent container information indicates that the second container exists in the corresponding parent container P, and the child container information indicates that the remaining child containers C exist in the corresponding child containers X, the proportion of the percentage distribution of each child container X in the remaining child containers C is calculated, the second container is replaced with the child container X, and the CSS attribute (i.e., grid-template-columns and/or grid-template-rows) of the parent container P is recalculated.

Exemplary, fig. 11 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 11, the page layout 9 includes a container e, which includes 2 sub-containers, namely, a container e1 and a container e2 (a rectangle with a broken line on an edge), the container e2 includes 2 sub-containers, namely, a container e21 and a container e22, and the container e22 includes three sub-containers, namely, a container e221, a container e222 and a container e223; the page layout 10 is a page layout after deleting the container e21, and the page layout 10 includes a container e including 4 sub-containers, namely, a container e1, a container e221, a container e222, and a container e223.

According to the page layout method provided by the embodiment of the disclosure, according to the acquired first instruction, deleting a first container of a page to be processed; if the number of the remaining sub-containers contained in the second container is greater than 1 after the first container is deleted, updating the CSS attribute of each remaining sub-container so that the updated remaining sub-containers are filled in the second container; and if the number of the remaining child containers contained in the second container is equal to 1 after the first container is deleted, adjusting the containers in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers, so that the adjusted remaining child containers are full of the corresponding parent containers after adjustment. According to the technical scheme, after the container is deleted, other containers in the page are adjusted according to the nesting relation between the container and other containers, so that the rest containers can still be filled with the whole upper container, the purpose of automatically aligning the containers is achieved, and the editing efficiency of page design is effectively improved.

Further, existing layout approaches, which require the layout to be distracted by content or manually designing the container width and height after placement into the container, result in a visual perception that is not intuitive or comprehensible to the developer. According to the technical scheme, after the container is deleted, other containers in the page are adjusted, so that the rest containers can still be filled with the whole upper container, the page after operation is better and more intuitively displayed for a developer, the visual sense is clearer and clearer, and the intuitiveness of the page design is effectively improved.

Next, a process of dividing the container will be explained.

Fig. 12 is a flowchart of another page layout method according to an embodiment of the disclosure. As shown in fig. 12, the method further comprises the steps of:

s121, acquiring a second instruction.

In this embodiment, for the slicing operation, the computing device needs to acquire a second instruction triggered by the slicing operation performed on the target container by the user, so that the target container is sliced according to the second instruction.

The second instruction is used for indicating the target container to be cut according to the dividing line.

In one possible implementation, the position of the split line and the split direction may be determined in response to a first operation of the split control. Further, in response to a second operation of the segmentation control, a second instruction is generated according to the position of the segmentation line and the segmentation direction.

The segmentation control is used for transversely segmenting or longitudinally segmenting the target container.

For example, the operation region may be highlighted together with the operation icon when the user focuses on the container. That is, when a cut needs to be made to the target container, the target container and the corresponding cut control may be highlighted. The user can drag the segmentation control of the target container through the mouse to adjust the position of the segmentation line. After the position of the parting line is determined, the drag operation of the parting control can be canceled, namely, the mouse is loosened, so that a second instruction is generated.

When the target container is dragged by the mouse, the parting line always moves along with the mouse cursor in the target container.

Further, after determining the position of the dividing line and the dividing direction in response to the first operation of the dividing control, the proportion of the space occupied by the two adjacent containers corresponding to the dividing line may be displayed according to the position of the dividing line.

Further, after the position of the dividing line is changed, the proportion of the space occupied by two adjacent containers is updated according to the changed position.

Optionally, when the mouse is dragged, the user may press a preset key in the keyboard, and the computing device responds to the operation of the user on the preset key to perform movement adjustment on the parting line according to the preset ratio gear.

For example, the preset key may be a shift key, and the preset ratio gear may be 10%. Specific numerical values may be preset according to actual conditions, and the embodiment of the present disclosure does not specifically limit this.

Optionally, when the user drags the dividing line to reach the boundary of the dividing direction and releases the mouse, the computing device cancels the dividing process of the target container in response to the operation of the user.

S122, if the cutting direction of the dividing line is the same as the layout direction of the parent container of the target container, cutting the parent container of the target container according to the dividing line to obtain two adjacent containers obtained by cutting.

Wherein the splitting direction includes a transverse split or a longitudinal split.

Illustratively, it is assumed that the dividing direction of the dividing line is the same as the layout direction of the parent container of the target container, and the structure of the container before dividing is:

AreaContainer'row'

-AreaContainer'none'

then, the structure of the divided container is:

AreaContainer'row'

-AreaContainer'none'

s123, if the cutting direction of the cutting line is different from the layout direction of the father container of the target container, cutting the target container according to the cutting line, and obtaining two adjacent containers obtained by cutting.

Illustratively, it is assumed that the dividing direction of the dividing line is different from the layout direction of the parent container of the target container, and the structure of the container before dividing is:

AreaContainer'row'

-AreaContainer'none'

Then, the structure of the divided container is:

AreaContainer'row'

-AreaContainer'none'

-AreaContainer'column'

-AreaContainer'none'

fig. 13 is a schematic flow chart of container segmentation according to an embodiment of the disclosure. As shown in fig. 13, the page layout 11 includes a container f, when the container f is vertically cut, a user needs to click on a cut control through a mouse, and the mouse is not loosened in the clicking process, that is, the cut control is subjected to a first operation, and the computing device determines the position and the cut direction of the cut line in response to the first operation of the cut control by the user. In the process of moving the mouse by the user, the dividing line always moves left and right in the container f along with the mouse cursor, and the proportion of the space occupied by two adjacent containers obtained by dividing through the dividing line is displayed in real time, as shown in the page layout 12. After the user releases the mouse, a second operation is performed on the segmentation control, as shown in the page layout 13, a second instruction is generated according to the current position of the segmentation line, and the container f is segmented according to the second instruction, so that the container f1 and the container f2 are obtained.

It should be understood that there may be two corresponding segmentation controls for each container, one for longitudinally segmenting the container, i.e. segmenting the container according to the direction shown in fig. 13 (the direction of the dotted line); the other slicing control is used for transversely slicing the container, namely, slicing the container in a direction (a direction of a dotted line) perpendicular to the direction shown in fig. 13.

Fig. 14 is a schematic flow chart of another container segmentation according to an embodiment of the disclosure. As shown in fig. 14, the page layout 14 includes a container g, a container h, a container i, a container j, and a container k, where the container i and the container j are obtained by dividing a container i. As shown in the page layout 15, when the user wants to adjust the size of the container j, the user can drag the boundary line where the container i and the container j overlap (i.e., the dividing line for dividing the container l).

In the above embodiment, the user may segment the container by dragging the segmentation control. After the segmentation, the container can be divided into two adjacent containers according to the dragging result, and the two adjacent containers can be filled with the upper containers of the two adjacent containers without dragging again. And the sizes of the two adjacent containers can be adjusted again according to development requirements, so that the intuitiveness and convenience of page design are effectively improved.

It should be appreciated that each container supports a slicing operation.

Optionally, in some embodiments, the container support sets a margin, and the computing device may further perform a scaling process on the fifth container in response to a drag operation on a boundary line of the fifth container.

Exemplary embodiments. Fig. 15 is a schematic structural diagram of another page layout according to an embodiment of the present disclosure. As shown in fig. 15, the page layout 16 includes a container m, a container n, and a container o. The user may drag the border line of the container o, such as adjusting the right border line of the container o in the page layout 17, to adjust the size of the container o. And after the adjustment is appropriate, the mouse is released and the computing device then determines and adjusts the final size of the container o in response to the user's operation to release the mouse, generating the page layout 18.

It will be appreciated that by being able to quickly adjust the size of the container in response to a drag operation on the boundary line of the container, the convenience of the page design is improved.

Optionally, in the adjustment process, the computing device can also display the current size of the container o for the user in real time, so that a developer can intuitively acquire the current size of the container without performing additional operations, and the intuitiveness of page design is improved.

Optionally, in some embodiments, a control may be placed in the container. Fig. 16 is a schematic structural diagram of another page layout according to an embodiment of the present disclosure. As shown in fig. 16, in the page layout 19, the user can select a button from the component library and drag the button to the container to be placed. Thus placing buttons into the container, generating the page layout 20.

Further, after the first control is placed in the container, the zooming process can be performed on the first control in response to a drag operation on the borderline of the first control.

Exemplary, fig. 17 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 17, in the page layout 21, the user may drag the border line or the corner of the control of the text 1, and the computing device performs scaling processing on the control of the text 1 in response to the drag operation of the user until the user releases the mouse, so as to generate the page layout 22 according to the final size of the control of the text 1.

It will be appreciated that by responding to a drag operation of a borderline placed on a control in a container, the size of the control can be quickly adjusted, improving the convenience of the page design.

Further, the second control may also be moved to the target location in response to a third operation on the second control.

Fig. 18 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 18, in the page layout 22, the user may drag the non-borderline and non-corner area of the text 1 control, and the computing device moves the text 1 control in response to the drag operation of the user until the user releases the mouse, so as to generate the page layout 23 according to the final position of the text 1 control.

Further, in response to a clicking operation on the alignment control, performing an alignment process on the plurality of third controls, where the alignment process includes any one of the following: right, left, top, bottom, horizontal and vertical centering.

Exemplary, fig. 19 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 19, the user may click on a corresponding pair Ji Kongjian of containers, causing the computing device to perform different alignment operations on the controls in the containers.

Optionally, in some embodiments, the size of the sixth container is adjusted in response to receiving a size editing instruction for the sixth container.

For example, the user may input the size of the sixth container, the computing device generates a size editing instruction for the sixth container in response to the input operation of the user, and adjusts the size of the sixth container according to the size editing instruction. Meanwhile, the computing device may display the size change of the sixth container in real time according to the size of the sixth container input by the user: the height of the input is smaller than the current height, and the height of the sixth container is contracted upward (the height of the lower container is correspondingly increased). Wherein the input value range is [0, maximum height of parent container ], when input=0, the sixth container is deleted, and when input=sixth container, the lower container is deleted.

Fig. 20 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 20, when the user needs to adjust the size of the container, the user may click on the container through the mouse, and the computing device may display the current size of the container for the user in response to the clicking operation of the user. Further, the user may modify the size of the container by displaying a size control, and the computing device may then adjust the size of the container according to the size entered by the user in response to the user's modification operation.

Illustratively, in the page layout 24, the container s has dimensions 1440×280, and the user inputs the target dimensions of the container s: 1440×200, the computing device then modifies the size of the container s to 1440×200 in response to a user operation, thereby generating the page layout 25.

It will be appreciated that when the size of the container needs to be modified to a target value, if the size is adjusted by the user manually dragging the boundary line of the container, multiple adjustment attempts are required, which is inefficient. In the above embodiment, the processing efficiency can be effectively improved by directly adjusting the size of the container to the target value in response to the received size editing instruction for the container.

Fig. 21 is a schematic structural diagram of another page layout according to an embodiment of the disclosure. As shown in fig. 21, the user may also adjust the margin value between containers. In the page layout 26, the user may click on the margin to the left of the container s and enter a target margin value (e.g., 40 in FIG. 21). The computing device then sets the margin to the left of the container s to the target margin value in response to the user's operation, thereby generating the page layout 27.

It should be understood that the first control, the second control, and the third control are all any control disposed inside the container, and the first container, the target container, the fifth container, and the sixth container are all any containers in the page layout, which can be determined according to actual requirements, which is not particularly limited in the embodiments of the present disclosure.

Based on the foregoing schemes in any of the foregoing embodiments, it should be understood that any container in a page to be processed supports the operations of slicing, deleting, resizing, and the like. Further, after a container is split into two containers by the splitting control, the split container also supports the operations of splitting, deleting, resizing and the like. The specific operation principle and process may refer to the above embodiments, and will not be described herein.

Exemplary Medium

Having described the method of the exemplary embodiments of the present disclosure, next, a storage medium of the exemplary embodiments of the present disclosure will be described with reference to fig. 22.

Fig. 22 is a schematic structural diagram of a storage medium according to an embodiment of the present disclosure. Referring to fig. 22, a storage medium 220 in which a program product for implementing the above-described method according to an embodiment of the present disclosure is stored may employ a portable compact disc read only memory (CD-ROM) and include computer-executable instructions for causing a computing device to perform the page layout method provided by the present disclosure. However, the program product of the present disclosure is not limited thereto.

The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The readable signal medium may include a data signal propagated in baseband or as part of a carrier wave in which the computer-executable instructions are carried. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. The readable signal medium may also be any readable medium other than a readable storage medium.

Computer-executable instructions for performing the operations of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The computer-executable instructions may be executed entirely on the user computing device, partly on the user device, partly on the remote computing device, or entirely on the remote computing device or server. In the context of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN).

Exemplary apparatus

Having described the medium of the exemplary embodiment of the present disclosure, next, a page layout device of the exemplary embodiment of the present disclosure is described with reference to fig. 23, so as to implement a method in any of the foregoing method embodiments, and implementation principles and technical effects are similar, and are not repeated herein.

Fig. 23 is a page layout device provided in an embodiment of the present disclosure. As shown in fig. 23, the page layout apparatus 230 includes the following modules:

and the deleting module 231 is configured to delete the first container of the page to be processed according to the acquired first instruction.

A first adjustment module 232, configured to update the CSS attribute of each remaining child container if the number of remaining child containers included in the second container is greater than 1 after the first container is deleted, so that the updated remaining child containers are filled with the second container, where the second container is a parent container of the first container, and the CSS attribute of the container is used to determine a row width and a column width of the container;

and a second adjustment module 233, configured to adjust, if the number of remaining child containers included in the second container is equal to 1 after the first container is deleted, the containers in the page to be processed according to parent container information of the second container and child container information of the remaining child containers, so that the adjusted remaining child containers are full of corresponding parent containers, the parent container information is used to indicate whether the second container has a corresponding parent container, and the child container information is used to indicate whether the remaining child containers have a corresponding child container.

In one embodiment of the present disclosure, the first adjustment module 232 is specifically configured to:

In another embodiment of the present disclosure, the second adjusting module 233 is specifically configured to:

if the parent container information indicates that the second container does not have a corresponding parent container and the child container information indicates that the remaining child containers do not have a corresponding child container, deleting the CSS attribute of the second container and the remaining child containers.

If the parent container information indicates that the second container does not have a corresponding parent container and the child container information indicates that the remaining child containers have corresponding child containers, moving a third container to the second container, synchronizing the CSS attribute of the remaining child containers to the second container, and deleting the remaining child containers, wherein the third container is the child container corresponding to the remaining child containers.

If the parent container information indicates that the second container has a corresponding parent container and the child container information indicates that the remaining child containers have no corresponding child containers, the remaining child containers are moved to a fourth container, the second container is deleted, and the fourth container is the parent container corresponding to the second container.

If the parent container information indicates that the second container has a corresponding parent container and the child container information indicates that the remaining child containers have a corresponding child container, replacing the second container with a third container, and recalculating the CSS attribute of the fourth container according to the proportion of the space occupied between the third containers.

Fig. 24 is a schematic diagram of another page layout apparatus according to an embodiment of the disclosure. As shown in fig. 24, the page layout apparatus 230 further includes the following modules:

the obtaining module 234 is configured to obtain a second instruction, where the second instruction is used to instruct to split the target container according to the splitting line.

The first dividing module 235 is configured to divide the parent container of the target container according to the dividing line if the dividing direction of the dividing line is the same as the layout direction of the parent container of the target container, and obtain two adjacent containers obtained by dividing.

And the second segmentation module 236 is configured to segment the target container according to the segmentation line if the segmentation direction of the segmentation line is different from the layout direction of the parent container of the target container, and obtain two adjacent containers obtained by segmentation.

In another embodiment of the present disclosure, the obtaining module 234 is specifically configured to:

And in response to the first operation of the segmentation control, determining the position and the segmentation direction of the segmentation line, wherein the segmentation control is used for transversely segmenting or longitudinally segmenting the target container.

And responding to a second operation of the segmentation control, and generating a second instruction according to the position of the segmentation line and the segmentation direction.

Optionally, the page layout apparatus 230 further includes the following modules:

and the first scaling module is used for performing scaling processing on the fifth container in response to the dragging operation on the boundary line of the fifth container.

And the moving module is used for responding to the third operation of the second control and moving the second control to the target position.

It should be noted that, it should be understood that the division of the modules of the above apparatus is merely a division of a logic function, and may be fully or partially integrated into a physical entity or may be physically separated. And these modules may all be implemented in software in the form of calls by the processing element; or can be realized in hardware; the method can also be realized in a form of calling software by a processing element, and the method can be realized in a form of hardware by a part of modules. In addition, all or part of the modules may be integrated together or may be implemented independently. The processing element here may be an integrated circuit with signal processing capabilities. In implementation, each step of the above method or each module above may be implemented by an integrated logic circuit of hardware in a processor element or an instruction in a software form.

Exemplary computing device

Having described the methods, media, and apparatus of exemplary embodiments of the present disclosure, a computing device of exemplary embodiments of the present disclosure is next described with reference to fig. 25.

The computing device 250 shown in fig. 25 is merely an example and should not be taken as limiting the functionality and scope of use of embodiments of the present disclosure.

Fig. 25 is a schematic structural diagram of a computing device provided by an embodiment of the present disclosure. As shown in fig. 25, the computing device 250 is in the form of a general purpose computing device. Components of computing device 250 may include, but are not limited to: at least one processing unit 2501, at least one memory unit 2502, and a bus 2503 connecting the different system components (including the processing unit 2501 and the memory unit 2502). Wherein at least one memory unit 2502 has stored therein computer-executable instructions. At least one processing unit 2501 includes a processor that executes instructions of the computer to implement the methods described above.

The bus 2503 includes a data bus, a control bus, and an address bus.

The storage unit 2502 may include readable media in the form of volatile memory, such as Random Access Memory (RAM) 25021 and/or cache memory 25022, and may further include readable media in the form of non-volatile memory, such as Read Only Memory (ROM) 25023.

The storage unit 2502 may also include a program/utility 25025 having a set (at least one) of program modules 25024, such program modules 25024 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment.

The computing device 250 may also communicate with one or more external devices 2504 (e.g., keyboard, pointing device, etc.). Such communication may occur through an input/output (I/O) interface 2505. Moreover, the computing device 250 may also communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, such as the Internet, through the network adapter 2506. As shown in FIG. 25, the network adapter 2506 communicates with other modules of the computing device 250 over the bus 2503. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with computing device 250, including, but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.

It should be noted that although in the above detailed description a number of units/modules or sub-units/modules of the page layout device are mentioned, such a division is only exemplary and not mandatory. Indeed, the features and functionality of two or more units/modules described above may be embodied in one unit/module in accordance with embodiments of the present disclosure. Conversely, the features and functions of one unit/module described above may be further divided into ones that are embodied by a plurality of units/modules.

Furthermore, although the operations of the methods of the present disclosure are depicted in the drawings in a particular order, this is not required to or suggested that these operations must be performed in this particular order or that all of the illustrated operations must be performed in order to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step to perform, and/or one step decomposed into multiple steps to perform.

While the spirit and principles of the present disclosure have been described with reference to several particular embodiments, it is to be understood that this disclosure is not limited to the particular embodiments disclosed nor does it imply that features in these aspects are not to be combined to benefit from this division, which is done for convenience of description only. The disclosure is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims

1. A page layout method, comprising:

2. The method according to claim 1, wherein if the number of remaining sub-containers included in the second container after deleting the first container is greater than 1, updating the CSS attribute of each remaining sub-container so that the updated remaining sub-container fills the second container, including:

3. The method of claim 1, wherein adjusting the container in the page to be processed according to the parent container information of the second container and the child container information of the remaining child containers comprises:

4. The method of claim 1, the method further comprising:

5. The method of claim 4, the acquiring the second instruction comprising:

6. The method of claim 5, after said determining the position of the split line and the split direction in response to a first operation of a split control, further comprising:

7. The method of claim 6, the method further comprising:

8. A page layout apparatus, comprising:

9. A computing device, comprising: a processor, a memory and computer program instructions stored on the memory and executable on the processor, wherein the processor is adapted to implement the method of any one of claims 1 to 7 when executing the computer program instructions.

10. A computer readable storage medium having stored therein computer executable instructions which when executed by a processor are adapted to carry out the method of any one of claims 1 to 7.