Links positioned on graphic background. How?

Question

I'm working my way through the Adobe Fireworks CS5 version of "Classroom in a Book" and I've come to an impasse.
I'm in Chapter 8, page 199, step #4; the task is to use the CSS and Images Export.  At this point we have a web page with seven distinct regions.  One of these is a slice, a navigation banner with a graphic background and text for navigation links.
The instructions in the book are to change the img_nav slice type to Background Image and to hide the sublayer containing the text for the links.  The book explains that "...since the slice will become a background image, it cannot have HTML links applied to it."
It goes on to say that "...creating the navigation is not a job for Fireworks, and the navigation menu would need to be created later in a web-page editor."
How?  The links are sort of in the middle of the graphic.  When I try to add links in Dreamweaver I don't seem to have much control over there placement.  It is either at the beginning of the div or the end. 
Can someone point me to a resource that explains how to place a link on top of a graphic where I want it?  Also, since I'm learning, I'd like to stick with Best Practices and use CSS while minimizing the use of tables.
Thanks,
Dan Earley

Answer 1

Perhaps it's time for you to purchase Dreamweaver CS5 "Classroom in a Book"!
I'm not directly familiar with this textbook... If the navigation is the blue text (Features - Fashion - Calendar - Video - Blog), it would typically be handled in HTML using an unordered list (ul), with each list item (li) containing a link (a) that surrounds the text itself. CSS would be used to position the navigation, perhaps applying display: inline or float: left to the list items (li) to make the list run horizontally. The list itself might be positioned within a surrounding div using margin or padding—or even using absolute positioning (in a relative context), given that there's probably a specific height to the background image (the "check" logo).
As far as links go, they're traditionally inline elements that wrap around other inline elements—like text within a paragraph or heading, or an image. However, I think as of HTML5, they're also allowed to be wrapped around multiple block-level elements. Regardless, the simplest way to add a link to an image is to surround the image (img) tag with a link (a) tag. However, like your book says, if an image is being applied via CSS as a background image, it cannot have a link applied to it, because it's not part of the HTML. But a background image must be applied to some HTML element, and perhaps the link could be applied to that element.
A link can also be converted to a block-level element via CSS using a display: block rule. This will make it occupy the full-width of its container, which can make it more "clickable" by giving it a larger area of interactivity.
Not sure if this information is helpful or not... I wonder if the book goes on to answer any of your questions later on. Often, these types of books complete a project step-by-step, chapter-by-chapter, eventually addressing issues brought up in earlier chapters.