This tutorial will help you create, define, and structure a new Web site in Macromedia Dreamweaver.

Step 1: Creating the root folder for your Web site.
In this first step, you will create a root folder in which to keep your site's files and folders. Choose an appropriate place on your hard drive or network to save your work (such as My Documents). If you are working with a group of people, it is best if you have only one Web site defined in a location where each group member may access the files.

Create a new folder inside the directory you will be working in, and choose an appropriate name for it. All folder and file names you use for a Web site should be 8 characters or less, all lower case, with no spaces or symbols for maximum compatibility!

To add a new folder in My Documents:

a). Most PC's will have a shortcut to My Computer on the Desktop, as shown below. Double-click on the My Computer icon to open it.

b). Double-click on the Local Disk (usually the C: drive).

c). Double-click on the My Documents folder icon.

d.) Go to the File menu and select New, then Folder.

e). Give the New Folder a meaningful name.

f). Close My Documents.

Step 2: Defining a new Web site.
Open up Macromedia Dreamweaver. From the Site menu in Dreamweaver, select New Site. The Site Definition for Unnamed Site 1 dialog box appears, as shown below.

For Site Name, the enter in a name for your site (this name is for your reference only). For the Local Root Folder, enter in the path to the folder you created in Step 1, or click on the folder icon to browse to the folder. If you know the address (URL) where your site will be published, enter it in the space provided for the HTTP Address. Make sure the Refresh Local File List Automatically and Enable Cache boxes are selected with a check mark, and click OK.

The Dreamweaver Site Cache Creation Dialog box appears. Click OK.

This brings you to the directory view of your site where you may add, delete, or modify files and folders (as shown below). You may return to this view of your site in Dreamweaver at any time by going to the Site menu and selecting Site Files.

Step 3: Creating a directory structure.

Adding Files and Folders
From the File menu in Dreamweaver, select New File. Name the untitled file "index.htm" or whatever the administrator of your Web server suggests (this will be your homepage). It is important to have an index.htm file in each folder. Without an index.htm or default.htm page, Web users will see the contents of your folder as a directory listing of files rather than a single Web page.

Next, add a new folder by going to the File menu and selecting New Folder. Give the untitled folder a meaningful name.

Notice above that the "topic1" folder is highlighted with a blue line. Whichever item in this directory view is highlighted is the active file or folder. If you were to add a file or folder now, it would go directly into the "topic1" folder.

Make sure the new folder is selected (like the "topic1" folder above). Go to the File menu and select New File to add a file. Rename the untitled file "index.htm". Additional pages in the same folder should be given different file names that are related to the topic or contents (for example, links.htm would be a good name for a "Links" page).

Next, add a second sub-folder to your root folder. Click on the root folder to highlight it, then go to the File menu and select New Folder. Create an index.htm page in this folder as well.

Organizing a Web Site
Now that you know how to add folders and files, give some thought to how you will organize them into a well-designed directory structure for your site.

For smaller Web sites, it is possible to keep the entire Web site within a single folder (Note: choose more meaningful file names for your own Web site):

Larger sites generally contain a folder for each of the main topics or sections of the site:

As your Web site grows, you may have to rethink your original file and folder structure. Since you have carefully defined your site in Dreamweaver, it will automatically update the links to point to the new locations.

Step 4: Using the directory view of your site.
There are a few things to keep in mind while using this file directory view of Dreamweaver:

As you develop a site, save ALL FILES (including Web pages, images, and other media) for the Web site into the folders you have created. When working with other programs (such as Photoshop for images), you can save the final images into the folder you specified (for example, C:\My Documents\minisite\). You may want to keep the high-resolution originals in another location. The next time you open Dreamweaver, the image files will be listed in the directory view along with the Web pages.

See the page on Site Maintenance in Dreamweaver for an introduction to a few of Dreamweaver's site management tools.