tags are considered to be block tags; that is, they usually force a line break
when the
tag is encountered. tags can wrap other block tags, such as the
tags in the example above.
tags are used for in-line content; that is, when a line break isn’t desired.
For example:
Here’s a red word.
Unfortunately, there are some circumstances in which you can’t easily disable the current link. If you are using templates or server-side includes (a way to copy boilerplate HTML into a page) to copy identical navigational HTML into every page, there is no easy way to disable the current link automatically. Fortunately, there is a CSS “hack” that can disguise a hot (i.e., clickable) current link by removing link affordances, as explained in the sidebar.
CHAPTER THREE
Navigation
91
MAKING A HOT CURRENT LINK APPEAR TO BE DISABLED When navigation is automatically copied into a page (using templates or serverside includes), it’s not practical to disable the current link. Instead, we disguise the current link to make it look disabled so that visitors are unlikely to click on it. To accomplish this, first define a standard external CSS file for the default characteristics of all link states, just as you would normally. Next, uniquely identify each menu item in the boilerplate menu (that is, the copied-in menu) using the id attribute, as shown in the sample menu below:
Home
Products
id=”servicesLink”>Services
id=”contactLink”>Contact Us
Now you can use the id designator to override the standard link styling for just the current link on each page. In the of every page, create a global style that references the id for the link for just that the current page. For example, on the “Products” page, include the following:
On the “Services” page, include this:
The specifically targeted style in the grays out the color and removes the underline, so that the link appears to be disabled. Although the link is, unfortunately, still clickable, visitors are unlikely to actually click it.
Enhancing Text Links
Text links have been accused of being boring, even with styling and rollover effects. We can jazz up text links easily using bulleted lists with custom bullet images, rollover bullets, background button images, or CSS borders that mimic buttons.
92
VISUAL DESIGN FOR THE MODERN WEB
Bulleted Lists with Custom Bullets Images
Menus are ideal candidates for employing bulleted lists, since what is a menu but a list of links? We can enhance a bulleted list menu by specifying custom images as the bullets, like the stars on the menu in FIGURE 3.5. The downside is that the bullets don’t change on rollover. The HTML and CSS for this menu is shown in the sidebar.
FIGURE 3.5 Custom Images as Bullets
Home Products Services Contact Us
CSS FOR CUSTOM BULLETS
- href=”home.html”>Home
href=”products.html”>Products href=”services.html”>Services href=”contact.html”>Contact Us
This example assumes that the text link rollover effects were formatted with external CSS.
Rollover Bullets
As mentioned above, a downside to custom bullets in a is that the bullets themselves cannot exhibit rollover effects. You can, however, format a bulleted list manually, incorporating a rollover effect on both the text link and the bullets, as shown in FIGURE 3.6, in which the mouse is positioned over the “Products” menu item.
FIGURE 3.6 Manually Formatting a Bulleted List
Home Products Services Contact Us
CHAPTER THREE
Navigation
93
To create a rollover bullet, float a small image or icon to the left or right of the link text. Wrap both the text link and the image in the same tag. Use Dreamweaver to create a rollover effect for the bullet image (more on that technique in a bit, under Navigational Images) and use CSS to style the text rollover effect. The result is that a mouse rollover activates a rollover effect on both the text and the image. Note that you need only two bullet images for the entire navigation system—one for at rest and one for rollover. See the sidebar for the HTML.
HTML FOR ROLLOVER BULLETS This example used Dreamweaver (Insert > Image Objects > Rollover Image) to insert the HTML for swapping the bullet on rollover as well as to insert JavaScript in the head to support the swap. The original bullet is openStar.gif, while the rollover bullet is solidStar.gif. The text link rollover effects would be formatted as desired with external CSS. Here’s the resulting tag for just the “Products” menu item:
Products
Yet another variation on this same technique is to use a transparent image as a bullet placeholder for the link at rest, and use an arrow of some sort for the image rollover, as shown in FIGURE 3.7 again (with the mouse over “Products”). The code is identical to the previous example; the only difference is that the original image is a transparent placeholder, while the rollover image is an arrow.
Home Products Services Contact Us
FIGURE 3.7 Using a Different Image for Rollover
94
VISUAL DESIGN FOR THE MODERN WEB
Background Button Images
A text link can look just like a button if it’s floated in front of a background image that looks like a generic, text-free button. That is, the button isn’t really a part of the link, just the background to it. The HTML for this technique is shown in the sidebar. Note that it can be a bit tricky to get the text to line up precisely where you want it on top of the background image.
HTML AND CSS FOR BACKGROUND BUTTON IMAGE
Products |
CSS Borders that Mimic Buttons
Another way to mimic a button is to employ CSS 3-D border styling (see FIGURE 3.8 and FIGURE 3.9) using border-style: outset and border-style: inset properties. The sidebar illustrates the CSS.
FIGURE 3.8 Text Rollover with border-style:outset CSS
FIGURE 3.9 Text Rollover with border-style:inset CSS
CHAPTER THREE
Navigation
95
CSS BORDERS THAT MIMIC BUTTONS CSS can mimic a rectangular rollover button. Just include border-style:outset (for a normal button) and border-style:inset (for a depressed button) on the link styles:
a:link {border-style:outset; border:5px inset; borderpadding:6px;} {border-style:outset; border:5px inset; padding:6px;}
a:visited
a:hover {border-style:inset; border:5px inset; padding:6px;} a:active {border-style:outset; border:5px inset; padding:6px;}
The extra padding ensures that the text doesn’t crowd up against the edges of the button.
Navigational Images
As we’ve seen, navigational graphics are more difficult to maintain and take substantially longer to download than text links. At times, though, only navigational graphics can provide the required visual impact. Sometimes we might compromise, using text links for most of the navigation but images for generic actions (Go, Search, Submit, Clear, Back, Reset) so that critical actions such as these stand out from the page more clearly.
TAGS
Always use the alt attribute to repeat the wording of an imagebased link, because screen readers for the visually impaired cannot read the text on images.
REUSE IMAGES THROUGHOUT THE SITE
Remember, an image is downloaded to the visitor’s cache the first time it’s referenced on the site, and then reused from the cache. Therefore, the download price is paid only once, even though the image might be referenced by many discrete pages. As a result, generic navigational images for actions such as “go” can be used multiple times with only a single download.
WORDING ON NAVIGATIONAL IMAGES
Text associated with a navigational image must be terse. While a text link that stretches across 200 pixels might be acceptable, a button that does so in order to accommodate a long text description would look both clunky and amateurish.
96
VISUAL DESIGN FOR THE MODERN WEB
In Chapter 6, we’ll look at graphics in general, irrespective of their various uses. In this section, we will look only at issues specific to navigational images such as buttons, icons, image maps, and sliced images.
Affordances for Navigational Images
We recognize immediately that a rounded rectangle with a bevel effect and a text label is a link because it uses several of the following affordances:
■
Symmetrical shapes, particularly circles, rectangles, ovals, and rounded rectangles (shown in FIGURE 3.10 in order by increasing degrees of “button-ness”).
FIGURE 3.10 Navigational Graphic Affordances
ILLUSION IS EVERYTHING
A 3-D appearance gives the impression of a functioning realworld device, such as a real, pressable button. The term for such an effect is isomorphic correspondence.
■ ■ ■ ■ ■
Labels that seem to be navigational. 3-D bevels, such that the element looks like a raised or depressed button. Drop shadows, which further enhance the real-world look of the button. Rollover/mouseover effects. A picture or icon that shows a real-world object, such as a picture of a printer for a “print page” icon. Autonomy (isolation from non-navigational content) as well as grouping of the symbol. An example of such autonomy would be a vertical row of buttons down the left side of a window; the isolation of the cluster implies that the cluster is some sort of a menu.
■
CHAPTER THREE
Navigation
97
One of these characteristics alone might not make an object appear to be a navigational graphic. For instance, we might add a drop shadow to a header without visitors assuming that it’s navigation. But start layering multiple affordances, as is the case in the lower right corner of Figure 3.10, and visitors would be surprised (not to mention annoyed) if the image were not clickable. Therefore, avoid layering navigational affordances on non-navigational elements.
Image Rollovers
Rollover/mouseover effects are an expected feature of navigational images these days. An image rollover effect uses JavaScript to swap the original image with a new image. Common rollover effects include the simulation of movement (such as the depression of a button), a text or background color change, a surrounding glow, increasing or decreasing the size of a drop shadow, brief animation, or…well, you get the idea. The good news is that we don’t need to write the JavaScript for the rollover; Dreamweaver and other development environments can do it for us. In any graphic rollover, the original image and the swapped-in image should be exactly the same size (make sure to specify height and width attributes on the image HTML). Also, don’t change any characteristics on the rollover image accidentally. For instance, if the only thing that is intended to change on rollover is the color of the button, then neither the text nor the button itself should accidentally shift by so much as a pixel. The resulting bobble would look amateurish.
BONUS TOPIC: Creating Graphic Rollovers
See the web site for a tutorial on using Fireworks in conjunction with Dreamweaver to create a rollover button and insert it into an HTML file.
Navigational Icons
Navigational icons (small, stylized pictures or symbols) are by their very nature designed to take up minimal screen real estate. Some web icons seem to be universally understood these days, such as a shopping cart icon, a printer icon, or the question mark as a symbol for “Help!” Apart from a few standard symbols such as these, icons can be ambiguous and mysterious, rendering them better as complements to, rather than replacements for, text links. The irony of icons is that if they need a text description to make them clear, they no longer conserve space on the screen, or, indeed, serve their purpose at all. Still, they provide a quick shortcut, an “eye catcher” if you will, for repeat visitors who are familiar with the icons and who therefore don’t need to bother reading the descriptions. Creating clear, understandable icons is incredibly challenging because they need to be so tiny. Check out symbol-based fonts, such as Webdings and Wingdings, for symbols that can be used as icons.
BONUS TOPIC: Keyboard Equivalents for Common Symbolbased Fonts
See the book’s web site for a Word document that provides the keyboard equivalents for the most common symbol-based fonts.
98
VISUAL DESIGN FOR THE MODERN WEB
Image Maps
An image map is a single image with areas designated as hotspots (links). Hotspots can be specified as rectangles, circles, or irregular polygons. FIGURE 3.11 shows an image map with hotspots indicated by colored overlays.
FIGURE 3.11 Image Map with Hotspots
HTML REVIEW: IMAGE MAPS
The ![]()
places the image itself, while the usemap attribute links that image to the