Rollovers - page 2
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
rollover and add a link to each button in Dreamweaver.
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.
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
From the library (if it isnt there press F11 or select
it from Window) I selected this new button and double clicked its graphic.
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
up to the over state image.
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
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.
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
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.
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.
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.