PDF (adobe.com)

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 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.