The correct way to translate PSD template designs into HTML templates

Source: Internet
Author: User

In fact, the standard network production completed the actual work is: PSD to HTML, under normal circumstances, we will get the art of PSD, this time different

People will have different ways of doing it:

1. Turn on fireworks to export the picture cut to HTML.

2. Directly in the Dreamweaver and other tools to drag the layout, import related images, flash resources.

3. After you finish the cut in PS, look at the production step by piece in the text editor.

The above are mostly used methods, but are not good:

The first method is the worst, and the code is not maintainable or readable at all.

The second method is not good, the code will inevitably have redundancy, do something basic need to be checked again.

The third method is not good, because you need to look at a little bit of spelling, that is, when you write HTML tags, you are constantly assuming that this piece

How to show it.

The correct approach is to:

1. After the PSD, do not do anything else, directly in the text editor to write the framework of the Web page, do not assume that the future of CSS to how to

Render, completely naturalistic label, without any CSS.

2. After the completion of the browser after the operation to ensure that the general positioning is no problem.

3. Write the overall CSS, where the CSS is only responsible for the large block positioning and style.

4. Cut out the required picture resources, in a well-written framework of a little to construct, continuous debugging, and ultimately the finished product.

5. Finally, add comments for your own code, and in css,html you need to annotate your code appropriately.

There are a lot of things to be aware of when it comes to making a flexible switch to the skin and letting the CSS dominate, but the general process is that, of course, I

In the beginning, we can not directly do the first HTML, but at least have this awareness, gradual ...

Thank you enthusiastic member "LINXZ" to provide practical experience, I posted it for your reference:
PSD out of the site from two big points to consider
One stand-alone page
1, analyze this page, first in the head or draft paper to depict the approximate structure
2, according to the situation of the design manuscript, analysis of the distribution of the background map, ico map distribution, etc.
3, cut the corresponding pictures, export, merge pictures
4. Write the whole structure XHTML code in the editor, including the structure of all the elements appearing in the page
5. Write the whole and module code in CSS style
6. Detail Adjustment
7, the browser verification is correct

Second, a small site consisting of multiple pages or large sites
1, browse all design drafts, unified planning site module, picture, file distribution
2, start the 1th operation, but planning the site's content distribution is very important

Consider the whole point:
Picture merging, reducing the amount of requests
The rationality of structure, semantic
Simple style for post-maintenance purposes
More for the later maintenance and development of the program, how to achieve the effect of simple.


The correct way to translate PSD template designs into HTML templates

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.