exercise - navigational design

Tags:

step one: open document

directions

  • Choose File | Open
  • Open site.png from SSC_Site folder
 

step two: create buttons

directions

  • Choose Edit | Insert | New Button
  • Choose Modify | Canvas | Canvas Color
  • Change canvas color to Transparent
  • Deselect 9-slice scaling guides: enable

Rectangle tool settings

  • Select Rectangle tool
  • Fill: #003366
  • Stroke: None
  • Select the Up tab
  • Draw a rectangle
    Size (W, H): 170 , 20
    Location (X, Y): 0, 0

text tool settings

  • Choose Text tool
  • Font: Arial Black
    Size: 10 point
    Color: #FFFFFF
    Attributes: Left
  • Type: BUTTON NAME
  • Location (X,Y): 5, 2

line tool settings

  • Select Line tool
  • Stroke:
    Color: #666666
    Tip Size: 2
    Stroke Type: Basic | Hard Line
  • Hold the Shift key down and draw a horizontal line
  • Size (W,H): 160, 1
  • Location (X,Y): 9, 15

 

button up

step three: define over state

Directions

  1. Click on the Over tab
  2. Click Copy Up Graphic
  3. Using the Selector tool, select the text
  4. Text color: #0099CC

button over

 

step four: define active area

directions

  • Click on the Active Area tab
  • Uncheck Set active area automatically
  • Using the Selection tool, select the slice area for the button
  • Using the Properties box, change the settings to be:
  • Width to 170
  • Height to 20
  • X coordinate to 0
  • Y coordinate to 0
  • Click Done
  • The button will appear on the stage
active area

step five: button library

directions

  • With the button still selected:
  • In the Properties window, change Text to OUR MISSION
  • Change X to 430
  • Change Y to 80


  • Choose Window | Library
  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to OUR STAFF
  • Change X to 430
  • Change Y to 100

  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to OUR TUTORS
  • Change X to 430
  • Change Y to 120


  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to OUR HOURS / LOCATION
  • Change X to 430
  • Change Y to 140


  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to REGISTRATION
  • Change X to 430
  • Change Y to 160


  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to STUDY RESOURCES
  • Change X to 430
  • Change Y to 180


  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to STUDENT FAQ
  • Change X to 430
  • Change Y to 200


  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to SITEMAP
  • Change X to 430
  • Change Y to 220


  • Drag Menu Item to the page from the Library window
  • In the Properties window, change Text to WEBMASTER
  • Change X to 430
  • Change Y to 240
assets palette - library tab

button properities

button locations

Shortcut:

  • Use Fireworks' smart drag and drop to place buttons. When dragging a button near an existing button, the application should automatically "snap" it into place.

step seven: slicing

directions

  • Select Slice tool

  • Slice 1
  • Size (W,H): 600, 80
  • Location (X,Y): 0, 0

  • Slice 2
  • Size (W,H): 430, 320
  • Location (X,Y): 0, 80
  • Choose File | Save
  • Choose File | Close
image with slices
AttachmentSize
Adobe Fireworks - Navigational Design - Exercise Files.zip127.25 KB