Dreamweaver Article

Creating your first website – Part 5: Publishing your website

Welcome to the fifth 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 will need to install the following software:

Dreamweaver CS3

• Try
• Buy

Prerequisite knowledge:

• Part 1: Setting up your site and project files
• Part 2: Creating the page layout
• Part 3: Adding content to pages
• Part 4: Formatting your page with CSS

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 Installing a local web server 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.

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. Name the new empty folder cafe_townsend (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. Creating a new folder

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

2. In Dreamweaver, select Site > Manage Sites.

3. In the Manage Sites dialog box, select the Cafe Townsend site.

   If you did not define the Cafe Townsend 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.

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

7. 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.

8. If you select FTP, enter 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 (cafe_townsend). If you're not sure of the path, consult your system administrator. 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.

9. 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.

10. Click OK.

    Dreamweaver creates a connection to the remote folder.

11. 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 (cafe_townsend).

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

   

   Figure 2. Putting 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.

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.

About the author