skip to page content

Job Aid:
Basic file management for all Ouray users

On this page you will find the following sections:

 

The importance of good file management

One of the most valuable concepts for new Web developers to understand is the importance of good file management. Have you ever worked for hours on a document and saved it to your hard drive, only to return at a later date and be unable to find it? You know you saved it, but what did you name that thing again??? You tell yourself that you really should be more organized when it comes to saving your work as you spend precious time hunting down the file. Sound familiar?

Organization is a big part of Web design. It is the key to maintaining link integrity and your sanity as you work on even the smallest Web site. Most Web sites contain far too many files to manage in a single folder. Typically at the very minimum, you will have a folder named "images" to hold your graphics and images, and the rest of your html files will reside in what we call the root directory. The root directory of a Website is the folder that contains all the folders and files for the Web site.

As Web sites get larger, the organization gets more complex. For a large instructional Web site, you might have a folder for each lesson with separate folders inside for each topic and its associated files. See http://www.netmechanic.com/news/vol5/design_no8.htm for additional information on this.

It's important to decide how you're going to organize your Website before you start making your Web pages. Once you start linking multiple pages together, it's easy to break the links if you move your pages to a different location (and it can be a lot of work to fix!).

to the top

  
Index files

The index (or default) file in a folder is the file that will appear in a Web browser when the path to a folder is given. In other words, when you type in http://ouray.cudenver.edu/~ourayusername/ you are actually viewing a page with a full file path of http://ouray.cudenver.edu/~ourayusername/index.html

The reason this is possible, is because the server administrator has set up parameters on the server to allow it. The administrator has set a priority that if an index.html page is present, it will be the page to show when only the folder path is targeted.

The Web server administrator can set that index file name to be a variety of things. It could be set to:

  • index.htm or index.html
  • default.htm or default.html
  • home.htm or home.html
  • welcome.htm or welcome.html

It could also be set to allow an index file with an .asp or a .php extension. The point is that this option is set by the server administrator. You as a designer have to contact that administrator to find out what the index file name should be. Many times, the administrator will allow all of these options, but set a priority list. In other words, if an index.html file is present, it takes priority over a default.html file. However, if an index.html file is not present, the default.html file will become the index file.

Each folder of a Website can have it's own index file. You should make a practice of creating an index file for each of the folders which contain content in your Web site.

The importance of having an index file is extremely apparent when looking at the following screen shot. This is what you will see in your Web browser when trying to access a folder on the Ouray Web server that does not have an index file.

The browser display of a directory with no index file

to the top

  
File naming conventions

Just as important as the organization of files and folders is the topic of file and folder naming. Way back in the early days of the Internet, files and folders were typically named according to DOS naming conventions, eight letter maximum file names and a three letter file extension (such as assign1.htm). Mac and Unix computers have always recognized long file names, but DOS systems did not. With the advent of the Windows operating system, the DOS file naming conventions have fallen by the wayside, and more and more people use long file names when naming their files (such as assignment1.html).

Here are some good tips on file naming conventions:

  • Use proper suffixes for your files (.html, .htm, .gif etc)
  • Never use the blank space character within file or folder names (the space character sometimes translates to "%20" in the HMTL language, but at other times can cause broken links). An underscore fills the character space while still giving the "perception" of a space.
  • Avoid special characters such as ? ' % # / : ; , etc. The slash, /, is always used to delineate folder structures. Limit file names to letters, numbers, underscores, hyphens and periods.
  • File names are case sensitive in HTML. Make every effort to use lowercase filenames.
  • Keep filenames short but meaningful.
  • Self-imposed conventions. In other words develop a naming scheme for your site and stick to it.

One of the things you may not always have control over as a Web developer is the choice of server that will host your Web site. Because of the different platforms that can act as Web servers (Mac, UNIX, Windows), it is important to understand how your file naming habits can be an issue. For instance, consider the following screen shot of files residing on a UNIX Web server. These files could not reside side by side on a Windows computer, but on a UNIX server files names are case sensitive. Can you imagine the problems that this might cause?

Index files

to the top

  
The basics of working with files and folders

If you're already comfortable with how to create, rename, copy, move and delete folders on your computer and how to create, rename, copy, move, and delete files, great!

If this is all new to you (or you need a refresher) and you're working on PC with Windows XP, this lesson may be helpful before moving on. If you're using a Mac with OS X, try this lesson (a free chapter provided by PeachPit Press).

 

You may return to the Ouray Job Aids home page to view other job aids or navigate to other parts of our Web site using the navigation buttons at the top of the page.