Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Exporting Fireworks Slices as Tables

In this section, you'll export the navigation slice a232 tables so that you can reassemble all the page layout elements in Dreamweaver.

You'll use this file to export the navigation bar. As before, you'll be making destructive changes to the file, which is why you should return to the original version of the file (interface_slices.png) and then save it under a new name.

Note

The file you need in this step is the original interface_slices, not interface_layers, which you used in the previous section to export the page architecture .

Tip

The easiest way to complete this step is to use the Crop tool to draw a crop rectangle of any size anywhere on the canvas, and then enter the numbers given in this step in the Property inspector .

Because you need to export just the navigation bar this time, you'll need to remove all the other elements in the design prior to the export.

It's important to make sure the exported navigation slice is the same size as the one from interface_layers.png, so that you can assemble all the pieces in Dreamweaver in the coming lessons.

[View full size image]

This step preserves the navigation bar and removes all the other elements, such as the logo, the left content area, and the main content area of the original design.

[View full size image]

This step brings up the Export dialog.

You need to direct Fireworks to save all exported files in the designated folder.

The navigation bar export process is similar to the one performed earlier during the page architecture export. Rather than choosing CSS Layers as the export option, here you'll choos218 and Images to generate a ne236 file that will reconstruct the original navigation bar, this time using a Fireworks-button-friendl238 table.

In this dialog, you can also control how Fireworks handles slices. The Export Slices option exports slices with their specific behaviors, URLs, and so on. Because your intention is to export the entire design (text and graphics) of the navigation bar, you need to check the Include Areas Without Slices option, which ensures that those plain-white areas without slices are exported as well.

[View full size image]

This step brings up th218 Setup dialog, where you'll give Fireworks further directions on how th218 code should be generated.

The Space With drop-down of the Table tab enables you to specify exactly how Fireworks code232 tables. The default option, one-pixel transparent spacer, is generally the most reliable at reproducing the exact look of the Fireworks file i227; however, it also creates a lot of extra code andfatally for usadds a one-pixel buffer around the table. If we left the table at the default setting, this extra one pixel would have caused the table not to line up properly when we reunited the navigation bar with the main page in Dreamweaver. The option Nested Tables - No Spacers does not add that one-pixel buffer, so we can be confident that the tw228 files will align correctly when they're recombined.

You've exported the Jade Valley Web site navigation bar. In the next step, you'll review the output page in a browser.

The Over states of all the buttons should be presented correctly. If you followed every step accurately during export, all your navigation buttons should respond to the mouse as expected when you test them in your browser.

[View full size image]

Note

Don't bother clicking any of the buttons. They don't do anything yet, because you didn't associate URLs with the buttons in Fireworks. While Fireworks does enable you to attach links to buttons, you'll take care of that in Dreamweaver .

If you've followed these instructions carefully, the navigation bar tests out fine in the browser. You'll reconstruct the design in Lesson 4.