One of the useful features of the FireFox browser is its extensibility. Given the nature of its early adopters, many of the plugins available are there to make the web designer or developers job easier. In this tutorial we'll look at some of the more useful ones, how they can be used to enhance your testing work-flow once you've built your site in Dreamweaver and techniques that they make available to you and why you'd want to use them.
https://addons.mozilla.org/extensions/moreinfo.php?id=60
I'll start with this extension, since it's the most useful and comprehensive and I find it essential in my day-to-day work. It's a toolbar that sits at the top of the browser window and allows you to perform a variety of checks on a site or disable certain technologies quickly for testing if your site degrades gracefully.
This plug-in provides you with a colour pipette for the browser. Again it appears in the bottom left of the browse window and you need to click on it to enable it. When you do the cursor sets up to highlight whichever HTML element you mouseover with a red box and provide details of that element, and the colour directly below the crosshairs:
Here is lists the RGB (Red Green Blue) levels, hex number, the X/Y position on screen from a bottom left origin and what kind of element with what class and id you are hovered over. To cancel the plug-in's effect, re-click on the corner icon.
This extension also adds a colour picker, like the one in Fireworks that you can access from the right-click context menu. This comes complete with a variety of palettes, and is a handy way to grab colours to paste into CSS and is useful when combined with the live CSS editor from the Web Developer toolbar. One of the palettes stores your favourite colours, which you can add to by right clicking on a screen location, going to the colorzilla menu and hitting add to favourite. This extension also adds the facility to zoom into the page to get more accurate colour picks, again in the context menu..
Obviously the biggest use is ensuring that colors from an image and an html element are matching, but it can also be a good way of checking what CSS rules are affecting an element.
A simple idea here, this adds an option to check a page links. The option is under the FireFox tools menu. It will go through a page, validating if a link is correct (green highlight) or incorrect (red highlight) by requesting the linked pages. As it makes its way through the page a timer tells you how many links it has checked and how many are left.
Obviously for plain HTML pages Dreamweaver's link-checker does the same thing, but this extension comes into its own for live dynamic pages. Especially if you're the one who created the code to generate a menu from a database and something isn't right...
In this tutorial we've looked at some of the FireFox extensions that can aid your job in producing well-made, standards-compliant, CSS-based websites, particularly the ever-useful web developer toolbar. We've also noted some of the reasons you might want to use these tools in addition to those provided by Dreamweaver.
A man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.
He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.
He likes music with loud guitars and games with obscure rules.
His website can be found at: http://www.eclecticdreams.com
He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.
Comments
Be the first to write a comment
You must me logged in to write a comment.