While a Web page is a single HTML document, a Web site is a collection of related HTML documents, plus all the extra files, such as images and movies, that appear on the Web pages. A common question for beginning Web designers is how to organize and store the various files that make up the site. The answer is pretty straightforward: Just use the folders of your computer's operating system. Most Web designers begin a new project by creating a folder that will hold all the site's files. This is called the local folder or local root folder. Think of it as a convenience: It's handy to keep all the site files in one place. You don't want them scattered across your hard drive. But having a local root folder is important for technical reasons, too. When you upload your site to the Web, you want the locations of the files on your personal computer to match their locations on the Web server as closely as possible. If this kind of parallel organization doesn't exist, you may have trouble getting the links among the various pages to work correctly. So make sure you start off on the right foot and create a local root folder.
Inside the local root folder, there's additional organization that creates the structure of the site. Be careful herestructure in this sense isn't the same as the structure of an HTML document. The structure of a Web site is the way in which you organize the files into categories and subcategories. It doesn't have anything to do with HTML tags or marking up a text file.
Use folders and subfolders to create your site's structure. To do the job right, you need a little think time up front. Imagine to the best of your ability the categories of information that will appear on your site. If you're building a personal site, your categories might look like this:
The general rule of thumb states that you should create a folder inside your local root folder for each of the main categories of your site. In the preceding example, you need four folders inside the local root folder: one for each of the four categories. Don't put the folders one inside the other. Instead, set up your structure so that, when you double-click the local root folder to open it, you see all four folders insideon the same level, to borrow the technical jargon.
What should you name your folders? Anything will do, but make the names short (eight characters or less, if possible). Use the underscore (_) in place of a spacebar, and stick to the standard alphanumeric characters. That means no special typographical symbols or punctuation marks. For the structure of your home site, you might try folder names like this:
Now, watch what happens. When you begin creating the pages for your site, you can guess pretty easily where they belong. You put the pages about your hobbies in the hobbies folder. You put the pages about your favorite jokes in the jokes folder. It's as simple as that. If you need to divide a main category into subcategories, no problem. Create subfolders:
The extra structure gives you a more precise filing system. Now you know exactly where all your pages about movies go, for example. You need one more folder for your sitethe images folder:
As you can see, it goes at the top level of your structure, directly inside the local root folder. Use the images folder to store all the graphics for the various pages of your site.
It may be tempting to store the image files in the respective folders of the pages that use the images. At first glance, this strategy seems to make sense. You can certainly set up your site like that, but you probably shouldn't. Once your Web site starts growing, you don't want to have to try to remember which folder contains which particular image. Better just to keep all the graphics in the same folder. This way, you'll always know where to look to find an image file. Finally, you need a home page for your site, the one that loads when the visitor types your Web address into the browser. The home page's HTML document goes inside the local root folder, next to the folders for your main categories. Don't put the home page in its own folder. It should be at the same level as the category folders. Also, make sure your home page has the filename index.htm. If you give it another name, the browser might not understand that it's supposed to be the home page. To sum up, here's what a typical site structure looks like:
|