CIS86 2007 Fall Leaves Logo
CIS86 2007 Crash Courses

The topics on this page are: About the Student Web SitesCrash Course in FireFTPCrash Course in Basic Site Mechanics (table)Crash Course in FTPCrash Course in GoLive.

Site Mechanics: Working with Your Web Server

About Using the Student Web Sites

You will each have been given the login information for your individual Web sites. Using any FTP client (FireFTP or WS-FTP or whatever), connect to the server www.monolithdesign.com, using the login ID and password you were given.

To view your HTML files over the Web, go to this URL: http://www.monolithdesign.com/students/studentXX/index.html
where XX is the ID that was assigned with your student Web site account.

Placing your Web site files on this site will allow you to access your material from any computer with Internet access. Whenever you want to work on your files, simply download the relevant file or files to the computer you are using. After you edit the file using Codetch, save it and upload the new version to the Web site again. This way, the Web site will always have the master copy of your site.

If you are working with an existing site, then it is not necessary to use the student site – as long as I am able to see your work. Similarly, if you are developing a site for a business, then you might want to treat the files on your own computer as the master version, and simply upload copies to the student Web site for review. Whichever approach you use: pay attention to where your files are! Many FTP clients have a synchronize feature that compares the file modification times for you. If your tool has this feature, use it! Save your time and eyesight for more important things than comparing file dates.

Crash Course in FireFTP (FTP program embedded in FireFox)

The FireFTP extension provides an easy-to-use graphical browser for copying files between computers, using a program (protocol, really) called FTP. This solution works on both PCs and Macs

To install FireFTP, start FireFox, then choose Tools > Extensions. When the window pops up, click on the bottom right hand corner: Get More Extensions. Type "FireFTP" (no quotes) into the search bar, and FireFTP should be the first entry. Click on it to go to that page, then choose INSTALL NOW. Once it installs, restart FireFox, and it will be available.

Run it in FireFox with Tools > FireFTP, or click on the FireFTP icon in the Firefox toolbar. It pops up a window (or it can be another tab). Near the top left, there's a button called Manage Accounts. Choose New Account, then fill in the settings in the box, and click OK:

   - Account Name is just a label for you to run it again.
   - Host: www.monolithdesign.com
   - Login: the studentxx ID you were assigned
   - Password: the password you were assigned.

You should then be able to select the connection by the Account Name you gave it, then click Connect. That should open up the right side pane to show the files on the Web server, and the left pane will be the files on your computer's hard drive.

Create a directory on your hard drive to use for projects, then guide the left-hand side of FireFTP to that location. Then connect on the right side to the Web site.... Once connected, you can select a file on either side, and then use the arrows in the middle to transfer it to the other side. So, for the purposes of argument, you connect on both sides to the proper location. Then select the file on the right side (the Web server), then click the left arrow to copy it to the left side. Edit that file on the left side -- the one on your hard drive. Save it, then use FireFTP to select it on the left side, then use the right arrow in the middle to copy it back to the Web server.

At that point, your file should be accessible via URL.

The main thing is to remember that the left side always shows files on your local computer, and the right side is always the external Web server. Then it's just a matter of keeping tabs on which version of the same file is the most recent as you move it back and forth....

Basic Web Site Mechanics using GoLive and FireFox/FireFTP/Codetch (here's a nicely printable PDF of this table)

Task

FireFTP / Codetch

GoLive

Pros and Cons of These Methods

PROS: Cross-platform. Free. Can use on multiple computers. Doesn’t require a “site” to be defined on local hard drive.
CONS: Harder to synchronize changes at site level; gives folder-oriented view.

PROS: Cross-platform. Easy to synchronize.
CONS: Licensed only to certain machines. Really old version. Must (?) build a site first.

Set up Local Environment.
(Not needed after first time.)

Make a folder on the local hard drive of your computer – this will be the root folder of your Web site.

Make a folder on the local hard drive of your computer – this will be the root folder of your Web site.

     

(Not needed after first time.)

Run Firefox, then choose Tools > FireFTP. In this 2-pane window, files on your hard drive are in the left pane. Select the root folder you created for your site.

Run GoLive: File > New Site > Choose Single User > Blank Site > [give the site a name] > Specify the New Site's Location > Browse > [select a place on the local hard drive to store your site] > FinishPlease note: GoLive creates a blank file called index.html – don’t be confused when you see it!

   

Alternate Method: Run GoLive: File > New Site > Choose Single User > Import from Server > FTP > [enter FTP server info; Browse to select home page] > Site Name & Location [specify the location on local hard drive] > Finish.  Skip the next step, “Set up Connection to Web Server”, since it’s done by this step.

     

Set up Connection to Web Server.
(Not needed after first time.)

Click Manage Accounts > New.  The Account Name is your name for your site; Host is www.monolithdesign.com, login is “studentxx”, where “xx” is your number, and password is whatever was assigned to your student login. Click OK.

Site > Settings > FTP & WebDAV Server. Under FTP Server, click Edit Server. Click the NEW ITEM icon (next to Trashcan, in the middle on the right). Enter your site info, and click OK.

     

Browse Files on Web Server

www.MonolithDesign.com/students/studentxx

www.MonolithDesign.com/students/studentxx

     

Connect to Web Server.

Select your site name in the dropdown list by Manage Accounts, and click Connect. This will show a listing of the Web server’s files in FireFTP’s right pane.

Site > FTP Server > Connect: this will open up the right pane showing the files on the external server.

 

Alternate Method: connect without settings being stored with Manage Accounts > Quick Connect. Fill in connection info for your student ID, and click OK. If you work on multiple computers, use this to avoid leaving your settings behind.

 

Copy Files from Server to Local

Select one or more files in the right pane. Click the LEFT ARROW in the middle, which will copy selected files to your local hard drive. Make sure you’ve selected the correct location on your hard drive first!

Select the files you want, then right-click and choose Download.
OR
Select the files you want, then drag them to the other pane.

     

Edit Files on Local Hard Drive

Open Codetch (HTML Editor) with Tools > Codetch > Float. Double-click a file in left pane to edit it in the right pane. Save your changes when done. You can view a file in Code or Design views, or both at once.

Double-click on the file in left pane. Select view from: Layout / Source / Preview, or some combination.

     

Update Server Files from Local

Select the files you’ve edited on your local hard drive. Click the RIGHT ARROW to copy the files back to the server, overwriting whatever was already on the server. Be careful when doing this – check timestamps!!!

Site > FTP Server > Upload Modified Items
OR
Select the files you’ve changed locally, and drag them to the right pane.

 

Alternate Method: in upper-right corner, click on Advanced > Directory Diff. This will compare the left and right side folders, and will give you a list of the differences – with buttons to synchronize the two folders. Click the checkmarks on individual files to change what happens when you click a Download/Upload button.

 

Crash Course in FTP

FTP (File Transfer Protocol) is both a protocol and a program for transferring files between computers. There are many graphical FTP programs, including FireFTP in FireFox. It is also possible to use FTP from a command-line interface, which is available on Windows, Macs (which are Unix machines), and Linux and Unix machines. Here are the primary commands:

Crash Course in GoLive

Here are some common tasks in GoLive, mostly having to do with how you upload and download files.

CIS86 2007 HomeLinksContact DFF • Site by Monolith Design