3. master page:
whole
make sure you’re in the master page. under common
library panel choose buttons > bevel button-blue
M E T A L
S C H O O L
4. master page:
whole
drag the blue button on to the canvas. select it and adjust w and h
properties as shown above in the properties box
M E T A L
S C H O O L
5. master page:
whole
in the center of the button symbol you will see a ‘+’. that
indicates it is a button. double-click it to open the button editor
M E T A L
S C H O O L
6. master page:
whole
use the sub-selection tool to choose the color patch on the button (not the text or
the gradient but the whole color patch). hover over different regions of the button
to get the hang of the 3 areas within it
M E T A L
S C H O O L
7. master page:
whole
with the color segment on the button selected use the color box in the properties
panel to choose the solid color of #221100 (dark brown)
M E T A L
S C H O O L
8. master page:
whole
double-click on the name ‘button’ and type in ‘home’ instead. click outside
the button. click on the yes button in the update dialog box that follows
M E T A L
S C H O O L
9. master page:
whole
notice in the properties panel, we are working currently with the ‘up’ state.
change it to ‘over’ from the drop-down menu to style the next state
M E T A L
S C H O O L
10. master page:
whole
the button vanishes. to bring it back, click on the ‘copy up graphic’ button
M E T A L
S C H O O L
11. master page:
whole
choose the color segment of the button once again with the sub-selection
tool and make the color #009900. choose the text region and change to
black text #000000
M E T A L
S C H O O L
12. master page:
whole
click outside the button once. change the state to ‘down’ in the
properties panel
M E T A L
S C H O O L
13. master page:
whole
choose the color segment once again and change it back to
#221100 (dark brown). change lettering to #cccccc (grey)
M E T A L
S C H O O L
14. master page:
whole
the finished down state of the ‘home’ button
M E T A L
S C H O O L
15. master page:
whole
the home button on the menu bar
M E T A L
S C H O O L
16. master page:
whole
make a copy of the home button by option-dragging it to the right. select the new
copy and change the text in the properties box to ‘albums’ as shown above
M E T A L
S C H O O L
17. master page:
whole
the two menu buttons created thus far
M E T A L
S C H O O L
18. master page:
whole
similarly create more buttons and name them as above
M E T A L
S C H O O L
19. master page:
whole
the whole menu bar with 8 buttons
M E T A L
S C H O O L
20. master page:
whole
to enable the links, select the rectangle hotspot tool from the tools menu
on the left and draw a rectangle around the ‘gallery’ button
M E T A L
S C H O O L
21. master page:
whole
with the hotspot selected, choose the link as ‘gallery.htm’ as
M E T A L shown above. select from below the dividing line
S C H O O L
22. master page:
whole
similarly for the ‘contact’ button
M E T A L
S C H O O L
23. master page:
whole
...and the ‘about’ button
M E T A L
S C H O O L
24. master page:
whole
preview all pages in safari
M E T A L
S C H O O L
25. master page:
whole
clean up the layers panel and name the various button layers
appropriately
M E T A L
S C H O O L
