Organizing Your Web Site


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.

GEEKSPEAK

A Web site is a collection of related HTML documents, plus all the images, movies, and other files that appear on the site's pages.


GEEKSPEAK

A local folder or local root folder is the folder on your personal computer that holds all the files for a Web site.


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.

GEEKSPEAK

The structure of a Web site is the way in which you organize the files into categories and subcategories.


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:

  • My Hobbies

  • My Favorite Books

  • My Favorite Jokes

  • About Me

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.

GEEKSPEAK

The level of a folder is its position in the hierarchy of your site structure. The folders for the main categories belong at the top levelthat is, directly inside the local root folder.


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:

  • hobbies

  • books

  • jokes

  • about_me (or aboutme, or just about)

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:

  • hobbies

    • sports

    • movies

    • computers

    • games

  • books

  • jokes

  • about_me

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:

  • hobbies

    • sports

    • movies

    • computers

    • games

  • books

  • jokes

  • about_me

  • images

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.

FAQ

So the images folder is for images only?

Many designers store other files besides images in the images folder. This is perfectly fine. The images folder is definitely a convenient place to keep movies, sound effects, and the like. Just don't put HTML pages in it. Make sure those go into the proper category folders.


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:

  • Local root folder

    • Home page document (index.htm)

    • Main category folder

      • Main category document

      • Subcategory folder

        • Subcategory document

    • Image folder

      • Image files

      • Movie files

      • Sound files

      • Other files

TOOL KIT

Standard HTML Document Template

This Toolkit gives the standard structure of an HTML document. Use it as a template for testing the examples in this book or creating your own Web pages from scratch.

 <html>   <head>     <title>Title goes here</title>     <!-- Meta tags go here -->     <!-- JavaScripts go here, between script tags -->     <!-- Style sheets go here, between style tags -->   </head>   <body>     <!-- The body of the page goes here. -->   </body> </html> 




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net