Course Outline

Offered by Networked Information Services

Instructor: Roland Jaeckel: rjaeckel@bu.edu
Prerequisites: Fireworks: Introduction (or equivalent knowledge).
2 hours (54 minutes lecture, 61 minutes hands-on exercises, 5-minute break)

Introduction (15 min)

1. Examples of navigational systems
2. About our project

Hands-on exercise (6 min)

1. Download the tutorial site into Dreamweaver on the local machine.

Creating the visual elements (11 min)

1. Drawing buttons
2. Creating the Up state
3. Creating the Over state
4. Creating the Down state
5. Creating slices

Hands-on exercise (32 min)

1. Start Fireworks and create a new document with the following dimensions: 580 pixels wide and 22 pixels high, 72 dpi resolution, white canvas color.
2. Create all five labels for the new navigation and position them accordingly. About should be positioned at x=224 and y=3, Contact should be at x=524, y=3.
3. Align the labels, group them, draw the delimiting line, and position line at x=210 and y=21.
4. Duplicate the first frame via the frames panel.
5. Create the square indicator symbol with the square shape tool. Make it 10 by 10 pixels and position it at x=210 and y=6.
6. Turn the square into a symbol and create an instance for each label using the ALT+SHIFT duplication method.
7. Position the indicators a few pixels to the left of the labels.
8. Give your symbol the look as defined by:
   fill color: #FF0000, solid stroke: none, effect: inner bevel, smooth.
9. Duplicate the Over state frame and rotate the indicators.
10. Create the individual slices.

Assigning properties and behaviors (10 min)

1. Naming slices
2. Setting the URL and Alt text for a slice
3. Defining export format for slices
4. Applying behaviors

Hands-on exercise (6 min)

1. Set the properties for all the slices as described.
2. Apply the behaviors as shown.

Making a nav bar intelligent (8 min)

1. Examples of an intelligent/dumb navigational bars
2. Understanding the rationale
3. Demonstration

Dreamweaver and Fireworks (10 min)

1. Setting up the Export
2. Exporting the Fireworks document
3. Publishing Fireworks HTML

Hands-on exercise (17 min)

1. Set the Export defaults as described.
2. Create Dreamweaver library items.
3. Learn to maintain your nav bar from Dreamweaver.
4. Roundtrip HTML.
5. Open the library item in Dreamweaver and launch Fireworks.
6. Change the text and click Done.