Remember: Your Webgenre website is due on Friday,
March 3rd
. Students will present their completed
Webgenre websites in class on Friday.
1.. Make sure you add buttons to your Web Genre
Website. Study how how some of your favorite
websites use buttons. What can you learn about
how to use buttons in websites?
2. Go look at the websites that I have selected as
examples of the use of rollovers to aid in website
navigation. When do these pages use rollovers and
how effective are they? Can you detect a general
pattern for how these websites use rollovers?
You can add these borders in Dreamweaver, but try
to make most of your image adjustments in Firewworks.
You can create image maps in both Fireworks and
Dreamweaver. Make sure you test your imagemaps
to make sure the links work
When you create image maps in Dreamweaver, the program
adds an "#" to the link you add, which then tries to make this
link to another page in this website. It does this:
...../Design/imgbrders.htm#http://www.cclewis.com/photos/
index.htm
If you want to link to an another website, make
sure you remove the "#" from the link addresss.
Remember that Dreamweaver used the "#" symbol to
link to anchor links within the same webpage.
7. Creating Basic Rollovers using Dreamweaver MX 2004
There are four states that can be used in Rollovers
"Up" is the look when there is no mouse cursor inside
the image area.
"Over" is the look when the mouse cursor is moved
over the rollover area.
"Down" is the look after the mouse clicks.
"Over While Down" is the look when the mouse cursor
passes over a rollover that is in the Down state.
6. Making Buttons in Dreamweaver
Go to "Insert" on the menu bar and select
"Interactive Images" and then select
"rollover image."
When the rollover menu comes up, make
sure you select "pre-load images."
A simple rollover has two states:
1) an active and 2) inactive state.
Create two different versions of the
button you want to make a rollover.
You can vary the background color, the color
of the text on the button, and even the font
of the button.
You can even vary the size of the button just
a little bit, so that when you roll the mouse
over the button it appears to jump out at you.
Insert these two different button states in
the "rollover" menu.
Make sure that you save both of these button
images and put them on the web.
Try not to get too fancy when you first start
making buttons. You can over-due the effect.
Make sure that you can still easily see the text
on the button even with a changed background
color or text color. Don't let the text get
blurred or smeared.
Go to "Windows" in the menu bar and
select "Behaviors." This will cause a
"Behaviors" box to open up.
Select the button you want to use so that
when the mouse rolls over it, it will cause
another image on the page to swap.
Make sure that the central image that you
want to swap has an "image name."
Make sure that all the images you use in these
swaps have "image names". You can add "image names"
to images when you work with them in fireworks.
Make sure that the images you want to swap
are the same size.
Now select the button you want to make the
rollover button for the image swap.
Now select "+" in the "Behaviors" box and then
select "swap image."
Make sure that you select the "preload images" box
here.
In the Behaviors box select the image name that
you want to swap and now select the image you
want to swap it with, for exampe cameraex.gif.
In swaptest.htm, the image name is "Cam" and
the image to swap with it is eflags.jpg
If you want to swap multiple images on the same
page using one rollover, select other images that
you want to swap in this same box and then
choose the images you want to swap them with.
Be careful with this image swap trick. Don't
swap more than 2 or 3 images at the same time.
