ptg
n
Set the goals for the website.
n
Organize your content into the main topics.
n
Come up with a general structure for pages and topics.
n
Use storyboarding to plan your website.
Anatomy of a Website
First, here’s a look at some simple terminology I use throughout this book. You need to
know what the following terms mean and how they apply to the body of work you’re
developing for the Web:
n
Website—A collection of one or more web pages linked together in a meaningful
way that, as a whole, describes a body of information or creates an overall effect
(see Figure 2.1).
n
Web server—A computer on the Internet or an intranet that delivers web pages
and other files in response to browser requests. (An intranet is a network that uses
Internet protocols but is not publicly accessible.)
n
Web page—A single document on a website, usually consisting of an Hypertext
Markup Language (HTML) document and any items that are displayed within that
document, such as inline images.
n
Home page—The entry page for a website, which can link to additional pages on
the same website or pages on other sites.
Each website is stored on a web server. Throughout the first few lessons in this book,
you learn how to develop well thought-out and well-designed websites. Later, you learn
how to publish your site on an actual web server.
Within your browser, you can change that default home page to point to any page you
want. Many users create a personalized page linking to sites they use often and set that as
their browser’s home page.
If you’re publishing pages on the Web, however, the term home page has an entirely dif-
ferent meaning. The home page is the first or topmost page on your website. It’s the
intended entry point that provides access to the rest of the pages you’ve created (see
Figure 2.2).
Most of your users will access your site through your home page,
but some will enter your site through other pages. The nature of
the Web is that people can link to any page on your site. If you
have interesting information on a page other than your home
page, people will link directly to that page. On the other pages of
your site, you shouldn’t assume that the visitor has seen your
home page.
A home page usually contains an overview of the content of the website, available from
that starting point—for example, in the form of a table of contents or a set of icons. If
your content is small enough, you might include everything on that single home page—
making your home page and your website the same thing. A personal home page might
include a link to a person’s resumé and some pictures from a recent vacation. A corpo-
rate home page usually describes what the company does and contains links like “About
the Company,” “Products and Services,” and “Customer Support.”
CAUTION
Download from www.wowebook.com
ptg
FIGURE 2.2
A home page.
28
LESSON 2: Preparing to Publish on the Web
The home page
this ios asd
Blogs and journals—Many people publish their journals or their opinions on a
blog. Many people use content management applications to publish their journals
or blogs, but knowing HTML is still helpful for changing the look and feel of your
site and sprucing up your individual entries or articles.
Download from www.wowebook.com
ptg
n
Hobbies or special interests—A web page can contain information about a partic-
ular topic, hobby, or something you’re interested in; for example, music, Star Trek,
motorcycles, cult movies, hallucinogenic mushrooms, antique ink bottles, or
upcoming jazz concerts in your city.
n
Publications—Newspapers, magazines, and other publications lend themselves
particularly well to the Web, and websites have the advantage of being more imme-
diate and easier to update than their print counterparts. Delivery is a lot simpler,
too. The same holds true for a newsletter for your garden club or news about your
neighborhood association.
n
Company profiles—You could offer information about what a company does,
where it’s located, job openings, data sheets, whitepapers, marketing collateral,
product demonstrations, and whom to contact.
n
Online documentation—The term online documentation can refer to everything
from quick-reference cards to full reference documentation to interactive tutorials
or training modules. Anything task-oriented (changing the oil in your car, making a
soufflé, creating landscape portraits in oil, learning HTML) could be described as
online documentation.
n
Shopping catalogs—If your company offers items for sale, making your products
available on the Web is a quick and easy way to let your customers know what you
You might also find inspiration in looking at other websites similar to the one you have
in mind. If you’re building a corporate site, look at the sites belonging to your competi-
tors and see what they have to offer. If you’re working on a personal site, visit sites that
you admire and see whether you can find inspiration for building your own site. Decide
what you like about those sites and you want to emulate, and where you can improve on
those sites when you build your own.
If you really have no idea of what to put up on the Web, don’t feel that you have to stop
here; put this book away, and come up with something before continuing. Maybe by
reading through this book, you’ll get some ideas. (And this book will be useful even if
you don’t have ideas.) I’ve personally found that the best way to come up with ideas is to
spend an afternoon browsing on the Web and exploring what other people have done.
Setting Your Goals
What do you want people to accomplish on your website? Are your visitors looking for
specific information on how to do something? Are they going to read through each page
in turn, going on only when they’re done with the page they’re reading? Are they just
going to start at your home page and wander aimlessly around, exploring your world
until they get bored and go somewhere else?
Suppose that you’re creating a website that describes the company where you work.
Some people visiting that website might want to know about job openings. Others might
want to know where the company actually is located. Still others might have heard that
your company makes technical whitepapers available over the Net, and they want to
download the most recent version of a particular paper. Each of these goals is valid, so
you should list each one.
For a shopping catalog website, you might have only a few goals: to enable your visitors
to browse the items you have for sale by name or price, and to order specific items after
they finish browsing.
For a personal or special-interest website, you might have only a single goal: to enable
your visitors to browse and explore the information you provide.
30
LESSON 2: Preparing to Publish on the Web
n
Check and adjust valve clearances.
n
Check and replace the spark plugs.
n
Check fluid levels, belts, and hoses.
Don’t worry about the order of the steps or how you’re going to get your visitors to go
from one section to another. Just list the points you want to describe in your website.
Breaking Up Your Content into Main Topics
31
2
Download from www.wowebook.com
ptg
How about a less task-oriented example? Suppose that you want to create a set of web
pages about a particular rock band because you’re a big fan, and you’re sure other fans
would benefit from your extensive knowledge. Your topics might be as follows:
n
The history of the band
n
Biographies of each of the band members
n
A discography (all the albums and singles the band has released)
n
Selected lyrics
n
Images of album covers
n
Information about upcoming shows and future albums
You can come up with as many topics as you want, but try to keep each topic reasonably
short. If a single topic seems too large, try to break it up into subtopics. If you have too
website.
Hierarchies
Probably the easiest and most logical way to structure your web documents is in a hierar-
chical or menu fashion, as illustrated in Figure 2.3. Hierarchies and menus lend them-
selves especially well to online and hypertext documents. Most online help systems, for
example, are hierarchical. You start with a list or menu of major topics; selecting one
leads you to a list of subtopics, which then leads you to a discussion about a particular
topic. Different help systems have different levels, of course, but most follow this simple
structure.
Ideas for Organization and Navigation
33
2
Home
FIGURE 2.3
Hierarchical
organization.
In a hierarchical organization, visitors can easily see their position in the structure. Their
choices are to move up for more general information or down for more specific informa-
tion. If you provide a link back to the top level, your visitors can get back to some
known position quickly and easily.
In hierarchies, the home page provides the most general overview to the content below it.
The home page also defines the main links for the pages farther down in the hierarchy.
For example, a website about gardening might have a home page with the topics shown
in Figure 2.4.
Download from www.wowebook.com
ptg
FIGURE 2.4
A Gardening home
page with a hierar-
chical structure.
similar to how printed documents are organized. In a linear structure, as illustrated in
Figure 2.7, the home page is the title or introduction, and each page follows sequentially.
In a strict linear structure, links move from one page to another, typically forward and
back. You also might want to include a link to Home that takes the user quickly back to
the first page.
Ideas for Organization and Navigation
35
2
FIGURE 2.6
From the Fruits
page, you can find
the Soft Fruits
page.
Download from www.wowebook.com