So now we have our rollover menu, how did we do it?

Well, this is not going to be a tutorial, so set your expectations. Its more a prompt, especially for me as I keep forgetting how to insert the rollover and add a link to each button in Dreamweaver.

Fireworks
Ok, we start in Fireworks. These buttons were created on a black canvass 200 pixels wide and 50 high.

I added the text from the toolbar which is afairly standard in any package these days and the font just happened to be the one still selected from the Christmas card and as its nice here we are.

Entered two un-imaginative titles one for each link; Page 1 and Page 2 and then used the x (pixels across from the left) and y (pixels down from the top) axis properties, bottom left to make sure they were in line and spaced. When Vertically aligning text only the y setting changes.

I then selected a circle shape from the toolbar and with shift pressed to get a circle and not an ellipse I drew a small 5 pixel by 5 pixel circle. CTRL ALT and D duplicated the circle which I moved next to the page 2 text. Once again I used the x and y axis to align.

Symbols
I then selected the circle and Page 1 text together and pressed F8 to create a symbol and entered a description of page1 and ensured that 'button' was selected.

From the library (if it isnt there press F11 or select it from Window) I selected this new button and double clicked its graphic. This generates the button editor.

When functional the button is going to remain roughly the same except the circle will get bigger when you move the cursor over it to indicate that its cocked and loaded, so to speak.

From the button editor I click the 'over' tab and then from the bottom right select 'Copy Up Graphic'. This copies the original Page 1 button up to the over state image.

Animate
I then selected the circle only and changed the Width and Height settings (next to the x and y axis properties) to make it bigger. I then clicked on the circle and moved it round so it looks in proportion with the text now its bigger and noted its new x and y settings.

Once happy I then clicked 'done' for that symbol and repeated the process from the button creation for the second button (page 2). One point of note, don't forget to click on the 'Over' tab before editing the button. Many a time I have completely changed a carefully crafted button to realise I had just edited the original 'UP' state.

Export
With Both Buttons created we then save the fireworks file to wherever you save your work in progress or originals and then from the file menu select export.

From the following menu select where the button code will be created, I usually save it to the same folder as the html page it will be incorporated. Note the following; Save as type should be HTML and images, HTML should be export HTML, slices 'export slices', include areas without slices = yes, put images in sub folder = yes, my images are always in a sub folder called images anyway.

Click on Save and hey presto.

Dreamweaver
Now fire up Dreamweaver and load the page you want the buttons to exist in and locate the place in the page they should go.

From Dreamweaver ensure the insert menu bar is visible (CTRL + F2), select the 'common' tab and then the FW's button (Yellow with squiggly fw). Locate the button html you just exported from fireworks and if your inserting the menu buttons to more than one page ensure, delete after insertion = 'no'

Now, Your buttons are in the page, click the centre of each button and from the properties menu select the link to the page this button should load. If you have multiple pages do this for each button instance in each page. There may be a quicker way to code the page to each button before inserting to the destination page but I haven't figured it yet.

Your done. Have fun.

Footnote
In scenarios where you import the same buttons into a sequence of pages that all reference the same url's as with the movie reviews, then you can edit the code exported from Fireworks before importing it to Dreamweaver. For instance, the four buttons I created for the three movie reviews; Bourne Identity, Red Dragon and xXx were intially exported from Fireworks. I then edited the code in a text editor and located the part that called the appropriate page if a particular button was pressed. The first time after exporting from Fireworks it looks like this 'href="#"'. Replace the # with the page reference for each button and then simply import the buttons as usual to the pages. If your using the same buttons for a different set of pages you simply edit the exported fireworks code once more and replace the url with the one relevant for the new pages. Hey presto!