Exporting Fireworks documents

After having defined our general HTML options we still have a few more choices to make. We still have to decide and choose how we want to export the Fireworks document.

Publishing Fireworks HTML

This option creates all the images in a specific location and an HTML file that is recognized by Dreamweaver as a Fireworks HTML file. The Dreamweaver tools panel has the Fireworks HTML icon on it which allows for import of the Fireworks HTML.

If you export a nav bar like ours this is the preferred option. Since we will integrate the nav bar into an existing template we need not store it as a library item.

Creating Dreamweaver Library items

This is the second choice offered for HTML export. The file has to be stored in a valid Dreamweaver site within the /Library/ folder. The exported HTML is a library item that can be dragged and dropped into any of the HTML files in the site. It will automatically update if changes of the master library item are made.

Roundtrip HTML

When you export the Fireworks document with HTML and integrate that HTML file into Dreamweaver, the two programs exchange information behind the scenes. Dreamweaver learns through the Fireworks HTML the name and location of the source files. This allows for the opening of the Fireworks source file from within Dreamweaver.

This sounds simple and it in fact is easy to use. As a technology however it is exciting and a great feature of Dreamweaver and Fireworks. Even changes that were made in Dreamweaver are kept when graphical items generated in this fashion are edited in the source document.

Integrating our nav bar

We need to export the nav bar so we can plug it into the template. Choose File > Export from the menu or press the export icon in the main toolbar:

This will bring up the export dialog. It is important to make the choices in the export dialog from the top to the bottom. This is because when you change a higher ranking item it will reset the items below to the defaults which might be different from what you wanted.

First you need to navigate to the folder in which you intend to save the exported files. Let's navigate to the /practice/graphics/ folder. The file display box will show what you see in the screen shot above. There are some images in here that will be replaced when we export our new creation.

• File name: new-subnav.html
  This is the name of the Fireworks HTML file which will be created in the folder that is pointed to in the file selection box. The HTML will include all JavaScript code that is necessary to make the behaviors we assigned in Fireworks work within Dreamweaver.
• Save as type: HTML and Images
  Fireworks will export the HTML file and the images files that correspond to the sliced areas. For each of the frames there will be an image which is named by the slice name plus the indication of the frame (-o is for 'over', -d is for 'down').
• HTML: Export HTML File
  This directive tells Fireworks to create the HTML as a stand alone file. Other options would include to export the HTML as a Dreamweaver library item. This would entail that the file should be saved into the /Library/ folder of a valid Dreamweaver site. Fireworks would automatically name a file of that type .lbi ; other export options are available but exceed the scope of this tutorial.
• Slices: Export Slices
  This setting instructs Fireworks to cut the canvas according to the slices we created. Other options are available but not of relevance for our purpose.
• Include Areas without slices: checked
  We leave this checked so the unsliced area on the left of the nav bar is also exported.
• Put Images in Subfolder: unchecked
  This option allows for placement of the images in a different folder than the HTML. Accordingly the function is only available when you export HTML and images.
  

When clicking on the Save button the Images will be exported and the HTML will be created. Since there are images that have the same name Fireworks will prompt for confirmation to overwrite the existing image files. Cancel would abort the export and Options... will bring up the HTML export settings.

Let's save our file and confirm the overwriting of the image files by selecting the OK button in the following dialog box: