CN112307720A

CN112307720A - PSD (position sensitive Detector) document-based HTML (Hypertext markup language) design template automatic conversion method and system

Info

Publication number: CN112307720A
Application number: CN202011184076.6A
Authority: CN
Inventors: 徐敏
Original assignee: Nanjing University of Aeronautics and Astronautics
Current assignee: Nanjing University of Aeronautics and Astronautics
Priority date: 2020-10-29
Filing date: 2020-10-29
Publication date: 2021-02-02
Anticipated expiration: 2040-10-29
Also published as: CN112307720B

Abstract

The invention discloses a PSD document-based automatic conversion method for an HTML design template, which comprises the following steps: extracting information in the PSD document and storing the information required by realizing the Web page structure into an XML document; generating a final Web page structure file based on the XML document, wherein the Web page structure file comprises two parts: the system comprises an html structure used for defining the relative relation between layers and a css structure used for defining the positioning of each layer, dividing areas and content representation forms. The invention can be based on the method and the system for automatically converting the HTML design template of the PSD document, and the HTML design template is generated by conversion, so that a front-end page designer can convert page elements such as characters, pictures and the like through an image interface, and the designer can easily modify pages, the front-end worker can easily make pages and the like.

Description

PSD (position sensitive Detector) document-based HTML (Hypertext markup language) design template automatic conversion method and system

Technical Field

The invention relates to the technical field of Web system page automation, in particular to a method and a system for automatically converting an HTML design template based on a PSD document, which aim to overcome the defects existing in the prior art from page design and modification by designers to page making by front-end personnel.

Background

The current main method for making the Web page is to manually make the Web page by using an image file designed by an art designer, but the method always has the defect that the steps are fixed and complicated, namely, manually slicing the picture, painting character colors and the like, the steps are generally fixed and the process is simple, but the whole Web making process is still complicated.

In general, the disadvantages of the current front-end web page production are:

1) inconsistency between page design and implementation:

because the front-end network implementer implements the page according to the PSD file designed by the page designer, the idea of the designer is probably misunderstood, and the design and implementation are inconsistent;

2) the efficiency is low:

because many scripts and markup languages are written in the middle of converting a designed PSD file into an HTML file, a lot of front-end personnel must be spent to complete the tedious work, the efficiency is low, and errors are easy to occur.

3) The modification cost is high:

the time and labor costs required are high each time a page is implemented from a new design and implementation or modification.

In the prior art, there is also a method for generating a web page based on a PSD file, for example, in the invention with patent number CN111562919A, a method for generating front end web page codes based on a PSD file is proposed, which combines an image technology and a front end web page technology to realize flexible conversion from a design drawing to the front end web page codes, thereby reducing the workload of repeated cutting, comparison and layout of the design drawing and layout of a front end engineer when writing a static web page, and improving the front end web page development efficiency. For example, the invention of patent No. CN104063380A proposes a method for converting a picture file into a web page file, and the invention of patent No. CN109829127A proposes a method for quickly analyzing a PSD file into a web page. Without exception, the final generated HTML webpage is generated, and the front-end page designer needs to modify the generated HTML webpage and still needs to return to the PSD file. In addition, the existing HTML webpage generation process has the following problems that the conversion efficiency is low due to a large amount of information, overlay errors are easy to occur in the position relation between page elements, partial page elements are not fully displayed, and the like, and all the problems need to be improved by a developer in a later-stage adjustment mode.

Disclosure of Invention

Aiming at the defects in the prior art, the invention provides an automatic conversion method and system of an HTML design template based on a PSD document, wherein the HTML design template is generated by conversion, so that a front-end page designer can convert page elements such as characters, pictures and the like through an image interface, and the front-end page designer can easily modify pages, make pages and the like.

In order to achieve the purpose, the invention adopts the following technical scheme:

an automatic conversion method of HTML design template based on PSD document, the automatic conversion method comprises the following steps:

s1, extracting information in the PSD document to realize the information needed by the Web page structure and storing the information in the XML document;

s2, generating a final Web page structure file based on the XML document, wherein the Web page structure file comprises two parts: the system comprises an html structure used for defining the relative relation between layers and a css structure used for defining the positioning of each layer, dividing areas and content representation forms.

In order to optimize the technical scheme, the specific measures adopted further comprise:

further, in step S1, the process of extracting the information in the PSD document and saving the information required for implementing the Web page structure into the XML document includes the following steps:

s11, creating an XML root node aiming at the current layer A;

s12, sequentially traversing all sub-layer a of the current layer A, creating a corresponding XML sub-node for each sub-layer a, and writing the layer information into the XML sub-node after the layer information is processed by a preset processing strategy:

in the process of traversing the sub-layer a, when a Group layer is encountered, recursion is carried out, the sub-layer reading, XML sub-node creation, layer information writing and Group layer judgment processes of the current layer are repeated, and after all sub-layers of the sub-layer a are completely accessed, XML sub-nodes corresponding to the sub-layer a are returned;

s13, adding the XML child node into the child list of the XML root node, and returning the XML root node.

Further, in step S12, the process of writing the layer information into the XML child node after being processed by the preset processing policy includes the following steps:

s111, judging whether the input layer is a Group layer, if so, entering a step S123, otherwise, entering a step S122;

s122, judging whether the input image layer is a character image layer, and if so, extracting character information contained in the image layer;

and S123, extracting the basic information including the width, the height, the position and the name, writing all the extracted information into the corresponding XML child nodes, and ending the flow.

Further, in step S2, a cs structure is generated by using an external style sheet according to each XML node information, where the cs structure includes the following information: basic elements (width, height, left, top) containing width, height and position, a positioning element position for reflecting the relative relation between layers in the PSD document, and a z-index element for setting XML node hierarchy;

and the values of the position elements left and top of each image layer are relative values obtained by subtracting the values of top and left corresponding to the parent layer node from the real value corresponding to the current image layer.

Further, in step S2, according to each XML node information, constructing each layer region by using a div tag, and then according to different layers, filling different information to generate an html structure; wherein each div tag is positioned according to the position of the div on the upper layer.

Further, the automatic conversion method further comprises the following steps:

and S3, selecting a frame mode or a graphic mode according to actual requirements to convert the generated Web page structure file into a corresponding HTML design template.

Further, in step S3, a javascript script is added to the Web page structure file, and the pictures or the characters contained in the Web page structure file are modified by the javascript script.

Based on the method, the invention provides an automatic conversion system of an HTML design template based on a PSD document, which comprises the following steps:

the PSD-XML conversion module is used for extracting information in the PSD document and storing the information required by realizing the Web page structure into the XML document;

the XML-WEB conversion module is used for generating a final Web page structure file based on an XML document, and the Web page structure file comprises two parts: the system comprises an html structure used for defining the relative relation between layers and a css structure used for defining the positioning and dividing area and content representation form of each layer;

and the HTML design template conversion module is used for selecting a frame mode or a graphic mode to convert the generated Web page structure file into a corresponding HTML design template according to actual requirements.

The invention has the beneficial effects that:

(1) the invention can realize the automatic process from the page design to the realization, ensures the consistency of the page design and the realization, improves the efficiency of the process of realizing the page by manually turning to the automatic generation and simultaneously improves the maintainability of the page.

(2) The automatic conversion method of the invention can easily realize the following two display modes of the HTML design template: one is a frame mode, which can display the content that each area of the page should fill in; the other mode is a graphic mode, so that a designer can easily see whether the result extracted by adopting an automatic conversion method is consistent with the self thought or not, and meanwhile, front-end personnel can be helped to understand the intention of the designer.

Drawings

FIG. 1 is a flow chart of the method for automatic conversion of HTML design templates based on PSD documents according to the present invention.

FIG. 2 is a flow diagram of the XML document generation process of the present invention.

Fig. 3 is an information extraction flow diagram of the present invention.

Fig. 4 is a schematic diagram of one of the Web structures.

FIG. 5 is a schematic diagram of the cs architecture of the present invention.

FIG. 6 is a flow chart of the Web page structure implementation of the present invention, wherein (a) is a flow chart of reading XML nodes, and (b) is a flow chart of building Web pages.

FIG. 7 is a diagram of a PSD document for testing.

FIG. 8 is a schematic illustration of the effect of a portion of a page generated for a test PSD document.

Fig. 9 is a schematic diagram of page effect after adding a background image.

FIG. 10 is a schematic diagram of a web page when the middle space is clicked.

FIG. 11 is a diagram of a page populated with picture links.

Detailed Description

The present invention will now be described in further detail with reference to the accompanying drawings.

It should be noted that the terms "upper", "lower", "left", "right", "front", "back", etc. used in the present invention are for clarity of description only, and are not intended to limit the scope of the present invention, and the relative relationship between the terms and the terms is not limited by the technical contents of the essential changes.

With reference to fig. 1, the present invention provides an automatic conversion method for HTML design templates based on PSD documents, which includes the following steps:

and S1, extracting information in the PSD document, and storing the information required by realizing the Web page structure into the XML document.

The method is to extract information of the PSD file into the xml document in a formalization mode, and then the xml document is used for generating the corresponding Web page and the corresponding script, so that a designer can modify the page easily and front-end personnel can make the page easily.

The invention has the following contents:

one, PSD file is converted into XML file

At present, the network transmission text format is mainly XML and JSON, but XML contains richer information, so that the converted XML document has more general type and contains more information, and the automatic setting of the webpage is more convenient.

1) Information required for realizing the structure of the Web page is extracted from the information in the PSD document and stored in XML, and the specific flow is shown in figure 2.

The step is realized based on a recursion function, and sequentially traverses all sub-layers a of the current layer A, recurs downwards whenever a 'Group' layer is encountered, and then finishes traversing all sub-layers of the layer A. In the process of accessing the sub-map layers, creating XML nodes for each sub-map layer, writing the map layer information into the nodes through a certain strategy, and then adding the XML nodes corresponding to A according to whether the map layer information is a 'Group' map layer or not; if so, entering recursion, then repeating the process until all sub-layers of the layer a are completely accessed, returning the layer a to correspond to XML nodes, finally, after the recursion is returned, adding the XML nodes corresponding to the layer a into the XML nodes corresponding to the layer A, and finally returning the XML nodes of the layer A.

2) PSD information extraction strategy

For a layer, the information amount is large and the content is complicated, and if all the information is written into XML, the XML becomes too bulky and inefficient, so a strategy for extracting information needs to be designed, and part of the important information is written into XML. The extraction strategy shown in fig. 3 is designed for the final page structure Web implementation.

Because the types of the image layers in the PSD document are different, the information in the PSD document also has a difference, for example, only a text image layer has a text attribute, the image layer type is judged when the information is extracted, then the information is extracted according to the respective characteristics, and then common information, such as the width, the height, the position and the name of the image layer, is extracted. Therefore, the effective extraction of the PSD document information is completed.

Secondly, generating a Web page structure

For the final Web page structure, it is processed in two parts. The html structure and the css structure are adopted. html is responsible for defining the relative relation between each layer and each layer, and css is responsible for positioning, dividing regions and modifying content representation forms of the layers.

For the html structure, div tags are adopted, the div tags are used for building each layer region, and then different information is filled according to different layers. To realize the page structure of the PSD document, the structural characteristics are determined. The structure is characterized by multilayer superposition, so the following Web structure is designed for realizing the Web so as to reproduce the Web. As shown in particular in fig. 4.

Each square frame represents one layer, each numeral represents the hierarchical structure of the layer where the numeral is located, and if the numeral is 1-1, the numeral is the sub-layer in the numeral 1. With this structure, the page structure in its PSD document can be reproduced.

For cs style, the introduction mode of the style is determined, and an external style sheet is adopted. Because inline styles are directly in html tags, the whole html file becomes bulky and difficult to read; internal style sheet modification is extremely cumbersome. Each tag locates the style sheet by means of a class name.

According to the basic information of the layers of the PSD document, the width, height, left and top at least including the width, height, left and top can be determined, in order to embody the relative relation between the layers in the original PSD document, a positioning mode position is added and set as an absolute positioning mode absolute, so that one div can be positioned according to the position of the div on the previous layer, otherwise the div can be positioned according to the frame of the whole page by default, the positions among the page elements become quite disordered, after the positioning mode is changed, the left and top values of the div and top values of the device are correspondingly changed, namely when the PSD document information is stored, the stored top and left are not the real values of the device, but the top and top values of the parent layer nodes are subtracted.

When the method is implemented, the unexpected elements are found to be mutually covered, so that the elements of the page part are not complete, and therefore, a z-index attribute is set for setting the hierarchy of the elements, and the problem of coverage errors is avoided. For the node information of partial text layer, the information is only needed to be judged and added. Finally, the cs structure shown in FIG. 5 is obtained.

Third, HTML design template and Web page implementation process

The Web page implementation is the implementation of html and css files, and is mainly completed by constructing corresponding statements and then writing files. The whole flow is shown in fig. 6.

The process is also realized based on a recursion function, for the current node A, the node A must be a node containing other nodes, the sub-nodes below the node A are sequentially visited, and if the sub-nodes also have sub-nodes, the node enters the recursion; until all nodes have been visited. In the access process, all information in the access process is acquired. And constructs HTML statements and CSS statements. When constructing CSS statements, the invention adopts a mode to distinguish the layers of each node in the CSS statements: and adding a z value to record which hierarchy the z value belongs to, wherein the larger the z value is, the higher the hierarchy is, the more preferentially covers other elements, namely the z-index mentioned above, when displaying, thereby ensuring that the structures in the z value are not covered by errors.

When the HTML statement is constructed, for the node containing the child node, since the node enters the recursion along with the function, but the node does have a tag pair, the first half section of the HTML is written before the recursion, and the second half section of the HTML is written after the recursion, so that the integrity of the tag pair can be ensured.

Fourthly, displaying operation effect

First a designed PSD document is given as shown in fig. 7.

1 framework mode

Firstly, the method provided by the invention is adopted to generate an HTML file and a CSS file, a frame mode is displayed, the types of the HTML file and the CSS file are marked as a background and characters, the background and the characters correspond to a non-character layer and a character layer in the background and the character layer respectively, a frame is added to the non-character layer and the character layer, and the final page effect is obtained as shown in fig. 8.

It can be seen that the internal structures have been clearly divided, and various structures are also designated.

2 graphic mode

In order to make the designer easily see whether the result extracted by the automatic conversion method is consistent with the self thought, and simultaneously help the front-end personnel to understand the intention of the designer, the image data of each layer in the front-end personnel is added to each div of the page as a picture, and the following page is obtained, as shown in fig. 9.

3 image interface modification page element

In order to enable front-end workers to conveniently modify the extracted Web page structure, javascript scripts are added into the page, so that the background picture or text can be modified by clicking the picture or text. The effect is shown in fig. 10. The automatic process from design to implementation of the page is achieved by filling in the corresponding picture links as shown in fig. 11.

The above is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above-mentioned embodiments, and all technical solutions belonging to the idea of the present invention belong to the protection scope of the present invention. It should be noted that modifications and embellishments within the scope of the invention may be made by those skilled in the art without departing from the principle of the invention.

Claims

1. An automatic conversion method for an HTML design template based on a PSD document is characterized by comprising the following steps:

2. The method of claim 1, wherein in step S1, the step of storing the information required for extracting information in the PSD document to realize the Web page structure into the XML document comprises the following steps:

s11, creating an XML root node aiming at the current layer A;

3. The method according to claim 2, wherein in step S12, the process of writing the layer information into the XML child node after being processed by the predetermined processing policy includes the following steps:

4. The method of claim 1, wherein in step S2, based on each XML node information, generating css structure using external style sheet, the css structure includes following information: basic elements (width, height, left, top) containing width, height and position, a positioning element position for reflecting the relative relation between layers in the PSD document, and a z-index element for setting XML node hierarchy;

5. The method for automatically converting the HTML design template based on the PSD document according to claim 4, wherein in step S2, according to each XML node information, each layer region is built by a div tag, and then according to the different layers, different information is filled to generate an HTML structure; wherein each div tag is positioned according to the position of the div on the upper layer.

6. The method of claim 1, wherein the method further comprises the steps of:

7. The method for automatically converting an HTML design template based on a PSD document according to claim 6, wherein in step S3, a javascript script is added to the Web page structure file, and the pictures or words contained therein are modified by the javascript script.

8. An automatic PSD document-based HTML design template conversion system according to claim 1, wherein said automatic conversion system comprises: