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:
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:
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:
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:
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
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
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.
Figure 5. Section home pages
Why add all of these
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:
Figure 6. Editing the URL
I’m hoping that this will give me a list of products. It might, but only if the file
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.
“Reuse” means having only one copy of a file. An example. Here’s that nav bar again:
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
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.
You can put shared files into library directories.
Figure 7. Library directories
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
Showing the tree
An easy way to show a tree is with the HTML
<ul> <li>index.html - site root</li> <li>contact.html</li> <li>credit.html</li> <li>directory1/ <ul> <li>file.ext</li> <li>file.ext</li> <li>file.ext</li> </ul> </li> <li>directory2/ <ul> <li>file.ext</li> <li>directory3/ <ul> <li>file.ext</li> <li>file.ext</li> <li>file.ext</li> </ul> </li> <li>file.ext</li> </ul> </li> </ul>
It looks like this, with CoreDogs fonts and colors:
- index.html - site root
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.)
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.
Now you have places to put your files. Time to make a template for your Web pages. The template will use the directory tree.