DREAMWEAVER - SETTING UP YOUR SITE

Dreamweaver is an amazing program that takes much of the hand coding out of web design work. Dreamweaver is know as a HTML "generator". You design naturally by placing items on the screen, and behind the scenes Dreamweaver creates your HTML, JavaScript, and DHTML. As well as being visual and easy to use, Dreamweaver is the industry standard for web designers.

In this section of the web design course you will learn everything Dreamweaver has to offer, from the very basic to the most advanced, and youll love it.

HTML knowledge and Dreamweaver

Knowledge of HTML is a must when using Dreamweaver. Youll need your HTML skills to understand what Dreamweaver is doing and what different buttons mean. I would recommend that you re-read the corresponding HTML section before embarking on that section in Dreamweaver. For example, it would be a good idea to return to the HTML section about Frames before reading the Dreamweaver Frames section.

Defining Your Site

Before you can begin building a site you have to tell Dreamweaver some information, like where the site will be  kept and what its name is. You will keep everything in a root folder, just like you do when coding in HTML. A good strategy is to build a folder in your hard drive and name it "1 Web Sites". The "1" assures that the folder will always be listed first alphabetically. You can keep the root folder for all of your sites in "1 Web Sites"

1. Create a folder on your hard drive and name it "1 Web Sites".
2. Inside of "1 Web Sites", Create a folder called "First Site". This will be your root folder.

Dreamweaver will organize all of your files for you and help you keep everything straight. You will be able to see a graphical representation of everything in your root folder in the "Site Files" view. You will spend quite a lot of time in the Site Files view. Every once in a while, you use something so much that it warrants a shortcut key.

F8 is the shortcut key to open the Site Files view

1. Open Dreamweaver and hit F8. This is the site files view.

You will use the pull down menu to choose what site you will work on. Right now you need to make a new site.

2. Click the pull down menu and choose the last choice, Define Sites.
   The Define Sites Dialogue box is where you will set up, or define, all the necessary information for each of your sites. Every time you start a new site you will need to open the "Define Sites" window. Define Sites is also available by under the "Site" window.
   Look at the "Define Sites" window. Look at all the buttons. These are all the things you can do when setting up a site. Make it a habit to look around when visiting a new feature.
   (the below "Define Sites" is pictured with a bunch of sites in it already. Yours may be blank.

3. Youll be adding a new site,  so click New.

Site Definition Box

This is where youll be adding in any information Dreamweaver needs to know about your site.

Site Name: Normally, youll name the site whatever you want. Youll need to recognize it later, though, so be smart about what you name it. Lets name it "First Site"

Local Root Folder: This is where youll tell Dreamweaver where your local root folder is.

4. Click the yellow folder next to the "Local Root Folder" field to choose a root folder. The root folder is said to be "local" because its on your machine.

After clicking the yellow folder button, youre going to need to find your root folder in your hard drive. Remember we named our root folder "First Site" and placed it inside the "1 Web Sites" folder

5. Navigate to the "First Site" Folder and choose it.
   Hard Drive-> 1 Web Sites-> First Site

The Local Root Folder field should now reflect the file path from your hard drive to "First Site". Make sure that "First Site" is the last thing in line inside of the Local Root Folder field.

Above the "OK" button is a checkbox labeled "cache". Dreamweaver will keep track of your files and links for you. If you move a file, itll update all of your links and HREFs.  How cool! It is much easier for Dreamweaver to do this if it builds a file to keep track of your links called the Cache.

6. Check the "Enable Cache".
7. If you know the URL that your site will be published to you can enter it in the HTTP Address field. If you dont know your URL thats okay, too.
8. Hit OK

Now you see your new site in the "Define Sites" window! Youre Done!

9. Click Done

Try to make a new site on your own. After youre done, open "First Site" again by choosing it from the pull down menu in the upper left hand corner of the Site Files window.

The Site Files Window

You should be looking at the Site Files window right now. If youre not sure, hit F8. Remember that F8 is the shortcut for the Site Files window.

The Right Pane of the Site Window

On the right, youll see your root folder for the "First Site". The right side of the Site Files window is a detailed map of your site and all its contents.

The Left Pane of the Site Window

The left side of the Site Files window is where your web site will show up after we upload it to a server.

Choosing Which Site to Display in the Site Window

You should be looking at If youre not sure which site youre looking at in the Site Files Window you can choose "First Site" from the pull down menu in the upper left hand corner of the Site Files window.

Creating and Saving Pages

There are a whole bunch of different ways to do lots of things in Dreamweaver. For Example, you can get a new page by:

*         Right clicking on your root folder and choosing "new File"

*         Ctrl + N

*         Clicking FILE-> NEW WINDOW

Most of the time Im just going to tell you what I think is the easiest way to do something. If you find another way that you like better, go right ahead.

1. Click FILE-> NEW WINDOW

You should be looking at a totally blank page. If your page has floating boxes on it you can close them by hitting their "X".

Lets save the page.

2. Click FILE-> SAVE
3. Name the file "index"
   You dont have to add on the ".htm". Dreamweaver adds it for you.
   **Make SURE youre saving it in the "First Site" folder. Sometimes Dreamweaver tries to save your first file outside of the root folder.
4. Hit F8 to see if the page is in your Site Files. If it isnt there, youll have to save it again, this time making sure you save it in your root folder.

Opening a Page From the Site Files Window

If you find a page that youd like to open just double click it. Easy, no?

1. Double click "index.htm"

**Create another page and save it. Call the page whatever you want. After youre done creating the page, delete it from the Site Files window. To delete a file, just click it and hit delete.

Continue to Text and Page Properties | Back to Courseware