ID01: Interaction Design & Development 01

Icon

Thom Meredith

FTP

Setting up your files

A typical folder structure is like the following:

file structureFiles can be viewed at id01.thommeredith.com/studentwork

When building a web site, it’s essential to create a folder/directory structure on your computer (or flash drive) to accommodate your whole project. Inside this master directory structure (which has more than will be on the web server) there will be folders for master art files (e.g. photoshop docs), flash files, sound files, etc. In addition, there will be a folder that only contains the html files, GIF files, and JPEG files that are part of the web pages–this sub-folder will mirror the structure on the web server. You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server.

Photoshop files should never be uploaded to the server although I may request this in order to grade your work.

To start the project, create a new folder, and then create several new folders inside this main project folder. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

Uploading your site using FTP

Using the site window in Dreamweaver

Define a site in Dreamweaver

ftp local

  1. With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
  2. Select NEW > SITE
  3. With LOCAL INFO selected

    Set SITE NAME to “website” or “mysite”(or whatever you want)

    Set LOCAL ROOT FOLDER to where you the main folder where your files are located. Do Not set this folder to the folder where your web files are. If you do, you will be unable to move the entire folder. Always set the Local Root Folder to a folder above your project folder at least.

    Leave HTTP ADDRESS blank

    Set the CACHE to be checked

    ftp remote

  4. With REMOTE INFO selected

    Set SERVER ACCESS to: FTP

    Set FTP HOST to: thommeredith.com

    Set HOST DIRECTORY to: (leave blank)

    Set LOGIN to: id01@thommeredith.com

    Set PASSWORD to: SEE BOARD (this is case-sensitive)

    Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: "Use Passive FTP" located under the password field.

  5. Select OK to complete the creation of a new site
  6. CONNECT to the server using the “plug” icon

ftp expand

The window will probably appear collapsed on the bottom right hand side of the stage. Click on the expand/collapse window button (It’s circled in the image below). This will expand the window so there is a left and right pane.

Select the CONNECT button to access your FTP account (at the top-left of the site window, to the right of the site name — it looks like a plug. In the image above it the the first icon in the same row as the expand/collapse icon.

The left side of the SITE window (remote) will show all files currently on the server in the directory. The right side of the SITE window (local) will show your files on your computer.

On the server, any files you want available on the web should go in the [web] directory.

Files can be viewed at:

id01.thommeredith.com/studentwork/ + your firstname_lastname + folder

Once you’ve connected to the server, you can upload your site files (or download files from the server to your local computer).

Uploading Files

To upload files to the server, click on the folder or file you want to upload, and drag it from the right side to the left side. Or you can select “put” by right clicking to upload the files.

In most cases, you will upload the complete web site as a directory. Drag this folder to the left hand side, and drop it when you’ve placed it over the top folder .

Dropping the folder on the/export folder ensures that you place the folder in the correct place. If you drop a file or folder onto another folder, the file will be placed inside of that folder rather than replacing it. Note that dragging the top level folder from the right side of the window will not copy that folder, it will only copy the files inside the top level folder. This is why it’s important to set the Local Root Folder to “D:\” so that you have access to all folders on the disk.

If you want to move a single file up to the server, then drag this file and drop it onto the correct directory on the server (or you can drop it on top of an old version of the same file).

When you move HTML files in the Site Files window, Dreamweaver will ask if you want to Include Dependent Files? If you say yes, Dreamweaver will look in your HTML files, and copy any images in referenced in those files, even if you don’t select them for the copy. In general, if you are copying a folder of a complete site, there is no reason to copy dependent files, since you are already copying all the files needed for the site (because they are all in the folder). But if you are copying an individual HTML file, then in general it’s good to answer yes to including dependent files, to make sure that any images in that page are properly uploaded.

Uploading existing files on the server:

When you upload and replace files that are already on the server, there are several issues you should note:

  • Be sure you save the new file before you upload it, so your changes get to the server.
  • Dreamweaver (and other FTP programs) will not ask you if you want to replace them. It will just write over the old files. Be sure you want to replace the files on the server before you upload the new files.
  • After you upload the new versions of the files, you should check to make sure they are on the server. View the web pages on the Internet at their real web address, and don’t rely on the Dreamweaver preview of the local file. If the web page is already open on the browser, use the Reload/Refresh button to view the page.
  • Sometimes when you replace a file and view it, you don’t see the changes. This is because the browser has cached the file, and you are looking at an old copy stored on the local computer, not the new one on the server. To fix this, try using the Reload/Refresh button. If this doesn’t work, hold the shift key and press Reload/Refresh to force a newer version. If that doesn’t work, you will have to clear the cache. This is usually in Edit>Preferences>Advanced>Cache. If this doesn’t work, you probably didn’t upload the file correctly, or to the right location.
Rules for the Shared server

Please be courteous to your fellow students by following the guidelines below:

  • Be sure to disconnect from the server when you are done uploading files (especially when we are in the class room since we can’t all connect to the server at one time.)
  • Be careful not to overwrite a fellow student’s files or the index file for the shared site.
  • All student files are considered private and you cannot view or download other student’s files from the server without permission.
Video Demonstrations

I have created an instructional video for you. You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). You’ll need QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

Additional Resources

I suggest you read the following information from Dreamweaver CS3: Hands on Training by Garrick Chow.