Section 7.2. Building the Structure

7.2. Building the Structure

Remember in Chapter 3 when you created an outline for your site? At the time, it was a way to focus your thoughts about how best to organize your content. That outline is the gift that keeps giving, as you'll soon see.

During the process of defining your site, Dreamweaver created a local root folder, which is where you store your site files. You might be wondering how to go about organizing these files. To keep your web site tidy, it's common practice to create a set of subfolders inside the local root folder: one subfolder for each of the main sections of your site. The main sections come straight from your outline. All you have to do is create the subfolders.

Use Dreamweaver's Files panel for the job, as shown in Figure 7-12. The Files panel lists the contents of your local root folder (or remote root folder, depending upon your selection from the drop-down menu on the right). If you don't see the Files panel in the Dreamweaver workspace, choose Window Files from the main menu.

Figure 7-12. The Files panel lists the contents of your local root folder

First things first: make sure that the Files panel is set to Local View of your newly defined site. If not, change the drop-down menus at the top of the panel.

Now, pull out your site outline, and review the main content categories. Yours might be Products, Pressroom, About Us, and Contact Us. Four top-level categories equal four folders inside the local root folder.

HOTKEY

Press F8 to toggle the panel.

To create the subfolders, click the local root folder in the Files panel so that this folder is selected. Then, right-click for the context menu, and choose New Folder. Dreamweaver adds a subfolder called untitled to the local root folder. Now, simply give the new folder a more descriptive name. Here are the rules:

• Try to keep the name to no more than eight alphanumeric charactersno punctuation marks or typographical symbols.

• Don't use spaces. Use underscores (_) or hyphens (-) instead.

• Stick with lowercase letters. Avoid capitals.

If your first content category is Products, then a logical folder name is products. Type this name, and press Enter or Return.

Notice that your new folder is selected in the Files panel. This is very important: make sure that you reselect the local root folder before you create a new subfolder. Why? Because Dreamweaver adds subfolders to whatever folder is selected. You don't want your second content-category folder to go inside the first one. Rather, you want both content-category folders to sit inside the local root folder at the same level.

TIP

Some of your main content categories may have subcategories. For instance, your Products section might be divided into Products/Current and Products/Archive. While you can certainly create subfolders called current and archive inside the products subfolder, this level of organization usually isn't necessary unless you're building a massive site.

After you have selected the local root folder again, right-click and choose New Folder. Dreamweaver creates a new, untitled folder. Give this folder a descriptive name, and repeat the process until you have subfolders for all your top-level categories.

You need one more subfolder to seal the deal. Go back and reselect the local root folder, right-click, choose New Folder, and call this one images or img. This subfolder will store all the images and multimedia files for your site.

This might seem counterintuitive at first. It may seem more logical to store product images in your products subfolder and digital snapshots of the home office in aboutus. Logic aside, it's more practical to have a single subfolder for all site images for two reasons. First, you don't have to remember which subfolder contains a particular image file. If all images go in a single folder, you always know where to look. Second, you don't have to move an image file to a different folder if you decide to place it in a different section of your sitea convenience that you'll appreciate if you ever need to do a major structural overhaul. Third, you improve the performance of your site. If two or more pages use the same image file, the visitor downloads it one time only.

When you're finished, your Files panel looks something like the one in Figure 7-13.

Figure 7-13. Add subfolders for main content categories and images

TIP

Want to make your first edit to your site definition? Set up a default images folder. Choose Site Manage Sites from the main menu, select your site from the Manage Sites dialog box, and click Edit. Switch to Advanced view if it isnt already selected, and choose the Local Info category. Click the folder icon next to the Default images folder field, and another dialog box appears. Navigate to your images subfolder, double-click to open it, and click Select. Don't forget to export a new backup of your site definition before clicking Done in the Manage Sites dialog box.

Now, when you add images to your web pages, Dreamweaver automatically saves copies of the image files in your default images folder.