Creating a Navigational Bar with Rollovers Using Photodraw
http://www.arhu.umd.edu/technology/workshops/photodraw/navbar.html
Next Page
We'll create a navigational bar with rollovers and hyperlinks all in PhotoDraw. We'll export the HTML coding to use in our favorite editor.
1. On the toolbar, click New to open a new picture.


2. On the Draw Paint menu, click Shapes.

3. In the Shapes workpane, list only the button shapes (to keep our design simple.) Double-click the shape 6.

4. In the workspace, drag a resize handle so the button measures 1.0 in x 0.5 in.
Hint: The logo's width and height appear in the status bar in the lower right corner.

5. At the top of the Edge workpane, click Styles, and then click Theme 4 in the gallery.

5. Select the button, copy and paste it using the edit menu so that you have 3 buttons. Line them up next to each other in a rwo but leave a little space between the buttons.
6. Align the buttons precisely by selecting all three (shift + click each button). Use the Arrange Menu > Align > align top option.
7. On the Text menu, click Insert Text.

8. In the Text workpane, make these entries:

Enter "Syllabus"
In the font box, enter Verdana.
In the Size box, enter 12.0 pt.

9. Repeat for "Notes" and "Assignments".
10. Resize the button as necessary to match the text.You might have to realign the buttons.

Now we'll Adding a RollOver
A rollover effect changes your button's appearance when your reader hovers over it or clicks it
11. Select the first button.
12. On the Web Effects menu, click Rollover.
13. On the Rollover workpane, click Rollover 1 (a simple rollover). To preview the rollover effect on your button, click Preview in Browser.
14. Repeat for the second and third buttons. 
this exercise is continued... Next Page

 

 

Contact us with questions, comments and feedback: acs-worskhosp@umail.umd.edu
Catherine Hays Zabriskie chays@deans.umd.edu 301-405-2886
College of Arts and Humanities, University of Maryland