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