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

Web Site Planning and Wireframing: Part 3 of 12

Using the Web Developer toolbar to validate a page 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 Web Developer toolbar to validate a page

So to look at the HTML code, we use the View Source dropdown toolbar. I want you to see that it's very similar to the browser in that instead of Command+U or Ctrl+U, it's Command+Shift+U or Ctrl +Shift+U. It's important to know that it's slightly different using the Web Developer toolbar. As soon as we do that, it opens down in our page. It looks exactly like what we would have seen in the Firefox browser. I want you to know there is really no difference between them.

 It has the same different menu bar up at the top and to click back into our page, we just would click here. To click out of this, we click on our Close box and there we are.


 The last tool that I'm going to show you is the Tools dropdown menu. You click on this. At the top I want you to see that there is a number of features all grouped together and these are called Validation links. These look at your web site to make sure that it's correctly written CSS. That's it's correctly written HTML, that you are meeting by the way compliance, that you are meeting the WAI standards, and these are the tools that you must use and will use when you are working with real clients in the real world. At the end of every project and at certain points throughout the project. I'm not going to demonstrate these right now.

 I will demonstrate Display Page Validation, a tool I really do like. You click on this and it adds another toolbar to your menu up here. Notice right off the bat, it starts going through all the validation tools that we just saw.

 It starts with HTML. Notice we have got a valid, a green check mark. It's going onto the CSS and it will continue going through the different validators. We won't wait right now to look at all of those, but I wanted you to know this is a great way to take a coffee break and validate your web site at the same time.

 I'm going to click on the Tools dropdown menu and toggle off Display Page Validation.

Click Play or press spacebar to start or stop video

 The last tool I want to show you is the Validate Local HTML. This is a great tool and one frequently overlooked. Again, many of the validators only will validate if your site or your page is on a server, but a lot of times we want to do validation locally. You can do this inside of Dreamweaver CS4, but you
 can also do this with your Web Developer toolbar. You simply go to the File text box, click on the button Browse, it takes you out to your Desktop or to your files. Navigate. In this case, I'm going to navigate out to Documents, go to my web site that's complete, choose my final web page, which is done in HTML, click Open, and without doing anything, without touching any buttons, hitting Enter, hitting Return, you get your result immediately and I got the green.

 Passed the validation. If I had not had a pass validation, this color text would be red and would also indicate all of the mistakes, and things that I would need to change or to look at. And now we just click on this tab to close the validation toolbar, and we are back to our page.

 I hope you are impressed with the Web Developer toolbar and some of the pro features that it allows a web designer and a web developer to use and to implement and it's a great learning tool as well. At this point take some time to go out to our favorite URLs and play around with the Web Developer toolbar.

 It's a fun tool and you will learn a lot about web design, style sheets, HTML and how pages display in the browser.

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 3 of 12 by DMN Editorial at Jun. 04, 2010 4:51 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