Chettu tips for Web site production

Source: Internet
Author: User
Keywords Chettu

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

General Web site production steps are: Design Effect diagram--> Chettu + make static HTML template--> nested to CMS, which, Chettu although 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 a pixel stripe along the same direction as the gradient hue, from the background repeat-x or repeat-y in the CSS to 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, Then by the width and height of the 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 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, High 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 is necessary to write a meaningful name to it when you save the picture.

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.

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: info-contact@alibabacloud.com 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.