Generally speaking, the work completed by web design is actually: convert the psd renderings into html+CSS template pages. Generally, we will get the psd of the artist, and different people will have different approaches:
1. Open fireworks and export the image to html.
2. Directly use tools such as dreamweaver to drag and lay out the layout, import relevant pictures, and flash resources.
3. After completing the cut in ps, first look at the renderings in the text editor and make them step by step.
The above are the most commonly used methods, but none of them are good:
The first method is the worst, such code is not maintained or readable at all.
The second method is not good either, the code will inevitably be redundant, and the things you make need to be checked.
The third method is not good either, because you need to look at the renderings bit by bit, that is, when writing the html tag, you are constantly assuming how to display this piece.
Correct way to do it:
1. After getting the psd, don’t do anything else first. Write the web page framework directly in the text editor. Don’t assume how to render this CSS in the future. It’s completely naturalized label without adding any CSS.
2. After writing, make sure that there is no problem with the overall positioning after running each browser.
3. Write the overall css, here the css is only responsible for the positioning and style of the large blocks.
4. Cut out the required picture resources, construct them bit by bit in the written framework, constantly debug them, and finally become the finished product.
5. Finally, add comments to your own code, and add comments to your own code appropriately in both css and html.
There are still many things to pay attention to if we want to make a flexible switch to make the skin and let CSS dominate the performance, but the general process is like this. Of course, we cannot write html directly at the beginning, but at least we must have this awareness and proceed step by step. . .
PSD file cut out websites from two major points:
1. An independent page
1. Analyze this page and first describe the general structure in your head or on the draft paper.
2. According to the situation of the design draft, analyze the distribution of background images, the distribution of ICO images, etc.
3. Cut the corresponding pictures, export and merge pictures
4. Write the overall structure XHTML code in the editor, including the structure of all elements that appear in the page
5. Write the overall and module code in CSS style
6. Detail adjustment
7. After the work, the browser will verify whether it is correct
2. Small or large site composed of multiple pages
1. Browse all design drafts and unify the distribution of site modules, pictures, and files
2. Start the first point of operation, but it is important to plan the content distribution of the site.
Overall consideration:
1. Merge of pictures to reduce the number of requests
2. Structural rationality and semanticization
3. The simplicity of the style makes it easy to maintain later
4. Mostly consider later maintenance and program development, how to simply achieve the effect.