Dreamweaver Site Definition Tutorial

This tutorial covers defining a site in Dreamweaver. You should not attempt to create your website until you define it. The reasons for this are:

You will most likely have problems with your navigation and images appearing if you don't.

It is a good idea to have your site organized. If you do not think about your site structure before designing, you most likely will have a big mess of files and folders that will become cumbersome to manage. If you define your site prior to creating it, Dreamweaver handles the file structure beautifully.

You can use Dreamweaver's built-in FTP to upload your website without a hitch.

Your links can be tracked and maintained easily.

When creating your website, you need to designate a root folder. This is where all the files and folders of your website will be contained. Think of your root folder as the root folder on your web host. It is up to you how many directories you will need within your root folder. If your site is a small site, with only 5-10 pages, you may want to just have your web pages within your root folder without any subdirectories, but if your site is larger, and especially if you expect it to grow over time, you might want to consider having each page in it's own directory.

For a small site, this would be the ideal contents of a root folder:

ROOT FOLDER
   index.html
   about.html
   gallery.html
   contact.html
   all images that are used in the site

For a larger site, this would be more ideal:

ROOT FOLDER
   index.html
ABOUT FOLDER
   about.html
GALLERY FOLDER
   gallery.html
   gallery2.html
   gallery3.html
   PICTURES FOLDER
      pictures used in the gallery pages
CONTACT FOLDER
   contact.html
IMAGES FOLDER
   image files that are shared by different pages in all the directories (such as buttons, icons, etc.)

You might think it would be a pain to link to the images within the images folder for each and every page, but if you define your site, it can be done pretty quickly.

On to defining the site:

Step 1 Create a new folder on your harddrive. Call it whatever you want, but it should be specific to your site. This will act as your root folder.
Step 2

Open Dreamweaver. Choose Site > New Site. The Site Definition dialog box appears.

The dialog box fields explained:

Site Name
Enter a name for your site. This name will be used in the Site dropdown box at the upper left hand corner of the Site Manager Window. This name is just for your reference, and will not appear in any portion of your actual website.

Local Root Folder
This is where your root folder you just created resides. Either type in the location of this folder, or use the browse button to locate it.

Refresh Local File List
If you check this, Dreamweaver will refresh the root folder list automatically every time you copy files into your root folder. You should leave this checked.

HTTP Address
Type in the website url of where your root folder will be located when online, so Dreamweaver can verify links within the website that use absolute url's. If you don't know your url yet, you can leave this blank for now.

Cache
If this is checked, it can speed up your site management operations. You should have this checked.

Click OK.

The site files window appears. Dreamweaver has scanned your root folder and displays its contents in the right hand pane. (You do not have any contents in it yet, unless you specified a root folder that already had files in it, such as a template you might download and want to use to create your site.)

Step 3

Minimize the Site Management window. You should have a blank Dreamweaver document before you. Choose File > Save As... and navigate to your root folder in the dialog box that appears. Once you are in your root folder, type in index as the file name, and click Save.

Step 4 Maximize your Site Management window. Notice in the right pane the index file you just created is displayed. From now on, Dreamweaver will save any files you create to this directory.
Any files other than your web pages should be inserted into your root folder when you are ready to use them. So if you create a banner in an image editing program, you will want to export it into your root directory. If you export it to just any old folder on your hard drive, the banner will not appear on your live website, because your web pages will be looking for an image that is not within your root folder.

Using Dreamweaver's Site Management tool prevents broken links, and makes uploading your website files a breeze. You can create new directories from the Site Management folder, and drag and drop files into different directories. Dreamweaver takes care of correcting the links on any pages that have been moved around.