information_services_logo

Macromedia Fireworks
3.0
Macintosh and Windows

 

Using With Dreamweaver

for_beginners basic_skills advanced_skills using_with_dreamweaver web_resources

Table of Contents

Saving Fireworks Files for Use in Dreamweaver

It is a standard in web page design that the graphics be saved as GIF or JPEG files. These are universal image files that can be viewed across many platforms. To export a file for use in Dreamweaver:

    1. Make a folder on your desktop in which your are going to put all of the files for your webpage.
    2. Within this folder, create a folder for your images.
    3. In Fireworks, Find the Optimize/Object/Stroke/Fill/Effect window. It should look like this:
      optimize

      If it is not open, from the Window menu, select Optimize .
    4. In the pull-down menu to the left of the Matte field, select GIF or JPEG. For most purposes, GIF is probably the best format to use, especially if you would like to have a transparent background for your graphic.
    5. From the File menu, select Export...
    6. Put in a name for the file in the File Name field, making sure to keep the extension (.jpg or .gif).
    7. Navigate to the images folder from the folder on your desktop and click Save if you are on a Windows computer. Click Export if you are using a Mac.

      Note: The exported graphics file cannot be edited. Any changes must be made to the PNG file. If you plan on making changes to your images later, make sure that you save the PNG file and hold onto it for later use. When you make the changes to the png file later, you will need to export the file again.

Exporting a Rollover Button to be Used with Dreamweaver

Dreamweaver has a helpful tool that will allow you to Insert a Rollover Button into your web page. Follow the exporting instructions to prepare your files for Dreamweaver.

Export the button

Export each button individually so that they can be used on a web page. When you export, you will have a GIF file for each of the states of the button ("up," "over", etc.).

  1. Select a button in the Fireworks document window by clicking on it once.
  2. From the File menu choose Export Special then Selected Slice.
  3. In the Export Preview window, adjust your image settings if desired (GIF will likely be the best format choice) and click the Export button.
  4. In the Export window, change the name of your button. It should be a short name, all lowercase with no spaces. Remember to keep the extension (.gif).
  5. In the Style field, choose None.
  6. If you have created a web site folder already, navigate to this folder and click Export. Otherwise, create a new folder for your web site files and click Export.
  7. You should now have a GIF for each of the states of the button. (The images will have "strange" names such as button.gif, button_f2.gif, button_f3.gif and buttonf4.gif. These names correspond to the original "up" image, the "over" image, the "down" image and the "down while over" image.)

Inserting Graphics Files into Dreamweaver

To Insert a Single Image:

  1. In Dreamweaver, go to Insert and choose Image.
  2. Navigate to the folder where your images are saved and select the image you would like to insert/
  3. Click Select if you are using a Windows computer. Click Open if you are using a Mac.

Click here for information on how to insert rollover images and image maps into Dreamweaver.