WebHelperMagazine.com

Subscribe to the Blog (via RSS)

Hello Open Source WebMasters & BlogMasters…

One of my favorite open source toolkits is the set of extensions available for Firefox, the Mozilla web browser. If you’re not using Firefox… go get it. Yes. Get it right now. You will not regret it, if only because a growing number of your site visitors cruise using Firefox. But, I think you’ll see a number of great reasons that will help you in your work.

We’re going to talk about three way to understand a site’s “structure” (how the code lays out a website) using both the great Firefox extension, “Web Developer” (by Chris Pederick) and the excellent “View Source Chart” by Jennifer Madden, in this post. In fact, this will become the first in a series of posts detailing “Firefox Tricks” for the Open Source WebMaster. BlogMasters welcome, too.

We’ll analyze the structure of this CSS/HTML Template (below) with our Firefox Web DeveloperTools. You can open any template you might have (try one from CSS Tinderbox), and follow along.

We’ll take a look at the same web template (a CSS based template with both an HTML page, and external StyleSheet three different ways, using our new Firefox tools to understand the HTML structure, the CSS element blocks, and the Image Dimensions and File Sizes. I’ve found these steps to be highly helpful when looking at a new client’s website for the first time, while trouble-shooting an existing site, and when using a new page template.

Trick 1 – Rendered Source Chart

For our first look at the template’s structure, we’ll “VIEW: Rendered Source Chart”, to see a helpful color-coded and block box hierarchy of the HTML page code.

Above, you can see that we’ve opened a “Rendered Source Chart” for our template using the extension, which when loaded, places this menu option under “View.” At the top of the Chart, you can see that the page refers to an external style sheet titled, “fall.css.” Each “div” container becomes a boxed area in the Chart, an unordered list (ul) appearing in green.

We can begin to see from the chart that is generated, how it isolates different DIV sections, and other CSS elements in color-coded sections to help us visualize the page structure. Let’s have a closer look at more of the charting:

Above are a series of three screens, captured when scrolling down in the chart. Note that paragraph sections are shown in a lighter blue background, since they are designated a block element in CSS, but that where text is broken by two line breaks (two BR codes), there is no different chart color background.

In the series of three screens above, seen while scrolling through the “chart”, you can see that for a BLOCKQUOTE section, the background is a light orange/red. This tool simply helps you pick out different CSS block elements, in your HTML code quickly and visually.

Trick 2 – Outlining Block Elements with Web Developer Tools

Next, let’s take a look at the same template using the Web Developer set of Tools.

This excellent extension is by Chris Pederick — please visit his site ChrisPederick.com and make a donation to thank him for an outstanding set of WebMaster tools. We’ll “Outline” CSS Block level elements, and turn on their ID and CLASS names, which show up on the page in yellow tag boxes (see illustration below), using the “Information” tool:

Above, I used the “Outline Block Level Elements” option from the Web Tools Toolbar (also available under the main Firefox menu “Tools”) to turn on outlines around the CSS blocks. Red lines appear around Paragraphs and Headings, with blue lines around DIVS, and green lines around the UL section at top of page. We also are viewing the ID and Class labels using the “Information” menu (circled in red).

This is an excellent method to find out about the CSS placement elements used for a web page layout. You can quickly determine that the right column in the template is created using a DIV named “sidebar-b”. Using the Outlining options, you may also like to outline Table Cells (no tables used in this template), deprecated elements, Frames, & Headings to get a still better sense of how a page is structured. Think of this as a method to take an X-ray of the skeleton of your pages. I use this method (Outline Block Level Elements and see ID and Class information) to analyze and troubleshoot a Style Sheet, while the first method (viewing a “Source Chart”) helps me understand an HTML layout better.

For more examples of understanding CSS using this method, see the article: Learning CSS – Understanding Columns.

Trick 3 – Analyizing Images…

Our last analysis of page content will be with the Web Developer “Images” options, as shown below:

Above, we’ve turned on the Dimensions, Files Size, and Paths for Images, and can see the resulting data for the Bench Photo displayed above it (circled).

This trick gives you a look at key image information. Still another reason to install the Web Developer extension — can you tell I like it? I think you will too.