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

Web Site Planning and Wireframing: Part 2 of 12

Using the important miscellaneous tools in the Web Developer toolbar 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

Using the important miscellaneous tools in the Web Developer toolbar

Let's take a look at the Miscellaneous dropdown toolbar. It's often overlooked, but it's one of my favorite toolbars, because it has some very sexy fun tools to use. Click on it, drag down, and what we are going to look at is Display Ruler.

I love this tool. Notice that my cursor changes to a cross hair. I click-and-drag in a diagonal motion, and voila! I can see the size and the measurement of the object I have chosen. In the first part you see the width and height, and in the second part you see the position, you can go up here and edit these if I want to see what it looks like at 450 and 50, to see what that shape would like, would that be more aligned with what I want, I can do that.


To draw somewhere else, you just simply click, draw again, and as you can see it gives you a great way of choosing and looking at things and I can guess this image is about 200x200. One of the ways I actually use it in a real way is like, I like to see where this margin is. It's about 100, 102 pixels. I like this margin here. How far down to we start from the top of the browser window? 50 pixels.

It's a great way again for beginners and intermediates to get a sense of what size or what dimensions they should be putting in for margins and for padding. Let's click again on the Miscellaneous dropdown menu, toggle that off, click again on Miscellaneous dropdown, and choose Small Screen Rendering. It's a great tool to actually use with clients. If they say, well, what does this look like on a hand-held device? What the Web Developer toolbar does is simulate what it would look like on an alternative device, particularly a hand-held device like a cellular phone or a PDA. It's not actually your web site but gives them a guesstimate of what it might preview like on one of those devices.

Click Play or press spacebar to start or stop video

Again, a very nifty tool, and one that it will wow, your clients and make them think you know what you are doing. There is one more tool in the Miscellaneous toolbox I'd like to show you. Let's click up here, dropdown, and let's go to the Edit HTML. I don't know why it's buried here, I thought it should be under View > Source, it's not, it's not where you would intuitively think it should be, which would be near your code.

This is a wonderful toolbar just like what we saw with the CSS toolbar. Again it has the Find and Search feature right here. It shows you your HTML page and the body tag right here, and it shows you all the tags that you have within that page. If we go down here and we want to play with it, again, we are back in the sandbox, we can take the h3 and say I would like to see what would look like as an h1. It will automatically update without me clicking on anything or hitting any Return buttons, and you can see that it now previews as an h1. If I come back into the h1, and I want to see it smaller, let's say h5, again, it automatically updates in the browser window, and I can see what it looks like much smaller.

A great way to try out a lot of different things without making any mistakes, and really making your style and your design work. To go back to the original, just simply click on the two arrows, Reset All, and there you go, you are back to the beginning. To close out of this window just click on the red x-icon, and you are back in your web page.

So don't be afraid to Miscellaneous. I think the best-kept secrets of the Web Developer toolbar reside in there.

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

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Web Site Planning and Wireframing: Part 2 of 12 by DMN Editorial at May 30, 2010 7:01 pm 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