Planning Your Web Site's Structure

Experts judge embroidery not just by the pretty picture a needle worker creates, but by the jumble of threadsneat or not so neat?that can be seen on the back side of the stitching. Similarly, building and maintaining a Web site can either generate a tangled mess of files and folders or an easy-to-follow collection. What you end up with can make your life as a Web maven a whole lot easier.

No doubt you'll use smart page design and well-placed hyperlinks (as in Figure 10-7) to make your site easy to understand and navigate for viewers. Behind the scenes as well, you should have just as easy a time getting aroundmeaning that you'll want to organize files into a clear folder structure so they're easy to find. You'll also want to name everything clearly so your files are easy to identify.

Figure 10-7. This page's layout informs and guides viewers. Links clearly show product categories and subcategories. You don't need to reinvent the wheel. Follow the innate structure of your site and replicate it in the folders you create behind the scenes.

As you'll see, FrontPage takes an active hand in managing your site. But creating an orderly site structure is still up to you. Guidelines for sorting and handling files follow.

10.5.1. Naming Your Site

FrontPage does its best to squelch your originality at times. Save a new site, and the program tries to name it "myweb4" or "myweb5" (there's that old Microsoft-speak rearing upsee the previous note). Take control and name your site in a more meaningful way. Come up with a short, descriptive name. Use only lowercase letters, and don't include any spaces or unusual characters, like symbols or punctuation marks. Following these guidelines insures that your site will live in harmony with wide variety of Web servers (some of which don't look kindly on things like capital letters, spaces, and so on).

10.5.2. Naming Files

While Microsoft Windows lets you create long file names that include spaces and strange characters, Web servers won't stand for such shenanigans. When you're naming files, consider the following:

• Don't use special characters. Many characters, like &, @, and %, actually mean something to Web servers. Using them can create errors. Stay away from special characters and don't use any punctuation marks like quotation marks, apostrophes, parentheses, or slashes.

• Never include a space in a name. If you need a space, use an underscore or a dash.

• Use lowercase letters. Many Web servers are case-sensitive, meaning they regard About.htm, about.htm, and ABOUT.htm as three different files. To reach a page, your visitors must get the name exactly right. Avoid confusion and stick to lowercase.

• Keep file names relatively short. Twenty-five characters is the outside limit.

• File names should make sense and be specific. Use them to describe file content. You may know that 34er.gif is your company's logo, but does anybody else? If you name it logo.gif, you and your coworkers will be able to find it later. If you have a navigation button that leads to the hats.htm page, don't call it hats.jpg. That sounds like a photo of the new product line. A name like nav_button_ hats.jpg is more precise.

10.5.3. Creating Folders

A folder containing a FrontPage Web site stands out from the other folders on your computer. A blue globe on a folder indicates that it contains a FrontPage Web site or subsite (Section 10.5.5). The blue globe appears even if you're browsing your computer's directory outside of FrontPage, using Windows Explorer, or opening files within other applications.

One core folder (with just such a blue globe on it) contains your entire site. All your Web pages and their associated files sit in this root folder. As you add more and more files to this folder, it can get cluttered and chaotic, unless you create an organizational system to manage it.

What's the best tool for the job? The same one you use to organize the rest of your computer files: the folder. Use folders to group Web files in a way that speeds your work and makes sense to collaborators. A simple Web site folder structure appears in Figure 10-8.

A couple of tips:

• Let your site content guide you as you create a folder structure. Organize by category. In the Clothing Store example (shown in Figure 10-8), each product line, like accessories and apparel, has its own folder. These categories derive directly from links on the home page of this site. Each category folder has its own set of pages and subfolders.

• Group like files. FrontPage tries to be a good influence in this area. The program creates an images folder automatically, even when it creates an empty Web site. Place all your images in one folder so you can locate them quickly and easily. Or, if you have a huge number of images, you can create image folders for each section of your site. For instance, the accessories folder in Figure 10-8 has its own images folder. Multimedia files, like video, audio, and Flash files, can all go in a media folder. If your site features multiple CSS files or PDF files, group them together as well.

Figure 10-8. The clothingstore folder at top is this site's root directory. Other folders contain pages grouped by category and file type.

To create a new folder, go to the folder list and select the existing folder in which you'd like to create it. Right-click the folder and select New Folder. Name your folder in lowercase, and don't include spaces or special characters. The guidelines for naming files (Section 10.5.1) also apply to folders.

10.5.4. FrontPage's Territory

You may not be collaborating with anyone on your Web site. But you're never really working alone. FrontPage toils beside you whenever you're editing your pages. You can see evidence of this right in your Web site's folder list. The program has its own set of folders (such as _derived, _fpclass, _overlay, and _private) that it uses to manage your site. You shouldn't move or interfere with these folders.

Because FrontPage tracks and manages aspects of your site behind the scenes, you must always keep the program in mind whenever you're thinking about making any changes (like deleting folders whose names you don't recognize). In other words, never edit folders or file names from outside FrontPage in an application like Windows Explorer. If you use your operating system to copy a graphic file into your site's images folder, FrontPage won't recognize it. Instead, you should use FrontPage to import the file, or insert it onto a page while you're editing.

10.5.5. Subsites

Some areas of a site require special security considerations. If you want to set separate permissions (access restrictions) to certain portions of your site, you'll need to create a subsite. A subsite is a Web site within a Web site. You can turn any folder within your site into a subsite.

Designers also use subsites to shield contents of a folder from settings that affect an entire site. For example, if a site features a theme (see Tutorial 11), but you don't want to use this theme within one area, make a subsite to contain that group of pages.

You create a subsite as you would any other Web site. In fact, a subsite is really just a Web site. Its presence within the parent site's folder is the only thing that makes it a subsite. Select File New and choose from FrontPage's Web site templates. Save the subsite within its parent site.

You can also turn any existing folder within a site into a subsite. Right-click the folder and select Convert to Web. FrontPage warns you of the consequences involved. (Specifically, the program tells you that it won't treat everything in your root folder as a whole. So automated elements like themes and link barswhich you'll read about in the next tutorialwon't carry over to the subsite.) Click OK. Your subsite now features the blue globe, pictured in Figure 10-9, which denotes a Web site folder. If you change your mind later, you can switch the subsite back into a regular folder. Just right-click the subsite and select Convert to Folder.

Figure 10-9. The blue globe on the clothingstore folder in the "Look in" box indicates that it contains a Web site. Blue globes on two folders within the clothingstore folder, ny_store and vail_store, reveal that they're subsites.