About linking and navigation

After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents.

Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable software. You can establish links to any text or image anywhere within a document, including text or images in a heading, list, table, absolutely-positioned element (AP element), or frame.

There are several different ways of creating and managing links. Some web designers prefer to create links to nonexistent pages or files as they work, while others prefer to create all the files and pages first and then add the links. Another way to manage links is to create placeholder pages, in which you add and test links before completing all your site pages.

Understanding the file path between the document you’re linking from and the document or asset you’re linking to is essential to creating links.

Each web page has a unique address, called a Uniform Resource Locator (URL). However, when you create a local link (a link from one document to another on the same site), you generally don’t specify the entire URL of the document you’re linking to; instead, you specify a relative path from the current document or from the site’s root folder.

There are three types of link paths:

• Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).

• Document-relative paths (such as dreamweaver/contents.html).

• Site root–relative paths (such as /support/dreamweaver/contents.html).

  Using Dreamweaver, you can easily select the type of document path to create for your links.

Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages), for example, http://www.adobe.com/support/dreamweaver/contents.html. For an image asset, the complete URL might be something like http://www.adobe.com/support/dreamweaver/images/image1.jpg.

You must use an absolute path to link to a document or asset on another server. You can also use absolute paths for local links (to documents in the same site), but that approach is discouraged—if you move the site to another domain, all of your local absolute-path links will break. Using relative paths for local links also provides greater flexibility if you need to move files within your site.

Document-relative paths are usually best for local links in most websites. They’re particularly useful when the current document and the linked document or asset are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document or asset in another folder by specifying the path through the folder hierarchy from the current document to the linked document.

The basic idea of document-relative paths is to omit the part of the absolute path that is the same for both the current document and the linked document or asset, providing only the portion of the path that differs.

For example, suppose you have a site with the following structure:

• To link from contents.html to hours.html (both in the same folder), use the relative path hours.html.

• To link from contents.html to tips.html (in the resources subfolder), use the relative path resources/tips.html. At each slash (/), you move down one level in the folder hierarchy.

• To link from contents.html to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html. Two dots and a slash (../) moves you up one level in the folder hierarchy.

• To link from contents.html to catalog.html (in a different subfolder of the parent folder), use the relative path ../products/catalog.html. Here, ../ moves you up to the parent folder, and products/ moves you down to the products subfolder.

  When you move files as a group—for example, when you move an entire folder, so that all the files inside that folder retain the same relative paths to each other—you don’t need to update document-relative links between those files. However, when you move an individual file that contains document-relative links, or an individual file targeted by a document-relative link, you do need to update those links. (If you move or rename files using the Files panel, Dreamweaver updates all relevant links automatically.)

Site root–relative paths describe the path from the site’s root folder to a document. You may want to use these paths if you are working on a large website that uses several servers, or one server that hosts several sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths.

A site root–relative path begins with a leading forward slash, which stands for the root folder of the site. For example, /support/tips.html is a site root–relative path to a file (tips.html) in the support subfolder of the site’s root folder.

A site root–relative path is often the best way to specify links if you frequently move HTML files from one folder to another in your website. When you move a document that contains site root–relative links, you don’t need to change the links since the links are relative to the site root, and not to the document itself; for example, if your HTML files use site root–relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid.

However, when you move or rename the documents targeted by site root–relative links, you must update those links, even if the documents’ paths relative to each other haven’t changed. For example, if you move a folder, you must update all site root–relative links to files in that folder. (If you move or rename files using the Files panel, Dreamweaver updates all relevant links automatically.)