Using a File Transfer Protocol program - Michigan State University

FTP
1 of 17 9/1/2009 3:19 PM
Using a File Transfer Protocol program
Purpose
Understanding how to use an FTP program to upload files to a remote server is critical for
building and maintaining a web site.
In this tutorial sheet you will learn how to:
1.
2.
3.
4.
5.
6.
7.
Create a folder structure to manage your web site
Download and install an FTP program
Create a New FTP Site
Upload a file
Download a file
Create a folder (directory)
Delete a file
Software Needed
Filezilla or Fetch
Prerequisite Knowledge and Skills
Before beginning this tutorial please make sure that you have completed the file management
tutorial.
Overview
Creating a Folder Structure to Manage Your site and Downloading and Installing an
FTP program
Inputting Your FTP Settings
Adding, Deleting Files and Creating New Folders on Your Remote Site
[back to top]
Lesson 1: Creating a Folder Structure to Manage Your Site and
Downloading and Installing an FTP program
What is file-transfer-protocol?
Remember from the Internet Tutorials from SUNY you learned that FTP is both a program and
a method for transferring files from one computer to another over the Internet. Specifically
files are transferred between a server and a client (your computer). The most common use of
FTP is to download files, such as in downloading MP3 files. It is also used to upload files to
be viewable on the web and is essential to anyone creating or maintaining a website. To
transfer files using FTP you can use a browser or a software program like Filezilla, also
referred to as an FTP client. Some web page editors like NVU or Dreamweaver have an FTP
client built in. You must have a live Internet connection to transfer files between two
computers over the Internet. An FTP address looks a lot like an HTTP address except it uses
the prefix ftp:// instead of http://. So the FTP address for your AFS space will look like
ftp://afs.msu.edu.
What is AFS space?
AFS stands for "Andrew File System". It is "the central MSU network file storage system." It
creates a home directory for faculty, staff, and students. Each registered student, faculty, and
staff gets 100 MB of space. In your AFS space you automatically have a folder called "web".
Any file or folder in this folder can be accessed by anyone with a web browser. (They would

FTP
2 of 17 9/1/2009 3:19 PM
have to know the location and name of the file.) If you want to use your AFS space to backup
important files you should upload them to a folder outside of your web folder. For more
information about your AFS space visit the ACNS help desk at http://techbase.msu.edu
/viewpathfinder.asp?id=144.
How does FTP Work?
When you create a Web page on your computer you will use a program like NVU or
Dreamweaver. NVU and Dreamweaver are Web page editor programs. Your computer can
also be referred to as the client. So, you’ve got NVU and you’re using it to create a Web
page. Now when you create a Web page with an image it really creates a window for the
image within that Web page. It’s important to realize this because the image is a separate
file. When you insert the image you’re not putting it into the Web page. You’re only creating
the space to view it. So the image is still a separate file. So if you look closely at the picture
on the screen of the computer you see it’s a Web page with an image in it. But it’s referencing
two separate files: the Web page file and the image file.
Now once you’re done creating your page using a program like NVU, you’re going to need to
transfer it to a server. People cannot access your computer to see the page. They need to
access the server. In order to transfer the files you’re going to need a program like FileZilla.
So in this picture, because FileZilla is the method for moving the files, the truck represents
FileZilla. Now FileZilla’s going to transfer the files to the server which you will see on the right
hand side of the screen. Once the files have been transferred you now have a copy on the
server. The server in your case would be your AFS space at Michigan State University, your
space on the network. Now it’s important to note that it doesn’t actually move the files. What it
does is creates copies of files onto the server. You will also have copies if you notice on your
computer still.

FTP
3 of 17 9/1/2009 3:19 PM
Now this is an important thing to understand because if for some reason you make a change
on your computer to your Web page you have to re-upload it, so the server has the most
recent copy of your Web page. You will also notice that both the web page file and image file
have been transferred to the server. All files associated with your Web page must be
uploaded to the server in order for them to be visible on the web. If you only upload the web
page without the image file than you will see the web page with a placeholder for where the
image should be but no image.
Once the file has been uploaded, people can use Web browsers, such as FireFox, which you
will notice on the left hand side, Internet Explorer in the middle, and Safari which is used on
Mac on the right side. But if you look closely at this picture the arrow pointing to your
computer to view the files has a big red X on it. That’s because people cannot access
anything on your computer when they use a browser to view your files.
But what the browsers do is they send a request to the server for the information for your
page, and they put in the URL address and then the server sends the information back about
your Web page, all the information needed to display it through their browser. And that’s why
you need to FTP because people cannot use their browsers to view your Web page on your
computer. You have to create copies using FTP to upload those copies onto the server. Again
if any changes are made you have to update whatever files on the server because that’s what
people are going see when they are going to use their Web browsers to view your Web page.

FTP
4 of 17 9/1/2009 3:19 PM
Why do I need to create multiple folders for my web site files?
As your site grows you are going to have more and more files. If your files are not organized
into folders it will be hard manage your site and find files. Also, over time you may forget
where you saved a lot of your files so a good- more intuitive- site organization will make it
easier to locate your files at a later date.
Most web pages have links to other pages or even images that are displayed within the page.
Browsers need to know where to find those files. Therefore, it is important to have the correct
directory path (This was covered in the file management tutorial- it is the location of the files).
When uploading files to your AFS space you will be uploading them to a web folder in order
for them to be viewable on the Internet. You can only have one index file at the top of this
directory. Since each website begins with an index file you will need to create a folder for
each of your websites in order for them to include an index file. For example when you create
your WebQuest you will create a WebQuest folder and the first page of the site can be
named index.htm or index.html if it is stored in the WebQuest folder. But you cannot just
create your WebQuest right within the web folder of your AFS space because you will already
have the first page of your main web site which is index.htm. So therefore the Webquest
cannot also be called index.htm because it will replace the first page of your main web site.
So in that case you will need to have the first page of your main website directly under the
web folder. Then within another folder called WebQuest you will have the first page of your
WebQuest titled index.htm as well as any images that go along with that WebQuest.

FTP
5 of 17 9/1/2009 3:19 PM
Here is the hard part --- you will be creating the web pages on your computer then uploading
the files to the server (Your AFS space). During the process of creating a page on your
computer, when you enter the directory path (location) of an image, it has to be in the same
location on the server. This means that the directory structure (folder structure) for your web
files on the server (your AFS space) needs to be exactly the same as your directory structure
for your web folders and files on your computer. How your files are organized on the web
server should mirror how your folders are organized on your computer. If the file structure for
your files on the server are not EXACTLY the same as the structure on your computer it is
likely that your links on your web page to other files such as images will be broken. Thus, in
the case of a broken image link, people will not be able to see the image in your web page.
Instead they will see the image of a broken image icon.
For example, if you had two web pages in your site (an index page and a resume page) and
within those pages you were displaying a background image and a picture of the Eiffel Tower
in Windows Explorer your file structure will look like the following:

FTP
6 of 17 9/1/2009 3:19 PM
then if you open your images folder you will see:
On Filezilla, if you are looking at your web folder, you will see:
If I can FTP files using a Web Page Editor program, why do I need to download a
separate program just to transfer files?
Web page editors like Dreamweaver will automatically recreate your file structure when you
upload a file- meaning you don't have to select the destination. In NVU, the free program we
are using for this course, you will need to know where to upload your files to-- meaning you
will have to select the destination. However, even with a program like Dreamweaver
sometimes you may have to use a separate program to upload a file if you are troubleshooting
a problem. Also, you may want to upload a file to a folder outside of your web folder. When

FTP
7 of 17 9/1/2009 3:19 PM
you set up a site in a web page editor, you set it to connect directly to the web folder.
Activity 1: Creating a Site Folder
In this activity you are going to be creating a folder that will store all of your web site files.
Within that folder you are going to create another folder (subdirectory) that will store all the
images and supporting files for that web site. For directions on how to create a folder with a
Mac see the Mac File Management Tutorial.
1. Click on the Start button , then click on My Documents.
2. If you already created a folder for your MSU classes you are welcome to chose that folder
to store your web folder in or you can just put your web folder in your My Documents area.
There are two ways you can create a new folder. You can go File > New Folder and that will
create a new folder within the folder that you selected. Or you can right click in the white
space and choose New > Folder.

FTP
8 of 17 9/1/2009 3:19 PM
3. Either way it will create a new folder and the default name will be New Folder and it will be
highlighted in blue . The blue highlighting shows that text is editable so you will be able to type
in a new name of your folder. We are going to call it web.
4. We are also going to create another folder within your web folder that will store all the
supporting images and files. Double click on the web folder to open it up. Right click and
choose New > Folder.
5. Name the new folder artifacts. This is where you will store any images or supporting files
(Word docs, PowerPoints, etc) that belong with your web site.
Activity 2: Downloading and Installing an FTP program

FTP
9 of 17 9/1/2009 3:19 PM
[back to top]
Filezilla is a free, open source FTP program. It is available for both the Windows as well as
Mac operating systems. This tutorial will show you how to download it for Windows but the
steps should be very similar for downloading it for Mac.
1.
2.
Go to http://filezilla-project.org.
Click on the Download Filezilla Client button.
3.
You will now be on a page that lists latest version of Filezilla for the different operating
systems. Since I am using a Windows machine I'm going to be seleting the first link
under Windows. If you are using a Mac you would select the appropriate link for your
system under the title Mac OS X.
4.
After clicking on the appropriate link for your system you will get a screen similar to
this. Click on Save File to save it to your computer. Note: In this tutorial we are using
the Firefox browser, your steps for downloading may be slightly different depending on
which browser you are using.

FTP
10 of 17 9/1/2009 3:19 PM
5.
6.
Firefox automatically downloads it to the Desktop and opens a Downloads window. If
you double click on the Filezilla.exe file in the Download list it will begin the installation
process. You may get a message regarding executable files and if you are sure you
want to launch it. Click OK. You may also get a Security Warning saying the Publisher
could not be verified. Click on Run to begin the installation.
As part of the installation process you will have to go through a series of windows. The
first window prompts you to agree to their software agreement. It is always important
that you read any License Agreement of anything that you will be downloading on to
your computer or that you are going to be using such as Web 2.0 programs. Once you
have read through the agreement, click on the I Agree button.
7.
In the Installation Options window select Only for me if you are NOTthe only one
that uses your computer. Otherwise you can select Anyone who uses this computer.

FTP
11 of 17 9/1/2009 3:19 PM
To Rename your site
you could also click once
on New FTP site and
then click on the
Rename button.
[back to top]
8.
The next window asks you to choose components you want to install. This is the default
setup so you should not need to change anything on this page. Click Next to continue.
9.
The next window will ask you where you want to save the program files. Save them in
the default location which should be C:\Program Files\Filezilla\ Click Next to continue.

FTP
12 of 17 9/1/2009 3:19 PM
10.
The next screen will prompt you to select a Start Menu Folder. Use the default
(Filezilla) and Click Install to continue.
11.
You will see a new window that will show you the progress of the installation. Once all
the files have been installed on your computer it will say completed and you can click
on the Finish button. To access Filezilla go to Start> All Programs> Filezilla FTP
Client> Filezilla.

FTP
13 of 17 9/1/2009 3:19 PM
Site address bar, the remote site now has the web at the end. Copy the address by
highlighting it and right clicking and choosing Copy.
9.
Go back to the Site Manager by going to File > Site Manager. Your site MSU should
be selected. Click on the Advanced tab and where it says Default Remote Directory,
click into the box, then right click and choose Paste.

FTP
14 of 17 9/1/2009 3:19 PM
11.
Now you will see the path to your web folder in the box under Defaul local directory.
When you click on the Connect button you will see the Filezilla window with your web
folder for your computer on the left hand side and teh web folder for your AFS space
on the right hand side.
You can change your
settings so that when
you login you are
automatically in your
web folder. Go to File>

FTP
15 of 17 9/1/2009 3:19 PM
Site Manager. Click on
your MSU FTP Site.
Then click on the
Advanced button. In the
field for the default local
directory put \web\.
2.
In a previous tutorial you should have set it up so that the web folder is already open in
your Local Folder View. If it is not, locate and open your web folder using the Local
Tree pane. If you have located the folder correctly your Local Site path should be
C:\Documents and Settings\user\My Documents\web\. You should be able to see
your artifacts folder in the Local Folder View pane.
3.
4.
5.
Before completing this activity you need to download this sample file here by right
clicking on the link and selecting Save Link As. Save the document in your web folder
in the artifacts folder on your computer. (This is just Microsoft's Resume template).
Don't worry you are going to delete this file in a later activity.
Go back to Filezilla and double click on your artifacts folder in your local folder view on
the left hand side. You should now see the Resume.doc in your artifacts folder. Click
on the web folder in the Local Tree Pane to have your artifacts folder show back up in
the Local Folder View.
Now you are going to upload your artifacts folder to your AFS space. There are two
ways you can upload the folder. You can click on it and drag it over to the Remote
Folder View pane. Or right click on your artifacts folder and from the menu select
Upload.

FTP
16 of 17 9/1/2009 3:19 PM
6. You should now see an artifacts folder in your Remote Folder View pane.
You can actually move
up a directory by clicking
on the folder at the top
of the Local/Remote
Folder View. The folder
will look like this
7.
If you double click on your artifacts folder in your Remote Folder View pane you should
now see the Resume.doc file.
Activity 3: Create a New Folder (Directory)
In the previous two activities you learned how to download and upload files. FTP programs
can do more than just create a copy one file and save it to another computer. In this activity
you will use an FTP program to create a new Folder (directory) on a remote computer.
Please make sure that you repeat steps 1-4 and create a folder called WebQuest. You will
need this if you plan on using the WebQuest template.
1.
Make sure that you are viewing the contents of your web folder in the Remote Folder
View.
2.
Right click in the center of the Remote Folder pane and select Create Directory.
3.
A new window to enter the directory name will pop up. Replace the highlighted text
"New directory" with the word temp and click OK. This will give your new folder the
name temp. You will delete it in the next exercise.
4.
Your new temp folder should appear in your Remote Folder View.

FTP
17 of 17 9/1/2009 3:19 PM
Activity 4: Delete a File
In the previous activities you have added folders and files that you don't need in your AFS
space. You created these to learn how to upload/download files and folders and how to
create a new folder on the remote server. In this activity you are going to delete the
unnecessary files such as the Resume.doc file from both your computer and the server. You
will also delete the temp folder.
YOU MUST BE VERY CAREFUL WHEN DELETING FILES. If you delete the wrong file on
the server you WILL NOT be able to get it back. If you delete a folder, then you will also
delete all of its contents.
1.
Right click on the temp folder in your Remote Folder View. In the new pop-up menu
select Delete. A pop up message may ask if you really want to delete the folder. Click
the Yes button.
2.
3.
In the same pane, the Remote Folder View, open the artifacts folder and right click
on the Resume.doc file and select delete.
In the Local Folder View, make sure that you are in the web folder. The Local Site path
in the Local Tree View should now read: C:\Documents and Settings\user\My
Documents\web\.
4.
Right click on the file Resume.doc in the Local Folder View and select delete.
5.
Remember you have two copies of the Resume.doc file on your computer. There is
another one in your artifacts folder. In the Local Folder View double click on the
artifacts folder to open it. Delete the Resume.doc file in that folder.
[back to top]
Wrap Up:
Go Back to Tutorials
http://edutech.msu.edu
/online/811.htm
In this tutorial you learned how to connect to a remote server using an FTP program. You also
learned how to upload files to the server and download files from the server. You will need
these skills in order to make your web site available for others to view through their browsers.