Dreamweaver Site Definition Tutorial

Organizing your website

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 very well.
  
• 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 with one subdirectory for images, 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 its own directory.

( Important ! ) DO NOT USE spaces, slashes, or back slashes in the html filename. Underline and hyphens are allowed (example: math-staff.html)
Name your main page in root folder and each subfolder "index.html". This will assure that users will land on the proper page when they come to your site. Give all pages in your site unique names. Make sure that you use the alt attribute for images in your html files.

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



For a larger site, this would be more ideal:
(notice that each subfolder has its own index.html file)

You might think it would be a hassle 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.

Define Site in Dreamweaver

Step 1

Create a new folder on your hard drive (as described above). 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 URLs. 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.

The site files window appears. Dreamweaver has scanned your root folder and displays its contents. (You do not have any contents in it yet, unless you specified a root folder that already had files in it.)

Step 3

Minimize the Site Management window. You should have a blank Dreamweaver document before you (If you don't: Choose File > New > select Basic HTML Page. )
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.html as the file name, and click Save.
From now on, Dreamweaver will save any files you create to this directory.

Note: To keep your links intact, rename or move files within the Dreamweaver Site Window.

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.

Next - Learn how to Set up FTP connection with Dreamweaver

created by OIT Web Developer (March 2007)