In Part II of the “What’s New in DW CS4” series, we are going to talk about Code Navigator.
Code Navigator allows users to easily see the CSS files and rules that are affecting the current selection (or insertion point) and quickly jump directly to the exact rule, right from the Design/Code View window. It also opens and navigates to other file types.
You may have noticed Code Nav already. When in Design View, if you pause the cursor or insertion point for a few seconds, an icon of a ship’s wheel will show up. Clicking on this icon opens up the Code Nav window. (This assumes you have CSS on your page.)
This Code Nav window will show all the rules associated with the current selection, organized by CSS files and internal rules. Mousing over any of these rules will show the actual declarations within the rule. Clicking on the rule will take you directly to the rule in the CSS file (or Style tag) for editing.
The Code Nav window an also be brought up by Alt+Click. Notice that the Code Nav window also has a checkbox if you want to disable the wheel icon. We also added the wheel icon to the Coding toolbar (second from the top). Clicking this will also bring up the Code Nav window.
But Code Nav is for more than CSS. It will also work for:
- Opening server-side includes. (One level deep only)
- Dreamweaver Templates and Library items: Open the dwt from an instance.
You will notice that Code Nav works when in Live View (see last week’s post). There are a couple limitations when in Live View, mostly having to do with navigating to includes while in Live View, but the CSS part works well and is quite useful for navigating through rules on the real page.
Code Nav is another good feature that helps you stay in Design/View while providing contextual information without having to go to a panel. This will hopefully streamline work flows and lead to quicker CSS navigation and editing.
That is a wrap for this week. There will likely be a delay on the next post as we head into the holidays.
Wishing you well,