Using the Code Navigator

This might be one of the coolest functionality that Dreamweaver CS4 brought to the table, so make sure to add it to your collection of web design tips. (Sorry, pre-CS4 users. This one’s just too useful.)

In most cases, it’s easier to edit the code itself, rather than edit in Design View (things just tend to get too messy). So what can you use Design View for? Use it to select code, then edit in Code View; this is where the split pane is handy. But what about CSS styles?

If you click on an element in Design View and wait a moment, a small icon of a ship’s wheel (think Netscape Navigator) will appear next to your mouse pointer. Clicking on that will open a pop-out of CSS that applies (and shows which files they’re coming from). Very handy. Clicking on one of those selectors will open the CSS file in question and take you right to the rule that you’re so eager to tweak.

Obviously, waiting for that little wheel to appear every time is ridiculous, so you can skip a step by command-option-clicking (or alt-clicking, if you’re using Windows) the element in question. And the best part? This works in Live View, Code View, or even on the tag selector.

Tags: cheat-sheet, Dreamweaver

This entry was posted on Monday, May 17th, 2010 at 12:00 am and is filed under Design Resources. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.