Unit 2 Selby High School Dreamwevaer
Rollover Buttons
Unit 2 Selby High School Dreamwevaer
Objectives and outcomes• To understand how to make rollover
buttons
All students will create rollover buttonsMost students will duplicate their homepage to create content pages
Unit 2 Selby High School Dreamwevaer
Step 1• Create a new fireworks file
260 Pixels BY 50 pixels
Unit 2 Selby High School Dreamwevaer
Step 2:• Create 3 buttons that look identical.• SAVE AS homepage up etc
Biography up.jpeg
Homepage up.jpeg
Muisc up.jpeg
Unit 2 Selby High School Dreamwevaer
Step 3:• Create the rollover buttons• Alter something about each button so it
changes when you roll your mouse over it. • SAVE AS homepage over etc
Music over.jpeg
Homepage over.jpeg
Biography over.jpeg
Unit 2 Selby High School Dreamwevaer
You should now have 8 buttons
“UP” “Over”
Unit 2 Selby High School Dreamwevaer
Step 4:• Insert into dreamweaver• Click in the layer you want them to go in. • INSERT> IMAGE OBJECT>ROLLOVER IMAGE
Original Image = UP
Rollover Image = Over