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

Web Site Planning and Wireframing: Part 1 of 12

Installing the Web Developer toolbar and 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

Installing the Web Developer toolbar and Firebug

Now that I have downloaded and installed Firefox 3, one of the things that I like to do as a web designer/developer is to install two extensions that help save me time and are basically like having a full time person working for me. The first extension is the Web Developer toolbar and the second extension is Firebug. I'll demonstrate the Web Developer toolbar first. This extension was designed and distributed by Chris Pederick. We are on his web site. It adds a menu and a toolbar to your browser and it gives you all kinds of tools that the web designer and the developer can use to enhance, test, dissect, validate, do all kinds of things that a designer needs to do to see how that page is displaying in the browser.


It is easy to do. You just click on the link. If Firefox pops up this yellow bar, go ahead and allow it to make a pop-up window. When you see the Install Now button turn dark blue, click on it and that means it is installed, go ahead and restart Firefox. Firefox in its new version in 3 will try to restore your tabs and windows and go ahead and let it do that so when it opens again, you won't have lost your bookmarks and tabs. Another great thing about Firefox 3 is it also gives you a great affordance, it tells you that, yes, it is been installed. Then you have the option to disable the extension or to uninstall it at that point.

We want it there, so we are just going to bypass that and close that window out. If you look at my browser now, you will see that there is a new toolbar that didn't exist there before. This is the Web Developer toolbar. If you go up to your View menu and click on Toolbars, you can see that it now shows up in your Toolbar window and the check mark means displaying. If you want to get rid of it, you just turn that off and if you need to be using it and you are doing
work on your web sites, go ahead and turn it back on. We will be using it throughout this course.

Click Play or press spacebar to start or stop video

The second extension I would like to show you is called Firebug. You can get a lot of extensions beside just the Web Developer toolbar and Firebug on the Firefox web site. They have a whole section just devoted to add-ons. This is a relatively new extension. It has been around for probably a year or year and a half. Lots of web designers and developers are using it. Again the same idea, this integrates into Firefox, it actually allows you to do live edits to your web pages and preview them in the browser monitor. That's pretty cool. You can see what it would look like if you made a change on the fly.

So let's go ahead and add it to Firefox. Again a pop-up window shows up.

Once it is ready to install, the button turns blue, click on the button, Install Now. Yes, it is ready to go. Everytime you install an extension, you have to restart Firefox. Click on that button, click on Restart. It gives you that chance to disable it or uninstall if you are not happy, but we are. This is exactly what we want. I'm going to click off of it and you will say to me, well, how do we know that we just installed Firebug?

Well, this one is a little trickier than the last one. It shows up down in the bottom right hand corner of your browser, you will see a little bug. If you click on that bug, you will see as I roll over, a tooltip shows up saying, this is Firebug. And there you go. There is your Live Real-time Editor where you can preview changes on the fly. It is a fantastic little tool. Firebug is a little bit complicated to use then web developers, so I just want to show you two other sites that would really help you get up to speed, if you are not using it all the time. One of the things I have learned in technology is use something frequently for a couple of weeks and then maybe you don't use it for three months and you will need a little refresher course on how to use that tool.

So, let's look at this first web site. This site is CSS, JavaScript and XHTML Explained. It is a great site. I happen to have bookmark to its material about how to use Firebug. Gives a great introduction into the use of Firebug, how to install, how to work with it, how to do things that you need to do for troubleshooting. It is basically a little online manual, which this web
designer has developed for us to really understand how to get the full use out of Firebug.

Second web site that I would like to take you to is the Firebug Keyboard Extensions. Now, this sounds crazy, but you saw how difficult it was to see that little bug the first time. If you have to memorize anything about Firebug, what you need to know is how to open it easily and so go ahead and learn the Command key. It is F12. Before I let you do it, I'm going to show one other
thing. Once Firebug is installed, if you need to find it through your menus, you would go up to View > Firebug. Or as I showed you just a few minutes ago, you can click on the little bug, but the easier way, the fast way, the power user way is to use your Command keyboard and you can open this site and you see that F12 or Command+F12 or Ctrl+F12 will open it up in its own window.

So, that was easy. We have installed two extensions. You look like we are power users for Firefox 3 and we look like we know what we are doing as web designers and developers. Don't be afraid of extensions. Firefox really can turn you into a power designer/developer.

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 1 of 12 by DMN Editorial at May 26, 2010 6:26 pm gmt

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • [ServletException in:/common/ads/links.jsp] The absolute uri: cannot be resolved in either web.xml or the jar files deployed with this application'

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