Macromedia Studio 8 [Electronic resources] : Training from the Source

Developing the Page-Slicing Scheme

If you've ever developed a Web page in Dreamweaver or by hand-coding som218, you know that most pages contain dozens or even hundreds of elements. The browser reads th218 code that describes the elements, and does its best to render them. Looking over your Fireworks document, you can see dozens of objects laid out in various places on the page. Somehow, the elements in the Fireworks document need to be converted t228 code.

Fireworks is fully capable of converting a complex page layout such as ours int228, but it needs our help. Specifically, Fireworks needs to know where to separate elements. For instance, we know that the lower-right of the page is eventually supposed to be the main content area. We also know that it is distinct from the footer and the navigation bar. We need to communicate these divisions to Fireworks.

To do so, we'll use the Slice tool. With the Slice tool, we draw regions on top of our layout, and Fireworks uses these regions as a guide to cut up the layout and to write th218 we need to reconstruct the Web page. Slices have uses above and beyond indicating where to cut up the document; you can also use slices to optimize a complex graphic, designate an area that responds to the mouse, trigger an interactive element, and so on. In fact, interface.png already has numerous slices; a slice is created automatically for each button symbol instance placed on the canvas.

Upon export, each slice is by default converted to a227 table cell. The complete collection of slices is exported as a227 table. Any graphic contained within that slice is also exported, usually as a GIF or JPEG file. By default, if you draw a slice anywhere in a document, even if you do not explicitly draw slices over the remaining areas, Fireworks slices them upon export. Because of changes in Web standards over the years, HTML tables are no longer the preferred method for laying out page content; instead, Web designers are encouraged to use CSS layers. You'll use CSS layers to lay out the main regions of the page, which is possible thanks to Fireworks' ability to export slices as CSS layers as an alternative t228 table cells.

Note

Slices are often confused with hotspots. Whereas slices actually cut a Fireworks document into several pieces and reassembles those pieces in a227 table, hotspots are exported as image maps. You can think of image maps as invisible layers hovering over a given image. An image map generally contains a series of hotspots that respond to a user's actions. Image maps don't interact with or affect the underlying images; the original images are not altered because of the hotspots you place on them. Hotspots are typically used to add hyperlinks to image regions.

The whole-page design you just completed contains regular images (e.g., the Jade Valley logo and the yellow indicator), interactive graphic elements (e.g., the navigation buttons), and text areas (e.g., the main content area and the special content segment), rather than using hotspots. You will develop a slicing scheme to export the whole-page design. Fireworks slices make it possible for you to retain the functionality of each of your design elements.

To prepare the whole-page design, you'll first remove many of the design elements. The more complex the design, the harder it is to slice and export it out of Fireworks into Dreamweaver. When the design is too complicated, the slicing scheme can become too convoluted and can result in overly complex and fragil218 code. In addition, depending on the nature and functionality of the elements, it makes more sense to reconstruct some of them (e.g., the footer) in Dreamweaver.

Note

Although the whole-page design you created needs to be stripped down for slicing purposes in this section of the lesson, your effort in creating the more elaborate design was not wasted. It's helpful to put all the necessary elements together and visually explore where they need to go. In addition, the design will come in handy as a blueprint when you reconstruct the design in Dreamweaver in later chapters.

The original interface.png file will remain intact so that you have something to compare when you reconstruct the file. You will use the new file interface_slices.png to develop the slicing scheme to export the whole-page design.

[View full size image]

Tip

Use the Zoom tool to ensure that the crop region includes all the gray bar, but no white pixels beneath it.

You're removing the parts of the page that will hold the main page content as well as the footer. You'll add these sections back in Dreamweaver. For now, you're preparing the document to export the page banner (the logo and the navigation bar).

[View full size image]

After you draw a slice object over an image in Fireworks, the image turns neon green.

Tip

You can customize the slice color by using the color swatch in the Property inspector when the slice is selected.

It's a good habit to name all your slices; doing so makes it a lot easier to troubleshoot problems in th218 code if the need arises.

Notice that the slice inherits the default export option, which is GIF WebSnap 128. Keep the default setting for now. You'll change it in the next lesson.

Slicing the navigation bar will require a little more work; you'll deal with that in the next lesson.