HOME â€¢  SYLLABUS/SCHEDULE  â€¢   ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES  •   YOUR FEEDBACK

This is currently being edited by Deb Jones.  Do not change it.

Tutorial 3 - How to create a Site Root in Dreamweaver

1. SET UP YOUR SITE FILE STRUCTURE - Make an empty FOLDER (or DIRECTORY) that will hold all the files for the LOCAL version of your site. Put it somewhere that's easy to remember. It could even be on your thumbdrive, so it will always be portable.

Name the folder with underscore, dash, or alphanumeric characters ONLY, and NO spaces: site_root , or something like that. This is your SITE ROOT folder (also called in Dreamweaver, your LOCAL ROOT FOLDER). Within this folder, create:

an HTML folder

a GRAPHICS folder

a CSS folder

a FLASH folder

a RESOURCE folder

 

 

Now, open DREAMWEAVER.

 

 

Under the SITE menu, select NEW SITE.

The SITE DEFINITIONS window will open:

 

 

 

 

Under the BASIC tab in this window, NAME your new site, but leave the second space blank ("What is the HTTP Address (URL) of your site?"). You'll add this later.

Click NEXT>.

 

On the next window, select, "No, I do not want server technology".

Click NEXT>.

 

On the next window, select, "Edit local copies on my machine, then upload to server when ready (recommended).".

On the second space, "Where on your computer do you want to store your files?", click on the FOLDER icon, and browse to the folder you just created as your SITE ROOT. Select that folder and click CHOOSE:

 

 

 

 

Click NEXT>.

 

We're almost done! On the next window, under the drop-down menu for "How do you want to connect to your remote server?", select NONE for now.

Click NEXT>.

 

You should see a SUMMARY of your site so far. Check it to make sure your SITE NAME and LOCAL ROOT FOLDER are correct (and really, they don't need to be the same name). You should also see that you'll set up Remote Info and Testing Server later.

When you click on DONE, you should see your SITE NAME highlighted under the FILES Toolbar on the right side (usually) of your screen:

 

 

 

 

2. MAKE AN index.htm PAGE

You know, there's lots of ways to make a NEW HTML page in Dreamweaver: either click on "Create New" and then select "HTML" on the welcome screen, shown below on the left; OR under the menu File>New for the New Document window below, on the right - - then select Blank Page and HTML under Page Type and <none> under layout. Click CREATE):

 

That will open a new UNTITLED XHTML page for you.

Now, all you need to know about XHTML is that it's the latest "flavor" of HTML that is standards compliant, which means it should work with all current web technologies.

 

Before you do anything else, under the FILE menu, select SAVE AS. Name the file "index.htm" and save it to your SITE ROOT folder: 

 

 

Put it this file in your SITE ROOT folder. Generally, it's the only HTML file that's NOT in the HTML folder (anything you've linked to the page, however, should be in its corresponding folder).

 

This is the HTML page that your audience goes to first when they type your site address into the browser window. Its function should be that of an INTRODUCTION ("Hi. This is my site.") and also an INVITATION to explore your site ("Click here to begin").

 

 

3. DESIGNATE index.htm AS YOUR HOME PAGE

 

 

Under the SITE menu, select MANAGE SITES... . Select the site you're working on, and click EDIT... :

 

 

You're back on the SITE DEFINITION window. Click on the ADVANCED tab at the top of the window, and select SITE MAP LAYOUT under CATEGORY:

 

 

Click on the FOLDER icon next to HOME PAGE and navigate to your index.htm page. Select it and click CHOOSE in the SELECT HOME PAGE window.

 

in the SITE DEFINITION window, click OK.  Now you should see index.htm  under the site's name in the FILES toolbar (LOCAL VIEW). As you build your site, you'll see pages linked to the index.htm page when you select MAP VIEW

Do these things first! Do them right or NOTHING with work!

Congratulations, you've now created a website!