Join Laurie Burruss for an in-depth discussion in this video Using the Web Developer toolbar to reveal the CSS, part of Web Site Planning and Wireframing: Hands-On Training.
In the last movie we looked at Firefox 3.0 and saw how the browser actually…has features to help us understand the construction of a web page. We were able…to view the HTML source, we saw where the style sheets were located, we looked…at the View and the Preferences that the user can actually change, and how the…viewport will actually change if they make those changes. In this movie we will…look at the Web Developer toolbar. The toolbar appears right below your…Navigation toolbar. If you go up to the View menu and click on Toolbars,…you can see that you can toggle this toolbar off and on. We will leave it on …for the moment.…
The first feature that I want to show is the CSS dropdown menu. So let's click…on CSS, scroll down to Disable Styles, move our mouse over to the right and…look at All Styles, and notice there is a keyboard command associated with it,…Command+Shift+S or Ctrl+Shift+S. This previews the web page with no styles…tuned on-- or so you would think. However, let's go back up and try this one…
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.