Convert PSD into HTML

In general, the completion of the design of the Web page is actually: PSD into html+css template page, in general, we will get the art of PSD, different people will have different practices:

1. Turn on fireworks to export the picture cut to HTML.
2. Drag layouts directly in a tool like Dreamweaver, import related images, flash resources.
3. Once you have finished the cut in PS, you will see the step by piece in the text editor.

These are the most commonly used methods, but none of them are good:

1. The first method is the worst, and the code is not maintainable or readable at all.
2. The second method is not good, the code will inevitably have redundancy, do something basic need to be checked again.
3. 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 block to show how to.

General idea:

• Html→css
  • First, write the structure (HTML), then write the style (CSS). Let CSS dominate the performance.
  • Pay attention to the rationality and semantics of HTML structure.
  • Note that the style is concise and easy to maintain later.

• If it is a small site consisting of multiple pages or a large site
  • Browse all designs and plan your site modules, images, and file distribution.

• Picture merging, reducing the amount of requests.

• More for the later maintenance and development of the program, how to achieve the effect of simple.

Correct practice:

• Transduction
  • Cut out the required picture resources, in a well-written framework of a little to construct, continuous debugging, and ultimately the finished product. Details include:
  • According to the situation of the design draft, analyze the distribution of the background map, the distribution of ICO graph, etc.
  • Cut the corresponding picture, export, merge pictures

• Write a semantically pure html/xhtml.
  • After getting the PSD, do not do anything else, directly in the text editor to write the framework of the page, do not assume that the future CSS to go how to render, completely natural label, without any CSS.
  • After you've written it, make sure you're not having a problem with the overall positioning after running the browser.

• Write CSS styles.
  • Write the global CSS. The CSS here is only responsible for the positioning and styling of the chunks.
  • Write the local module CSS.
  • Adjust the details.

• Add a comment.
  • Add comments, including CSS and HTML code.

• Browser inspection.
  • Multi-browser viewing effects.

Reference:

Http://www.2ky.cn/h/13/7219.htm

Convert PSD into HTML