When an HTML page is saved as a template, Dreamweaver creates a template folder at the root level of the local root folder and generates a .dwt file that becomes the source for all the pages that are applied to it. Every time a HTML page is applied to a template, (File > New from template or Modify > Template > Apply template to page) it creates a site root-relative link to the .dwt file. The reason why this site relative link will always link correctly is because the .dwt file will always be in the Templates folder at the root level of the site's folder structure. If the .dwt file is moved from the Templates folder, or if the Templates folder is moved or renamed, the link will be broken. It is very important to keep the .dwt file in the Templates folder where Dreamweaver creates it. To avoid confusion, it is good practice NOT to save other elements of your site (image source files or HTML documents) inside the Templates folder.
How are pages linked to the template files?
When a file is applied to an existing page or created new from a template, the following code is inserted in the source:
<!-- #BeginTemplate "/Templates/templateName.dwt" -->
To view the HTML source code that Dreamweaver generates, choose Window> HTML.
The path above replaces the normal HTML source that would appear on a new page. Instead of starting out with the usual tags that new file would generate, it is specifying that one level inside the local root folder, inside a folder called Templates, a .dwt file exists that contains all the information not inside the editable regions of that page. This path sends the browser to look in the correct location for the file which will provide the page properties, layout and graphics - all the content that exists only in the .dwt file. This is why changes outside the editable regions of a page must be made directly to the .dwt file. When the .dwt file itself is opened and revised all the pages applied to the template are linked to the file in the same location as before. All the pages applied to the template are all automatically updated with the new information.
Document-relative versus site root-relative
The path linking an HTML page to a template is a site root-relative path. It is called site root-relative because it starts from the top level of the directory structure (the local root folder), and then follows through the next folder down (Templates), and finally links to the .dwt file. Dreamweaver automatically generates a site root-relative path to the templates in the Templates folder, because it knows exactly where the template will be located, no matter what other file folders exist in the site structure.
For more information, see Site Root Relative - Why? (TechNote 13129).
Document-relative creates a path specific from one file to another. Rather than starting from the top level (site root) of your file folder structure, it generates a path that starts at one file, goes through whatever file folders (directories) necessary, and stops at the location of the other file. It is imperative that both files be saved inside the local root folder BEFORE creating a document relative link from one to another.
If you wish to be able to preview your pages in a browser locally, before you have uploaded the files to a remote server, they must be document relative. Both Internet Explorer and Netscape browsers have no way of understanding what local root folder has been defined (as Dreamweaver does) so it can only follow a path that is relative to the document it is currently viewing. Because most users prefer to view their pages locally in a browser prior to uploading them, Dreamweaver defaults to being document relative whenever a file is linked or an image is inserted. If the file has not been saved BEFORE attempting to insert an image or a link to another HTML page, Dreamweaver has no reference for the location of the current page, therefore it will generate a path that looks something like:
These paths are specific to your workstation ONLY and will not work when you upload files to a remote server.
The chart below gives a graphic explanation of the difference between document-relative and site root-relative. In the example below, the page bio.htm has a graphic named logo.jpg inserted into it using alternate path choices.