exercise - creating graphical content

 

step one: open document

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

step two: optimize settings

directions

  • Turn on Show Slices
  • Choose Window | Optimize
  • Click on Slice 1 (see side image for slice numbering)
  • Slice Properties settings:
  • Name: site_header
  • ALT: UW - Madison Science Support Center
  • Optimize settings:
    GIF, Web Adaptive, 32 colors

  • Click on Slice 2
  • Slice Properties settings:
  • Name: site_testtube
  • ALT: Test Tube
  • Optimize settings:
    GIF, Web Adaptive, 64 colors

  • Click on Slice 3
  • Slice Properties settings:
  • Name: site_mission
  • ALT: Our Mission
  • Optimize settings:
    GIF, Web Adaptive, 16 colors

  • Click on Slice 4
  • Slice Properties settings:
  • Name: site_staff
  • ALT: Our Staff

  • Click on Slice 5
  • Slice Properties settings:
  • Name: site_tutors
  • ALT: Our Tutors

  • Click on Slice 6
  • Slice Properties settings:
  • Name: site_hours
  • ALT: Our Hours / Location

  • Click on Slice 7
  • Slice Properties settings:
  • Name: site_register
  • ALT: Registration

  • Click on Slice 8
  • Slice Properties settings:
  • Name: site_resources
  • ALT: Study Resources

  • Click on Slice 9
  • Slice Properties settings:
  • Name: site_faq
  • ALT: Student FAQ

  • Click on Slice 10
  • Slice Properties settings:
  • Name: site_sitemap
  • ALT: Sitemap

  • Click on Slice 11
  • Slice Properties settings:
  • Name: site_webmaster
  • ALT: Webmaster
exporting

 slice properties settings

optimize settings

step three: export settings

directions

  • Choose File | Export

    Export
    settings:
  • Save In: SSC_Site folder
  • Filename: site.htm
  • Deselect "Include Areas Without Slices"
  • Select "Put Images in Subfolders"
  • Click Options

    General tab:
  • HTML Style: Dreamweaver HTML
  • Extension: .htm
  • Select "Lowercase File Names"

    Table tab:
  • Space With: Nested Tables - No Spacers
  • Empty Cells: Contents - None

    Document Specific tab:
  • File Names: doc.name + Underscore + None + None + None + None+ None + Rollover
  • Click Set Defaults
  • Click OK
  • Click OK

  • Click Export
  • Choose File | Save
  • Choose File | Close
Fireworks export dialog box
HTML setup dialog box - general tab
HTML setup dialog box - table tab
HTML setup dialog box - document specific tab
   

 download Exercise File