Before creating a link, make sure you understand how absolute, document-relative, and site root–relative paths work. You can create several types of links in a document:
The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.
Linking files and documents
A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
A named anchor link, which jumps to a specific location in a document.
An e‑mail link, which creates a new blank e‑mail message with the recipient’s address already filled in.
You can use the Property inspector and the Point-To-File icon to create links from an image, an object, or text to another document or file.
Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell Dreamweaver to create new links using site root–relative paths.
Always save a new file before creating a document-relative path; a document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path to a relative path.
For a tutorial on creating links, see www.adobe.com/go/vid0149.
You can attach a behavior to any link in a document. Consider using the following behaviors when you insert linked elements into documents:
Set Text Of Status Bar
Determines the text of a message and displays it in the status bar at the lower left of the browser window. For example, you can use this behavior to describe the destination of a link in the status bar instead of showing the URL associated with it.
Open Browser Window
Opens a URL in a new window. You can specify the properties of the new window, including its name, size, and attributes (whether it is resizable, has a menu bar, and so on).
Edits a jump menu. You can change the menu list, specify a different linked file, or change the browser location in which the linked document opens.
Link to documents using the Property inspector
You can use the Property inspector’s folder icon or Link box to create links from an image, an object, or text to another document or file.
Click the folder icon to the right of the Link box to browse to and select a file.
The path to the linked document appears in the URL box. Use the Relative To pop‑up menu in the Select HTML File dialog box to make the path document-relative or root-relative, and then click Select. The type of path you select applies only to the current link. (You can change the default setting of the Relative To box for the site.)
Type the path and filename of the document in the Link box.
To link to a document in your site, enter a document-relative or site root–relative path. To link to a document outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for a file that hasn’t been created yet.
_blank loads the linked document in a new, unnamed browser window.
_parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
_self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
_top loads the linked document in the full browser window, thereby removing all frames.
If all the links on your page will be set to the same target, you can specify this target once by selecting Insert > HTML > Head Tags > Base and selecting the target information. For information about targeting frames, see Control frame content with links.
Link to documents using the Point-To-File icon
Drag the Point-To-File icon (target icon) at the right of the Link box in the Property inspector and point to a visible anchor in the current document, a visible anchor in another open document, an element that has a unique ID assigned to it, or a document in the Files panel.
Shift-drag from the selection and point to a visible anchor in the current document, a visible anchor in another open document, an element that has a unique ID assigned to it, or a document in the Files panel.
You can link to another open document only if your documents are not maximized in the Document window. To tile documents, select Window > Cascade or Window > Tile. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.
Add a link using the Hyperlink command
The Hyperlink command lets you create a text link to an image, an object, or to another document or file.
The names of all the frames you’ve named in the current document appear in the pop‑up list. If you specify a frame that doesn’t exist, the linked page opens in a new window that has the name you specified. You can also select from the following reserved target names:
_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
_top loads the linked file into the full browser window, thereby removing all frames.
Set the relative path of new links
By default, Dreamweaver creates links to other pages in your site using document-relative paths. To use site root–relative path instead, you must first define a local folder in Dreamweaver by choosing a local root folder to serve as the equivalent of the document root on a server. Dreamweaver uses this folder to determine the site root–relative paths to files.
Changing this setting will not convert the path of existing links after you click OK. The setting applies only to new links you create with Dreamweaver.
Content linked with a site root–relative path does not appear when you preview documents in a local browser unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In Browser. This is because browsers don’t recognize site roots—servers do. A quick way to preview content linked with site root–relative paths is to put the file on a remote server, then select File > Preview In Browser.
Link to a specific place in a document
You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.
Creating a link to a named anchor is a two-step process. First, you create a named anchor; then you create a link to the named anchor.
You can’t place a named anchor in an absolutely-positioned element (AP element).
- In the Link box of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link to an anchor named “top” in the current document, type #top. To link to an anchor named “top” in a different document in the same folder, type filename.html#top.
Anchor names are case-sensitive.
Click the Point-To-File icon (target icon) to the right of the Link box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
Create an e‑mail link
An e‑mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e‑mail message window, the To box is automatically updated with the address specified in the e‑mail link.
Create null and script links
A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. For instance, you can attach a behavior to a null link so that it swaps an image or displays an absolutely-positioned element (AP element) when the pointer moves over the link.
Update links automatically
Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server.
To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the links in your local folder. The cache file is updated invisibly as you add, change, or delete links on your local site.
- In the Document Options section of the General preferences, select an option from the Update Links When Moving Files pop‑up menu.
Automatically updates all links to and from a selected document whenever you move or rename it.
Does not automatically update all links to and from a selected document when you move or rename it.
The first time you change or delete links to files in your local folder after starting Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, Dreamweaver loads the cache and updates all the links to the file you just changed. If you click No, the change is noted in the cache, but Dreamweaver does not load the cache or update links.
It may take a few minutes to load the cache on larger sites because Dreamweaver must determine whether the cache is up to date by comparing the timestamps of the files on the local site against the timestamps recorded in the cache. If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.
Change a link sitewide
In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually change all links (including e‑mail, FTP, null, and script links) so that they point somewhere else.
This option is most useful when you want to delete a file that other files link to, but you can use it for other purposes. For example, suppose you link the words “this month’s movies” to /movies/july.html throughout your site. On August 1 you would change those links so that they point to /movies/august.html.
Change All Links To
Click the folder icon to browse to and select the target file from which to unlink. If you are changing an e-mail, FTP, null, or script link, type the full text of the link you are changing.
Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path format already used in the document (for example, if the old path was document-relative, the new path is also document-relative).
After you change a link sitewide, the selected file becomes an orphan (that is, no files on your local disk point to it). You can safely delete it without breaking any links in your local Dreamweaver site.
Because these changes occur locally, you must manually delete the corresponding orphan file in the remote folder and put or check in any files in which links were changed; otherwise, visitors to your site won’t see the changes.
Test links in Dreamweaver
Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the Document window.