Section 18. Build a Site Map

18. Build a Site Map


15 About Focusing on What You Want to Present

17 Organize Your Site's Content


14 About Planning Your Site

By now you know the content you want on your site. You should have five to seven main topics, and under each of those topics, several ideas, each with a number-1 priority. For now, we'll forget about the number-2 and number-3 priorities. You can add them later if you want.

How to get all that information from your outline to a living website? The best next step is to build a site map. A site map is a clear, visual representation of every page on your site, and will show how those pages fit into the site's organization. In essence, a site map is a flowchart that shows every page on the site and details how visitors will move through the site.

You can draw a site map freehand on a large sheet of paper, or else you can use some kind of graphics or drawing program. I greatly encourage you to draw it freehand. I've found that if you use a graphics or drawing program, you spend more time trying to understand how to use the program, fiddling with color , figuring out how to draw snazzy lines, and other time- wasters than you actually do getting any work done. A very rough hand-drawn sketch is fine at this point.

I also recommend getting a very large piece of paperas large as you can find. Get large, oversized pads at an art store or office supply store.

For every page on your site, you'll draw a rectangle. When pages link to one another, draw lines from one to another. For each page, write down the main topic.

18. Build a Site Map

Start with the Home Page

At the top of the site map, draw a rectangle and label it Home Page . The home page is the front door to your site. It's the first view of your site that your visitors will have. The home page should tell at a glance the name of your site, its purpose, and lay out the directory and navigation of the various topics on the site. It frequently has more than just navigation and a directory of information on it, thoughit often has some kind of content as well, depending upon what kind of site you're building. For example, if it's a site for a non-profit group , you might have information about an upcoming fund drive. If it's a personal site, you might have photos of a recent trip you took, or a holiday greeting. And if it's a commercial site, you should have information about the product or service you're selling, and a way for people to order it.


For some incomprehensible reason, some web designers insist on putting a page in front of the home page. This prehome page often is little more than a logo or animation of some kind, and you're supposed to click on the logo or the animation in order to enter the site. I can't think of a worse way to try and get people to your site. All this does is drive people away, because many people won't bother to click on the logo or animation. When people are browsing the Web, they often have very little time or patience, and it's your job to make things easy for them, not force them to click for no apparent purpose.

List the Main Topics

Beneath the home page, in a row, draw rectangles for all your main topics. Remember, there should be no more than five to seven of themand fewer is fine. (For more information, see 17 Organize Your Site's Content .) In each rectangle, write in the topic. Draw lines from each topic page to the home page.

Fill in the Detail Pages

You're ready to round out the map. It's time to put in the detail pagesthe topics that you've put number 1s next to in your brainstorming outline. Draw a rectangle for each, label each rectangle, and put them in a third row, beneath the main topic row. Draw lines from each main topic to the detail pages that are associated with that topic.

Note Shared and Global Pages and Features

Most websites have pages and features that are linked to and from many other pages. For example, if you're building a commercial website, on every page on your site, you might have a link to your site's privacy policy. If you're building a site for a non-profit group, you might have a link on many pages or even on every page to a member sign-in form. And if you're building a personal website, you might have a link on every page to an About Me page.

If you try drawing lines from every page on your site to all of these global pages and features, your site map will soon be so filled with lines that it will look like nothing more than a bowl of spaghetti. So instead of drawing those lines, come up with symbols or letters for each of those pages or features. Then on each page that will link to them, draw the symbol. Draw rectangles for each of the shared and global features and pages, label them, and note their symbols.


When mapping out a site, it's easy to overlook pages that you'll need to createsometimes there are "hidden" pages that you need to create. For example, if you have a form that you ask people to fill in, there will need to be a page that appears after the person has filled in and submitted the form. So follow the flow of your site, and make sure that you've listed every single page that you might possibly need.

Give Your Pages Filenames

After you've gotten what you believe to be a final page map, you should give your pages filenames. Every page on your site will have to have its own filename, and it's a good idea to come up with filenames now, before you start coding. That way, you can come up with a comprehensive plan for naming files. There are a few things you need to keep in mind when naming files:

  • Filenames usually end in .htm or .html Most of the files you create will use .htm or .html as a file extension. If the site is hosted by a Windows server, the filenames generally end in .htm . Ask your web-hosting service whether your site is hosted by a Windows computer.

  • Keep filenames short Not only will this make it easy to remember them, but short filenames are easier for people to type into their browser. Also, avoid embedded spaces in filenames because they can be hard to reference in links.

  • Use logic in naming pages They should relate to the content of the page, and there should be a reason why you pick certain names . For example, don't use numbers to name pages unless there's a logical purpose to those numbers . In many cases, the home page's filename must be index.htm or index.html . If not, the server software administrator might have to configure the server for a different filename.


A very useful way to fine-tune and finalize your site map is to put all the pages on a wall and organize them as they will be on the site. Each page should be on its own separate sheet of paper. Tape them to the wall and organize them the way you want them on the site. Seeing the site large like this is an excellent way to fine-tune its organization. It's easy to move pages around and reorganize them, and seeing them this size somehow makes the site more real as well. You might also want to use larger- sized sticky notes for this purpose.

Review the Site Map

You should now have a comprehensive site map. Before you begin coding and designing, feel free to re-jigger it, moving pages around, eliminating some, and adding new ones. After you have a complete site map, you might want to consider making a neat copy using a graphics or drawing program, or better yet, a flowcharting program.


After you've created your website, you'll at some point begin adding new pages and taking away old ones. When you do that, make sure to update your site map. If you don't, you'll soon lose track of the organization of your site, and it will be difficult to maintain it and grow it. Many larger websites have a page with a linked-up site map that users can use to navigate the site instead of the navigation found on the home page. Consider building one of these for your site.

Sams Teach Yourself Creating Web Pages All in One
Sams Teach Yourself Creating Web Pages All in One
ISBN: 0672326906
EAN: 2147483647
Year: 2006
Pages: 276 © 2008-2017.
If you may any questions please contact us: