Tutorial: Uploading Web Sites Using WS_FTP LE

Introduction

This tutorial is written specifically for students in the Contra Costa ROP Web Design Program. 

In order to publish web sites and projects on the Internet you must establish an account with a web host. Hosting will be provided for you while you are enrolled in the ROP Technology Center Program. You can sign up for the "Student" hosting package at http://www.robinshosting.com.

Depending on the web host that you are using, your individual settings for WS_FTP LE may be different from those demonstrated on this tutorial. 

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

What is FTP and WS_FTP LE?

The method used to upload and download files is called FTP or File Transfer Protocol. There are several different FTP programs available. Some WYSIWYG HTML editors like Dreamweaver and FrontPage have FTP software built into the program, others do not. A popular program used to FTP files is called WS_FTP. There is a free version of this program called WS_FTP LE which we will be using in this tutorial. You can download WS_FTP LE at home by visiting ftp_planet.com and completing the eligibility form (indicate that you are a student).

Starting WS_FTP LE

In the classroom, click Start > Programs > Web Design > WS_FTP > WS_FTP95LE to start WS_FTP.

Setting up WS_FTP

When you start WS_FTP LE the Session Properties dialog box will display. This window is used to configure WS_FTP to connect to the remote server. Click the New button to create your own profile. 

In the Profile Name box type Yourname Account

In the Host Name/Address box type username.robinshosting.com (this is the address of the FTP server we are using for classroom projects. This address will change depending upon the web host that you are using.  If you are using a different web host, you must go to their web site and look for information on FTP or uploading your files. This information is usually found in your welcome email).

In the Host Type drop down box select Automatic detect

In the User ID box type your username

In the Password box type your password

Click the Startup tab

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.

You should setup your FTP program to connect to the public_html directory automatically. You do this by specifying the Initial Remote Site Folder on the Startup tab of the WS_FTP Session Properties. In the Initial Remote Site Folder box type public_html.

When you type public_html in the Initial Remote Site Folder Startup Properties WS_FTP will first connect to your 'home directory' then it will automatically open the public_html folder each time you connect to your site. By completing the Initial Remote Site Folder options you will not have to open the public_html folder every time you want to upload your files.

Note: You may create subfolders inside the public_html folder so that your site will be organized.

Connecting to robinshosting.com

After you setup the session properties, click OK.

WS_FTP will now attempt to connect to the robinshosting.com server. The bottom of the WS_FTP screen will show the progress of your connection. Note the 226 Transfer complete message below. This indicates that you are connected to the remote server.

Making the Connection

Click the image to the right to see a larger view of the WS_FTP LE screen 

After the connection has been made the WS_FTP upload screen will display.

The left-hand side of the screen displays files that are stored on the hard drive of your machine or local system.

The right hand side of the screen displays files that are stored on the server or remote system. The public_html folder on the remote site will contain several folders as displayed in the image below. These files are necessary server files and should not be deleted.

The index.htm Page in public_html

When a user types in a domain name (http://www.robinshosting.com) a request is made to the server; the server then looks for a file called index.htm or index.html in the public_html directory and displays the index file in the user's browser. If the server doesn't find the index.htm file it displays a list of the files and folders that are stored in the public_html directory or a 404 file not found error page instead. If you would like to see an example of this visit http://robin.robinshosting.com/noindex/.

When you start to build your web site you will need to create and upload the index.htm file that the server uses to your public_html directory. This HTML/XHTML file acts as the welcome or home page of your site and should include links to the other pages in your site. The index page is important because it will display when someone types in your domain name. For example, if you look at my sample site @ http://robin.robinshosting.com you will see a page that links to the other sections of my site, this is my index page stored in the public_html folder of my site.

You will probably end up having multiple index.htm files in your site. Why you ask? Because when a user makes a request to a folder on your site the server opens the folder and looks for an index file. Again, if it can't find an index file it displays a list of the folder contents or a 404 file not found error. In the image to the right you can see the folder structure of this site; notice that each folder contains its own index file. The index.htm file prevents the display of the folder contents list and acts as the welcome page to section of a section of your site.

Creating Folders on the Remote Server (Organizing Your Site)

You can create a sub-folders on the remote server by clicking the Mkdir button on the right-hand side of the screen.

When the Input box displays, type the desired folder name and click OK.

Double click the newly created folder on the right-hand side of the screen to open the folder.

Before you upload files you want to be sure that you have the correct folder open on the remote side of WS_FTP.

You can learn more about managing site folders by watching the Flash Movie, Manage Files Online.

Use your scroll bar on the Local System side (left side) of the screen to scroll down to the bottom of the files and folders list. 

Double click on drive F: (or whatever drive your site files are stored on)

Navigate to the folder where your site is located.

If you have multiple folders in your site click the first folder you want to upload and hold down the Shift key on your keyboard and click on the last file or folder that you want to upload

You will notice two arrows in the middle of the WS_FTP screen. The arrow that points to the left is used to download files from the remote site to your local hard drive.  The arrow pointing to the right is used to upload files from your local hard drive to the remote web site. Be careful to when using these buttons (especially the download button), you don't want to accidently overwrite a file on the local machine.

Click the upload button to upload your files to the remote server.  At the Do you want to transfer the selected directory structures prompt, click OK.  Your files will uploaded to the server.  (Depending upon the number of files and the file size, this process may take some time. You can work on other assignments while your files are uploading.)

You can view the progress of your transfer in the lower portion of the WS_FTP dialog box.  Once your files have completed uploading, the Remote System side of the WS_FTP dialog box should look identical to the Local System side.

Note:  After 15 minutes of inactivity (no uploading or downloading) you will be disconnected from the remote server.  To reconnect, click the Close button in the lower left-hand corner of the WS_FTP window and then click the Connect button to re-display the session properties dialog box. Click OK to reconnect to the server.

Checking Your Site

Type your URL in the browser's address bar and press enter. Your site should display. If you uploaded a folder If you did not create an index.htm page a list of folders will display.

Helpful Tutorials

Read a Beginner's Guide to FTP and complete the WS_FTP LE Interactive Transfer Tutorial before you proceed.