- What You Will Learn
- Approximate Time
- Lesson Files
- Optimizing the Logo
- Optimizing the Navigation Bar
- Exporting Fireworks Slices as CSS Layers
- Exporting Fireworks Slices as Tables
- What You Have Learned
This chapter is from the book
This chapter is from the book
This chapter is from the book
Exporting Fireworks Slices as Tables
In this section, you’ll export the navigation slice as HTML tables so that you can reassemble all the page layout elements in Dreamweaver.
- In Fireworks, reopen interface_slices.png. Save the file as interface_navbar.png.
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.
- Use the Crop tool to remove everything except the navigation bar area. The resulting canvas size for the navigation bar slice
should equal the W, H, X, and Y coordinates for the navigation slice from interface_layers.png, which are 539, 115, 161, and
0, respectively.
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.
- Double-click anywhere inside the selection area to remove everything except the navigation bar.
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.
- With interface_navbar.png open, choose File > Export.
This step brings up the Export dialog.
- In the Save As drop-down list, navigate to the jade_valley folder on your Desktop.
You need to direct Fireworks to save all exported files in the designated folder.
- Type navbar.htm in the Save As field. Select HTML and Images from the Export drop-down menu, and choose Export HTML File from the Source
drop-down menu. Select Export Slices from the Slices drop-down menu. Make sure the checkbox next to Include Areas without
Slices is checked. Finally, check the box next to Put Images in Subfolder.
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 choose HTML and Images to generate a new HTML file that will reconstruct the original navigation bar, this time using a Fireworks-button-friendly HTML 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.
- Click the Options button on the right side of the Export dialog.
This step brings up the HTML Setup dialog, where you’ll give Fireworks further directions on how the HTML code should be generated.
- In the HTML Setup dialog, switch to the Table tab, and select Nested Tables - No Spacers from the Space With drop-down.
The Space With drop-down of the Table tab enables you to specify exactly how Fireworks codes HTML tables. The default option, one-pixel transparent spacer, is generally the most reliable at reproducing the exact look of the Fireworks file in HTML; however, it also creates a lot of extra code and—fatally for us—adds 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 two HTML files will align correctly when they’re recombined.
- Click Export to export the navigation bar to the jade_valley folder on your Desktop. Save and close interface_navbar.png.
You’ve exported the Jade Valley Web site navigation bar. In the next step, you’ll review the output page in a browser.
- Repeat the steps in the previous section to view the file, navbar.html, in a Web browser. Mouse over the navigation bar to
make sure all the buttons are working properly.
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.
- Close navbar.html.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
If you’ve followed these instructions carefully, the navigation bar tests out fine in the browser. You’ll reconstruct the design in Lesson 4.