CN116861123A - Webpage generation method, device, computer equipment and storage medium - Google Patents
Webpage generation method, device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN116861123A CN116861123A CN202310629541.XA CN202310629541A CN116861123A CN 116861123 A CN116861123 A CN 116861123A CN 202310629541 A CN202310629541 A CN 202310629541A CN 116861123 A CN116861123 A CN 116861123A
- Authority
- CN
- China
- Prior art keywords
- webpage
- target
- layout
- group
- element group
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000010586 diagram Methods 0.000 claims abstract description 85
- 238000004590 computer program Methods 0.000 claims description 28
- 238000000605 extraction Methods 0.000 claims description 13
- 238000013461 design Methods 0.000 description 20
- 238000004458 analytical method Methods 0.000 description 9
- 238000004891 communication Methods 0.000 description 8
- 239000000284 extract Substances 0.000 description 6
- 238000011161 development Methods 0.000 description 4
- 239000011295 pitch Substances 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- OKTJSMMVPCPJKN-UHFFFAOYSA-N Carbon Chemical compound [C] OKTJSMMVPCPJKN-UHFFFAOYSA-N 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 239000000470 constituent Substances 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 229910021389 graphene Inorganic materials 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
Abstract
The application relates to a webpage generation method, a webpage generation device and computer equipment. The method comprises the following steps: acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements; determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group; acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information; acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group; and generating the webpage based on the webpage elements, the webpage size information and the element layout parameters respectively corresponding to the target element groups to obtain the target webpage. By adopting the method, the accuracy of webpage generation can be improved.
Description
Technical Field
The present application relates to the field of computer technology, and in particular, to a method, an apparatus, a computer device, a storage medium, and a computer program product for generating a web page.
Background
With the rapid development of computer technology, terminal devices such as smart phones and the like have been deep into the lives of people, and users can browse various web pages, such as application web pages of financial products, more rapidly and conveniently through the smart phones, so that the demand for web pages is greatly increased. The production of the webpage is based on a page design draft of a designer, and a developer develops the webpage according to the page design draft to restore each element in the design draft into the webpage. In the webpage generation process, whether the layout of the elements in the webpage is proper or not needs to be considered, and the improper layout of the elements can affect the webpage performance of the generated webpage.
In the webpage generation process, elements are generally laid out based on an absolute positioning layout mode. However, the layout mode based on absolute positioning can only accurately reproduce the design in the webpage with a specific resolution, and layout errors can occur in other resolutions, for example, partial blank can occur in the webpage with a larger resolution, so that the problem of low element layout accuracy in the webpage generation process is caused.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a web page generating method, apparatus, computer device, computer-readable storage medium, and computer program product that can improve the accuracy of web page generation.
In a first aspect, the present application provides a method for generating a web page. The method comprises the following steps:
acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group;
acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information;
acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group;
and generating the webpage based on the webpage elements, the webpage size information and the element layout parameters respectively corresponding to the target element groups to obtain the target webpage.
In a second aspect, the application further provides a webpage generating device. The device comprises:
the acquisition module is used for acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
The element determining module is used for determining each target element group in each webpage element based on the webpage element relation diagram, and the same parent element exists in each target element group;
the feature extraction module is used for acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information;
the parameter acquisition module is used for acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group;
the webpage generating module is used for generating the webpage based on each webpage element, the webpage size information and the element layout parameters corresponding to each target element group respectively to obtain the target webpage.
In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor which when executing the computer program performs the steps of:
acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group;
Acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information;
acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group;
and generating the webpage based on the webpage elements, the webpage size information and the element layout parameters respectively corresponding to the target element groups to obtain the target webpage.
In a fourth aspect, the present application also provides a computer-readable storage medium. The computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of:
acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group;
acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information;
Acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group;
and generating the webpage based on the webpage elements, the webpage size information and the element layout parameters respectively corresponding to the target element groups to obtain the target webpage.
In a fifth aspect, the present application also provides a computer program product. The computer program product comprises a computer program which, when executed by a processor, implements the steps of:
acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group;
acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information;
acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group;
and generating the webpage based on the webpage elements, the webpage size information and the element layout parameters respectively corresponding to the target element groups to obtain the target webpage.
According to the webpage generation method, device, computer equipment, storage medium and computer program product, through determining each target element group according to the webpage relation diagram, extracting the element group layout characteristics corresponding to each element group according to the element attribute information of each webpage element, and obtaining the element layout parameters associated with the element group layout characteristics, the corresponding element layout parameters are determined according to the element group layout characteristics of each target element group, so that the layout accuracy of the webpage elements in each target element group is ensured, and the webpage generation is carried out on each webpage element according to the webpage size information by using the element layout parameters, so that the target webpage corresponding to the webpage size information is obtained, and the webpage layout and webpage generation of different webpage sizes are realized, so that the webpage generation accuracy is improved.
Drawings
FIG. 1 is an application environment diagram of a web page generation method in one embodiment;
FIG. 2 is a flowchart of a method for generating a web page according to an embodiment;
FIG. 3 is a flow diagram of element feature extraction in one embodiment;
FIG. 4 is a diagram of a relationship diagram of web page elements in one embodiment;
FIG. 5 is a schematic diagram of an element layout in one embodiment;
FIG. 6 is a schematic diagram of a feature analysis in one embodiment;
FIG. 7 is a schematic diagram of web page generation in one embodiment;
FIG. 8 is a block diagram of a web page generation apparatus in one embodiment;
FIG. 9 is an internal block diagram of a computer device in one embodiment;
fig. 10 is an internal structural view of a computer device in one embodiment.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application. It should be noted that, the method and the device for generating the web page of the present application may be used in the financial field, such as the field of application development of banks, and may be used in any field other than the financial field, such as the field of application development of education, and the application field of the method and the device for generating the web page of the present application is not limited.
The webpage generating method provided by the embodiment of the application can be applied to an application environment shown in fig. 1. Wherein the terminal 102 communicates with the server 104 via a network. The data storage system may store data that the server 104 needs to process. The data storage system may be integrated on the server 104 or may be located on a cloud or other network server. The server 104 acquires webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements; the server 104 determines each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group; the server 104 acquires element attribute information of each webpage element, and extracts element group layout features corresponding to each target element group respectively based on the element attribute information; the server 104 obtains element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group; the server 104 generates a web page based on each web page element, web page size information and element layout parameters corresponding to each target element group respectively, so as to obtain a target web page, and then the server 104 sends the target web page to the terminal 102 for display. The terminal 102 may be, but is not limited to, various devices capable of displaying web pages, such as personal computers, notebook computers, smartphones, tablet computers, and the like. The server 104 may be implemented as a stand-alone server or as a server cluster of multiple servers.
In one embodiment, as shown in fig. 2, a web page generating method is provided, where the method is applied to a server for illustration, it is understood that the method may also be applied to a terminal, and may also be applied to a system including the terminal and the server, and implemented through interaction between the terminal and the server. In this embodiment, the method includes the steps of:
step 202, acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements.
The webpage size information refers to size information of a webpage to be generated. The webpage elements refer to the constituent components of the webpage, and comprise visual elements such as picture elements, text elements, control elements and the like.
Specifically, the server acquires a webpage generation instruction sent by the terminal, and acquires webpage size information and a webpage element relation diagram from the webpage generation instruction. The web page element relation diagram carries element attribute information of each web page element, wherein the element attribute information represents attribute information of the web page element displayed in a web page, and the attribute information comprises position attribute information, appearance attribute information, function attribute information and the like. The server can also obtain the size information of the web page and the element attribute information of each web page element through the terminal, and the server obtains the position attribute information of each web page element in the element attribute information, so as to represent the position information of the web page element when the web page element is displayed in the web page. The server determines the position relation among the webpage elements according to the position attribute information of the webpage elements, and establishes a tree diagram according to the direct position relation of the webpage elements to obtain a webpage element relation diagram.
Step 204, determining each target element group in each web page element based on the web page element relation diagram, wherein each target element in the target element group has the same parent element.
Step 206, obtaining element attribute information of each web page element, and extracting element group layout features corresponding to each target element group respectively based on the element attribute information.
The target element group refers to the element combination of the same parent element existing in the same layer in the webpage element relation diagram, and the target element refers to the webpage element in the target element. The parent element refers to a web page element serving as a parent node in the web page element graph. The element group layout feature refers to the layout feature of each target element in the target element group in the web page.
Specifically, the server traverses the web page element relation diagram, and determines each web page element with the same parent element in the same layer as a target element group to obtain each target element group. The server can calculate the position range of each element according to the element attribute information of each target element in the target element group, compare the position ranges of each element, and extract the element group layout characteristics corresponding to the target element group according to the comparison result. The server traverses each target element group to obtain the element group layout characteristics corresponding to each target element group.
Step 208, obtaining the element layout parameters associated with the element group layout features, and obtaining the element layout parameters corresponding to each target element group.
The element layout parameters refer to layout parameters used in the layout of the webpage elements, and represent the layout modes of the elements in the webpage.
Specifically, an association relationship between layout features and element layout parameters is preset in the server, and element layout parameters associated with the element group layout features are obtained according to the association relationship, so that element layout parameters corresponding to each target element group are obtained.
Step 210, generating a web page based on each web page element, web page size information and element layout parameters corresponding to each target element group respectively, so as to obtain a target web page.
Specifically, the server updates the element attribute information of each web page element by using the element layout parameters corresponding to each target element group according to the web page size information, which may be updating the position attribute information or the appearance attribute information of the web page element, to obtain the updated element attribute information of each web page element. The server converts the updated element attribute information of each webpage element into webpage code information to obtain the webpage code information corresponding to each webpage element, and the server generates a webpage by using the webpage code information of each webpage element to obtain a target webpage.
According to the webpage generation method, through determining each target element group according to the webpage relation diagram, extracting the element group layout characteristics corresponding to each element group according to the element attribute information of each webpage element, and obtaining the element layout parameters associated with the element group layout characteristics, the corresponding element layout parameters are determined according to the element group layout characteristics of each target element group, so that the layout accuracy of the webpage elements in each target element group is ensured, and the webpage generation is carried out on each webpage element according to the webpage size information by using the element layout parameters, so that the target webpage corresponding to the webpage size information is obtained, the webpage layout and the webpage generation of different webpage sizes are realized, and the webpage generation accuracy is improved.
In one embodiment, as shown in FIG. 3, a flow diagram of elemental signature extraction is provided. The element attribute information includes location attribute information and size attribute information, and step 206 of extracting element group layout features corresponding to each target element group based on the element attribute information includes:
step 302, extracting the position features based on the position attribute information corresponding to each target element in the target element group, so as to obtain the element position features corresponding to the target element group.
Step 304, element size feature extraction is performed based on size attribute information corresponding to each target element in the target element group, so as to obtain element size features corresponding to the target element group, and the element position features and the element size features are used as element group layout features corresponding to the target element group.
Step 306, traversing each target element group to obtain the element group layout characteristics corresponding to each target element group.
The element position features refer to the position features of each target element in the target element group in the web page layout. The size attribute information refers to size information of each web page element. The element size feature refers to the size feature of each target element in the target element group.
Specifically, the server acquires position attribute information corresponding to each target element in the target element group, wherein the position attribute information comprises the global position of the target element in the webpage. The server performs position comparison on the position attribute information of each target element, namely, performs position comparison on transverse coordinates and position comparison on longitudinal coordinates, obtains a position comparison result between each target element, and determines element position characteristics corresponding to the target element group according to the position comparison result.
And comparing the size attribute information of each target element in the target element group by size to obtain the size difference degree between each target element, and determining the element size characteristics corresponding to the target element group according to the size difference degree by the server. The server takes the element position characteristics and the element size characteristics corresponding to the target element group as the element group layout characteristics of the target element group. The server traverses the position attribute information and the size attribute information of the target elements in each target element group to obtain the element group layout characteristics corresponding to each target element group.
In this embodiment, by extracting the element position features and the element size features of each target element group, the corresponding element layout parameters are determined according to the element position features and the element size features, so that the accuracy of element layout is improved, and the accuracy of webpage generation is improved.
In one embodiment, as shown in FIG. 4, a schematic diagram of a web page element relationship diagram is provided. Positional relationships exist among various webpage elements in the webpage design manuscript, including brother relationships, father-son nested relationships and the like. The brother relation refers to the same row or column of the positions of the webpage elements, and the father-son nesting relation refers to the existence of a superposition area between the webpage elements, wherein the superposition area comprises the completion inclusion and partial superposition between the webpage elements.
The method comprises the steps of carrying out structural grouping on each webpage element according to the position relation among the webpage elements in advance to obtain each element structural group in the webpage design manuscript, wherein the representation of the element groups obtained by dividing according to the position relation among the elements can be that the same-column elements or the same-row elements are taken as one element structural group, and the same-column sub-elements or the same-row sub-elements in the father-son nested relation are taken as one element structural group, so that the webpage design manuscript corresponding to the webpage element relation diagram shown in fig. 4-A is shown in the left graph, the original webpage design manuscript is shown in the left graph, the arrow is shown in the structure grouping, the right graph shows the webpage design manuscript after the structure grouping, and the webpage elements in the rectangular frame in the right graph show one element structural group.
And then taking each element structure group as a whole, and generating corresponding tree nodes to obtain each tree node. And then generating a web page element relation diagram according to each tree node. The structural diagram of the web page element relation diagram shown in fig. 4-B shows that each web page element in the web page design draft is finally grouped into an element structure group 1 and an element structure group 2. The element structure group 1 comprises an element structure group 3, the element structure group 3 comprises 3 webpage elements, and the parent node is a leaf node of the element structure group 3. The element structure group 2 comprises an element structure group 4 and an element structure group 5, the element structure group 4 comprises 2 webpage elements, the parent node is a leaf node of the element structure group 4, the element structure group 5 comprises an element structure group 6 and an element structure group 7, the element structure group 2 comprises 2 webpage elements respectively, and the parent node is a leaf node of the element structure group 6 and the element structure group 7 respectively.
The server traverses the web page element relation diagram, each target element group is determined in each web page element, and each target element group comprises an element structure group. As shown in the schematic diagram of the target element group in fig. 4-C, the rectangular box in the figure represents the target element group, and the web page element or the element structure group in the rectangular box is the target element.
In one embodiment, step 302, performing location feature extraction based on location attribute information corresponding to each target element in the target element group, to obtain an element location feature corresponding to the target element group, includes:
calculating the distance between each target element based on the position attribute information corresponding to each target element;
and determining element position characteristics corresponding to the target element groups based on the distances among the target elements.
Specifically, the server obtains location attribute information corresponding to each target element, performs coordinate comparison on the location attribute information of each target element, determines whether each target element is an element with a same attribute feature according to a coordinate comparison result, for example, determines a same-row feature of a target element group according to a transverse coordinate comparison, and determines a same-column feature of the target element group according to a longitudinal coordinate comparison. Then, the distance between the target elements is calculated according to the position attribute information of the target elements, the element spacing characteristics of the target element group are determined according to the distance between the target elements, for example, the transverse spacing between the target elements and the transverse adjacent elements is calculated, and the longitudinal spacing between the target elements and the longitudinal adjacent elements is calculated. The server may determine pitch features, such as horizontal equidistant features, vertical equidistant features, etc., from the lateral pitch and the longitudinal pitch between the target elements. The server takes the same attribute characteristics and element spacing characteristics of each target element group as element position characteristics corresponding to each target element group.
In this embodiment, the element position features of the target element group are determined according to the distances between the target elements, so that the corresponding element layout parameters are determined according to the element position features, the accuracy of element layout is improved, and the accuracy of webpage generation is improved.
In one embodiment, step 304, performing element size feature extraction based on size attribute information corresponding to each target element in the target element group, to obtain element size features corresponding to the target element group, includes:
comparing the sizes of the target elements based on the size attribute information corresponding to the target elements to obtain a size proportion relation corresponding to the target elements;
and acquiring the element size characteristics corresponding to the target element group from the association relation between the preset size proportion relation and the element size characteristics based on the size proportion relation.
The dimensional proportion relationship refers to the degree of dimensional difference between the target elements.
Specifically, the server acquires size attribute information corresponding to each target element, including the height and width of each target element. The server compares the sizes according to the size attribute information of each target element to obtain size proportion information corresponding to each target element, and determines the size difference degree, namely the size proportion relation, between each target element according to the size proportion information of each target element. The server obtains the element size characteristics corresponding to the target group according to the relation between the preset size proportion relation and the element size characteristics, such as contour characteristics, isopiestic characteristics and the like.
In this embodiment, the size of each target element is compared, and the element size characteristics are obtained according to the size proportion relation, so that the corresponding element layout parameters are determined according to the element size characteristics, the accuracy of element layout is improved, and the accuracy of webpage generation is improved.
In a specific embodiment, the element size features corresponding to the target element group further comprise an element total size feature. And the user designs the webpage according to a certain webpage size in advance through the user terminal to generate a webpage design draft. The webpage design draft is used for the server to generate a target webpage according to the element attribute information of each webpage element in the webpage design draft. The original webpage size information corresponding to the webpage design draft can be the same as or different from the webpage size information corresponding to the target webpage.
The server obtains original webpage size information corresponding to the webpage design manuscript, size proportion relation between each target element and the webpage is determined according to the original webpage size information and size information of each target element, total size characteristics of elements corresponding to the target element group are determined according to the size proportion relation between each target element and the webpage, such as total width 100%, total width 100% and the like, the total width 100% represents that the sum of widths of transverse target elements in the target element group is the same as the width in the original webpage size information, and the total width 100% represents that the sum of heights of longitudinal target elements in the target element group is the same as the height in the original webpage size information.
In one embodiment, as shown in FIG. 5, a schematic diagram of an element layout is provided. The element layout parameters correspond to different element layout modes, an element layout experience library is preset in the server and is used for storing element layout identifiers corresponding to various element layout modes and association relations between layout features and the element layout identifiers, and the server acquires the corresponding element layout parameters according to the element layout identifiers. A schematic diagram showing an equidistant layout of elements as in fig. 5; a schematic diagram showing an element isometric layout as in fig. 5; a schematic diagram of a left-right alignment layout of elements is shown in fig. 5.
The element layout identifiers comprise an equally-divided layout, an equidistant layout, a horizontally-telescopic layout, a longitudinally-telescopic layout and the like, and layout features corresponding to the element layout identifiers are shown as follows:
equally dividing the layout, namely adding element widths to 100%, equally dividing the elements to equal widths and equally spacing;
equidistant layout: the widths of the elements can be different, and the pitches are the same;
horizontal telescopic layout: the elements are horizontally paved, wherein the size of one column of elements stretches out and draws back;
longitudinal telescopic layout: the elements are longitudinally spread, with one row of elements being scaled in size.
In one embodiment, a schematic representation of a feature analysis is provided, as shown in FIG. 6. The web page element relation diagram carries element attribute information corresponding to each tree node. The data format of the element attribute information is as follows:
Element attribute information corresponding to an Element structure group (group) divided according to Element position relation written in an Element language of a development component library (Element) includes the position, the size and the like of an Element frame (frame) corresponding to the Element structure group, and Element attribute information (position, size and the like) of each web page Element in the Element structure group.
The server traverses the web page element relation diagram, extracts the element group layout features of each target element group according to a preset feature extraction sequence, generally from the root node to the leaf node (from top to bottom), and extracts the element group layout features of the target element group according to the element attribute information of each tree node. The target element of the tree node representation in the web page element relation diagram can be a web page element, or can be an integral element of an element structure group divided according to the position relation, and when the server extracts the layout characteristics of the element group, the server can use element attribute information corresponding to the web page element and element attribute information corresponding to the element structure group to extract the characteristics.
The server performs feature calculation according to the element attribute information of each target element in the target element group, and determines the layout feature of the element group of each target element group, as shown in fig. 6-a, which shows feature analysis rules of the element attribute information, wherein w1 and w2 respectively show the widths of target elements 1 and 2, h1 and h2 respectively show the heights of target elements 1 and 2, w shows the width of the web page design draft, pad shows the element spacing, fig. 6-B shows the layout feature of the element group, and the arrows between fig. 6-a and 6-B show feature matching. And the server analyzes and calculates the element attribute information of each target element according to the characteristic analysis rule, and matches the corresponding element group layout characteristics according to the calculation result. And then the server matches the corresponding element layout identifiers in the layout experience library according to the element group layout characteristics, and obtains element layout parameters corresponding to the element layout identifiers, wherein the arrow between the figure 6-C and the figure 6-B represents layout matching, and the figure 6-C represents each element layout identifier.
In one embodiment, step 210, generating a web page based on each web page element, web page size information, and element layout parameters corresponding to each target element group, to obtain a target web page includes:
calculating target size information corresponding to each webpage element based on each webpage element, the webpage size information and element layout parameters respectively corresponding to each target element group;
acquiring element attribute code information corresponding to each webpage element, and updating the element attribute code information based on the target size information to acquire target element attribute code information corresponding to each webpage element;
and generating the webpage based on the target element attribute code information corresponding to each webpage element to obtain the target webpage.
The target size information refers to size information of a target element laid out on a target webpage. The element attribute code information refers to web page code data corresponding to the element attribute information, and the web page code data can directly generate a web page.
Specifically, the server acquires original webpage size information corresponding to the webpage design manuscript, calculates the size proportion of each webpage element in the webpage design manuscript according to the element attribute information of each webpage element and the original webpage size information, and calculates target size information corresponding to each webpage element in the target webpage by using element layout parameters according to the size proportion. For example, the target element group has 3 web page elements in the same row, the 3 web page elements have equal widths of 25 and equal intervals of 10, the element group layout features of the target element group have equal widths and equal intervals, and the element layout parameters associated with the element group layout features are equal-division width layout parameters, which represent the sum of the element widths to be 100%, and the elements have equal widths and equal intervals. When the width of the webpage design draft in the original webpage size information is 100, the size proportion of the webpage elements is 25% of a frame, and when the width of the target webpage in the webpage size information is 120, the server calculates the target width of each webpage element in the target webpage to be 30 and the equal interval to be 10 according to the size proportion of 20% by using the equal-division width layout parameters.
The server acquires element attribute code information corresponding to each webpage element, and updates the size codes in the element attribute code information according to the target size information to obtain target element attribute code information corresponding to each webpage element. And the server generates the webpage by using the target element attribute code information corresponding to each webpage element to obtain the target webpage.
In this embodiment, the target size information corresponding to each web page element is calculated according to each web page element, the web page size information and the element layout parameters of each target element group, and the element attribute code information corresponding to each web page element is updated by using the target size information, so that accurate layout of web pages with different web page size information is realized, and thus the accuracy of web page generation is improved.
In one embodiment, step 208, obtaining the element layout parameters associated with the element group layout feature to obtain the element layout parameters corresponding to each target element group includes:
when the element group layout characteristics corresponding to the current element group in each target element group are associated with at least one candidate element layout parameter, acquiring the priority corresponding to the at least one candidate element layout parameter;
And determining the element layout parameters corresponding to the current element group in the at least one candidate element layout parameters based on the priority.
Wherein the current element group refers to an element group matching a plurality of element layout parameters. The candidate element layout parameters refer to element layout parameters to be selected and matched with the element group layout features.
Specifically, when the server detects that the element group layout characteristics corresponding to the current element group in each target element group are associated with at least one candidate element layout parameter, the server acquires the priority corresponding to each candidate element layout parameter, and determines the element layout parameter with the highest priority in each candidate element layout parameter according to the priority as the element layout parameter corresponding to the current target element group.
In one embodiment, the specific steps of web page generation are as follows:
step S1, acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements.
And S2, determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same parent element exists in each target element group.
Step S3, element attribute information of each webpage element is obtained, the element attribute information comprises position attribute information and size attribute information, the distance between each target element is calculated based on the position attribute information corresponding to each target element, and element position characteristics corresponding to the target element group are determined based on the distance between each target element. And comparing the sizes of the target elements based on the size attribute information corresponding to the target elements to obtain a size proportion relation corresponding to the target elements, and acquiring element size characteristics corresponding to the target element group in an association relation between a preset size proportion relation and the element size characteristics based on the size proportion relation. And traversing each target element group by taking the element position characteristics and the element size characteristics as element group layout characteristics corresponding to the target element groups to obtain element group layout characteristics corresponding to each target element group.
And S4, acquiring element layout parameters associated with the element group layout features, obtaining element layout parameters corresponding to each target element group, acquiring priority corresponding to at least one candidate element layout parameter when the element group layout features corresponding to the current element group in each target element group are associated with at least one candidate element layout parameter, and determining the element layout parameters corresponding to the current element group in the at least one candidate element layout parameter based on the priority.
And S5, calculating target size information corresponding to each webpage element based on the element layout parameters and the webpage size information corresponding to each webpage element and each target element group respectively, acquiring element attribute code information corresponding to each webpage element, updating the element attribute code information based on the target size information to obtain target element attribute code information corresponding to each webpage element, and generating a webpage based on the target element attribute code information corresponding to each webpage element to obtain a target webpage.
In this embodiment, each target element group is determined according to the web page relationship diagram, the element group layout characteristics corresponding to each element group are extracted according to the element attribute information of each web page element, and the element layout parameters associated with the element group layout characteristics are obtained, so that the corresponding element layout parameters are determined according to the element group layout characteristics of each target element group, the layout accuracy of the web page elements in each target element group is ensured, and the web page generation is performed on each web page element according to the web page size information by using the element layout parameters, so that the target web page corresponding to the web page size information is obtained, the web page layout and the web page generation of different web page sizes are realized, and the web page generation accuracy is improved.
In one embodiment, as shown in FIG. 7, a schematic diagram of web page generation is provided. The server obtains the web page element relation diagram to perform element identification, and obtains element attribute information of each element in the web page element relation diagram, including the position and the size of each web page element, and the position and the size of each element structure group divided according to the position relation, for example: x, y, width (wide), height (high). And then the server performs feature analysis on the element attribute information of each target element in the target element group, such as features of equal width, equal height, equal spacing, equal proportion and the like. The server performs layout matching in a preset layout experience library according to the layout characteristics of the element groups corresponding to each target element group, acquires element layout parameters corresponding to each target element group, updates element attribute information of each target element according to the element layout parameters, such as position (positioning), display (display frame), width (width), height (height), gap (inner edge distance), margin (outer edge distance), left (left distance), right (right distance), top (top distance), bottom distance and the like, and generates a web page by using the updated element attribute information of each target element and web page size information to acquire a target web page.
It should be understood that, although the steps in the flowcharts related to the embodiments described above are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages.
Based on the same inventive concept, the embodiment of the application also provides a webpage generating device for realizing the webpage generating method. The implementation of the solution provided by the device is similar to the implementation described in the above method, so the specific limitation in the embodiments of one or more web page generating devices provided below may refer to the limitation of the web page generating method hereinabove, and will not be repeated herein.
In one embodiment, as shown in fig. 8, there is provided a web page generating apparatus 800, including: acquisition module 802, element determination module 804, feature extraction module 806, parameter acquisition module 808, and web page generation module 810, wherein:
an obtaining module 802, configured to obtain web page size information and a web page element relationship graph, where the web page element relationship graph is a tree relationship graph established through a positional relationship between each web page element;
an element determining module 804, configured to determine, based on the web page element relationship diagram, each target element group in each web page element, where each target element in the target element group has the same parent element;
the feature extraction module 806 is configured to obtain element attribute information of each web page element, and extract layout features of each target element group corresponding to each target element group based on the element attribute information;
a parameter obtaining module 808, configured to obtain element layout parameters associated with the element group layout features, so as to obtain element layout parameters corresponding to each target element group;
the web page generating module 810 is configured to generate a web page based on each web page element, web page size information, and element layout parameters corresponding to each target element group, so as to obtain a target web page.
In one embodiment, the feature extraction module 806 includes:
the feature analysis unit is used for extracting the position features based on the position attribute information corresponding to each target element in the target element group to obtain element position features corresponding to the target element group; extracting element size characteristics based on size attribute information corresponding to each target element in the target element group to obtain element size characteristics corresponding to the target element group, and taking the element position characteristics and the element size characteristics as element group layout characteristics corresponding to the target element group; traversing each target element group to obtain the element group layout characteristics corresponding to each target element group.
In one embodiment, the feature extraction module 806 includes:
a position analysis unit for calculating a distance between each target element based on position attribute information corresponding to each target element; and determining element position characteristics corresponding to the target element groups based on the distances among the target elements.
In one embodiment, the feature extraction module 806 includes:
the size analysis unit is used for comparing the sizes of the target elements based on the size attribute information corresponding to the target elements to obtain the size proportional relation corresponding to the target elements; and acquiring the element size characteristics corresponding to the target element group from the association relation between the preset size proportion relation and the element size characteristics based on the size proportion relation.
In one embodiment, the web page generation module 810 includes:
the attribute updating unit is used for calculating target size information corresponding to each webpage element based on the element layout parameters and the webpage size information corresponding to each webpage element and each target element group respectively; acquiring element attribute code information corresponding to each webpage element, and updating the element attribute code information based on the target size information to acquire target element attribute code information corresponding to each webpage element; and generating the webpage based on the target element attribute code information corresponding to each webpage element to obtain the target webpage.
In one embodiment, the parameter acquisition module 808 includes:
the selection unit is used for acquiring the priority corresponding to at least one candidate element layout parameter when the element group layout characteristics corresponding to the current element group in each target element group are associated with at least one candidate element layout parameter; and determining the element layout parameters corresponding to the current element group in the at least one candidate element layout parameters based on the priority.
The respective modules in the above-described web page generating apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.
In one embodiment, a computer device is provided, which may be a server, and the internal structure of which may be as shown in fig. 9. The computer device includes a processor, a memory, an Input/Output interface (I/O) and a communication interface. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface is connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The database of the computer equipment is used for storing data such as the relation diagram of the webpage elements and the like. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a web page generation method.
In one embodiment, a computer device is provided, which may be a terminal, and an internal structure diagram thereof may be as shown in fig. 10. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input means. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless mode can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a web page generation method. The display unit of the computer equipment is used for forming a visual picture, and can be a display screen, a projection device or a virtual reality imaging device, wherein the display screen can be a liquid crystal display screen or an electronic ink display screen, the input device of the computer equipment can be a touch layer covered on the display screen, can also be a key, a track ball or a touch pad arranged on a shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by persons skilled in the art that the structures shown in FIGS. 9-10 are block diagrams of the elements in association with aspects of the application and are not intended to limit the computer system to which the aspects of the application may be applied, and that a particular computer system may include more or less elements than those shown, or may be combined with certain elements, or may have different arrangements of elements.
In an embodiment, there is also provided a computer device comprising a memory and a processor, the memory having stored therein a computer program, the processor implementing the steps of the method embodiments described above when the computer program is executed.
In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, carries out the steps of the method embodiments described above.
In an embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the method embodiments described above.
It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and the data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data need to comply with the related laws and regulations and standards of the related country and region.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (ReRAM), magnetic random access Memory (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (Phase Change Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in the form of a variety of forms, such as static random access memory (Static Random Access Memory, SRAM) or dynamic random access memory (Dynamic Random Access Memory, DRAM), and the like. The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computing, or the like, but is not limited thereto.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The foregoing examples illustrate only a few embodiments of the application and are described in detail herein without thereby limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of the application should be assessed as that of the appended claims.
Claims (10)
1. A method of generating a web page, the method comprising:
acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same parent element exists in each target element group;
Acquiring element attribute information of each webpage element, and extracting element group layout features corresponding to each target element group based on the element attribute information;
acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group respectively;
and generating a webpage based on the webpage elements, the webpage size information and the element layout parameters respectively corresponding to the target element groups to obtain a target webpage.
2. The method of claim 1, wherein the element attribute information includes location attribute information and size attribute information; the extracting element group layout features corresponding to the target element groups based on the element attribute information includes:
extracting position features based on position attribute information corresponding to each target element in the target element group to obtain element position features corresponding to the target element group;
extracting element size characteristics based on size attribute information corresponding to each target element in the target element group, obtaining element size characteristics corresponding to the target element group, and taking the element position characteristics and the element size characteristics as element group layout characteristics corresponding to the target element group;
And traversing each target element group to obtain element group layout characteristics corresponding to each target element group.
3. The method according to claim 2, wherein the extracting the location feature based on the location attribute information corresponding to each target element in the target element group to obtain the element location feature corresponding to the target element group includes:
calculating the distance between the target elements based on the position attribute information corresponding to the target elements;
and determining element position characteristics corresponding to the target element groups based on the distances among the target elements.
4. The method according to claim 2, wherein the extracting element size features based on the size attribute information corresponding to each target element in the target element group to obtain element size features corresponding to the target element group includes:
comparing the sizes of the target elements based on the size attribute information corresponding to the target elements to obtain a size proportion relation corresponding to the target elements;
and acquiring the element size characteristics corresponding to the target element group from the association relation between the preset size proportion relation and the element size characteristics based on the size proportion relation.
5. The method according to claim 1, wherein the generating a web page based on the respective web page elements, the respective corresponding element layout parameters of the respective target element groups, and the web page size information to obtain a target web page includes:
calculating target size information corresponding to each webpage element based on the webpage elements, element layout parameters corresponding to each target element group and the webpage size information;
acquiring element attribute code information corresponding to each webpage element, and updating the element attribute code information based on the target size information to obtain target element attribute code information corresponding to each webpage element;
and generating a webpage based on the target element attribute code information corresponding to each webpage element to obtain the target webpage.
6. The method according to claim 1, wherein the obtaining the element layout parameters associated with the element group layout features to obtain the element layout parameters respectively corresponding to the target element groups includes:
when the element group layout characteristics corresponding to the current element group in each target element group are associated with at least one candidate element layout parameter, acquiring the priority corresponding to the at least one candidate element layout parameter;
And determining an element layout parameter corresponding to the current element group in the at least one candidate element layout parameter based on the priority.
7. A web page generation apparatus, the apparatus comprising:
the acquisition module is used for acquiring webpage size information and a webpage element relation diagram, wherein the webpage element relation diagram is a tree relation diagram established through the position relation among all webpage elements;
the element determining module is used for determining each target element group in each webpage element based on the webpage element relation diagram, wherein the same father element exists in each target element group;
the feature extraction module is used for acquiring element attribute information of each webpage element and extracting element group layout features corresponding to each target element group based on the element attribute information;
the parameter acquisition module is used for acquiring element layout parameters associated with the element group layout characteristics to obtain element layout parameters corresponding to each target element group respectively;
and the webpage generating module is used for generating the webpage based on the webpage elements, the element layout parameters corresponding to the target element groups and the webpage size information to obtain the target webpage.
8. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor implements the steps of the method of any of claims 1 to 6 when the computer program is executed.
9. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any of claims 1 to 6.
10. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310629541.XA CN116861123A (en) | 2023-05-30 | 2023-05-30 | Webpage generation method, device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310629541.XA CN116861123A (en) | 2023-05-30 | 2023-05-30 | Webpage generation method, device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116861123A true CN116861123A (en) | 2023-10-10 |
Family
ID=88234774
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310629541.XA Pending CN116861123A (en) | 2023-05-30 | 2023-05-30 | Webpage generation method, device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116861123A (en) |
-
2023
- 2023-05-30 CN CN202310629541.XA patent/CN116861123A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10409856B2 (en) | Approaches for associating terms with image regions | |
| US11061985B2 (en) | System and method for linking data records for parcels | |
| Liqiang et al. | A spatial cognition-based urban building clustering approach and its applications | |
| CN111428457B (en) | Automatic formatting of data tables | |
| CN110009721A (en) | Generate the triangle gridding of the image indicated by curve | |
| KR20170131669A (en) | Method and apparatus for generating composite image | |
| US10691936B2 (en) | Column inferencer based on generated border pieces and column borders | |
| CN111047508B (en) | Image processing method, device, computer equipment and storage medium | |
| CN103617296A (en) | Optimized display method of place name annotation image layer | |
| Yang et al. | Interactive visualization of multi-resolution urban building models considering spatial cognition | |
| CN116644729A (en) | Table file processing method, apparatus, computer device and storage medium | |
| CN116051575A (en) | Image segmentation method, apparatus, computer device, and storage medium program product | |
| Amirkhanyan et al. | Real-time clustering of massive geodata for online maps to improve visual analysis | |
| Panse et al. | Visualization of geo-spatial point sets via global shape transformation and local pixel placement | |
| CN105808682A (en) | Relational graph display method and apparatus | |
| CN107016732A (en) | Positioned using the 3D objects of descriptor | |
| CN115131803A (en) | Document word size identification method and device, computer equipment and storage medium | |
| Ozdemir et al. | A novel algorithm for regularization of building footprints using raw LiDAR point clouds | |
| CN111858613B (en) | Service data retrieval method | |
| CN110688995B (en) | Map query processing method, computer-readable storage medium and mobile terminal | |
| CN107066926A (en) | Positioned using the 3D objects of descriptor | |
| CN116030466A (en) | Image text information identification and processing method and device and computer equipment | |
| CN116861123A (en) | Webpage generation method, device, computer equipment and storage medium | |
| Park et al. | Hybrid approach using deep learning and graph comparison for building change detection | |
| CN114327395A (en) | Webpage design method, device, computer equipment, storage medium and product |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |