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

Host Unlimited Websites For $3.88 ! http://bit.ly/Powweb-Hosting-Sale
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:

http://www.twitter.com/dreamweaverman

RSS Feed:

http://www.dreamweavertutorial.co.uk/feed.xml

In this tutorial from http://www.dreamweavertutorial.co.uk, 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.

Category:

Education

Tags:

• fireworks
• side navigation bar
• export
• dreamweaver
• rollover
• images
• swap image
• fireworks cs4
• fireworks cs3
• duplicate state

[ingratiator]

you didnt make an initial dreamweaver page indicating your settings, folder creation et. al, so when im making buttons you kind of skipped all the important set up steps that would be important for a noob like me...you said you had made a vid that explains it but after reviewing your posted vids i could not find that video, ehhh appreciate the vids and all, but yeah, that is a bit infuriating for someone going step by step..  :\

thanks anyways

[DreamWeaverTutorial]

@ingratiator

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.

watch?v=R2o7UmAN2yQ&feature=re­lated

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.

[fmandwc2]

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?

[DreamWeaverTutorial]

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.

James

[fmandwc2]

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?

[DreamWeaverTutorial]

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

up

over

down

over while down

then choose to either insert horizontally or vertically.

[DreamWeaverTutorial]

insert>image objects> navigation bar

[USMCxFirefly]

your intro is a FAIL!

[yutubezone]

your channel name is Dreamweaver tutorials and you are making fireworks tutorials WTF but it still good tutorial

[troglodyte3344]

@teakz89 it will be 'frames' for fireworks 8 :)

[teakz89]

I dont see a "state" option under window tab. I am using Fireworks 8.

[teakz89]

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

[troglodyte3344]

@russelluk25  states are what frames have been renamed to.

[gkabas]

Yes... The only version you can download (legaly its the CS4)

Also I'm sorry for my previous mistake. (When I said "Upgrade to CS3")

[Aggregate02]

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.