Contents

This TechNote demonstrates how to use Dreamweaver's templates and Site window to create a Web site.

Defining a local site
Before creating pages for a site, it is necessary to define the site in Dreamweaver. This is done by selecting a folder on the computer's hard disk in which all the files for the site will be contained. This is the local root folder. If you do not have a preexisting folder to select to be the local root folder, see Creating a folder below. If you already have a folder, skip to Selecting the folder below.

After the site is defined, the pages for the site are created in Dreamweaver, saved inside the local root folder, and then uploaded to the Web server. The local site and the remote site on the server should have exactly the same structure. If Dreamweaver is used to upload the site, it automatically replicates the file structure of the local root folder on the server.

Creating a folder
To create a folder on your hard disk for the local root folder,follow the steps below.

Selecting the folder
To define the folder as the local root folder in Dreamweaver, do the following:

6	In the HTTP Address field, enter the URL that the completed Web site will use, so that Dreamweaver can verify links within the site that use absolute URLs. For example, the HTTP address for Macromedia's Web site is http://www.macromedia.com.
7	For the Cache option, indicate whether or not to create a local cache to improve the speed of link and site management tasks. If this option is not selected, Dreamweaver will provide a prompt asking whether a cache should be created before the site is created. If you are not sure, leave this option checked.
8	Click OK.

The information for the other categories can be filled out later. Once the basic site definition has been established, new HTML documents can be created.

Back to top

Building the site mapin the Site window
Now that the site has been defined, the Site window appears. The Site window provides two visual representations of the local site: Site Map and Site Files. The Site window can be used to add new files to the site; to add, remove, and change links. It can also be used to create an image file of the site that can be exported to and printed from an image editing application.A home page needs to be created and defined in orderto build the site mapthat appears on the left side of the Site window.

Back to top

Creating a subdirectory and files
The home page currently has no links. After links have been established, the home page and the linked pages will be displayed in the site map.

1	Select the local root folder in the Site window.
2	Choose File > New Folder (Windows) or Site > Site Files View > New Folder (Macintosh).
3	Name the subdirectory Pages.
4	Create two files to put into the Pages subdirectory by selecting the subdirectory and choosing File > New File (Windows) or Site > Site Files View > New File (Macintosh).
5	Name the files Products.html and Services.html. Note: The template will be applied to these files in the following steps.

Back to top

Creating the template
Templates allow a designer to construct a site that has a consistent style and is easy to update. Templates are convenient for a team of designers, allowing some members of the team to concentrate on the style of the pages, while other members of the team create new pages and revise the content without altering the formatted layout. Changes can be made to the overall design of the site quickly by revising the template files directly.

The navigation bar:
Most Web sites have a navigation bar that provides links to the individual Web pages of the site. Usually, the navigation bar is inserted into the uneditable region of the template. This method ensures it is easily applied to each page created from the template and is updated by simply editing the template.

Note:To build a more sophisticated navigation bar, simply follow the instructions for Creating a graphical navigation bar in Fireworks or Creating an animated navigation bar in Flash in the Navigation bar overview article.

Build a simple text-only navigation bar as follows:

Back to top

Saving the template and establishing editable regions
Once the design of the future template is complete, it must be saved as a DWT file (template) in order to be able to establish editable or noneditable regions. Originally, each template has only locked regions. Locked regions can be edited only inside the template itself. Editable regions are placeholders for the content that is unique to each page to which the template is applied. The content of editable regions is created and edited in the document that is derived from the template.

Note:Make sure not to move the DWT file from the Templates folder. Also, do not rename or move the Templates folder. As long as the DWT file remains inside the Templates folder, the links from the pages derived from the template to the template will not be broken.

Back to top

Applying the template to the pages
The new template is ready to apply to the index, products and services pages. In an applied template, the editable regions are highlighted. They appear in a highlight color on all pages to which the template is applied as well.

Back to top

Testing and viewing the site
You are now ready to test and view the site:

Back to top

Products affected