The correct way to translate PSD template designs into HTML templates

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.

Reprint: http://blog.sina.com.cn/s/blog_6901eb650100ypjh.html

The correct way to translate PSD template designs into HTML templates