Fireworks Tutorial: create rollover images for a side navigation bar and export for dreamweaver

Host Unlimited Websites For $3.88 ! Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, $150 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee Follow on Twitter: RSS Feed: In this tutorial from, we will be creating some Rollover Buttons in Fireworks CS4 but webmasters using Fireworks CS3 can also use this tutorial. using the duplicate state function and changing or altering the 2nd state of the rollover image we can export both images for use in Dreamweaver or your favourite HTML web editing sofware.

25 thoughts on “Fireworks Tutorial: create rollover images for a side navigation bar and export for dreamweaver

  1. hi, it could be lots of things, I would guess that theres a problem with the CSS. it could just be a one off glitch in which case you could just delete the css and apply it again for that page. if there are any attributes with flash on the screen then that may have an effect too.


  2. Hey, when I exported them, for each button it made like 10 files, one for each row, column, and frame. Why did it do this?

  3. Hi, ill need a little bit more information, I tried to re create what you have said but cannot see where you went wrong.

    did you duplicate the first state and export the up image first, then export the over image, and then export the down image?

    if you did that then you should just have 3 images for each button. 

    are you using fireworks cs3? if so did you make the buttons using the button editor?

    lol, tell me a little bit more.


  4. Okay I still have no idea why it did that, but I found another way to make it work.
    In the export box, you can select, Export: "states to files" and it’ll make a .jpg or w/e file for each state.
    I didn’t make a down image, though I wanted to. In the Dw box for inserting a rollover image it only gives you boxes for two images, how can you put in a third for down?

  5. you can insert it as a navigation bar and that will give you four choices

    over while down

    then choose to either insert horizontally or vertically.

  6. so i got all my buttons how do i use all my buttons into a navigation bar or do you have a video for that?

  7. This video Is great work imma have my student check out your
    TUTS they can from your style. And great cam angles. 10 out of 10

  8. Great video- very clear. Unfortunately I have CS3 not CS4, which wasn’t made very clear by your title, so I cannot use states! It has however, got me interested in upgrading to CS4 :-)

  9. Photoshop has many more features for adjustments but fireworks is used to rapidly prototype web designs for clients.

  10. I don’t know, you can only download or get CS4 from Adobe, but if you have the other versions of Fireworks then you can upgrade it.

  11. I dont have the "state" option or a "window" tab. I am using Fireworks 8. Whatdo I do?

  12. I did in this video called insert images into dreamweaver. the images are placed into a folder then I put them into another folder and define a site while defining the root folder.


    I have a website with 1000 + video tutorials. go to the site and in the dreamweaver section you will find a more in depth explanation of how to define a site in dreamweaver.

  13. Americanii creeaza website-uri, olandezii construiesc masini zburatoare, italienii fac autostrade moderne…Politia din Satu Mare, Romania, manipuleaza calculatoarele, intercepteaza telefoanele, manipuleaza oamenii…SISTEM DICTATORIAL FASCIST…tiganii Uniunii Europene

  14. Had headphones on, your intro blew my eardrums out. Will look for help elsewhere.

Comments are closed.