Video-Based Tutorial: Page (1) of 1 - 06/07/10 Email this story to a friend. email article Print this page (Article printing at page facebook

Web Site Planning and Wireframing: Part 4 of 12

Exploring a website using Firebug By Laurie Burruss

In Web Site Planning and Wireframing: Hands-On Training, Laurie Burruss, director of digital media at Pasadena City College, demonstrates the essentials of creating a web site with a polished, professional appearance and a compelling user experience. The goal of this hands-on course is to deconstruct a web site's home page in order to identify its structural elements and feature set. Using Acrobat Pro and the web developer's toolkit, Laurie shows how to capture a homepage and create, in another layer, its visual framework (wireframe).

Topics include:

  • Seeing, scanning, and reading a web page
  • Understanding naming conventions
  • Creating file structures
  • Understanding page hierarchy
  • Using Acrobat and Photoshop with wireframes
  • Building a professional wireframe from scratch
  • Identifying and using web standards in site design
  • Usability Testing

Exploring a website using Firebug

Let's take a moment to look at Firebug, the other extension that we loaded in previous lessons. There are several ways that you can access Firebug. One way is to go up to View > Firebug. That brings it up. And then to close it, you go to the right side and click on the X icon, and that closes Firebug. You can also, which is the one I use mostly, go to the bottom right of the browser window, click on the icon that looks likes a bug, and that will open it up as well. And there is a third thing that you can do which is to click on this Up Arrow and that will make it open up in its own window. Again, that depends on your style of working and whether you like to have multiple windows open or not. I'm going to use the method that I like which is I go down to bottom right, click on Firebug, and that way I've the split screen, so I can see not only the web page I'm looking at in the browser but also what is going in Firebug.


Now I have it set up so that Firebug is looking at the Console number one and when you see this, don't be afraid. It's heavy-duty stuff. It's important stuff but what I would like you to do right now is go ahead and click on Script and Net and then finally click on the button at the bottom that says Enable Selected Panels for this particular web page. What is that doing right now is going in the background and checking how fast your page is going from the server to the browser and that's a really important feature, which I'm going to show you right now.

If you click on the word Net, which would be network or the internet, you will see that if you have the button All selected, you see all the pages and all the parts of the web page that are necessary for this page to successfully download. We've looked at this page a lot, so you will see there is your HTML, the two style sheets that are linked externally, and the three images. All of these items are needed for this page to successfully display in the browser.

Click Play or press spacebar to start or stop video

What's great and a very visual way on the right side is that, you see a bar seeing how fast each one of these is loading. And as you can see, the HTML document takes the longest to load and these very, very small images take the shortest amount of time to load. You can look at it also just by HTML, CSS or Images. So this is a great way for beginners to see, if their images are taking too long to download.

There is a couple of other features I want you to see. I'm going to go back to All. Remember you have to be Superuser to use this, but if you want to open up any of these things that you are rolling over like your style sheets, you simply right-click and say Open in a New Tab. This is very fast, very easy and very visual. You don't have to go through all those menus and toolbars that you do in the Web Developers toolbar or what you need to do inside of the browser itself. So it's a very fast tool, it's easy to make mistakes, it' s easy to click on the wrong thing but I just wanted to show you a couple of other things. If you click on HTML, you see your page structure and this is very helpful, again to
understand the structure of the a web page. It shows you the HTML, which is the web page. It shows you the two parts that we have been talking about. It is actually teaching you, you need the head, you need the body.
And if we want to see what's going to be displayed in the browser, we are going to open up the body tag. It tells you that there are two boxes on this page: one for content and one is of particular style. We want to look at the content box and now there is that familiar stuff that we have been looking at again and again. There is the h1. Notice as I roll over a tag, you see a color block that defines the block that I'm looking at, in this case, the h1. It shows where that block exists, in an imaginary way, up there in the web page, inside the browser window.

So as I rollover, you will see time and again that the blocks are hovering over. It's a great to visualize, what your page and where those blocks exist. Just like in Web Developer toolbar, if you click on one of these, let's say the <p> tag for instance, this gives you way more information. It tells you that there is a lot of styles, which is what we are looking in the right side, affecting this. And the best thing about this for me is that you will see it tells me which styles are being attached to this particular <p> tag.

But it also tells me, what document they are in and what line that style is on, which is fantastic. So this is a really great Superuser tool. Can you change things, just like we did in the other one? Sure you can. If we click over here on the font size, for instance. There is another interesting tool, let's say we are not happy with the font size of the h3, you can turn that style off and say maybe that's what is hanging up my whole page. Let's turn it off and see if it looks better.

There I turned it off and if you like right up there, simple style sheet is much smaller than it was before. Because I was able to turn off that style and see if I liked it better the default way or the way that I've styled it myself.

Pretty cool.
Again you can select things and go on and change them, just like we did in Web Developer toolbar and you can see them updated. Anytime you want to go back to the way the page was before, just click in the page and hit your Refresh button.

One other thing I wanted to show you if you go into CSS, this is a feature I really like. As you rollover different attributes, this is not a very good example but let me try to find one. As I rollover a Color attribute, notice the color chip comes up. If I rolling an image, notice a little thumbnail of the image shows up. So this toolkit that comes with Firebug, really is very, very visual. You don't have to think much, if you can hover and you can see, you get lots and lots of information and you don't have to be scrambling through lots of menus and lots of choices. It just automatically updates, as you use it. Again turning things styles off and on, all of these are available inside up here.

I would to leave you with just one thought. If you use this tool for anything, please go into Console, turn on the different Nets, then click on Net, then click on All and see how your page is downloading. Make sure your images are small. It is always important to have a lean, mean, clean web page to ensure a good user experience.

About is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online Training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists.

The Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others.'s all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.

Page: 1

Laurie Burruss serves as the director of digital media at Pasadena City College, where she has also been design professor for the past 15 years. Laurie is a professional digital storyteller, and she has developed a rich curriculum in digital and new media, which includes Flash, ActionScripting, web design and development, motion graphics, digital video editing, 3D modeling and animation, and environmental graphics design. As director of the Digital Media Programs at PCC, she has established many partnerships and collaborations in interactive multimedia, with companies such as Warner Bros., Disney Imagineering, Industrial Light and Magic, and Apple. Laurie has served as project director for grants from the National Science Foundation, the Department of Labor, and more. Laurie received a BFA and an MFA in fine arts from the University of Southern California.
Related Keywords:website planning,wifeframing,web design,web developer,page hierarchy,acrobat,photoshop,web standards,usability testing

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Web Site Planning and Wireframing: Part 4 of 12 by DMN Editorial at Jun. 08, 2010 12:13 am gmt

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • -->

    Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved