How related files work in Dreamweaver

The related files feature provides users access to the supporting and related files that are associated with the file they are working on. Related files can be CSS, script, Server-side Include (SSI), or XML files.

For example, if a CSS file is associated with the main file, this feature facilitates viewing and editing this CSS file. The user can also view the main file while editing the related file.

When a document is opened from local site path and it does not load from the Testing Server, protocol relative URLs (starting with //) and file protocol URLs( starting with file:// or file:///) where the resource is not on local machine are now resolved through http.

  1. If the assets are not available on http, then Dreamweaver tries to load the related files from https.
  2. If the assets are not available over https also, then Dreamweaver fails to load the related file or assets. Also, a sign in dialog is displayed if the network server where the assets are placed requires authentication.

Related files enhance editing experience of users by assisting them in the following tasks:

  • Users can view and access the related files while viewing the main file. When viewing a page that has related files (for example, a CSS file), you can see the following:

    • Design of the page on one side

    • Related file on the other

  • The related files bar contains the documents that affect the generation of parent HTML. The users can see the source HTML, generated HTML, and first- level child documents.

  • Selecting any related file shown in the related files bar enables users to do the following tasks:

    • View and edit the related file in Code view

    • View the parent page in Design view

  • Selecting content in the Design view and making changes in the related file does not dismiss the selection when the user refreshes the Design view.

  • If you change the related file code, the changes are reflected in the Design view.

When a file is not found, a file not found message is displayed in a bar at the top of the empty window frame.

The following terms are commonly used in association with related files:




Top-level document

Any document opened by the user

Parent document

Any top-level document rendered in Design view.

  • HTML — including .lbi, .dwt

  • CFML

  • PHP

First-level child document

Any document that is one level deep from the parent document. These documents affect generation of HTML code, except for CSS. CSS files can include other CSS files, but all of them together determine the final styles applied to the page.

  • Script file specified by <SCRIPT src="file.js">

  • Server-side Include

  • External CSS

  • Spry XML and HTML data sets

  • Library item

  • <iframe> - remote source

  • Object tag

Deeper-level child document

Any document that is more than two levels away from the parent document. These documents affect generation of HTML code.

  • PHP within PHP

  • DTDs

  • Templates

Non-related file

Any document which does not affect generation of HTML code or any files that a user does not actively edit.

  • Image files

  • Media files

  • Externally linked files by an <a> tag

The following related files are supported:



Nesting level

Client-side script

All languages

1 (nesting script is not possible)

Server-side includes

When all of the following extensible conditions are true:

  • Defined Server Model

  • Defined SSI statement (that is pattern)

  • Defined DW doctype

Exception: Apache-style include file statements (<!--#include ... -->) in HTML documents is recognized.


Spry data set

1 (nesting script is not possible)


  • All external CSS for all media types

  • DTSS


Related files APIs

You can customize the related files menu to display the following:

  • Filenames of the related file

  • Source HTML and Generated Source code

The dreamweaver.openRelatedFile() function displays the related file in the Code view and the dreamweaver.getActiveRelatedFilePath() function displays the path for the currently opened related file. For more information on using these APIs, see "Related files functions" in the Dreamweaver API Reference.