File Management for Web Sites

Laying out your folders and files when designing a website can confuse some new designers, so lets look at what needs to be done.

As a web designer, you’ll probably do some work in Photoshop, Freehand, or Flash that you’ll need to store somewhere.  You don’t want your source files online wasting web space, so you’ll want to keep them separate from your website folders.

Also, keeping your HTML files and your GIF and JPEG files in the same folder might seem fine for a small website, it soon becomes annoying, so you should keep your images in a separate folder in your web layout. Don’t forget though, your index.html file needs to be in the ‘root’ folder of your uploads, so don’t go putting this file in a separate folder too.

All in all, this is the way I like to lay out my folders:

First I create a folder which all my source files go in, then under that I create the folder the website will actually exist.  Images and other media go in the images folder.  You could create separate folders for flash SWF files or videos, or go a step further and break it down to images for layout and images for content.

If you use Dreamweaver, I hope you haven’t dismissed its Site Management features - I’ve saved many an hour of manual code editing this way.  Say you’ve just realised you’ve miss-named an image file.  Just rename the file using the site window, and Dreamweaver tell you which html files reference to this file, and would you like to change them so they correctly point to the renamed file.  It’s the same if you move a file somewhere else in your site too.

Dreamweaver’s FTP features are great too, especially the Synchronise option.  Selecting Site > Synchronise checks all the files on the web server against your local copy and will only upload changed and new files, (or only download changed files).