PDF (adobe.com)

Open related files



Dreamweaver lets you view files related to your main document, without losing the main document’s focus. For example, if you have CSS and JavaScript files attached to a main document, Dreamweaver lets you view and edit these related files in the Document window while keeping the main document visible.

By default, Dreamweaver displays the names of all files related to a main document in a Related Files toolbar below the main document’s title. The order of the buttons in the toolbar follows the order of related files links that exist within the main document.

Note: If a related file is missing, Dreamweaver still displays the corresponding button in the Related Files toolbar. If you click the button, however, Dreamweaver does not display anything.

Dreamweaver supports the following kinds of related files:

  • Client-side script files

  • Server Side Includes

  • Spry data set sources (XML and HTML)

  • External CSS style sheets (including nested style sheets)

For a video tutorial on working with Live View, related files, and the Code Navigator, see www.adobe.com/go/lrvid4044_dw.

Open a related file from the Related Files toolbar

Do one of the following:

  • In the Related Files toolbar at the top of the document, click the filename of the related file you want to open.

  • In the Related Files toolbar, right-click the filename of the related file you want to open and select Open as Separate File from the context menu. When you open a related file by this method, the main document does not remain simultaneously visible.

Open a related file from the Code navigator

  1. Place the insertion point on a line or in an area that you know is affected by a related file.

  2. Wait for the Code Navigator indicator to appear, and then click it to open the Code Navigator.

  3. Hover over the items in the Code Navigator to see more information about them. For example, if you want to change a particular CSS color property, but don’t know which rule it resides in, you can find the property by hovering over the available rules in the Code Navigator.

  4. Click the item you’re interested in to open the corresponding related file.

Return to the source code of the main document

 Click the Source Code button in the Related Files toolbar.

Change the display of related files

You can view related files in a number of ways:

  • When you open a related file from Design view or Code and Design views (Split view), the related file displays in a split view above the Design view of the main document.

    You can select View > Design View on Top if you want the related file to display at the bottom of the Document window instead.

  • When you open a related file from vertically split Code and Design views (View > Split vertically), the related file displays in a split view alongside the Design view of the main document.

    You can select or deselect Design View on Left (View > Design View on Left), depending on where you want the Design view.

  • When you open a related file from Split Code view or Vertical Split Code view (View > Split Code view, and View > Split vertically), the related file displays in a split view beneath, above, or alongside the source code for the main document, depending on the options you have selected.

    The “code view” in the display option refers to the source code of the main document. For example, if you select View > Code View on Top, Dreamweaver displays the source code of the main document in the top half of the Document window. If you select View > Code View on Left, Dreamweaver displays the source code of the main document on the left side of the Document window.

  • Standard Code view does not let you display related Documents at the same time as the main document’s source code.

Disable related files

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

  2. In the General category, deselect Enable Related Files.