Operation Manual

USING DREAMWEAVER

Creating and Managing Files

Last updated 3/28/2012

More Help topics

“Clean up code” on page 305

“Start an external editor for media files” on page 245

“Work with files in the Files panel” on page 73

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.

Note: Dynamically Related Files (such as PHP files in Content Management Systems) are covered in the next Help

section.

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 overview from the Dreamweaver engineering team about working with related files, see

www.adobe.com/go/dw10relatedfiles.

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.