O'Reilly logo

Web Design All-in-One for Dummies® by Sue Jenkins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 6: Constructing
Navigation Systems
In This Chapter
Considering the site’s organization and target audience
Finding out about navigation systems
Creating text navigation menus
Developing rollover button graphic navigation menus
Building multitier Spry menus in Dreamweaver
Creating CSS list navigation menus
A
rchitecturally, the single most important element of a Web site is its
navigation system because it is the one unifying feature of a site that
enables visitors to quickly survey a site’s structure and access the desired
information. Think about your own habits when you go to a new site. Most
visitors, unconsciously or not, expect to be able to find what they are seek-
ing within one to three clicks. If they can’t find what they are looking for —
or worse yet, if the links they do click mislead them in some way — they will
promptly leave that site and go search somewhere else, unless of
course they know that it’s the only online resource that has
what they’re looking for. For these reasons alone, a site’s
navigation system must be easy to find and easy to use.
Better yet, make it visually appealing too, and you
have yourself a great navigation system.
In this chapter, you find out how to choose and
then create the right navigation system for a Web
site. You start by discovering some basics about
matching a site to the right navigation system
based on its target audience. Then you follow along
with steps that show you how to build each of the
four most popular navigation menu systems: text,
rollover button graphic, multitier Spry, and CSS list.
19_417966-bk03ch06.qxp 3/26/09 5:42 PM Page 359
Assessing the Navigational Needs of Your Site
360
Assessing the Navigational Needs of Your Site
To select the right navigation system for a site, you really need to go back to
the site architecture — the site map — which you find out how to create in
Book I, Chapter 3. With a strong understanding of the site’s structure and
organization, you can then choose the right type of navigation for the site.
For example, if the site is rather small and will only have five main naviga-
tion links, you can be a bit more creative with your selection of a navigation
system. By contrast, if you’re building a site that has ten main navigation
links, each of which includes subnavigation that may also include another
level of subnavigation links — in other words, a big site that requires a mul-
titiered navigation system — you need to understand quite a bit about
HTML, CSS, and JavaScript before you convert the navigation in your mock-
up into a working navigation system on your Web site.
As you can see, having a good idea of the organization and structure of all
the pages on any particular site provides you with the best understanding
of the type of navigation that is needed. By reviewing the architecture, you
can easily identify the labels for each page and the order of all the main nav-
igation links and subpages of the site. Each of the site’s pages should fit into
one of three categories for the navigation:
Main navigation links: These pages represent the main pages on the
site, such as About and Contact, that should be easily accessible from
any other page on the site through the navigation system.
Subnavigation links: Subpages are pages that fall logically into a cate-
gory beneath one of the main pages, such as a Directions page in a sub-
menu under a Contact Us page that provides visitors with information
on how to get to a company’s facility. These pages will be accessible
through some kind of submenu off the main navigation. A subnavigation
menu can be a pop-up menu from the main navigation link, a second
row of links that appears below the first row when activated by the
main navigation link for that group, or even a sidebar area that appears
somewhere on the page when activated by the main navigation link of
that group.
Non-navigational links: Many Web sites have pages that do not need to
be included within the main navigation or subnavigation areas, but
must still be accessible to visitors through hyperlinks located in vari-
ous spots throughout the site, such as in the footer of all the pages on a
site or in the body text area of a particular page. Links like these might
include Privacy Policy, Site Credits, or Site Map pages.
In addition to the site organization, three other factors may further influ-
ence which type of navigation works best for a Web site:
19_417966-bk03ch06.qxp 3/26/09 5:42 PM Page 360

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required