11 Gadgets to help you build your page

Today, a lot of small software can be used to build the page, and play a little bit of effort, the following share some of the common page building tools, most of which are based on Firefox plug-ins. , allowing you to be more handy when building your pages.

One, the page constructs the essential tool-firebug

Do you believe that every page building has 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, some Firefox page debugging tools are also based on firebug, such as YSlow, CSS Usage

Second, the Web page measuring tool –measureit

When we get a design draft, write the basic structure, our measuring tools may start, those spacing \ height width \ Alignment, we need a good ruler to help us, here I like you recommend MeasureIt Firefox Click to install, 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

Third, 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 see, 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. The software also provides swatches and gradient generation tools. Click here to instantly experience

Iv. Check the relevant information of the webpage –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. As long as you want, basically have.

Let your CSS be 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 to make it easier for the developer to optimize the CSS style sheet.

can display 4 types of information

Dots the class used by the page in CSS

Dots unreported This class used to appear on other pages in this site, of course, if you have already browsed other pages

Unseen CSS class, this page is not used

: Hover Pseudo class information

We had a little in-depth discussion before, please move to the CSS weight loss tool CSS Usage

Vi. Web Rating Tool –yslow

YSlow is a Web rating tool based on Firebug, which contains 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 the tool, it's good to know the rules.

1. Reduce HTTP Requests

2. Use CDN

3. Avoid using null SRC or HREF

4, Add an Expires or a cache-control Header

5, compressed components

6, put the style file on the top of the page

7. Put the script file under the page

8, prohibit the use of style expressions

9, the use of the chain of CSS and JS files

10, reduce DNS lookup

11, reduce the CSS and JS files

12. Avoid using redirects

13, delete duplicate content

14, Configure ETags

15, is Ajax can be cached

16. Use the Get method to handle AJAX requests using the for Ajax Requests

17, reduce the number of DOM nodes

18, do not have 404 pages

19, reduce the size of the Cookie file

20, use Cookie-free Domains for RS

21. Avoid using filters

22, do not redefine the size of the file in HTML

23, ensure favicon.ico small and can be cached

Page 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 to 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, picture quality. 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 it from the command line.

The current visible area is saved as a picture:

Save an entire page as a picture

Eight, HTML page and 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.

Let the Picture Show:

Nine, the local debugging page style sharp weapon –fiddler

When our static page through the front-end engineers, programmers colleagues work, looking forward to the next, finally online, at this time we also have to busy, because some of the static page does not take into account the situation and related front-end and program colleagues processing, the page appeared on a number of bugs, In particular, sometimes these bugs in different browsers are not the same, rely on Firebug tools we can not burn these worms, then we will be able to use the Fildder tool to monitor all HTTP requests and response tools, select the style file we need, To find the cause of an online bug by debugging a local file: http://www.fiddlertool.com

We are generally used to debug style problems.

Step one: Store the CSS files that you need to modify

Step two: Open fiddler, Refresh page

Step three: Select the files you want to debug and modify

Click on the right autoresponder–> ADD

The line is also the style file we need to debug to add in.

Step fourth, add the previously saved style sheet file to fiddler

When you select the file, click Save and you are done. The next step is to debug.

After you modify the CSS file, you can immediately refresh the page to display the new style for the latest change debugging.

Of course, the Fiddler tool is more than that, such as speed simulation

X. DNS Refresh Tool –dns Flusher

Page development of the students walk every day in the development environment, test environment, simulation environment, and so on, for each environment change host is commonplace, after the host, after the press to brush the page, the page host IP address really changed? We need an intuitive tool to force the browser to update Host,dns flusher is a good tool, we can update to the new host address each time with a gentle click, install Now.

Make it easier for search bots to find you –senseo

The work of the page construction is not only to make the page as far as possible to achieve the artistic requirements of the design manuscript, the speed of network transmission requirements, but also for search engines easier to find you make corresponding efforts. We have relatively little to talk about this, Senseo is a SEO diagnostics of the Firefox plug-in, you open the panel in the inside input your keywords, and then click on the back of a few buttons. can give you a comprehensive rating, analysis of your title, Description, Keywords, robots, number of Words, number of matching Keywords, keyword-density, number of HTML, and so on. Some of the suggestions made by this plugin are instructive.

1. Inspect SEO criteria SEO standards Check and recommendations

There is a score rating, Green represents the standard, yellow for warning, small problem, red represents a serious problem, need to be optimized

Title tag Use correct condition

(1) Use only once

(2) Title tag should contain all keywords

(3) Title label length should be less than 65 characters

(4) Title tags should contain fewer than 15 keywords

META tags

Cases：

Meta name= "description" label used correctly

(1) Use only once

(2) The label should contain all the keywords

(3) Label length should be less than 150 characters

(4) The label should contain fewer than 30 keywords

First introduce what robots.txt is: Search engine through a program robot (also known as Spider), automatic access to Web pages on the Internet and get web information. You can create a plain text file robots.txt in your Web site, in which you declare the part of the site that you do not want to be robot, so that some or all of the content of the site is not included in the search engine.

(1) Using the robot's declaration, that is, creating robot.txt files to control search engine access

(2) Provide a sitemap, using Google Webmaster tools to submit

H Tags use optimization (the following recommendations, if we use HTML5 to build the page, may need to be re-examined.)

(1) Use H tag to build page structure

(2) H1 label can only be used once

(3) keyword should use H1 label

(4) using H2 and H3 labels on the page

Page Content Optimization

(1) Use unique content

(2) Avoid duplicate content

(3) Clear and smooth content

(4) The image to use the alternative text description, that is, the use of alt= ""

(5) as little as possible repeated use of keywords

(6) preferably less than 100 links

(7) Code semantics and reasonable and effective

(8) Optimize page loading time

(9) Use of micro-format to mark the evaluation, address, etc.

Domain Name

(1) Domain name should contain keywords

(2) Do not use international Domain name (domain name do not include special characters)

(3) The use of hyphens in the domain name to connect different words (use the underline in the URL, Google can not split them into different keywords)

(4) The use of domain name for more than 2 years

(5) Manage domain names to improve rankings

Path Address optimization

(1) The best way is short and short

(2) Do not use dynamic parameters

(3) Use hyphens to connect different words

(4) Using lowercase letters

(5) The path level should not exceed 3 layers

2. Show RS information about SEO optimization

3. Printview Print Web page information