Page Building Gadgets

We'll introduce some of the gadgets that are commonly used in page building in this article, most of which are based on Firefox plug-ins that allow us to get the most out of the page building.

Page Building Essentials Tool-firebug

Do you believe that each page is built with this tool? If not, you quickly install (click here to install), Firebug just like its name, help you find bugs, burn it! At the same time there are some Firefox page debugging tools are also based on firebug, such as YSlow, CSS Usage

Web page measuring tool –measureit

When we get a design draft, write the basic structure, our measuring tool may begin, those spacing height width alignment, we need a good ruler to help us, here I like you recommend MeasureIt Firefox click Installation, through this ruler, We can easily do some measurement alignment work, but the flaw of this tool is because of that ruler's border, we are not easy to reach the pixel level standard, then we need the tool which will introduce below Pixel perfect

Real-time color selection tool –colorzilla

The task of adjusting the layout should be to deal with color problems, usually we will put it in Photoshop and other image editing software to see the corresponding color values, if we have colorzilla, we can more intuitive use of color, especially when we use text editing software to write CSS color values, We can even drag the design draft directly into the browser to go directly to the location of the color, and support RGB,RGBA,HSL, Hex, can be copied directly. At the same time, the software also provides swatches and gradient generation tools. Click here to instantly experience

Check the information about the page –web Developer

A page-related information of the synthesizer, any information on the front end of the page you can find from the inside, we can easily view the outline of the page, no CSS, view the DOM node and so on. As long as you want, basically have.

Make your CSS thinner some-css usage

As the Product manager adjusts the product over and over again, do you feel that your CSS file is getting fatter, but you can't easily delete some styles because you don't know if they've been used before, so let's cssusage to help you.

By checking the use of class names, you can see the CSS information on the page, making it easier for the developer to optimize the CSS style sheet.

can display 4 types of letters

Seen the class used by the page in CSS

Seen before this class used to appear on other pages on this site, of course, if you have already browsed other pages

Unseen class in CSS, this page is not used

: Hover Pseudo class information

Web Rating Tool –yslow

YSlow is a web-based rating tool based on Firebug, which has 23 of the rules that can be tested by the Yahoo User Experience Department, which has 34 possible effects on the front page performance. Even if we don't use this tool, it's good to know these rules.

Screenshot Storage Tool –pearl Crescent Page Saver Basic

Page saver can convert a webpage into a picture, including Flash on a Web page that can be converted at the same time. Web pages can be saved in PNG or JPEG format as you request. You can convert the entire page or the part you see on the screen into a picture. In order to facilitate the interception of Web pages, plug-ins provide a large number of settings options, including the default file name, file suffix name, the quality of the picture. You can intercept a picture from a toolbar button, or you can intercept a picture from a browser's menu option, or you can intercept a picture from the command line.

The current visible area is saved as a picture:

Save an entire page as a picture

HTML page vs. design manuscript pixel-level tool –pixel perfect

The designer's design can be loaded into the browser through the plugin as a mask, by adjusting the transparency and location of the picture, you can make the design draft and the details of the page, to optimize the accuracy of the page style.

First add the design to the page you want to compare:

Let the Picture Show:

You can overlap pictures and Web pages by adjusting the transparency and location of specific coordinates, and then modify the styles.