Creating your first website – Part 6: Publishing your website

Welcome to the final part of this six-part 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 web server on a remote computer that holds copies of your local files. Users access the remote site when they view your pages in a browser.

This tutorial presents a very broad example of connecting to a remote server. It contains troubleshooting hints, but much depends on how your remote server is configured. When in doubt, consult your hosting company's help desk or your system administrator.

After you create a website, the next step is to publish it by uploading the files to a remote server. This is where you store your files for testing, production, collaboration, and publication (depending on your environment).

Before you can proceed, you must have access to a remote web server—such as a hosting company's server, a server owned by the client you're working for, or an intranet server within your company. Also, some Internet Service Providers (ISPs) provide access to free web space as part of your contract for internet connection. If you don't have access to such a server, contact your ISP, your client, your system administrator, or one of the many hosting companies that provide web hosting packages. Some hosting packages are free, but they usually insert advertisements into your site. An advertisement-free package can cost as little as a few dollars per month.

Alternatively, you can run a testing server on your local computer or network. For more information, see Setting up a local testing server in Dreamweaver CS5 (the process is the same in both CS5 and CS6). The rest of this article is focused on connecting to a remote server using FTP (file transfer protocol) or SFTP (secure file transfer protocol).

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 Set up a local version of your site in Dreamweaver Help.

Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the Internet. So, index.html in your check_cs6 folder becomes the front page of your remote site. If you already have a live website that you don't want to overwrite, use your site's control panel to create a folder named check_cs6 where you can upload the Check Magazine files.

1. In Dreamweaver, choose Site > Manage Sites.
2. 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.
3. Click the Edit icon at the bottom left of the Manage Sites dialog box (see Figure 1).

4. In the Site Setup dialog box, click Servers to open the panel where you add your server definitions (see Figure 2).

Dreamweaver CS6 lets you set up multiple server definitions for both remote and testing servers. However, only one of each type can be active at any given time.

5. Click the Plus button at the bottom left of the panel to add the remote server definition. This opens a new panel for you to enter the server details (see Figure 3).

6. For the Server Name, type a descriptive name for the server. This is used internally by Dreamweaver to identify the server, so you can choose any name you like. For example, you might want to create a definition for a server where you upload files for a client's approval and define a different server for the live site. If you have only the one server, type Remote Server.
7. For the Connect Using setting, select the method you want to use to connect to the server.
   The most common methods for connecting to a server on the Internet are FTP, SFTP, and FTP over SSL/TLS (also known as FTPS). Because the initials of each method are so similar, it’s easy to confuse them. If you aren't sure which to select, ask your hosting company or the server system administrator. Your choice will be limited by whatever your remote server supports.
8. The following options apply to FTP and SFTP:
   • Type the server's FTP address (for example, type ftp.yourdomain.com).
   • Type your user name and password in the appropriate text boxes.
   • Click Test to test your connection.
   
   If the connection is unsuccessful, verify that you have the correct username and password. Passwords are usually case sensitive, so make sure that Caps Lock is not turned on. If you selected SFTP, try FTP instead. If that doesn't solve the problem, see the (Optional) Troubleshooting the remote server setup section later in this article.

Note: For details of how to set up FTP over SSL/TLS (FTPS), see the FTPS instructions in Connect to a remote server in Dreamweaver Help.

9. The value that you need to specify as the Root Directory is where many people go wrong, and it's difficult to give precise instructions because hosting companies and server administrators have different policies.

   As I noted earlier, Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the Internet. The value of Root Directory should be the path you need to enter after logging into your server to get to the folder where you want to install index.html.

• If you want the Check Magazine home page to be the front page of your website, then this needs to be the path to the remote server's site root. On some servers, this is public_html. Others might use www, wwwroot, or even nothing at all. On my remote server, it needs to be /home/username/public_html. If in doubt, ask your hosting company or server administrator.
• If you want the Check Magazine home page to be in a subfolder named check_cs6, you need to type the path to that folder. For example, on my server, it would be /home/username/public_html/check_cs6.

10. The Web URL text box should contain the URL for the folder that you defined as the Root Directory. For example, http://www.example.com/ or http://www.example.com/check_cs6/ (see Figure 4). Dreamweaver might have tried to guess the correct value, but it's only a guess. Do not accept the default value without checking it carefully.

11. Click the Advanced button at the top of the panel to display the advanced options (see Figure 5).

12. In most circumstances, you should leave these options at their default settings.
    • Maintain Synchronization Information is selected by default. This keeps track of when the files on your remote server were last updated, and enables you to use the Site Synchronization feature (see Synchronizing files in Dreamweaver Help).
    • Automatically Upload Files To The Server On Save should rarely, if ever, be used because it overwrites your live files. If you make a mistake, it's immediately displayed on your remote site for all the world to see.
    • Enable File Check-Out is for use in a team environment. It allows only one person at a time to edit a page (see Checking in and checking out files in Dreamweaver Help).
13. Click Save to register your server definition. This returns you to the Servers panel of the Site Setup dialog box, where your server definition is now listed (see Figure 6).

Dreamweaver selects the Remote checkbox automatically.

The icons at the bottom of the Servers panel let you add another server, or to delete, edit, or make a copy of the selected server definition. Making a copy is useful if you need to change only a few details to connect to a different server.

14. Click Save to close the Site Setup dialog box, and then click Done to close the Manage Sites dialog box.

You can now upload your files from your local folder to the remote web server to make your pages publicly accessible. However, you don’t need to upload the two text files in the assets folder nor the original comp for the site design. You can exclude them from being uploaded by cloaking them in your Dreamweaver site.
Note: To learn more about cloaking, see Cloaking files and folders in your Dreamweaver site in Dreamweaver Help.

1. In the Files panel, right-click the assets folder, and select Cloaking > Cloak from the context menu. Dreamweaver puts a red diagonal line through the folder and file icons to indicate that they won’t be uploaded.
2. Expand the images folder, right-click check_comp.jpg, and select Cloaking > Cloak from the context menu. Dreamweaver puts a red diagonal line through the file icon (see Figure 7).

3. Select the site's local root folder (check_cs6) at the top of the Files panel.

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 pointer over that title, Dreamweaver shows you the full path to the check_cs6 folder.

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

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

Dreamweaver connects to the remote server you just defined, and copies all of the files, except the cloaked ones, to the remote folder.
Note: Normally, you select the local root folder and upload the entire site only the first time you upload. Afterwards, you can upload only the files you've changed.

6. Open your remote site in a browser to make sure all of the files uploaded correctly. Congratulations, you have a site online!

(Optional) Troubleshooting the remote server 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 server 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.
• 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 specify the remote system's root folder (or the check_cs6 subfolder) as the Root 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—colons (:), slashes (/), periods (.), and apostrophes (') are not permitted in file or folder names.
• Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Mac) 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 choosing Site > Advanced > FTP Log. For more information, see the extensive tech note on FTP troubleshooting on the Adobe website.

You’ve created your first website and published it!  Now you’re likely eager to create your second website—one with your own content and style—using Dreamweaver.  As you do, you may want to keep this list of additional resources at hand:

• Dreamweaver Developer Center
• Understanding cascading style sheets
• HTML5 and CSS3 in Dreamweaver
• Building your first dynamic website