Where are we?

You’ve created a design. Layout, look and feel, and so on. The first step to implementing the design is to create some directories that your files will live in.

This lesson’s goals

By the end of this lesson, you should:

• Know what a site directory tree is.

• Know how to put files where Webers expect them to be.

• Know how to create a directory tree that supports reuse.

What is a site directory tree?

Let’s review some basic concepts we covered earlier.

A Web server is a computer running a normal operating system (OS) like Linux, Windows, or Mac OS. All of these OSs organize files into directories, subdirectories, subsubdirectories, and so on.

One directory is the root of your Web site. For example, on a Unix machine, your site might be in the directory:

/users/j/jones/public_html

On a Windows PC, your site might be in:

C:\xampp\htdocs

These are the root directories of your site. They are often called Web root to distinguish them from the OS’s file system root. C:\xampp\htdocs is a Web root. C:\ is a file system root.

URLs map into this structure. For example, suppose there’s a Linux server running Apache. It has a table, telling it which URLs map into which directories. Like this:

URL	Web root
@plurbtakinot.org@	@/users/j/jones/public_html@
@jumpforjackson.com@	@/users/b/bartillit/public_html@
@hogariffic.com@	@/users/x/xyralog/public_html@

Figure 1. Mapping URLs to file paths.

It actually works a little differently, but this is good enough for our purposes.

Suppose a browser requests this URL from Apache:

http://hogariffic.com/products/extras/poking-sticks.html

Apache will ask the OS for the file:

/users/x/xyralog/public_html/products/extras/poking-sticks.html

Apache will send this file back to the browser.

A site directory tree is the entire directory tree that is under the site root.

Designing the tree

We’re trying to make a site that is easy to maintain. That means two things:

• Put files where Webers expect them to be

• Support reuse

Put files where Webers expect them to be

Someone has to be able to find your files so they can maintain them. That person could be your future self. I guarantee that eventually you will forget where you put things. You’ll have to find them all over again.

Put your files where a Weber would expect them to be, to make them easier to find.

The most obvious way to organize files is the make the directories match the sections of your site.

Let’s use the dog nutrition site again, as an example. Imagine that you’re hired to create the site.

The site has the sections like Basics, Articles, Products, and Blog. The nav bar reflects this:

Figure 2. Nav bar

The blogs section has the current blog, and an archive. The products are grouped into food, treats, supplements, and other.

You might start with this directory tree:

Figure 3. Initial site directory tree

Notice that all of the directory names are 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.

For simplicity, make all file names lowercase.

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 would have an index.html file. This will be the “home page” for that section of the site.

Figure 4. Section home pages

Why add all of these index.html files?

Site users sometimes edit URLs in their browser’s address bar. I do this all the time. Say I’m reading about an interesting food supplement at this page:

FIGURE

Figure 5. URL of a page about a food supplement

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

FIGURE

Figure 6. Editing the URL

I’m hoping that this will give me a list of products. It might, but only if the file http://dognutrition.bz/products/supplements/index.html 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.

Support reuse

“Reuse” means having only one copy of a file. For example, to make the nav bar in Figure 2, 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 the fie, that all pages use.

Why?

Well, it would obviously 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 need 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. Part of the Weber’s job is to create sites that are cheap to maintain.

Library directories

You can put shared files into library directories.

Figure 5. 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. It might be put in the directory /products/library.

Creating the tree

Time to create your site directory tree. Open up your development site, and – as Nike says – just do it!

Summary

In this lesson, you learned:

• What a site directory tree is.

• How to put files where Webers expect them to be.

• How to create a directory tree that supports reuse.

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.