Rollover Button HowTo
|Open Fireworks and select new document|
|Choose the letter A to create some text and click in the document and type a word.
Choose the square and make a rectangle over the previous text. Yours will be white but mine are yellow and blue.
Choose the arrow selection tool and click to select the rectangle with the text in it.
From the main menu, choose edit, copy.
From the main menu, choose File, New and paste what you just copied.
Export (save) this file as button1-word.gif
Now delete just the text leaving the square.
Export this file as button1-cover.gif
|Now for the Dreamweaver portion|
|Create a new file.
Save the file as practice.htm in the same directory as the previous images.
Choose insert, table from the main menu. I chose to make my table with 1 column and 7 rows.
Type the text in the third row cell.
To make the rollover image(button), there are many ways but I'll give 2 because one should work for Dreamweaver 3 but I don't know which one.
From the Common tab, choose image rollover.
From the main menu, choose Insert, Image Object, Rollover Image.
A new window will pop up with something similar to the image below. Just fill it out similar to mine and click on.
|Save the file and preview in a browser.
Now, insert a picture in the last row.
Click in the last cell of the last row and choose Insert, Image from the main menu.
My image is just the pop up window from above.
Pick your image and click ok.
Save the file and preview in a browser.
|With a table, I can even put stuff after the picture in an additional cell and go with a whole extra set of questions and answers. Think of what I can do with multiple rows and multiple columns! I decided to show my table in this file as bright green. I know I have no color sense but the green was bright and cheerful to me at the moment.|
|I almost forgot. Here are the files used in the practice page which can be viewed by clicking the practice page and zipped files links.|