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.
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
Skill Level Beginner
1. How the Internet Works
2. Using Your Browser
Choosing a browser3m 12s
3. Deconstructing a Web Page
4. Learning the Ground Rules
5. Designing for the Internet
A case study4m 57s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.