About related files

Hae

Päivitetty viimeksi 6. toukokuuta 2021 | Koskee myös seuraavaa Adobe 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.

If the assets are not available on http, then Dreamweaver tries to load the related files from https.
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.

How related files work

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.

Related files terminology

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

Term	Description	Example
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:

Type	Description	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.	1
Spry data set		1 (nesting script is not possible)
CSS	All external CSS for all media types DTSS	Infinite

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.