This is a read-only archive. Find the latest Linux articles, documentation, and answers at the new Linux.com!

Linux.com

Feature: Internet & WWW

Design better Web pages with Firefox extensions

By Martin Kaba on February 18, 2008 (9:00:00 AM)

Share    Print    Comments   

If you've ever tried to create or edit a Web page, you know that getting the little details just right can sometimes take a long time. Here are a few Firefox extensions you can add to your toolbox that will help you measure images, align objects on your page, and capture colors quickly and easily.

Extension logo

When you need to know the exact size of your sidebars, headers, and other images in a flash, MeasureIt can tell you. MeasureIt adds a small ruler icon on the left side of the status bar. Clicking on the icon brings up a crosshair cursor; simply move the cursor to the object you want to measure, and drag a box over it. The extension will display the width and height of that object in pixels on the right of the drawn box. To get out of MeasureIt, press the Escape key; the page will turn back to normal.

Grids are helpful for judging distances and spatial relationships, and they help you better align objects, giving you more vital space on your Web page. To make sure the objects you place on your Web page are well-aligned and maintain their position in a grid-based layout, check out GridFox, which displays grids like you'll find on an image editor such as the GIMP. If you've ever used such an image editor, you'll find GridFox easy to use, intuitive, and straightforward.

By default, GridFox gives you only vertical grids. Go to Tools -> GridFox -> Options to get horizontal grids, change the background colors, change the thickness or color of the grids, and more. One drawback is that it's a bit tricky to get the grids just where you want them. You may have to change your column and row values time and again to get them right. It would have been great if the grids were also guides so that you could reposition them easily by dragging them. Knowing the width of a Web page helps you place the external grids. You can place your internal grids depending on whether you want your columns to have equal width.

The mix of colors plays an important role in making your Web site stand out. With ColorZilla, you can easily find out exactly what colors are being used on Web pages.

After installation, ColorZilla puts an eyedropper icon on the left side of the status bar. On your Linux Ubuntu Desktop clicking on this icon might generate an error message such as "your platform doesn't support this feature," which is the error message I received. You might have to follow a procedure detailed on the Ubuntu forum to resolve this issue.

To pick a color, right-click on the eyedropper icon, zoom into the page so you can better select the color you want, left-click on the icon, and place the crosshair cursor over the color you want to analyze. By default, the RGB and hex color codes are displayed in the status bar, as well as the distance from the last point your mouse highlighted and the element tag. Left-click on the color to capture it onto the ColorZilla color picker palette.

After capturing the color, double-click on the ColorZilla eyedropper to open the color picker palette. There you can modify the color to better suit your needs. ColorZilla also offers a complete color picker tool, as you can find on all image editors. You'll find a wide range of display options in the Statusbar Format menu. I like being able to view where an element sits in the Document Object Model by toggling the Statusbar Format menu from Options -> Statusbar Format -> dom-path.

ColorZilla also installs the Auto Copy Firefox extension, which permits you to automatically copy selected text to the clipboard. After activating it (navigate to Options -> Auto Copy -> Enabled) you can automatically copy any selected text and paste it wherever you wish with a middle-click of the mouse.

There you have it -- three tools that can help you post images and text. MeasureIt helps you to know exactly how much space is allocated for your images. GridFox guarantees that text and images are aligned. ColorZilla can serve you to modify the colors of your post on the fly.

Every Monday we highlight a different extension, plugin, or add-on. Write an article of less than 1,000 words telling us about one that you use and how it makes your work easier, along with tips for getting the most out of it. If we publish it, we'll pay you $100. (Send us a query first to be sure we haven't already published a story on your chosen topic recently or have one in hand.)

Martin Kaba is a computer science graduate and author of the Kabatology blog. He lives and works in Italy.

Share    Print    Comments   

Comments

on Design better Web pages with Firefox extensions

Note: Comments are owned by the poster. We are not responsible for their content.

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 135.196.161.66] on February 18, 2008 02:54 PM
As a webdeveloper there is one extension I can't live without: FireBug (for all my inspecting and inline changing of html and css, debugging javascript, seeing what ajax call's are made etc etc), I also use the webdeveloper toolbar and Tamper Data with regularity

#

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 89.220.11.14] on February 18, 2008 03:08 PM
How can you write an article on designing web pages with Firefox and not mention Firebug? :) It can also show colours, dimensions and lots, lots more; it gives a good insight in how the page and stylesheet works and where the various style elements of a certain block come from, for example.

#

Re: Design better Web pages with Firefox extensions

Posted by: Martin Kaba on February 19, 2008 01:08 PM
Firebug is an excellent Firefox extension for web developers, but it needed a post of its own. On my blog Kabatology Open Source,Linux, the article "8 Web Developer Must-Have Firefox Extensions" -> http://www.kabatology.com/01/16/8-web-developer-must-have-firefox-extensions/ has Firebug as first on the list of the most necessary Firefox extensions for Web Developers.

#

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 81.171.2.124] on February 18, 2008 04:11 PM
And then there's the web developer extension. A nice compliment to FireBug.

#

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 66.81.37.198] on February 18, 2008 06:27 PM
Are these extensions developer side only, or are they browser side as well? As in, if you use the extension to develop a page, do I need the extension as well to view?

#

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 86.107.90.222] on February 18, 2008 07:03 PM
The extensions mentioned are purely for developing the code/pages, the result will work without them

#

Re: Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 199.164.56.5] on February 19, 2008 09:57 PM
Probably should have mentioned that in the article. Otherwise, some might think they are like certain IE extensions that simply make the page unusable in any other browser.

#

vim is all I need

Posted by: Anonymous [ip: 68.126.204.109] on February 18, 2008 07:07 PM
Real developers don't need "extensions."

#

Re: vim is all I need

Posted by: Anonymous [ip: 12.31.202.4] on February 18, 2008 07:54 PM
Vim? Please, *real* developers use ed. After all, ed is the standard editor (http://www.gnu.org/fun/jokes/ed.msg.html)

#

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 68.81.200.117] on February 19, 2008 11:57 AM
Well I use Firebug. Its great.

"Real developers" do whatever, and make nice sites. Who cares how they get it done?

#

Design better Web pages with Firefox extensions

Posted by: Anonymous [ip: 69.8.157.195] on February 20, 2008 02:59 PM
"Real" developers tap code directly onto a circuit board with a rusty nail. Only wimps use Vim.

#

This story has been archived. Comments can no longer be posted.



 
Tableless layout Validate XHTML 1.0 Strict Validate CSS Powered by Xaraya