Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Navigating Your Elements
Being able to visualize the rules on your pages is only half the battle; the other half is figuring out which rules and properties, from which linked style sheets, are actually being applied to a given element on your page. You can use the Property Inspector or the CSS Styles panel to get the name of the style that's being applied to the element, but another style sheet elsewhere in the cascade might be modifying that style. Enter Dreamweaver's Code Navigator. This tool shows all of the style sheets and scripts affecting your selection, and it allows you to make changes.
You've probably seen one of the entry points to the Code Navigator many times without using it. Whenever you click in a document window in Dreamweaver, a few seconds later the Code Navigator indicator appears. It looks like a little nautical steering wheel, as shown in Figure 11. Clicking the indicator brings up the Code Navigator window. You can also invoke the Code Navigator by clicking where you want to work in the document and choosing View > Code Navigator, or by right-clicking the element and choosing Code Navigator from the shortcut menu.
)
The Code Navigator window shows the HTML, script, and CSS files associated with the selection (see Figure 12). Indented under the name of the style sheet are the names of the CSS rules that apply to that selection.
)
To jump directly to a particular rule and start editing it, click its name in the Code Navigator window. The Dreamweaver window changes to Split view and places the insertion point in the Code View pane, ready to insert the style rules you choose, as shown in Figure 13. The CSS Styles panel also changes to display the properties for the selected rule. If you only want to view the properties for a particular rule, hover the cursor over the rule's name. A tool tip appears after a moment, displaying that rule's properties, as shown in Figure 14. To close the Code Navigator window, press Esc or click elsewhere in the document.
)
)
By using Dreamweaver's visualization tools and the Code Navigator, you'll be able to zero in on the CSS underlying any of the elements on your page, without needing to guess which rules in the cascade are causing the look you want to change.
Tom Negrino is the author or coauthor of more than 40 books, covering such diverse topics as iCloud, Dreamweaver, JavaScript, Keynote, Microsoft Office, CSS, and more. His latest books are Dreamweaver CS6: Visual QuickStart Guide and 10 Things To Do Before Upgrading to OS X 10.8 Mountain Lion (both by Peachpit Press, 2012). A longtime contributor to Macworld and other magazines, Tom has lived in the Sonoma wine country with his wife and frequent collaborator, Dori Smith, since they fled the Los Angeles area in 1999.