Adobe Creative Cloud Design Tools All-in-One For Dummies

Chapter 6: Hotspots, Slices, and CSS Layouts

In This Chapter

• Getting familiar with Fireworks layers
• Hyperlinking with hotspots and image maps
• Creating slices
• Exporting images and HTML as tables or CSS

A simple method for organizing content and making a website dynamic is the use of hyperlinks, simple links from one location of a site to another. You can create a link by using a button, text, or even a move of the mouse pointer. By using layers in Fireworks, you can make those links dynamic and visually interesting.

In this chapter, you find out how Fireworks uses layers and then create navigational links by using the Slice feature.

Understanding Layers

Even if you're an Adobe Photoshop or Illustrator user, the Layers panel in Fireworks may be somewhat of a mystery because it works differently from the way you might expect. Read on to find out how to take advantage of Fireworks layers. To see the Layers panel, choose WindowLayers.

Navigating the Layers panel

Figure 6-1 shows the two main components of the Layers panel:

• The Web Layer serves as a repository for anything code related, such as links and slices. In Figure 6-1, you see the links in the Web Layer section.
• The default Layer 1 includes sublayers that are created automatically for every object you add to the Fireworks canvas.

Note that if you open an image from Photoshop that already has a Background layer, it carries through ...