Adobe® CS4 Web Workflows: Building Web Sites With Adobe® Creative Suite® 4

Chapter 6. COMBINING NAVIGATION AND LAYOUTS

After your client has approved the interactive comp developed in Fireworks, you need to bring it to the Web for real. The process of realizing a Fireworks design in Dreamweaver is essentially one of artfully combining graphicsand CSS. Graphic elements in the comp become either foreground or background images and are exported from Fireworks through its Web layer. The exported graphics are then incorporated into various style sheet rules or placed directly on the page and manipulated by CSS.

One essential aspect of the translation from comp to Web is the navigation. Before Web standards became a primary focus for designers, navigation bars with table-based graphic image rollovers was the norm. Today, Web designers prefer to use a combination of unordered (a.k.a. bullet) lists and background graphics for better accessibility and search engine readability. As you'll learn in this chapter, Fireworks and Dreamweaver are perfectly suited to this workflow.

In the following exercises, you'll learn these core Fireworks techniques:

• Exporting background and foreground graphics

• Building navigation symbols

And this Dreamweaver technique:

• Optimizing foreground graphics

INCORPORATING BACKGROUND IMAGES

In many modern Web pages, background images form the foundation ...