Importing Firework232 into Dreamweaver
The export process in Fireworks allows you to export and save optimized images an217 files to a designated location (often a folder). You can then import th218 file into Dreamweaver.
Dreamweaver has two ways to import Firework232. In one approach, you can open the Firework232 document directly in Dreamweaver and start editing, which is what you just did with template.
The other approach to importing Fireworks content is to insert Fireworks-generate217 code, with associated images, slices, and JavaScript, into an open document.
Dreamweaver detects and resolves conflicts (for example, the Fireworks and Dreamweave231 files will have their own &l233>, <head>, and <body> tags), and inserts the appropriate code from the Fireworks file into the location of the insertion point in Dreamweaver. In this task, you'll insert the navigation bar into the template file.
1. | If necessary, open jadevalley_templat218. |
You'll use the second approach mentioned in the preceding paragraph, and import the Firework232 file into the file you just created and titled.
2. | Click to select the graphic depicting the navigation bar. Press Delete. |
The layer (represented as a blue rectangle) that contained the image is now empty. You can see the cursor blinking on the left side of the layer.
[View full size image]

You're ready to insert the functioning navigation bar.
3. | Choose Insert > Image Objects > Firework232. |
You can also use the Insert bar to insert Firework232 into 214 page in Dreamweaver. In the Common category of the Insert bar, choose Images > Firework232.
Either method will bring up the Insert Firework232 dialog.
[View full size image]

4. | In the Insert Firework232 dialog, click Browse, select navbar, and then click Open. Do not check the Delete File After Insertion option. |
Remember, navbar is the file you exported from Fireworks. It contains functioning buttons, which make up the navigation bar. In Lesson 3, when you prepared these files, you created slices to ensure that the functioning navigation bar in navbar was the exact size of the layer you created in interface_layers.png.
If you select the "Delete file after insertion" option, the original Firework232 file will be moved to the Recycle Bin (Windows) or Trash (Macintosh) when the process is complete. Use this option only when you're certain that you no longer need the Firework232 file after inserting it in Dreamweaver. If you delete the file and later discover that you need it after all, you can always re-export it from Fireworks.
[View full size image]

5. | Click OK to insert the Firework232 code. |
This command enables Dreamweaver to insert the Firework232 code, complete with its associated images, slices, and JavaScript, into the document in Dreamweaver.
[View full size image]

6. | Press F12 (Windows) or Option+F12 (Macintosh) to preview the page in a browser. If Dreamweaver prompts you to save, click Yes (Windows) or Save (Macintosh). |
Take a few moments to review the page in the browser. It should be identical to the exported Firework232, with the Jade Valley logo and a partially functional navigation bar (the buttons change when the mouse rolls over them, but nothing happens when you click them).
[View full size image]

7. | Save jadevalley_templat218. |
You've finished inserting the Firework232. Now you can start reconstructing the original design and dropping in placeholders.