- 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 CSS Layers
With all the graphic slices optimized, you’re ready to tackle the next major task: exporting a Fireworks document. As you learned in Lesson 2, Designing a Page Interface, every Fireworks slice by default becomes an HTML table cell upon export. However, we want to use the newer, standards-compliant layout mechanism: CSS layers. You can export slices to XHTML standards-compliant CSS layers, instead of HTML table cells (which is the good news), but doing so disables all your buttons, including the slices and scripts that enable them to function as buttons (which is the bad news).
Because you cannot get standards-compliant XHTML and working buttons at the same time, you’ll use a workaround method to export your design. You’ll export your design two times, each time with its own procedures and purposes:
- You’ll first export the overall page layout as CSS layers
- Then you’ll export the functional navigation bar as nested tables
After the two export processes have been completed, you’ll reassemble the full page in Dreamweaver in Lesson 4.
In this section, you’ll export the page layout as CSS layers.
- Save interface_slices.png as interface_layers.png.
You’ll use this file to export the overall page layout. Some of the changes you’ll make to it in preparation for export will be destructive, so to protect your earlier work you’ll save this version under a different file name.
- On your Desktop, create a folder named jade_valley. Make sure the name of the folder is in lowercase letters.
This folder is going to be the root for the site. In other words, all the site assets—all HTML files, graphic files, and so on—will be stored in this folder.
As you know, when you go through the export process, Fireworks will generate an HMTL document (with layers) and an image for each of the slices. You want all those files to go into this folder.
- With the ABOUT US button slice selected, choose Modify > Symbol > Break Apart. Perform the same procedure on all the other
button slices.
You’ll export the navigation bar separately later, so at this point you’ll need to remove all behaviors that are attached to the slices in order to prepare for the export of the page architecture.
- Use the Slice tool to draw a slice over the navigation bar area. Name it navbar.
This allows the entire navigation area to be treated as one entity during export.
- With interface_layers.png open, choose File > Export.
This step accesses 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 template.htm in the Save As field. Select CSS Layers from the Export drop-down menu, and choose Fireworks Slices from the Source drop-down
menu. Make sure the checkbox next to the Trim Images is not selected. Finally, check the box next to Put Images in Subfolder
and verify the word “images” appears to the right of the Browse button.
You’ve done a lot in this step. Let’s take a moment to discuss each of these options.
You named the new HTML file template.htm. You’ll base your template on this file when you use Dreamweaver to build the Jade Valley Web site in later lessons.
The Export drop-down menu tells Fireworks how to export your design. The CSS Layers option exports the page architecture into CSS layers that reconstruct the original design.
The Put Images in Subfolder choice ensures that the generated GIF and JPEG images get saved in the right place. In most Web sites, images are stored in a centralized folder—often called images—separate from the HTML files. By checking this box, Fireworks automatically creates an images subfolder within the Save In folder you specified earlier.
- Click Export to export the template.htm file.
Fireworks exports all the images, according to your export criteria, as well as the HTML needed to create the page.
- Launch a Web browser and review the exported template.htm file by choosing File > Open File. Navigate to the jade_valley folder
on your Desktop. Select template.htm and click Open.
You’ve optimized and exported the interface design for the Jade Valley Web site, and as a result you have all the graphic and HTML files that are needed to reconstruct the Fireworks design. Before you import this design into Dreamweaver for further work, you should review the exported HTML file in a browser. After you’re satisfied with the results, you can begin reconstructing the design and creating the template in Dreamweaver. By reviewing the file, you’ll be able to detect any problems that appeared during the export process and resolve them before investing time and effort on something that’s not right.
Mouse over the navigation bar to make sure all the buttons function properly. Because the roll-over behavior was removed prior to the export, the navigation bar does not work.
- Choose View > View Source to review the source code.
Notice the <div> tags in the source code. You’ve successfully exported the page architecture as CSS layers.
- Save and close interface_layers.png.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
You’ve exported the Jade Valley Web site design. Next, you’ll need to export the navigation bar.