Web Developer Tutorials

Now let's introduce a kind of accessibility tool for Web debugging: Web developer! It is a plugin that runs in the context of FF (referred to as the Firefox browser) and is currently recognized as the best Web Debugging tool.

Web developer as a plug-in for FF exists, the main function is in several important aspects:

The text, images, media files in the page control, the Web page is applied to the CSS file ID and Class auxiliary view, table-assisted view, can be implemented to modify the CSS file real-time display of the resulting page effect and so on.

Web Developer plug-in can help us to analyze the CSS Web site, we use FF to browse the Web page, the use of web Developer plug-in is not only to see each other's source code, but also easy to analyze the layout of the page structure, CSS writing style, The location of the mouse ID or class is what and so on, so that we can quickly understand, learn the success of others experience, and thus more convenient and quick to master the CSS layout technology.

Web Developer Plugin Overview

The web Developer plug-in is a toolbar-like utility for Web pages (X) HTML, scripting, multimedia, CSS, caching, images, and many more. So that we can easily get more information on the Web page, so that we know more about the current page viewed.

In the Web Developer plugin toolbar, it consists mainly of the following parts: Disable, Cookies, CSS, Forms, Images, information, Miscellaneous, Outline, Resize, Tools, View Source, Options. Let's take a brief description of the situation.

Disable disables the tool to temporarily block some of the things on the current page, such as JavaScript scripts, caches, Mete auto-redirects, displaying Web pages as black (except for pictures), disabling pop-up windows, and so on. Such as:

The cookie tool can use this tool to view the current page of the cookie information, can be viewed by different domain name or path, and can manually add a cookie, which is a very convenient and powerful tool for the development and debugging of background network programming. Such as:

CSS Style Sheet tool This is a very powerful tool, based on the CSS page layout has the right assistant, work and learning will be very simple, you can control whether the CSS application, view the page CSS file, and real-time editing, And immediately reacts to the editing effect in the browser window. We'll take a more in-depth look at this tool later in this article.

The Forms Form Tool 's main function is to control the form of the page, many of which are very helpful to the development of the form program, because our focus is CSS page layout, this tool we do not make in-depth discussion. Such as:

The images Image tool can set the image of the current page, can display the ALT information of all pictures, and can also be used to display the background. Such as:

Information Information tool This tool is also often used in our CSS page layout design, and we can use it to see all the IDs, class and table elements in the page, the names of the placeholders, and so on, we'll give more in-depth details about this tool.

Miscellaneous Other This is a very "fun" tool, it provides the function is what we dream, in the page layout, we can use it to achieve a lot of interesting features, such as auxiliary line, area, measurement, etc., we also often use in CSS page layout design , we'll go into more detail about this tool later.

Outline wireframe Tool This set of tools is very useful for our CSS page layout design, the wireframe Display tool is able to use some elements of the page frame strokes, so that we can better view its placeholder information, we can use it for Div, h1-h6, form, etc. wireframe strokes , we'll go into more detail about this tool later.

Resize Size Tool We can use it to change the size of the browser window, and if we use the 1600*1200 resolution, we can emulate the 1027*768 window effect with this tool. We'll take a more in-depth look at this tool later in this article.

Tools Tool for our CSS page layout design, its biggest function is to integrate CSS and XHTML verification Tools, you can click the Check option in this tool to verify the current page, it will automatically link to the relevant verification page, and return the results of the verification. Such as:

View Source See source code used to view the page's Origin file.

The options option is used for the parameter settings of the Web Developer plugin. Such as:

Web Developer CSS Tools

Web Developer plug-in powerful features beyond your imagination, for the CSS Web page layout development debugging is only a part of its powerful function, for the development of network programs also provides a very powerful auxiliary design function, we do not fully unfold it to explore, We only for CSS Web page layout development debugging to understand it, interested friends can be detailed study of its powerful features.

CSS tool is what we need to understand the focus, it provides many features to assist us to view the Web page, nonsense less, we go down and look at the picture first:

1. Disable style disables styles that can be used to disable the display of some or all styles of the current page.

· All style disables all styles, and there are no style effects on the page.

· Browser Default styles App browser defaults style, the function of little meaning.

· Embedded styles disables the internal style sheet that is placed on the page, and nothing else is affected.

· Inline styles disables the inline style sheet, which uses the style= "" form will not be displayed.

· Linked style Sheets Disables linking the external style sheet with the link tag.

· Print sytles disable plot style table

· Individual style Sheet sets whether the linked external style sheet is displayed individually. For example: The current page links three external style sheets, 1.css, 2.css, 3.css We can disable a style sheet by this feature. Please note that this feature is actually very useful, can help us to find out where the problem is when debugging, we disable a style, see the problem is not still exist. If one of the styles is disabled, the problem disappears, as is the case with some of the settings in this disabled style sheet file.

2. Display CSS by media type displays styles by media types . This is similar to what I've described in Dreamweaver, where you can view page effects by Media view (http://www.52css.com/article.asp?id=301). However, only two media types are supported at this time: handheld devices, printing.

3, the view CSS is used to view the CSS file code , click the command will open a new FF tab, display the current page of the CSS, if the current page link has more than one CSS file, will give the URL of the file, or show that this style is either inline style or internal style. Such as:

4. View style information viewing styles information . Very practical learning and auxiliary design function, after clicking on this option, in the FF status bar, will give me the current position of the mouse style information. When the mouse hovers over an element, it also displays the level of the element in the current CSS style sheet. This function can be very convenient to learn other people's CSS page layout design, we in the work of others, we do not know how to achieve a certain effect, we can apply this function immediately find the applied style, know its hierarchical relationship, you can find the corresponding code in the CSS file. The effect of this feature is as follows:

5. Add user style Sheet . We can set the style of the current page when we browse the style, the current page of the site can be written in accordance with their own style to display. When we study others ' works, we can make extrapolate improvements or other optimizations. When we design our own pages, this also allows us to make temporary changes to the files and see the effects immediately. Fine-tuning and design of details.

6, editcss css editing. This is one of the biggest highlights of the Web Developer plug-in and is our most commonly used feature. Click on this command, FF left open an edit window, the existing CSS style has been placed in it, if there are n CSS files, will be listed tab-style tabs, we can switch freely. The CSS edits shown, we can change and edit in this window, and the page on the right will be displayed in real time with the modified style. If we change the style of the H1, you can see the edited effect immediately in the page window on the right! Such as:

WEB Developer Plug-in this feature, I do not have to say, we can also understand what it can do. We can in the development of the site, while viewing the effect, you can use this function to open the CSS file directly for editing, and always grasp the results of the changes, the changes are satisfied, click the Save button at the top of the window, you can save the face style sheet to the specified location. It has realized the convenient design and development of the assistant. We learn other people's work, you can use it to view the Web page of the CSS file, look at other people's code, try to modify the other people's code and can immediately see the effect of change, thinking about why others write, why this set up, there is no reason. To learn from this, we can more easily learn the best web site CSS technology applications.

7, use Border box model using the Border box models , this is not a common feature, you can click this command to see the changes in the page.

Web Developer Information Tools

The Web Developer Plugin's information tool is a place with a lot of practical features, and some things are very useful for our CSS page layout design. Information tools provide a lot of features, we only choose some of the CSS page layout design commonly used features to introduce. The Tools menu, such as:

1. Display Blocks size Displays the dimensions of the block element object . This feature divides all div strokes in the page into red, showing the size of the div area. Such as:

2. Display div order Displays the order and numbering of the div in the XHTML code in the Web page. Divides the area with a red wireframe and displays the div number. Such as:

3. Display element Information displays elemental information . One of the most useful features, click the command, will display a floating window in the Web page, when the mouse moves to a different Web object, the current object will be identified with a red box, and display some information about the object: name, style, title, target, HREF, and so on. This feature collapses the display of some information, such as positioning. Such as:

4. Display ID & Class details show the ID and class detail . Click this feature to mark the name of the object in the page with its ID and class. Such as:

5. Display link details Displays the linked information . This feature will label the URL of the link in the page.

6. Display Stack levels displays hierarchical relationships . If the location of the Z-index property is used in the page, the object's Z-index property value is displayed.

7. Display table information displays tabular information . Similar to some of the above features, the callout shows the details of the table.

Other information we can try to understand its role, we do not go into detail here, we need to prompt you to note that the view color information to see colors, will apply the color of the page with a new tab to display the page, It has a great effect on the color design of the page art.

Web Developer Miscellaneous Tools

The miscellaneous tool contains a lot of interesting features, and we only talk about three features that are related to CSS Web page layout development. Such as:

1, Display line Guides auxiliary Lines function , we in Photoshop or fireworks and other image processing software, provide additional auxiliary line function, convenient image file in the process of alignment and so on. This functionality, provided by the web Developer plugin, achieves the same effect. We can click on the command to see the guides, such as:

We found that when we moved the mouse over the guides, we also provided some additional information, such as the current absolute position, the distance from the previous and next guides. We can add a horizontal auxiliary line through the add horizontal lines guide in the Panel, and add Vertical Line guide to add a vertical guide. Changes the color of the guides by color. Isn't it very convenient? Just try it! Roar.

2. Display Ruler Ruler or measuring tool . Click this command to draw a rectangle anywhere on the page, with a tip tip related information, coordinates, length and width, and so on. When you move the mouse, the tip will also prompt for the corresponding value, such as:

3, edit HTML Editing HTML tool. You'll remember the edit CSS tool under the CSS Tools menu, which is similar, unlike editing XHTML code. Click this command, FF left open an edit window, the page source file XHTML code placed therein, we can change and edit in this window arbitrarily, and the right side of the page will be the modified code in real-time display. Good enough, the previous editor of the CSS, this real-time adjustment of XHTML, and real-time view of the effect. Such as:

With this feature, we can really implement the development in this environment, and learn other people's work, can also take into account the XHTML coding learning. Convenient and practical!

Web Developer Outline, resize tools

The outline wireframe tool provides the ability to identify elements using wireframe. We can assist in viewing the components of each detail. Such as:

We enumerate one of the commonly used functions as follows:

1, Outline frames wireframe display frame, if the use of frame technology, can be marked with lines.

2. Outline headings Callout Header element, if H1~h6 object is used in the page, it will be marked with a line.

3, Outline table cells labeled cells, if the page is a traditional table layout, often the table lines are not visible, the table is only the layout of the need, there is no border line, using this command can be used to identify them with a wireframe.

4, Outline Tables similar to the above command, the difference is that the above is the display cell, and this command only shows the table. As shown above is the TR, TD. This command displays only table.

5. Outline block level Elements The nesting levels of the objects.

6, Outline Deprecated Elements mark out the existence of illegal objects in the Web page. Legitimacy is judged by the DOCTYPE of the Document object model on the Web page.

7, Outline positioned Elements mark out the positioning object, you can individually label out four kinds of positioning methods:

8, Outline External links marked external links, please note that refers to the link to the outside of the link, external links.

9. Outline Links without title Attributes identifies all displays and does not display the value of the title property.

10. Outline current Element identifies the present object of the mouse position.

11, Outline custom Elements customized label, click the command opens the object frame, asks to set which objects, such as type "H1", and set the appropriate color. Such as:

12. Show Element Names when outlining the command displays the name of the object at the same time as the callout.

Resize Size Tool This is a small and useful tool that we can use to change the size of the window, and when we develop the CSS page layout, the screen size may be large, but to cater to the needs of small-size visitors, we can use this tool to preview the effects of small-size displays. Such as:

1, display window size displays the current window, click the command will directly pop up a dialog box to display information.

2, Display window size in the title bar, this is a very convenient function, we can freely drag the size of the Zoom window, in the title bar immediately know how big the current window. Such as:

3. Resize window you can type a numeric value to modify the size of Windows.

4, 800*600 in the web design, the most need to pay attention to the 800*600 size of the window display, the WEB developer plugin preset this size. Simply click to select.

Web Developer Tutorials