Rollover Buttons

Unit 2 Selby High School Dreamwevaer

Objectives and outcomes

• To understand how to make rollover buttons All students will create rollover buttons Most 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

Unit 2 Selby High School Dreamwevaer