How to combine CSS and Fireworks


I am building my second website which will be my personal website (my first one was a dummy one by the book “Build Your Own Website The Right Way using HTML and CSS” by Ian Lloyd).

Here’s my question:

I wanna try to incorporate a rollover menu or buttons for navigation built in Fireworks. Will it be possible ,say, to have some CSS formatting in the external css file and these Fireworks elements on one website? If yes, can you give me some links to examples or any resources to see how it is done…?

Any examples of Fireworks, HTML and CSS working together…

Thank you

The menu you have defined in the macro media Fireworks can be easily editable with CSS on the Macro media Dream weaver.

Once you will export the file of menu made in Fireworks After that you will import into Macro media dream weaver. And over there you can merge your External CSS with the menu you made in fireworks.

There are many tutorials available of pop up menus made in Fireworks. You can Google these tutorials… Hope you will get much help from there…


In general you probably want to avoid creating any functionality using Fireworks. While it will work to create such, it will also create a whole lot of JavaScript to make the navigation function. Not to mention the HTML and CSS will leave something to be desired.

You can most likely recreate the menu using the graphics created in FW and use pure HTML/CSS to style it and if it needs functionality beyond what those 2 will allow for you can use some unobtrusive JavaScript as opposed to the bloat that FW will produce. :slight_smile:

Create an unordered list and use this for your menu, with text for the links.
Read a few tutorials on how to style lists as a menu.

Slice out a tiny thin vertical bit of your menu image and use this for the background for the <li> parts of your html menu.
Slice out a tiny thin vertical slice of your hovered menu image and use this as the background for the hovered <a href> .
Using CSS of course to style these bits.
Job done.

Treat fireworks as merely a source of the images to use.

Thanks for the quick reply,BPartch. The reason why I raised a question about Fireworks is that I got an advice from one web designer who said he started a few years ago by learning Fireworks, HTML and CSS. While HTML and CSS are powerful enough to create solid websites, the guy told me I can design anything in Fireworks (he suggested I can go to CSS Galleries and try to recreate some website as an exercise in Fireworks). He uses Fireworks for layouts as well.

So if I create a website in Fireworks, it should be pure Fireworks? I saw some tutorial on how to create websites in Fireworks. Can you expand a little on Fireworks usage from your point of view…?

Thank you. I appreciate your time.

Thanks for your advice,Dr John. Yes, I am using an unordered list for the menu. I am sorry I am not fully understanding this “slice out technique”. Did you mean slicing out from a menu made in Fireworks (and exported to Dreamweaver…)?
“hovered menu image”…? If you don’t have time to explain in more details, you don’t have to - I am gonna look up those tutorials you mentioned.

PS. Please, take a look at my today reply to BPartch. I would appreciate a couple of lines from you on this.