Chapter 17
Working with Multiple HTML Documents
CONTENTS
One of the most difficult tasks you'll encounter as an HTML author
will be organizing all of your documents together to build a comprehensive
and coherent Web site. Top-notch Web sites are more than just
collections of HTML documents-the best
sites are pulled together with consistent and thoughtful design.
In this chapter, you'll learn a few simple guidelines for pulling
together your documents in order to build a Web site that is easy
to navigate and understand. With a little effort, you can easily
create and maintain the type of high-quality and compelling Web
site that users will come back to again and again.
One of the first tasks you'll need to tackle when deciding how
to put together multiple Web pages is how you'll physically store
your documents on the server. You may be tempted to throw everything-all
of your HTML documents, images, sounds, and other files-into
a single directory on the server. This chaotic style of organization
will appear easier in the beginning, but will eventually wreak
havoc on your ability to maintain and update the Web site on an
ongoing basis.
This section will give you a few tips, tricks, and pointers to
get you started on organizing an efficient and easily maintainable
Web site.
- There are a lot of different opinions about the best way to
organize and present information on the World Wide Web. Many experienced
Web designers have published their own style guides on the Web.
You can find a list of them at http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_
Layout/.
- When you build a Web site with multiple documents, you should
use relative path names in your hyperlinks instead of full, absolute
URLs. When you use relative links, it will be much easier to move
entire groups of documents without having to reset all of your
links. For more information on links and relative path names,
refer back to Chapter 6
Figure 17.1 :
- Plan out your Web site on paper before you begin writing any
HTML code. A rough sketch of all the documents you will need to
prepare can help put your entire site in perspective and help
you organize and create your Web site effectively. Planning an
interactive multimedia Web site with plain pencil and paper may
seem strange at first, but the important idea here is to plan
ahead.
- Use subdirectories to separate different sections of your
site. Each subdirectory can hold all of the relevant documents
for a particular section. For example, create a subdirectory called
budget to hold all of the HTML documents related to budget
issues.
Figure 17.2 :
- Create a special subdirectory called images to store
all of your GIF and JPEG images in. If you use the same image,
such as a logo, in several documents, it's much easier to have
all of the documents point to one image file in a common subdirectory.
For example, the URL to an image stored in a common images subdirectory
might look like <A HREF="images/mylogo.gif">.
Figure 17.3 :
- Develop a consistent look and feel for all of the documents
in your Web site. If you use particular colors and background
images in your documents, repeat those colors and images in all
of your documents.
- Write a brief style guide that explains how headings, horizontal
rules, and other HTML elements should appear in your documents.
This is especially helpful if more than one person will be creating
HTML documents for your Web site, and it will ensure that all
of your HTML documents are consistent. You might even want to
create your style guide as an HTML document for easy reference
and clear examples.
Figure 17.4 :
Providing easy ways to navigate through your pages is another
crucial aspect of building an effective Web site. As with the
overall organization, consistency is the most important part of
designing ways to navigate through your documents.
In this section, you'll learn a few tips and tricks for creating
simple icons and menus to make navigating your Web site easier
and more productive.
- One of the most useful navigational aids is the button bar
menu. This is usually a clickable image map that contains links
to other parts of the Web site. If you maintain a large site with
many documents, including a button bar or similar type of menu
is a must.
Figure 17.6 :
- If you include a clickable image map, be sure to also include
an alternative text-only button bar as well. This way, users with
browsers that do not support graphics will still be able to navigate
around your Web site.
Figure 17.7 :
- If your HTML documents follow a particular order, you should
include icons with arrows. These images should be hyperlinks that
point to the previous and next documents in the reading sequence.
You should also include an icon that allows the reader to quickly
return to the first or 'top' document in the sequence.
Figure 17.8 :
- If your documents are constantly updated, it's a good idea
to include icons that show which items are new and updated. Place
these icons next to the hyperlinks that point to the new or updated
documents.
Figure 17.9 :
- Above all, be sure to maintain a consistent style and location
for your navigational aids. Use the same button bars, icons, and
menus throughout your Web site. If you make your Web site easy
to navigate and understand, your readers will be more likely to
visit again.
