HTML and CSS Reference
In-Depth Information
Using a Table to Create a Horizontal Navigation Bar
The Web site created in this project consists of four Web pages. Visitors should
be able to move easily from one Web page to any of the other three Web pages.
Providing a navigation bar prominently across the top of the Web page (Figure 4-14)
gives the visitor ready access to navigation links. You will create a table to hold the
navigation bar links.
navigation bar of image links to
four Web pages including the
current Home page; navigation
bar will appear on all Web pages
in the Web site
Figure 4-14
All of the styles for this and other tables are set in the external style sheet that you
will create in the next section of this chapter. The horizontal navigation bar table is bor-
derless (the border-style is set to “none”), and has one row and seven columns (each of
the four link options is in a column, as is each of the three dividers). To better align the
navigation bar with the Oceanside Hotel and Sports Club logo, the table is set to 60% of the
window's width, so that it is not as wide as the logo. The navigation bar has four links — Home,
Golf, Tennis, and Dining — that link to the Web pages oceanside.html, golf.html,
tennis.html, and dining.html, respectively. Each link has its own image file, includ-
ing home.gif, golf.gif, tennis.gif, and dining.gif. Each link image is inserted in a single
column (cell). The
|
(pipe) symbol is included in a column between each of the four links
to separate them visually. Although you could have used plain text for these links, using
images allows you to create a consistent visitor experience across all browsers, regardless
of whether a visitor has the Vivaldi font installed. The link images were created using a
simple paint program. All four images are equal in size and utilize the same font family
(Vivaldi) as shown in the logo.
Navigation
Studies have been
conducted to assess
the best location on
a Web page to place
navigation bars and lists.
The research results are
varied, with indications
that navigation options
on the top, side, and
bottom of a Web page
show slight differences
in visitor usability. The
most important aspect
of Web page navigation
is to make the options
easy enough to locate so
visitors do not have to
search for them.
