Managing and Uploading Files in Dreamweaver MX 2004

This tutorial was written for the students in the ROP web page design program.

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

Definition of Terms

Local - Local refers to the computer that you are working on. In our classroom local also includes your network folder (PM directory). Think of local as the computers that are in the same room that you are in.

Remote - Remote refers to the remote computer that you will upload your files to. This is usually a computer that is in a different room, building, city, or even state. Typically small businesses and individuals use a web hosting service to store their files on. In this example the remote computer is the robinshosting.com server whis is located in Ohio (now that's remote).

Host - The organization that maintains the servers that store and display your web site. Click this link for a definition of hosting. You may choose to have several hosts depending upon your needs or your client's needs. For additional information on selecting the right host for your needs visit my hosting resources page.

Web Site File Management

When you first begin a web project you should create a new folder on your hard drive (or on the network drive (F:\) when you are in the classroom) that will hold all of the necessary files for your site. This folder should be created before you open Dreamweaver. This site folder will contain all of the html, css, jpeg, gif, and other web documents that are used on your site. In Dreamweaver this site folder is called a Local Root Folder.

For the NewCatalyst project use My Computer to create a folder in drm called catalyst. Create a sub folder in catalyst called graphics.

To the left is a screen capture of folder structure on the class sample site on the web. This site contains the completed class projects. In Dreamweaver, the files that are stored on the web are stored in the Remote Host Directory.

The public_html folder is called a host directory. This is where you store all of your site files. When a user types in your web address http://yourusername.robinshosting.com the contents of the public_html folder will display.

Inside the public_html folder there are sub folders for each course of study and an index.html file. The index.html (or .htm) file acts as the welcome page. The index.html or .htm file also prevents the directory display when a visitor types in your web address. The site.css file contains the CSS for the index.html file and the images folder contains the images for the page.

The public_html folder also contains sub folders. These sub folders help to organize your web site's content.

1. drm - Dreamweaver lessons
2. flash - Flash lessons
3. html - HTML lessons
4. images - images used on the front page of the site
5. mollydog - Photoshop project
6. newland - PHP Project
7. index.htm - the front page of the site

Notice that there are also sub folders and an index.html file within the html folder. This page is the welcome page for the HTML assignments. If this page was named something other than index.html (or index.htm) a list of the html folder contents would display when a visitor typed the URL http://robin.robinshosting.com/html.

Take a look at the web address to the html homework page:

The above address is made up of several parts:

http://robin.robinshosting.com is the domain or root (top level) web address; this is a pointer to the public_html folder. html is a sub folder inside the public_html folder. Because there is an index.html file in the html folder the site visitor does not need to type the actual page name in the address bar. When the user types http://robin.robinshosting.com/home the server automatically looks for and sends the index.html file to the visitor's browser.

Creating folders for each project you work on each section of your site makes it much easier to find and manage files. I would strongly recommend that you develop good file management skills. For additional information on file management, review this class handout.

More About the public_html Directory

A hosting company has multiple clients that are served on a single computer or web server. Many hosting companies use Unix based servers. These servers have special server software installed to manage web sites. When you sign up with a web host your account is created on the server and a "home directory" is also created for your account. This home directory is very similar to the user directory you are assigned in class (PM or TAM directory). The home directory is where all of your web files are stored. Your home directory path on a Unix system may look something like this:

/home/username/

The first forward slash "/" indicates the server root. Each forward slash "/" in the path indicates a subdirectory. 'home' is a subdirectory of the server root, all user folders are stored in the 'home' sub directory. 'username' is your own personal folder; files and folders for email, statistics, ftp, and other server functions are stored in this folder. When you connect to the ftp server the username and password tells the server which 'home directory' to connect to.

The 'username' folder also contains a special folder called public_html (this folder may be called www on some servers). The public_html directory is where you must store all of your files. If you upload your HTML files to your 'home directory' (/home/username) they will not be visible on the web. Your site's URL (http://yourusername.robinshosting.com) is a pointer to the folder /home/username/public_html on the web server.

Create Site Folders

Before you begin this section, watch the Flash Movie, Manage Files Online. When the movie is done return to this page.

Before you can setup a site definition you need to create folders to store your files. For your NewCatalyst site use My Computer create a folder inside the drm folder called catalyst. Create a folder inside catalyst called images.

You will also need to create a folder on the remote server (web host) to store your files. This can be done using your CPanel account @ http://yourusername.robinshosting.com/cpanel.

After you log in to CPanel, click the File Manager icon.

The file manager in CPanel allows you to create folders, copy and move files and handle other site file management tasks.

All HTML files must be stored in the public_html folder. Click the folder next to public_html (don't click the link).

Click the Create New Folder link.

On the top, right-hand side of the browser window you should see a box that says Create a directory in...  Type drm (or whatever folder name you would like to create) in the box and click Create.

Click the folder next to drm

Click the link Create New Folder link.

On the top, right-hand side of the browser window you should see a box that says Create a directory in...  Type catalyst (or whatever folder name you would like to create) in the box and click Create.

You now have remote folders setup on the server that you can use for your catalyst site's host directory. The path to this folder is public_html/drm/catalyst (Note: you do not use home/username in the path). Close CPanel and return to Dreamweaver.

You can learn more about CPanel's File Manager in the Flash Movie, Manage Files Online.

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.

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.

A note about the Manage Sites Dialog Box

The Manage Sites dialog box displays all of the web sites you have created in Dreamweaver. The image below is of my Manage Sites dialog box.

When you work with Dreamweaver you need to create a new site definition for each web site/project that you create or work on. This site definition contains the location of the site files on your hard drive and on the remote web server. Once you create this site definition Dreamweaver will be able to handle important file management tasks like updating links when a file is moved and uploading files to your web server/host.

Click New Site...

Site Definition Dialog Box

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. Name the site NewCatalyst

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 . For the NewCatalyst site you should browse to F:\drm\catalyst

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. For the NewCatalyst site you should browse to F:\drm\catalyst\graphics

Now lets look at the remote info which is used to tell Dreamweaver where your files will be stored on the Internet.

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. For the NewCatalyst web site you will use the host directory public_html/drm/catalyst. 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.

Type the path public_html/drm/catalyst in the host directory box Dreamweaver. Each time you make a connection to your site Dreamweaver will first connect to your 'home directory' then it will automatically open the public_html folder, it then opens the drm folder, and finally the catalyst folder. By completing the Initial Remote Site Folder options you will not have to manually open folders every time you want to upload your files. If you do not use the correct host directory the Put (upload) files feature will not work properly.

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:

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.

The above error message means that the FTP host information is incorrect. The FTP address should be yourusername.robinshosting.com (replace yourusername with your actual robinshosting username (mine is robinw). If you are using a different web host check their web site for information on FTP and the correct FTP address.

The above error message means that the host directory information is incorrect. Make sure that it is public_html/ if you are using robinshosting.com. If you are using a different web host check their web site for information on FTP and the correct host directory.

The above error message means that your username or password is incorrect. Check your username and retype your password. Remember that passwords are case sensitive. You should have received an e-mail from your web host with your username and password. If you no longer have the correct information, contact your web host.

If you have checked all of these settings and you still cannot connect ask your instructor for assistance. If you are no longer in class check your web host's web site for information on FTP. Most web hosts have support pages that you can review and a support e-mail address to ask questions.

For information on Passive FTP, Firewalls, and Secure FTP, Firewall Settings, and Server Compatibility settings view the tutorial on Macromedia's web site on Site Definition.

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.

Click above image to see a larger version.

You may notice that this Dreamweaver File/FTP interface looks similar to Windows Explorer. This interface can and should be used for all of your file management tasks. This includes creating folders, deleting files and folders, moving files, renaming files, and copying files and folders. Dreamweaver automatically keeps track of and updates hyperlinks in files when a web page is moved to a new folder. This Dreamweaver feature eliminates your manually having to update hyperlinks when you move files. Trust me, this is a real time saver. This feature will only work if you use the Dreamweaver File/FTP manager to perform file management tasks. If you use Windows Explorer or My Computer to delete, move, copy, or rename files you will have to manually update all of your hyperlinks. I cannot stress the importance of this enough, always use the Files Panel or the FTP manager to delete, move, copy, or rename files in your Dreamweaver web sites. I will explain how to delete, move, copy or rename your files later in this tutorial.

Back to the interface.

FTP/Files toolbar

	Selects the site to manage or work with
	Connects to the Remote Server indicates that you are connected to the remote server
	Refreshes the contents of the files panel
	Shows a log of FTP file activity
	Shows all of the files and folders in the web site
	Connects to a testing server (used for php, asp, and coldfusion)
	Site Map - Creates a graphical map of your web site. Looks similar to an organizational chart
	Get File(s) - Downloads the selected files from the remote host
	Put File(s) - Uploads the selected files to the remote host
	Check Out - This feature is used if you have multiple web developers working on a web site.
	Check In - This feature is used if you have multiple web developers working on a web site. For more information on Check in and out click Help > Using Dreamweaver > Search > type Check in and press Enter. Select the Topic Checking in and checking out files
	Expand and Collapse the Files Panel

The left-hand side of the FTP screen is the Remote host. In this case the remote host is robinshosting.com and it displays the files that have already been uploaded to the remote host (you should see your html project files).

The right-hand side of the screen is called the local host. This side displays all of the files that are currently in your web site on your local hard drive or in our case on our network server.

File management skills are essential when working with web sites. If you need to review basic file management review this class handout on file management.

Uploading the Entire Site

To upload your files to the remote host click the Site - NewCatalyst folder 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.

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.

Both the Files Panel and the FTP manager can be used to delete, move, copy, and rename files and folders. You can drag and drop files or you can right click a file and select Edit from the menu and then select Cut, Copy, Delete, Duplicate, Paste, Rename. An Edit menu can also be accessed in the FTP manager by clicking the Expand/Collapse Icon in the Files Panel.

You can also use shortcuts keys in Dreamweaver to manage your files. Here is a quick list:

Cut: CTRL+X
Copy: CTRL+C
Paste: CTRL+V
Delete: Del
Duplicate: CTRL+D
Rename: F2

Be sure to select the file you want to manage before you use one of the above shortcuts.

To create a new folder

Right click the folder in which you want to create a sub folder
Select New Folder
The new folder will be called untitled
Type the new folder name and press Enter

To rename a folder

Right click the folder that you want to rename
Select Edit > Rename or press F2
Type the new folder name and press the Enter

To delete a file

Click the file you want to delete in the Files Panel and press the DEL key on your keyboard. You will be prompted to load the cache information for the site; click Yes to the prompt. The cache keeps track of all of the linked files in a Dreamweaver site. Dreamweaver then checks to see if any files link to the file you are about to delete. After the cache is recreated an alert box appears that lists the files that link to the file that you want to delete. Click Yes or No to the confirm deletion prompt.

This is one of the safeguards built into Dreamweaver's file manager. It is also one of the reasons that you should ALWAYS use Dreamweaver to manage files instead of Windows Explorer.

To make a copy of a file

Select the file that you want to copy in the Files Panel
Right Click the file that you want to copy in the Files Panel
Select Edit > Copy or press CTRL+C
Select the folder that you want to copy the file to and right click the folder
Select Edit > Paste or press CTRL+C

To move a file

Select the file that you want to move in the Files Panel
Drag the file to the new location (usually a different folder) or
Right Click the file that you want to move in the Files Panel
Select Edit > Cut or press CTRL+X
Select the folder that you want to move the file to and right click the folder
Select Edit > Paste or press CTRL+V

When you move files that contain hyperlinks to other pages within your web site you will see an Update Files dialog box asking if you want to update the links to the file that you are moving. You should ALWAYS click the Update option. Clicking Update will tell Dreamweaver to automatically correct any pages that contain hyperlinks to the file that you are moving.

If you click Don't Update you will have to manually open all of the pages that link to the file that you moved and fix the broken hyperlinks.

Try Practicing!

Dreamweaver file management practice exercise.

Last Thoughts and Additional Resources

If you need more information on site definition view the tutorial on Macromedia's web site on Site Definition.

For additional information on setting up FTP in Dreamweaver view this tutorial on Setting up Dreamweaver's FTP connection.

To learn more about what you can do with Dreamweaver visit the Dreamweaver Developer's Center. There are tutorials for building shopping carts, photo albums, blogs, and other advanced features.

For information on converting existing sites to Dreamweaver sites review this page.

If you need additional Dreamweaver resources visit this resource page or search the Internet with Google for Dreamweaver Tutorials. For a tutorial on searching the Internet with Google click here.

 

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.

Visit Robin's Blog for more web design and development resources.
©Copyright 2001-2006 - Robin Wood - Send Questions or comments to robin at tinkertech dot net.
Last Updated: December 19, 2006