Join Laurie Burruss for an in-depth discussion in this video Using the Web Developer toolbar to outline a page, part of Web Site Planning and Wireframing: Hands-On Training.
- View Offline
Let's move over to the Outline dropdown menu, click on it, drag down to Outline…Block Level Elements. This is a very powerful feature. I know we haven't really…designed our first web page yet, but I want you to know that essentially…everything on your page is made out of a block or a rectangle, and this gives a…visual image of what that looks like. It's also color coded. So the layout…images or div tags are usually blue, as you can see here, the h1 tags which we…learned about, which are the header tags, are red and list tags are green, but…we could even make this display with more information that will make it more…valuable to the web designer.…
So let's go back up to Outline and go all the way down to Show Element Names…When Outlining. Wow, this really makes it clear. It not only shows the block,…or the rectangle, or the box, or the division, and all these words get used…almost interchangeably when people talk about layout, but it also gives you the…tag that is associated with each of the blocks. It shows you how the blocks are…
Download the free support materials here from the Exercise Files tab.
After learning the tools and techniques demonstrated in this course, viewers can continue on to the next course in this series: Creating a CSS Style Guide: Hands-On Training.
- 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