Nifty Text-Based Navigation Bars

Imagine trying to navigate your way through a city without street signs. And in really big cities, like New York or Paris, even street signs can't help you figure out where you are or where to go if you don't know what part of the city you're in, because the whole city wouldn't possibly fit on one readable map.

Navigation for your Web site is just as important. Your visitors need to be able to find their way around (and get back to where they started) easily and quickly. Good navigation to a Web site is like excellent signage to a city: If it works well, most people don't notice it. But if it doesn't, they complain-loudly (or they simply click away from your site and never return).

Many Web designers build a Web site's navigation by grouping hyperlinks into navigation bars (often known by their nickname, nav bars). A navigation bar at its simplest is nothing more than a series of text hyperlinks arranged in a horizontal row or vertical column somewhere near the top of a Web page (although the bar can be anywhere on the Web page). Or it can be an elaborate graphical affair with fancy drop-down submenus. Complicated navigation systems often require scripting and graphics skills beyond the reach of the beginning Web site builder (and beyond the scope of this book; we show you some cool tricks to jazz up buttons later in this chapter). No matter how fancy or plain a site's navigation, its most important job is to provide Web surfers with a graceful road map through the site's different locations. A simple collection of text hyperlinks can accomplish this task quite nicely.

In Expression Web, you can build a simple text navigation bar in a matter of minutes. With a little more time and some tinkering with CSS styles, you can dress it up with font formatting, borders, and background colors so that it becomes an attractive design element on a Web page. Take a look at the navigation bars used in the Expression Web templates to get ideas for your own site. All navigation bars in the templates are text hyperlinks that put CSS styling to work to make them look pretty.

Creating attractive text-based navigation

Many Web designers use common text treatments to make a line of text hyper-links look interesting. Customize hyperlink colors and remove the underline, and pretty soon your plain text hyperlinks start looking downright classy.

But what about link bars?

If you used Microsoft FrontPage to generate link bars for your site's navigation, you may be lamenting the loss of a favorite feature. But according to the Web powers that be, FrontPage link bars weren't quite kosher when it came to by-the-book code generation. Expression Web is a lean, mean, clean-code-generating machine, so the link bars had to go. If you have a FrontPage Web site you're trying to update, you have to retool your site's navigation. And although change can be painful, it often provides the opportunity to rethink, streamline, and improve an initial design.

Experiment with different characters, like this:

• Asterisks: Home * News * About * Contact Us

• Two colons in a row: Home:: News:: About:: Contact Us

• Square brackets: [Home] [News] [About] [Contact Us]

• Curly brackets: {Home} {News} {About} {Contact Us}

• Plain ol' parentheses: (Home) (News) (About) (Contact Us)

• Vertical line (Shift + \): Home | News | About | Contact Us

Play around with initial caps, all lowercase, and small caps to give your navigation bar a different feel, as in these examples:

• home * news * about * contact us

• home:: news:: about:: contact us

• [home] [news] [about] [contact us]

Increase the character spacing within each hyperlink word for a looser, relaxed style:

• h o m e | n e w s | a b o u t | c o n t a c t u s

If you want a very loose look, simply type a space between each letter, as in the preceding example. For more precision, use the controls in the Font dialog box, on the Character Spacing tab. (We talk about adjusting character spacing in Chapter 3.)

At the bottom of your page, add a small, supplemental navigation bar that duplicates the main navigation, as shown in Figure 4-6 (from the Expression Web template Event 1). Especially useful with long pages, this supplemental navigation bar gives visitors access to your site's links without having to return to the top of the page.

Figure 4-6: This navigation bar uses the vertical line character to separate hyperlinks.

Use your imagination and play around until you get something you like. To use your navigation on all pages in your Web site, create a page template or include your navigation bar (or bars) in a Dynamic Web Template. (We talk about Dynamic Web Templates in Chapter 11.)

GLANCE AT THE CODE 

Here's what the code for the simple navigation bar shown at the bottom of Figure 4-6 looks like:

 <p><a href="default.htm">Home</a> | <a href="about/about.htm">About</a> | <a href="news/news.htm">News</a> | <a href="calendar/calendar.htm">Calendar</a> | <a href="photo_gallery/photo_gallery.htm">Photo Gallery</a> | <a href="maps/maps.htm">Maps</a> | <a href="information_links/information_links.htm">Links</a> | <a href="faq/faq.htm">FAQs</a> | <a href="contact/contact.htm">Contact</a></p> 

Notice that each hyperlink contains the relative URL for the Web page file as the hyperlink destination, the hyperlink source text, and a vertical line character. (We define the term relative earlier in this chapter.) In this case, the entire navigation bar is enclosed by HTML paragraph tags (<p> and </p>).

Using lists to create a navigation bar

A favorite trick among Web designers for creating a navigation bar is to use an unordered list of text hyperlinks. You can stack your hyperlink list vertically (refer to Figure 4-6), or line them up horizontally, as shown in Figure 4-7 (from the Expression Web template Organization 4). All the navigation bars in Expression Web templates are nothing more than gussied-up, unordered lists with a few formatting and positioning CSS styles applied. Each hyperlink in the navigation bar is a separate list item. (We talk more about styles for navigation bars in Chapter 8.)

Figure 4-7: The main navigation bar on this page uses an unordered list with styles applied for formatting and positioning.

Tip 

Here are some techniques for making a hyperlink list look more like a navigation bar and less like your grocery list:

• Banish the bullets. The best way to do this is to set a style for the list. We show you how to create styles in Chapter 7.

• Lose link underlining. Click the links to select them, and on the Common or Formatting toolbar, click the Underline button to remove this formatting. Better yet, set a style for the whole list that turns off underlining. (We tell you how to create new styles in Chapter 7.)

• Coordinate hyperlink colors. Change default colors for hyperlinks to match your site's color scheme. We tell you how earlier in this chapter, in the section "Changing hyperlink color."

• Decorate with graphical icons. Create an icon that coordinates with the graphical elements in your site and place it next to each text hyperlink. (To do this, place the graphic next to your hyperlink or specify the graphic as the bullet style. We talk more about graphics in Chapter 5; see Chapter 3 for how to customize bullets in lists.)

• Build in borders and backgrounds. The best way to do this is to use CSS styles to format and position the navigation bar as a whole. We talk about creating styles in Chapter 7; we cover positioning with CSS in Chapter 8.

Warning 

You may be tempted to copy a navigation bar from one of the Expression Web templates into your Web page and simply change the text and hyperlinks. It's not that simple. Expression Web templates use several layers of style sheets to format and position the different page elements. Not only that, the navigation bars are located on each template's Dynamic Web Template. Trying to figure out what controls what can quickly send the novice user into a conniption fit of frustration. We recommend sticking with simple text formatting for your navigation bars until you bone up a bit on Cascading Style Sheets (see Chapters 7 and 8) and Dynamic Web Templates (see Chapter 11). After you get the hang of how it all works together, it's much easier to tweak the different controls to get your navigation bars to look the way you want.

GLANCE AT THE CODE 

Here's what the code looks like for a simple list of hyperlinks:

 <ul>           <li><a href="default.htm">Home</a></li>           <li><a href="news.htm">News</a></li>           <li><a            href="testimonials.htm">Testimonials</a></li>           <li><a href="about.htm">About</a></li>           <li><a href="contact.htm">Contact Us</a></li> </ul> 

Notice that each hyperlink is enclosed by the <li></li> tags.

REMEMBER 

We revisit creating navigation bars in Chapter 8, after we go over the ins and outs of using Cascading Styles Sheets for formatting and positioning.