This step-by-step tutorial is aimed at aspiring (and new) web designers or web content publishers who would like to understand one of the most important technologies in use on the World Wide Web: File Transfer Protocol, or FTP.

Why Should I Learn FTP?

Practical knowledge of FTP is essential for just about anyone who wants to update actual HTML pages or other files, which will reside on a web server. Typical users of FTP include web designers, Flash designers, webmasters, system administrators, new media Public Relations professionals, and especially web programmers. Even though there are an abundance of tools to update website content without doing any programming (such as WordPress), you will probably need to transfer some files using FTP software at some point, whether it be to install plug-ins, transferring files to another person or organization, editing templates, or doing actual hand-coding of web pages (which I highly recommend! )

How Long Will it Take To Learn It?

Good news – not long at all! I suggest you spend at least good ten minutes on the basic concepts of FTP. Then, if you don’t have one already, you will need to get an FTP client (suggestions below), which you can download from the Web. Next, assuming that you (or your organization) has some type of web server account to transfer your files to, you will be able to upload or download in no time! (Now would be a good time to make a cup of that favorite home or office beverage.) OK, let’s get started.

What is FTP?

FTP stands for File Transfer Protocol. Basically it is a method we employ to “transfer”, or send and receive, files between computers. It can be used between any two computers that have FTP software running on them, whether its your laptop and someone’s desktop in the same room, or your laptop and a web server in another part of the world. The word protocol is used because the computers have to have some standard of doing this communication; they both need to follow the same protocol to make it happen.

FTP has been the standard for transferring files to a web server for many years now, and we expect it to continue to be in the future.

What do I need to Use It?

To use FTP you need some type of software, referred to as an FTP client, which will allow you to send files to other computers, as well as receive files from other computers. If you are working with web sites, the computers that you will send files to will most likely be called ‘web servers.’

You will also need a web hosting account. (Tip: If you are looking for dependable and affordable web hosting, you might want to try Omnis or Blue Host. Generally any hosting account will come with FTP instructions on how to connect to a particular web server (just make sure you are able to contact support when you need them).

So again, you need an FTP client, which you need to install on your computer. There are many FTP clients out there, ranging from the free (or shareware), to commercial full-fledged web design software. Below is a short list of FTP clients that I find useful for both Mac and PC, and links to download them – you can skip this section if you already have an FTP client on your computer.

FTP Clients (Short List) – Macintosh

Free

Cyberduck – Cyberduck is a free, no-nonsense, open source FTP client that is very easy to use. It allows you to maintain ‘bookmarks’, or favorites that you can connect to with one-click, once you have the details setup. Cyberduck is overall a fairly responsive application and a great value (free!). However, Cyberduck will not really help you to manage your websites locally or integrate into your design workflow. If you plan on designing and/or managing several sites, such as client sites or in-house sites for your organization, you will probably want to look at a commercial app. But all in all, it is worth taking the time to download, as it gets the job done and doesn’t take up much memory or processor resources.

Commercial

Fetch – Fetch has more features than Cyberduck that you may find appealing down the road, such as support for archived files (.zip, etc), as well as the ability to edit text files right on the server (this can be very handy). It also integrates very well with OS X by including a dashboard widget and Automator and AppleScript support. Fetch is definitely ‘battle-tested’ in the world of FTP and is a good value (only $25 at time of writing). If you use FTP a good deal, you won’t go wrong with Fetch.

Dreamweaver CS3 – If you are a web designer or producer who needs a complete solution for web publishing, including visual editing of HTML files, drag-and-drop menus, multiple language support, CSS editing, automatic code writing, and ease of use with Photoshop, Flash, Illustrator, Quick Time, and other file formats, you will want to take a good look at Dreamweaver CS3. One big feature of CS3 is the “Manage Sites” functionality which allows you to synchronize local and remote files (the ones on the server), so that you can update all your changes with one click, eliminating much of the repetitive nature of web site updates. This really helps with large projects.

Yes there are many software applications out there which do one thing (such as FTP) well for a lot cheaper – however in Dreamweaver you are basically getting a visual ‘web publishing studio’ in one package that can write all that messy HTML, CSS, and JavaScript for you, and allows you to automatically transfer your files to the server for easy updating. It definitely takes away a lot of the messiness of web site design. Although Dreamweaver is not only an FTP program, as a site management application it really has become a standard in the design and interactive media world.

FTP Clients (Short List) – Windows

Free or Shareware

SmartFTP – This is one of my favorite Windows “no-nonsense” FTP clients. SmartFTP is free for non-commercial use, and under $40 for a single-user license. Like Fetch and Dreamweaver, Smart FTP has remote editing of files, so that you do not have to download them to your computer to make changes — you can do them right on the server, saving you time. It also features a synchronization tool which will allow you to maintain consistency between your local and remote website, giving you some basic site management, along with some drag’n'drop support. All in all, Smart FTP is a good value and a solid Windows program.

Core FTP – Core FTP comes in a free (LE) version or a Pro version. The LE version is certainly adequate for most basic FTP needs, and it features basic site management, and the ability to drag-n-drop files between the client and server. It is also fairly no-frills and will give you what you need to get started.

Cute FTP – Cute FTP has a few more features than the average lite FTP client — it features a fairly user-friendly HTML editor so that you can edit your files without having to use an external program, as well as folder synchronization and compression. It is a step up for the other Windows FTP clients mentioned here, and a popular choice in this price range.

Dreamweaver CS3 – Still my favorite site management and web publishing tool for both Windows and Mac. See my review above for more information about Dreamweaver.

Gather Your Web Server Information

Now that you have your FTP client, you need to connect to the web server. To do this, you will need 3 pieces of information. These are:

The FTP host name

The FTP host name is usually a domain name or address that you will connect to. Some examples could be: yoursite.com, ftp.yoursite.com, or www.yourorganization.edu. The format of the name really depends on what your web host (or your system administrator) decided upon.

The FTP username

The FTP username will be the name on the user account that you will use to connect to the server. This username will go hand-in-hand with the FTP password (next section). You will have a unique username for your web server that you (or several people) will use to connect and transfer files to and from the server.

The FTP password

Your password will be given to you by your system admin or your web host, and you will need it whenever you connect to the server.

Note: A good FTP editor will allow you to save the host, username, and password for your web sites, so that you will not have to remember them when you want to connect.

Connect to the Server

Although each of the FTP clients may have slightly different menu items and appearances, the process of connecting to a web server via FTP will basically be the same. You will need to enter your hostname, username, and password to connect. Below are examples of FTP windows. Usually you will need to find a button or menu item that is labeled ‘Connect’, ‘Connect to Site’, ‘Connect to Server’, ‘New Connection’, ‘New site’, or something similar. You will eventually get a window which asks for your information. (In Dreamweaver, you can go do ‘Manage Sites’) and choose ‘New’)

Here are some visual examples of connecting via FTP:

The ‘Open Connection’ Button in Cyberduck — click this and you will the be able to enter your site details.

After you click ‘Open Connection’ in Cyberduck, you will be prompted for your FTP details. Easy!

In Smart FTP, the site details are always visible in the top bar. Convenient, huh?

In Dreamweaver, use the ‘Site’ pull-down option from the main menu and choose either “New Site” or “Manage Sites”

In Dreamweaver, if you choose ‘New Site’, you will get a wizard which will take you through the process of adding site details (Screen 2 of wizard shown)
This is also known as ‘Basic’ view.

(Dreamweaver) If you click the ‘advanced’ tab , you will be able to add your remote info directly. (Actually saves time compared to the basic method)

Other Options: Port, Host Directory, Passive FTP, SFTP

When you are connecting to a server, you will often see other options, such as:

Port Number — This will generally be 21 by default, unless your web host tells you otherwise. You can generally leave this field alone.

Host Directory — This is used if you want to immediately ‘jump’ to a certain directory on your web server, and is very useful for bookmarking. You will use this feature once you get used to FTP.

Passive FTP — This will need to be used for many FTP servers, so you may need to check it to get a connection. You can ask your host if it needs to be checked.

SFTP — This means ‘Secure FTP’ and is a more secure method of sending information over the Internet than standard FTP. Unless your host tell you otherwise, you generally won’t need to use it.

Transferring Files

The last (and perhaps most important) practical knowledge you will need is to be able to transfer files between your computer and the remote computer. If you are using a good FTP client or site management tool, you will hopefully be able to ‘drag’n'drop’ files between the two. If you are transferring files that will be viewed on the web in a browser, you will generally need to transfer your files to a ‘public’ directory. This could be named anything (check with your web host or system admin), but is generally called ‘public_html’, ‘public’, ‘www’, or even ‘Sites’.

I just connected to a web server using Cyberduck. Now I need to navigate into the “public_html” file to place my web files there, so they can be seen on the World Wide Web.

Using GET

Once you get this far, you should be able to copy (download) files to your computer (usually by right-clicking on a file, or dragging it to your desktop, finder, or local view in your FTP program). This is called a ‘GET’ operation in FTP parlance and is standard in FTP clients. You will often see a menu item called ‘get’ file or ‘download’ file.

Using PUT

You can usually upload by finding a ‘put’ command, or dragging into a folder on the server. If you have a good FTP client, it should be fairly intuitive.

Changing Directory

You will often need to change directories on the remote server. This will generally done in a similar fashion to browsing your local computer, by clicking (or double clicking) on folders, and using the ‘Up a directory’ method to get back to where you were.

Creating Directories

You will often need to create a directory on your web server. This is often done by going to File->New Directory, or perhaps right clicking on an item and choosing ‘New Directory,’ depending on your FTP program.

Permissions

Note that you will need correct permission to create files, upload, edit, and delete files and folders on a webserver. Depending on your access level, you should be able to change permissions to some (or all) of the web server files. This is often done by right-clicking (ctrl-click Mac) on a folder or file and choosing a ’set permissions’ option from a menu. It also often appears under the ‘File’ or ‘Edit’ main menu items. In a ‘permissions’ window, you will need to tell your server who can access that file. A permission window will often show numbers like ‘755′ or ‘555′, or contain ‘read’, ‘write’, and ‘execute’ checkboxes.

You generally do not need to change permissions unless instructed to. For example, if you are installing Word Press plug-ins, you will often need to change permissions on a directory to ‘777′, making it ‘writeable’. In this case you would check all of the boxes to make that specific directory writeable. You also often have the option of making a change to a folder ‘recursive’, which means that all folders and files inside that folder, will be affected by the change in a ‘recursive’ loop. (Neato huh?)

Below are some examples of permissions windows in Dreamweaver and Cyberduck:

Setting permissions on a file in Dreamweaver, done with a right-click (ctrl-click Mac)

…In Cyberduck right-click (ctrl-click Mac) and choose ‘Info’ to get to setting permissions on a file or folder.

Typical “Permissions” window.

Conclusion

Well that’s it for this FTP tutorial. Hopefully you came out unscathed, or better yet, totally ‘geeked’ about FTP! Whoo hoo! You made it. I bet your coffee didn’t get even get cold.

As you can see, using FTP is not very difficult once you know the basics. You should be able to handle most, if not all, of your FTP operations with ease from this point onward. As you get used to your FTP client, you will begin to eliminate repetitive tasks, which will save you a lot of development time in the long run. Lotsa Luck!

Cheers,

Jay

Links:

About FTP (Wikipedia)
Dreamweaver CS3

Tags: CS3, Dreamweaver, FTP, Mac, OS X, permissions, Tutorial, Windows, XP