Chettu tips for Web site production

General Web site production steps are generally: Design effect map – "Cut map + make static HTML template –" Nested to CMS, which, although Chettu is a very simple step, but there are a lot of skills, the following is my personal summary of several points.

Overall, grasp a principle, can be written in CSS, resolutely do not use pictures. Experience tells us, home pictures Many of the site will be very slow to open, one is because of more pictures, the need to download the volume of the file will increase, and the second is that each image download will have a request to the server, increased the browser and service-side interaction, if you can put the pure color of the part of the use of CSS to write, and not because of the convenience of direct Will greatly improve the efficiency of the site, when I first started learning to make a website, I took for granted how to speed up the production of how to come, so the background of a navigation bar cut directly into the picture, then the boss saw me write the HTML code, told me not to do so, with a div definition good width and height set background color and border , one line of code is done. If you encounter a background with gradients, you can cut the stripe of one pixel along the same direction as the gradient hue, using the background repeat-x or repeat-y in the CSS to come from the dynamic fill.

Navigation Bar Effect Chart

For a picture of a navigation bar with rounded corners, you can cut the rounded corners of the sides separately. If there is gradient in the middle, but also only cut a pixel stripe, cut out of the three stripes can be merged into a picture (up, down, and below), so that when used in the Web page in the CSS Positon properties to locate the location of the picture.

In the process of cutting effect, for the image of the preservation of the format also pay attention to, in general, the use of image tools (such as Photoshop) produced colorful buttons or icons are generally stored in the PNG format, while the camera with the scenery or characters, objects, images more in JPG format to save, GIF is typically used to store images with simple animation effects, and it is important to note that if a transparent effect is used in the picture, to be stored in a png-8 format, the other PNG formats are either not transparent, or the file is much larger when saved, and the png-8 is the most cost-effective.

Icons are generally in PNG format

For use as a background or foil color more pictures, save the picture as far as possible from the definition and picture size to find a balance, not only to ensure that the picture as small and not distorted, this should be based on personal experience, because everyone's standards are different, you must not compress pictures directly put up, And then by the width and height to limit, this is self-deception, the browser will first download the big picture to the local, and then use the style to force it to compress, show not only will not be clearer, but will be distorted, once I have encountered a Web site has been opened, only a local is a blank square, After a few seconds to load out a picture, curious to download this picture, unexpectedly there are more than 2M ... This is not only the first page cut map, in the content of the site to upload the best also to develop good habits, especially the news of the map, now the camera effect is getting better, take out the picture is still several trillion, must be processed to the picture size and then upload, the general processing picture width of 500-600 pixels between, The height of automatic ratio can be.

Cut the name of the picture to form a good habit, the best naming habit is to see the name of the idea, I see most of the site's pictures using cutting tool software batch cutting, naming very irregular, such as index_01, index_02, index_02_01 and other rules but meaningless pictures, Perhaps you say that the name of the picture itself is not very significant, because this name is only used when the browser load, but for a strong web site, in the revision and maintenance, if you want to replace some of the site pictures, you need a right from the browser to view the picture address, Writing down every long, irregular picture name can make a technician crash (or maybe yourself), so it's necessary to write a meaningful name for the image when you save it.

The above is a personal summary of some of the skills in the site Chettu, I hope that the vast number of novice-level or want to engage in the production of Web site friends Some suggestions, welcome to learn to communicate!

This article from the Independent blog Http://www.sunfei.net, reproduced or cited please indicate the source.