Exploring Fireworks, part 2
INP Home Page, Phase 1 - Module D33h
If you are using a browser, you can click on this
separator wherever you see it to return to the Contents
Overview
The purpose of this exercise is to help you start down the road to productive
use of Macromedia Fireworks. It assumes that you've already done the Fireworks
Tutorial or had a similar introduction to using Fireworks tools (see Exploring
Fireworks, part 1 - module D31h). Refer to Firework's
Help system or to a reference book if you need to.
This time, we'll start from scratch and create the beginning of a Web
home page for the Internet Professional Department. The general structure
of the site and the content of the home page will be the same as the current
INP home page, inp.wccnet.org/main.htm
but the design should be yours. Be as original and creative as you can!
Choose a layout, color scheme, shapes, and illustrations of your own.
The first phase of development will be a navigation bar ("navbar") consisting
of a set of active buttons.
-
The bar may be horizontal or vertical, as you choose.
-
The buttons should all have the same shape and size.
-
All the buttons should react by changing appearance when the mouse is moved
over them or clicked on them.
Create a button for each of the following, and link to the actual INP Web
page it corresponds to:
-
Program
-
Courses
-
Instructors
-
Students
-
Careers
-
Certification
-
FAQ
-
Home
Basic Shapes
The most common and practical shape for buttons on the Web is rectangular.
But don't let that inhibit your creativity! Experiment with several shapes
and see what you think will work best. The practical constraints are:
-
Buttons should be a uniform size
-
They should hold the label text in roughly the same font size
-
They should fit into a practical (relatively small) space on the page
-
They should be easy to find on the page without being flashy or distracting
Experiment with several shapes, fonts, and sizes. When you have decided
at a shape you like, save the file. For now, don't worry about the shape's
position on the document, the document's color, or any other details about
the Web page.
Create a Button
Select the shape you decided to use, and modify it to become a button symbol.
Make the necessary changes to provide a reaction when the mouse rolls
over the button, clicks on it, or enters with the mouse down. check to
make sure the active area is appropriate for the shape you chose.
Save the file.
Copy the Button
Select and copy the button. Select the copy and move it away from the original.
You'll need to change the lettering on the button, and if you feel creative
you might want to change other features of the button, too! (Just remember
that a degree consistency is important in helping users navigate the site.)
Check the operation and appearance of your buttons by using the Preview
tab. Save the file.
The Other Buttons: Automate
the Process
Recall that Fireworks lets you use the History panel to repeat a series
of actions. As you create and change each of the six remaining buttons,
experiment with automating as much of the process as you can.
Preview and Save.
Export and Check
Use the 2-up or 4-up tab to optimize the appearance and size of your buttons.
Export the buttons as a Web page (you may specify "Generic HTML") and
check the page in a browser.
Finishing Up
Upload your page to your space on the server. Email the instructor with
the URL when you're done.
Be sure to save the Fireworks PNG version of your work, so you can modify
it later. We'll be continuing the development of this page.
Audience: For people who have learned the basics
about Fireworks through its Tutorial, and want to start doing their own
project.
Objectives: When you successfully complete
this lesson, you will be able to use Macromedia Fireworks to...
-
Create simple shapes
-
Create active buttons
-
Link buttons to other files
-
Export the buttons to a Web page
About this document...
Module D33h: This document
is part of a modular instruction series in computer technology. For more
information, see the overview
or the list of modules in this series, D: Desktop Publishing
and Computer Graphics. This document has been used in the following
classes: INP 143
Author: Laurence
J. Krieg
Institution: Internet
Professional Department, Washtenaw Community
College
History: Original: June 2000; This revision posted Monday, 31-Aug-2009 11:47:56 EDT
Copyright © 2000, Laurence J. Krieg, Washtenaw
Community College. Instructors: You may point to this file in your Web-based
materials.Students: you may make a copy for your personal use. All other
uses: contact the author, Laurence
J. Krieg for permission.