Welcome to the sixth and final part of this article series on creating your first website. This tutorial shows you how to set up a remote site in Dreamweaver. A remote site is usually a place on a remote computer, running a web server that holds copies of your local files. Users access the remote site running on the web server when they view your pages in a browser.

Most Internet service providers (ISPs) or corporate system administrators provide documentation on how to connect to a remote server using Dreamweaver. If you have that documentation, you should use it rather than try to follow the steps in this tutorial. This tutorial presents a very broad example of connecting to a remote server, and will not be correct for all users. When in doubt about connecting to your remote site, consult your system administrator or your ISP's help desk.

In this tutorial, you will complete the following tasks:

• Learn about remote sites
• Define a remote folder
• Upload your local files
• (Optional) Troubleshoot the remote folder setup

Requirements

To complete this tutorial, you need to install the following software:

Dreamweaver CS4

• Try
• Buy

Prerequisite knowledge

• Creating your first website – Part 1: Setting up your site and project files
• Creating your first website – Part 2: Creating the page layout
• Creating your first website – Part 3: Adding content to pages
• Creating your first website – Part 4: Adding the main image text
• Creating your first website – Part 5: Adding the Spry menu

Sample files:

• check_magazine_pt5_complete.zip (ZIP, 303K)

Learn about remote sites

After you create a website, the next step is to publish it by uploading the files to a remote folder. A remote folder is where you store your files for testing, production, collaboration, and publication (depending on your environment). Dreamweaver refers to this folder as your remote site.

Before you can proceed, you must have access to a remote web server—such as your ISP's server, a server owned by the client you're working for, an intranet server within your company, or an Internet Information Services (IIS) server on a Windows computer. If you don't have access to such a server, contact your ISP, your client, or your system administrator.

Alternatively, you can run a web server such as IIS (Windows) or Apache (Macintosh) on your local computer. For more information about setting up a web server on your local computer, see Web server basics and the neighboring topics in Dreamweaver Help.

The procedures described in this tutorial work best if your remote root folder is empty. If your remote site already contains files, create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.

You also need to have a local site defined before you proceed. For more information, see Part 1 of this tutorial series, Setting up your site and project files.

Note: For more information about Dreamweaver sites, see Setting up a Dreamweaver site in Dreamweaver Help.

Define a remote folder

Now you'll set up a remote folder so that you can publish your web pages. The remote folder often has the same name as the local folder because your remote site is usually an exact duplicate of your local site. That is, the files and subfolders that you post to your remote folder are copies of the files and subfolders that you create locally.

1. On your remote server, create an empty folder inside the web root folder for the server. (The web root folder will differ for everyone; many ISPs use something like public_html or pub_html; in my case, the web root is jmvarese.com).

2. Name the new empty folder check_magazine (the same name as your local root folder).

   Note: If Dreamweaver is your only means of access to the remote server, you won't be able to create an empty folder on the remote server until you've completed the remote settings in Dreamweaver and established a connection. If that's the case, you can define your host directory as your remote folder, and create a new remote folder after you've established a connection with the server. Continue with the instructions in this tutorial until you're connected to a remote server. After you've established a connection, you can use the Dreamweaver Files panel to create a new remote folder.

   When you establish a connection with a remote server, the Files panel displays all of the files on the remote server in Remote view (just as it displays all of the local files on your computer in Local view). To display Remote view, select Remote view from the pop-up menu at the top of the Files panel, or click Expand/Collapse in the Files panel toolbar. When you click Expand/Collapse, the Files panel displays both Local view and Remote view simultaneously.

   To add an empty folder in Remote view, first display Remote view using one of the methods described earlier. (If you don't see your connection initially, click the Refresh button in the Files panel toolbar.) After you see that you're connected to your web server, right-click (Windows) or Control-click (Macintosh) in Remote view and select New Folder (see Figure 1).

   

   Figure 1. Create a new folder.

   For more information, see Managing files and folders in Dreamweaver Help.

3. In Dreamweaver, select Site > Manage Sites.

4. In the Manage Sites dialog box, select the Check Magazine site.

   If you did not define the Check Magazine site, create a local folder for the site before you proceed. For more information, see Part 1 of this tutorial series, Setting up your site and project files.

5. Click Edit.
6. In the Site Definition dialog box, click the Advanced tab if the Advanced settings aren't showing.
7. Select Remote Info from the Category list on the left.

8. Select an Access option.

   The most common methods for connecting to a server on the Internet are FTP and SFTP; the most common method for connecting to a server on your intranet, or to your local computer if you're using that as a web server, is Local/Network. If you aren't sure what to select, ask the server's system administrator.

   For more information, click Help in the dialog box.

9. If you select FTP, use the following options:

   • Enter the host name of the server (for example, ftp.yourdomain.com).

   • In the Host directory text box, enter the path on the server from the FTP root folder to the remote site's root folder (check_magazine).

     This is the one that often trips people up the most. The path might be public_html/check_magazine/, or simply check_magazine/, or something else. It's best to get advice from your system administrator on this one.

     In many cases, this text box should be left blank.

   • Enter your user name and password in the appropriate text boxes.
   • If your server supports SFTP, select the Use Secure FTP (SFTP) option.
   • Click Test to test your connection.

   If the connection is unsuccessful, consult your system administrator.

   For more information, click Help in the dialog box.

10. If you selected Local/Network, click the folder icon next to the text box and browse to the remote site's root folder.

    For more information, click Help in the dialog box.

11. Click OK.

    Dreamweaver creates a connection to the remote folder.

12. Click Done to close the Manage Sites dialog box.

Upload your local files

After you set up your local and remote folders, you can upload your files from your local folder to the web server. To make your pages publicly accessible, you must upload them even if the web server is running on your local computer.

1. In the Files panel (Window > Files), select the site's local root folder (check_magzine).

   Note: In the Files panel, the local root folder actually begins with "Site – Check Magazine" because that's the name of the site. If you hover the cursor over that title, Dreamweaver shows you the full path to the check_magazine folder.

2. Click the Put Files (up arrow) icon in the Files panel toolbar (see Figure 2).

   

   Figure 2. Put files on the server.

3. When Dreamweaver asks if you want to put the entire site, click OK.

   Dreamweaver copies all of the files to the remote folder you defined in the previous section. This operation may take some time, as Dreamweaver must upload all of the files in the site.

   Note: Normally, you only select the local root folder and upload the entire site the first time you upload. Afterwards, you can upload only the files you've changed. Sometimes, however, if I've changed many files, or can't remember which files I've changed (bad habit), I'll upload the entire site again just to make sure all of the files on the remote server are current and in synch with my local files.

4. Open your remote site in a browser to make sure all of the files uploaded correctly.

(Optional) Troubleshoot the remote folder setup

A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote folder and how to resolve them:

• The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.

  If you encounter problems with FTP access, ask your local system administrator for help.

• For the Dreamweaver FTP implementation, you must connect to the remote system's root folder. (In many applications, you can connect to any remote directory, and then navigate through the remote file system to find the directory you want.)

  Be sure that you indicate the remote system's root folder as the host directory. If you have problems connecting, and you've specified the host directory using a single slash (/), you might need to specify a relative path from the directory you are connecting to and the remote root folder. For example, if the remote root folder is a higher-level directory, you may need to use ../../ to specify the host directory.

• File and folder names that contain spaces and special characters often cause problems when transferred to a remote site.
• Use underscores in place of spaces, and avoid special characters in file and folder names wherever possible—colons (:), slashes (/), periods (.), and apostrophes (') in file or folder names can cause problems. Special characters in file or folder names sometimes may also prevent Dreamweaver from creating a site map.
• Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server's disk with another folder elsewhere.
• For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory; however, if you can connect to one part of the server but not to another, there may be an alias discrepancy.

• If you encounter an error message such as "cannot put file," your remote folder may be out of space. For more information, look at the FTP log.

  Note: In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Site > Advanced > FTP Log. For more information, see the extensive tech note that specifically provides FTP troubleshooting information on the Adobe website.

Creating your first website with Dreameaver CS4

For your reference, here are all the parts in this series:

Part 1: Setting up your site and project files
Part 2: Creating the page layout
Part 3: Adding content to pages
Part 4: Adding the main image text
Part 5: Adding the Spry menu
Part 6: Publishing your site

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

About the author