Skip Navigation Links
Raymond J. Kimball
Link to TechLEAP Program Home Page Link to Computer Science and Computer Applications Department Internship Program
Link to R.J. Kimball List of Courses Taught

Shining Star
Link to Prof. Kimball's Copyright Resources Site
Professional Web Design
Link to Information Technology Institue - College Web Site Designed by RJ Kimball
Raymond J. Kimball Biography
Fireworks Home
Notes - Drawing
Notes - Exporting
Greenhouse
MC Graphics Files

Adventure Travel

Fireworks File

adventure5.htm


Lab Assignment

Fireworks Notes 2-

Libraries, Slicing, Accessibility, Optimization, Exporting Files

Working with the Library
Using the Library to duplicate buttons:

  • Choose window > library to view library panel
  • Drag an instance of the button from the library to the canvas. Drag as many copies of the button from the library to the canvas as you would like
  • Select the copied instances of your button and change its name in the Text field of the property inspector
  • To edit buttons -- double click on the button in the library. This will launch the button editor. Once changes are made to the button in the library, all instances on the canvas will change.

Page Slicing
To insert slices on graphic objects:

  • Use pointer tool to select object
  • Choose Edit > Insert> Slice
    OR choose your slice tool from the tools panel and draw a shape around the object.
  • * * * Name your slice in the property inspector * * *
  • To show or hide slices, choose the show/hide button in the web layer of the layers panel or choose the show/hide slice button on the tools panel
  • Add links to objects by selecting the slice and typing the destination URL in the links area in the Property Inspector

To Create An HTML Layer:

  • Select slice tool from the tools panel
  • Draw layer in appropriate place on canvas
  • Select "HTML" from drop-down menu in Property Inspector

Site Accessibility:
Use alt text to describe graphic or functionality

  • Choose static images and enter descriptive text in alt tag field in Property Inspector
  • Choose images that will be linked and add text that describes functionality in the alt text field (e.g., "Go to Bio Page")

Optimization of Graphics

  • Select 4-up View button
  • Note optimization information presented (file type, download time, etc.)
  • Choose hand tool from the tools panel to drag original file (top left pane) to bring individual objects into focus
  • Switch to pointer tool to select individual slices
  • Choose window > optimize
  • Select settings for each pane using the Export defaults on drop-down menu
  • Compare settings
  • Once desired setting is chosen, select appropriate pane and choose preview.

Exporting to DreamWeaver

  • Save your production copy as a .png file with a slightly different name, e.g., adventurehome_production.png  You will use this copy for later editing.  When you export, some of the layers will collapse and you may lose your production copy.
  • You will now export the original, adventurehome.png.
  • Choose file > export
  • Navigate to appropriate folder
  • Choose HTML and Images as the Save As Type
  • Select Export HTML File from the HTML drop-down menu
  • Make sure the checkbox next to the Include Areas without Slices Option is selected!
  • Check the box next to Put Images in Subfolder
  • Click the Options Button on the right side of the Export dialog box
  • In the General Tab, choose Dreamweaver XHTML

Adapted from and with grateful acknowledgement to Prof. Krista Perry, Macromedia Studio MX Workshop, Radford University, May, 2004

Contact Information
Prof. Raymond J. Kimball
Information Technology Institute
Gaithersburg Business Training Center
12 South Summit Ave.
Gaithersburg, MD 20877
240-567-3825
Raymond.Kimball@montgomerycollege.edu

© Raymond J. Kimball 2000 - 2007. All rights reserved