Directory tree

Where are we?

You know how to make a framework. Information architecture, layout, look and feel. Now let’s see how to use the framework to make a complete site.

This lesson’s goals

By the end of this lesson, you should know how to make a directory tree that makes your site easy to work with.

What is a directory tree?

A site’s directory tree shows how the directories and files in the site are organized. For example:

Part of a site's directory tree

Figure 1. Part of a site’s directory tree

The words in bold are directories. The others are files. Put different files in different directories to keep things organized.

I’ll show you how I organize files on my sites. Many other Webers do the same.

Follow the information architecture

First, match the site’s information architecture.

Say you were making a site about dog nutrition. You work with the owner on the information architecture. You come up with this structure map:

Structure map

Figure 2. Structure map

This is how the owner will think of the site. This is how users will think of the site. Even the nav bar will be based on this structure:

Nav bar

Figure 3. Nav bar

It makes sense to make the directory tree match this structure as well.

Make a directory for each part of the tree:

Initial site directory tree

Figure 4. Initial site directory tree

Remember: lowercase only!

File names are case-sensitive in Unix. So the directory DogDir is not the same as the directory dogdir.

This can be a problem when creating links. Suppose you called a directory DogDir and put the file kennel.html in it. Then you linked to this page:

<p>See our <a href="dogDir/kennel.html">best kennel</a>.</p>

Users who click on the link would get a 404 (file not found) error. There is no such file as dogDir/kennel.html. It’s called DogDir/kennel.html.

Argh! It’ll drive you crazy.

Make all file names lowercase. Then you’ll never have a problem.

You can separate words in file names. Do not use spaces for this. I suggest using dashes (-), like best-kennel-ever.html. You can use underscores (_) as well, like best_kennel_ever.html. Google prefers dashes, though. So use dashes to make your site as Googly as possible.

Each directory should have an index.html file. This will be the “home page” for that section of the site.

Section home pages

Figure 5. Section home pages

Why add all of these index.html files?

Users sometimes edit URLs in their browser’s address bar. I do this now and then. Say I’m reading about an interesting food supplement at this page:


Figure 5. URL

I might want to look at other products. I edit the URL, deleting the page name:

Editing the URL

Figure 6. Editing the URL

I’m hoping that this will give me a list of products. It might, but only if the file exists.

When I’m designing a site, I add an index.html to all of the content directories. You should do the same on your sites.

Reusing files

“Reuse” means having only one copy of a file. An example. Here’s that nav bar again:

Nav bar

Figure 3 (again). Nav bar

You need some images for the buttons. For example, you might have a file called home.png for the Home button.

The nav bar is going to be on every page in the site. You could have a copy of home.png for every page. So if the site has 50 pages, you would have 50 copies of home.png.

It’s better to have just one copy of home.png, that all pages use.


It would save disk space. But disk space is cheap. There is a more important reason. Disk space is cheap, but Weber time is not.

Suppose you wanted to change the look and feel of the site, moving to a color scheme based on tints and shades of blue. That means changing home.png to the new color scheme.

If there were 50 copies of home.png, you would have to find every one, and replace it with the new file. That takes time. And it would be easy to make mistakes.

But if there was just one copy of home.png that every page used, you would replace that one file, and every page would be changed. W00f!

The way you set up your site today will affect how productive you can be in the future.

Library directories

You can put shared files into library directories.

Library directories

Figure 7. Library directories

The directory /library is for files shared across the entire site. Examples would be CSS files, JavaScript files, and images.

Some files are shared only within sections of a site. Suppose the pages in the products section had an image with “Add to shopping cart.” The image add-to-cart.png would only be used on product pages, but it’s used on every product page. I’d put in the directory /products/library.

Showing the tree

An easy way to show a tree is with the HTML <ul> and <li> tags:

  <li>index.html - site root</li>

It looks like this, with CoreDogs fonts and colors:

  • index.html - site root
  • contact.html
  • credit.html
  • directory1/
    • file.ext
    • file.ext
    • file.ext
  • directory2/
    • file.ext
    • directory3/
      • file.ext
      • file.ext
      • file.ext
    • file.ext

Exercise: Dog parks - Directory tree

Make a directory tree for the dog parks site.

Create a Web page for the tree, and upload it to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?


In this lesson, you learned:

  • What a site directory tree is.
  • Make a tree that matches your site’s information architecture.
  • Use library directories for shared files.

What now?

Now you have places to put your files. Time to make a template for your Web pages. The template will use the directory tree.


How to...