Defining and Managing Sites in Dreamweaver

Before you begin this portion of the tutorial, watch the Flash movie Setting Up a Site Definition in Dreamweaver (Flash SWF File - 1770kb). Return to this tutorial when you are done.

Site Menu Image You must supply Dreamweaver with the location of your site folder and with your web host information in order to upload your files to the Internet. To do this click Site from the Dreamweaver menu and select Manage Sites > New Site...

Site Definition Dialog Box

Local Info Image

After clicking the New button in the Manage Sites dialog box the Local Info dialog box displays. This dialog box contains the Site Name which is used in the Manage Sites dialog box. The Site name allows you to easily identify and select the site that you want to edit. The site name can include spaces.

The Local root folder is the folder that contains all of the web site files (html, jpg, gif, php, etc.) on your machine. In the classroom the local root folder is on our network server or drive F:\ (the network server is the machine that is located behind my desk). The local root folder is selected by clicking the browse icon .

The default images folder is also on drive F:\ and this is the folder that you will store all of the graphics for your web site (this is optional), this folder is also selected with the browse icon.

In the Category pane click Remote Info.

The Remote Info dialog box is used to provide Dreamweaver with the necessary web host connection information. Without this information you would not be able to upload and display your pages on the Internet. There are several things that you need to specify in the Remote Info dialog box.

Access: FTP or file transfer protocol - This is the transfer method that is used to upload and download files from the Internet. If you would like more information on FTP search Google for "what is ftp".

FTP host: yourusername.robinshosting.org - this is like a street address (i.e. 1800 Oak Park Blvd.). This tells Dreamweaver the address of your remote web host. Without it Dreamweaver would be lost.

Host directory: The host directory defines where you will store the files on the web server. You need to specify a path to the site folder. The path always starts with public_html. You then specifiy any subfolders. Note: The folders that you specify in this box must exist on the web server; if they do not exist you will get an access error when you try to connect. You can create the site folder in CPanel.

Type the path public_html/yourfoldername in the host directory box Dreamweaver. Each time you make a connection to your site Dreamweaver will automatically open the host directory folder.

Login: yourusername - When you signed up for robinshosting you received a welcome mail with your username, password, connection details and other important account information. You cannot connect to your host without the username (this is like the key to your front door).

Password: yourpassword - When you signed up for robinshosting.com you were given a password. Passwords are case sensitive (this is also like the key to your front door).

Passive FTP: Do not check this option.

Testing the Connection - Common Error Messages

Once you have completed the remote info you can click the Test button to test the connection. This will ensure that everything is working properly and you can connect to the remote host.

When you click the test button you should get the following alert box:

Connected Successfully Image

I hope that you will see the above message on your first test attempt, but if you don't here are a few of the error messages that you may receive and their meanings.

After testing your connection click the OK button and then click Done.

Exporting Your Site Definition

In the classroom you may have to use different computers while you're working on the Dreamweaver unit. If you move to a different computer your site definitions will not be available. After you define a site you should export the site settings for use on different machines.

Once the remote information has been defined you can connect to the remote host.

Connecting to a Remote Host

When you are ready to upload your files you must connect to the remote server. To connect to the robinshosting.com server click the Connects to remote host icon .

After you have connected to the remote site the Connects to Remote Host button should look like this .

The FTP Interface

You can see both the local and remote sites by cllicking the Expand/Collapse icon . The Dreamweaver FTP interface will appear.

Uploading the Entire Site

To upload your files to the remote host click the Site folder under local sites.

on the Local Files side (right-hand side). Clicking the site folder selects all of the files in the site. This eliminates having to select each of the files and folders that you want to upload. Click the Put File(s) button . Put is a Unix term for Upload. Get is the Unix term for download.

If you are asked to Include the dependent files click No. Dependent files are files that are associated with an html file. These files can be graphics, css, SSI, php, jsp, or any other files that the browser needs to display the file properly. Because we are uploading the entire site the dependent files will already be uploaded. We don't need to upload them twice.

Note: If you did not specify the host directory the Put file(s) button would not work properly. The files would be uploaded to the root of your web site and they would not display.

In the Dreamweaver FTP screen you can also drag and drop files from the local site to the remote side. Try this: Hold down your left mouse button on the Graphics folder on the local files side. Drag the Graphics folder to the Remote Site folder . If you are asked to replace the existing files click yes or ok.

When you are done with the file manager you can click the Expand/Collapse icon to return to the regular Dreamweaver editing window.

Uploading Quickly with the Files Panel

The next time that you want to upload the Catalyst files the process will be much simpler.

Files Panel

From the Files panel click the top Site - NewCatalyst folder.

Click the Put File(s) button

Click No to the Include Dependent files message (because you have selected the Site folder all of the files in the site will automatically be uploaded.)

You can also Put individual files, simply click the file you want to upload and click the Put File(s) button. Use the CTRL or the Shift key to select multiple files.

Get Files

You may also want to Get File(s) from your remote host. If you work on a web site in class you may want to download the files at home. Use the Get File(s) button to download files from your remote host to your local hard drive. Be sure to create a folder for the files/site on your hard drive and define the site before you attempt to Get File(s).

To do this click the Expand/Collapse icon in the Files panel.

Select the top site folder or the individual files you want to download from the Remote Site side of the FTP manager and click the Get File(s) icon . Answer Yes if you are prompted to include dependent files.

You can also drag and drop files between the two sides to upload and download. In essence when you upload files (Put - Local to Remote) in Dreamweaver you drag them from right to left. When you download files (Get - Remote to Local) this is reversed, you drag them from left to right.

Simple File Management in Dreamweaver

As I mentioned earlier it is essential that you handle all file management tasks in Dreamweaver. If you use Windows Explorer or My Computer to move, copy, delete, or rename files that are used in a Dreamweaver site Dreamweaver will not be able to track the changes made to the web site (update link locations, etc.). File management in Dreamweaver is very similar to file management in Windows Explorer or My Computer so it makes it very easy to learn.

Answers to common hosting questions can be found at http://www.robinshosting.com/faq.html.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.