Manualshelf

Operation Manual

ManualsBrandsAdobe ManualsSoftwareDreamweaver CC - 2015
391392393394395396397398399400
Table Of Contents
391
Coding
Last updated 11/30/2015
Navigate to related code
The Code Navigator displays a list of code sources related to a particular selection on your page. Use it to navigate to
related code sources, such as internal and external CSS rules, server-side includes, external JavaScript files, parent
template files, library files, and iframe source files. When you click a link in the Code Navigator, Dreamweaver opens
the file containing the relevant piece of code. The file appears in the related files area, if it is enabled. If you don’t have
related files enabled, Dreamweaver opens the selected file as a separate document in the Document window.
If you click a CSS rule in the Code Navigator, Dreamweaver takes you directly to that rule. If the rule is internal to the
file, Dreamweaver displays the rule in Split view. If the rule is in an external CSS file, Dreamweaver opens the file and
displays the rule in the related files area above the main document.
You can access the Code Navigator from Design, Code, and Split views, as well as from the Code inspector.
For a video overview from the Dreamweaver engineering team about working with the Code Navigator, see
www.adobe.com/go/dw10codenav.
For a video tutorial on working with Live View, related files, and the Code Navigator, see
www.adobe.com/go/lrvid4044_dw.
Open the Code Navigator
?
Alt+click (Windows) or Command+Option+Click (Macintosh) anywhere on the page. The Code Navigator displays
links to the code affecting the area you clicked.
Click outside the Code Navigator to close it.
Note: You can also open the Code Navigator by clicking the Code Navigator indicator . This indicator appears near the
insertion point on your page when the mouse has been idle for 2 seconds.
Navigate to code with the Code Navigator
1 Open the Code Navigator from the area of the page that you’re interested in.
2 Click the piece of code you want to go to.
The Code Navigator groups related code sources by file and lists the files alphabetically. For example, suppose that CSS
rules in three external files affect the selection in your document. In this case, the Code Navigator lists those three files
as well as the CSS rules relevant to the selection. For CSS related to a given selection, the Code Navigator functions like
the CSS Styles panel in Current Mode.
When you hover over links to CSS rules, the Code Navigator displays tool tips of the properties in the rule. These tool
tips are useful when you want to distinguish between many rules that share the same name.
Disable the Code Navigator indicator
1 Open the Code Navigator.
2 Select Disable Indicator in the lower-right corner.
3 Click outside the Code Navigator to close it.
To re-enable the Code Navigator indicator, Alt+Click (Windows) or Command+Option+Click (Macintosh) to open
the Code Navigator and deselect the Disable Indicator option.