images...editing in fireworks

Editing and Updating the Interface

Here's how to edit the Navigation Bar images and update your web page images from within Fireworks.

1. Start Fireworks and open local_files/fireworks/techface.png
2. On the docked toolbar, click the Hide Hotspot and Slices button to enable object editing (it's way at bottom). But note first, the approximate size of each slice. Your edited elements will have to fit into their slice areas.
3. If it's text you are editing, double-click the text to open the text editor.
4. If you are editing fills or strokes, select the object and change it's fill or stroke properties from the appropriate palette.
5. Inspect all five frames of the image to make certain everything is correct in every frame.

Upon completing your edit, preview the image to make sure it looks good, then follow the updating instructions below.

To update the web images in your site:

Select frame 1 in the frames palette, then select export from the file menu. Make sure Slicing: Current Frame is selected and that HTML Style is set to none.

HTML:

Browse to the appropriate frame folder in your Dreamweaver site. Click Save. You'll get an overwrite warning, which is normal. Click OK to update the existing images. Repeat for all frames in which you've made changes. So long as you remained within the existing slice structure, your Dreamweaver tables will be perfectly updated.

Editing the Fireworks .png files...

To edit any other images included with this Design Pack™... Open the .png in fireworks and make you're changes. From the Fireworks file menu, select export and browse to the images folder of your Dreamweaver site. If you are editing an original, simply select the existing file and click OK... Fireworks will ask if you want to overwrite it. Click OK again.

To Make Heading Images for your Tables

For economy of file space, certain images can be derived from a single Fireworks file called (e.g.) heading.png...Here's how you'd do it to make page headings that appear at the top of tables, for instance:

1. Create a new Fireworks File
2. Design your heading
3. Optimize and Save it as heading.png (native Fireworks)
4. Select Export from the file menu
5. Save as or overwrite an existing heading .gif or .jpg
6. Close heading.png without saving it if you want to reuse it as a "template" from which to derive other headings.

Advanced Edits of the Fireworks Navbar file...
Make sure you have a backup before proceeding!

The most important point to remember when working with techface.png is that the tables that contain the current Navigation bar have a structure dependent on the size of the slices in the master file. So if you think you'll need to change the slice locations or the number of slices, it is strongly recommended that you do it before creating your web pages. You should attempt this level of edit only if you are a proficient Fireworks user. Follow the blueprint on the images overview page for how we created the current table based on the size and number of slices.

After completion of your edit, follow the updating instructions at the top of this page... then open Dreamweaver and make any necessary changes to the table(s) that contain the navigation bar.