 |
 |
|
|
|
Parkland College > Center for Excellence > Fireworks I > Lesson 3
INTRODUCTION TO MACROMEDIA FIREWORKS
Lesson 3: Web Graphics
Instructor: Paul
Young
|
| |
Overview
|
|
Designers prefer to create web pages visually
instead of writing code by hand. Fireworks makes this possible
by giving designers the tools they need to be creative while Fireworks
takes care of the code in the background.
In this lesson, we'll make clickable buttons in Fireworks
and save out a working web page complete with HTML code, Javascript
rollovers, tables, and optimized images. Fireworks code intergrates
perfectly with Dreamweaver.
|
| |
Procedure
|
|
prepping for the lesson
- download lesson starter files
- examine downloaded files
- launch Fireworks
- file > open "lesson3/3-before.png" (note size, zoom)
- file > save as "lesson3/after.png"
- practice navigation shortcuts: SPACE, SPACE+CTRL, SPACE+CTRL+ALT, CTRL+1, CTRL+0
- examine layers
making buttons
- select "box" layer (boxes represent hot spots)
- select all boxes, make stroke=none
- select the "home" button
- modify > symbol > covert to symbol (F8)
- modify > symbol > edit symbol (or double-click arrow)
- choose "over" tab: click "copy up graphic"
- select text: change color to red
- add effects > shadows & glows > drop shadow (adjust settings)
- choose "down" tab: click "copy over graphic"
- click DONE
- add link "http://www.parkland.edu/"
- file > preview in browser (F12)
- repeat with other buttons
optimize for web
- file > save
- choose 2-up (note file sizes, download time)
- window > optimize: GIF 128
- file > export: "lesson3/web/index.htm" (HMTL and images, put images in subfolder)
- open "index.htm" in browser
|
|
|
