This course covers all the topics everyone faces -- or should face -- when putting up that first purposeful site, from how to select and organize content to logistical concerns, such as where to have your site hosted, to implementing e-commerce on a small business site.

What Is a Web Site?

It may seem like a pretty basic question, but it's best to get this definition out of the way right off the bat so as to avoid confusion later. When we talk about Web sites in this course, we're talking about a collection of related documents on the Web that are linked together and share a beginning file called a homepage. Web pages are the individual documents that are linked together to form a Web site.

Because this course is about building Web sites (not pages), you won't spend a lot of time on the technical workings of Web pages and the Internet -- such as HTML (Hypertext Markup Language), CGI (Common Gateway Interface), JavaScript, and the hundreds of other protocols and languages that make the Web work. The goal of this course is to prove to you that it's entirely possible to build a good first site without being a supergeek.

This is not to say there's no point to learning to build sites the "hard" way. Anyone considering a career in Web site development is encouraged to learn about the more technical aspects of the Web. However, because this is your first site, it should be as much fun and as easy as possible.

What's the Big Idea?

You can't write a book unless you have some idea what that book is going to be about. You can't write a song without a clue as to what you want to sing about. In the same way, you can't design your own Web site unless you first know why you're creating the Web site and what's going to be on it.

There are countless reasons for building a Web site. Examples of reasons you might build a Web site include:

• Marketing your business
• Selling products or services
• Publishing your ideas (or musings) to be read by a global audience
• Showing off your children or grandchildren
• Showing off yourself

Your reason for building a Web site can be compared to a business's mission statement, which describes a company's reason for existence. Simply put, a mission statement tells the folks reading it just what a business is all about -- or at least what the business wants people to think they're all about. Examples of business mission statements might include:

• "We sell cars at the lowest prices"
• "Our mission is to provide the latest information on cures for blue-footed pigeon disease"
• "All music, all the time"

Your first task in creating your site is to write your Web site's mission statement.

What's Your Mission?

Mission statements can be as short as a sentence or as long as a paragraph. To write your own mission statement, sit down, get comfortable, and put pen to paper or fingers to keyboard. Try to describe your Web site's theme concisely in no more than one paragraph. To make it even harder, your goal is to adhere to a word limit -- use no more than 65 words.

The Heart of Your Web Site

The point of this lesson is to help you find your focus before you start designing your Web site. Browse the Internet long enough and you'll see plenty of sites that try to do an awful lot and are often confusing as a result. Some sites, such as Yahoo! or Amazon.com, actually succeed with this model. However, what works for a large Internet portal or shopping site almost certainly won't work for an individual Web publisher or a small business owner. The reason is simple: they have the resources to successfully manage enormous amounts of content and hundreds of different products. Chances are good that you don't.

To avoid getting bogged down in endless busy-work and ending up with a site that no one can understand, decide on the central purpose of your site. With your mission statement in hand, you're almost ready to start your Web site construction. In the next section, you learn what kind of content you need to gather to give your Web site some meat and substance.

You've decided on your mission. You wrote it. Then you rewrote it. Then you rewrote it again. Now it's time to gather the content that'll reflect the theme of your site. There are two types of content:

• Content you already have: If you're planning a business site, you probably have marketing brochures, product briefs, sales letters, and the like. Gather these in one place. With luck, everything you have is already in a digital format, otherwise you'll have to spend at least a few hours retyping (or scanning) hard copies.

If you're a business owner -- or if you have family members with time to spare -- consider delegating this task.

• Content you may not know you need: If you have competitors, your goal is to get Web surfers to surf your site rather than your competitors' sites. To accomplish this, you have to find out just what your competitors have on their sites and "do them one better."

Let's say, for example, you want to build a Web site that provides the ultimate source for kite enthusiasts. You have a bunch of product brochures, but that really isn't sufficient to build a Web site that anyone's going to want to visit. So, it's off to the search engines to see what your competitors are doing.

The following are some good search engines you can use for your research:

• Google
• MSN Search
• Yahoo!
• Ask

You can use any of these to come up with a list of competitors. For example, searching for kite dealers, you get list of kite-oriented Web sites, including the one shown in Figure 1-1.

Figure 1-1: One of the competitor sites in the kite Web space is Into The Wind.

Enlarge image

The Into The Wind Web site contains a wide variety of content, including:

• Kite kits and supplies
• Kite comparisons
• Expert advice
• Forums
• E-newsletter
• Lists of kite-related events

There's a lot of content there and if you're going to compete in this area, you need content that's equally as dramatic.

Far too many people set out on building their first Web site with the idea they're going to compete with a site like Intothewind.com on a shoestring budget. Do not try this at home. It's true that many of today's most popular sites started out as someone's weekend project, but most of them didn't have any competition when they started.

When you plan the content for a Web site, there's also "wish list" content. This is content that you don't currently have, and isn't found on any competitor site, but that you think would be a great asset to your site. You may have seen something you like on a non-competitor's site, such as music, video, newsletters, and so on. Of course, you're walking a fine line here. Put too many things on your site and you run the risk of having a non-focused, confusing site. Put too little on your site and you run the risk of being boring.

Now it's time to make a list of what your site is going to contain.

Making a List and Checking It Twice

Make a complete list of everything you want to have on your Web site, even if you don't put it all online right away. First, list everything you own (meaning content -- no one cares about your SUV or stereo) and have readily available. Next, browse the Web and see what your competitors are up to. Make a list of what they have and from that list, decide what you want to include on your site. Finally, add all those "must haves" you've seen on other sites to your list, even sites that aren't your competitors.

After you've made your list, go eat dinner or take a walk. There'll be plenty of time for staring at the computer later. After your break, return to the list and go over it, item by item. Put a "Yes" next to the items that really make sense for your site. Write "No" on items that might detract from your site.

Roll up those sleeves again; it's time to get cracking. You're going to sketch out just what your Web site will look like. Use pen and paper or any computer drawing tool (including your word processor). The goal here is to plot out your site in a diagram format. A site diagram shows everything your site is going to have, along with the relationships between objects.

At this point, your site diagram serves as the blueprint for your site. After you've finished your initial construction, your site diagram can serve as a tool for visualizing or modifying your site. It can even be repurposed to give your visitors a bird's-eye view of your content and to provide an alternate method for them to navigate your site.

The first thing you put on your site diagram is the homepage. Your homepage is the entry point to the whole site. If your site diagram uses the inverted tree model, such as a family tree, the homepage should be at the top of the page. Draw a large box for your homepage, and give it a label ("homepage" works, but you can also give it the same name as your site). From the homepage, a visitor should be able to logically navigate to any page on the site.

It takes some practice to think of Web sites as inverted trees, and you may make some mistakes. This is where either an eraser or Web site diagramming software that allows you to move pages around comes in handy. See the sidebar, "Need a Site Diagramming Tool?" for more information about where to find such software. Also, many of the software programs available for designing Web sites, such as Microsoft FrontPage, feature a built-in site-diagramming tool. Visit the Web Style Guide Creating site diagrams Web page for information about and illustrations of site diagrams.

One of the benefits of using a tool such as FrontPage is that the program creates the pages for you as you diagram the site. All that's left for you to do is to fill them with content.

Even with all of the software available to help you create your site diagram, sometimes it helps to use a pencil and paper at this stage. The important part is to have a plan for how the various types of content on your site will link together.

Don't worry if you don't know yet how to create the code to execute your ideas. In this lesson, we're learning how to use the concept of the site diagram to plan out your site.

What's Next?

So, now you've written your Web site's mission statement, you've created a list of content, gathered your content, and diagrammed your site. Pretty good for one lesson. Lesson 2 shows you how to use the various Web designer tools to make that content shine.

Before moving on, please complete the brief lesson quiz and assignment. Now is also a good time to visit the course Message Board and discuss your site diagram with your classmates and the instructor.