Using Fireworks to create Navigation Buttons

Using Fireworks to create Buttons

Assignment: (Do before Class):
Dreamweaver MX, pp. 92-102, 113-114;
Web Page Design, pp. 48-54, 60-72;
Characteristics of Web Graphics, Graphic file
formats

Assignment for Friday: Create a webpage with at least three different button styles you are considering using for your Webgenre website. Put a workable link to this page on your portfolio page.(20 points)

Assignment: (Do after Class) Study this list of basic elements for your websites:Basic Elements of a Webpage)

1. Webgenre website--work in progress

2.. Examples of Websites

3. Outlining Graphics and Feathering images

See feather.jpg and feather1.jpg
To crop and feather an image, go to the Bitmap tood
and select the rectangle or oval marquee tool.
Use this tool to select the part of the image you
want to feather.
Set the degree of feathering, from 1 to 100. Try not
to overuse feathering.
Now go to "Select on the menu bar and choose
"select inverse", and now push the delete button.
You will now have a feathered and cropped image.
Using either the bitmap or vector shape tool, you can
create a perfect circle image by selecting the oval
shape tool and then holding the shift key down
when you draw your circle.
When drawing graphic shapes, notice that you can
select the body and border color of the shape.
By drawing a vector box around an image with no
color selected for the body, you will now have
a border around the image.
In order to get this trick to work, you must first
create a new layer for this image. Make sure you
have selected this new layer, and now use
the vector shape tool to draw a border.
When you are having trouble working with images
in Firework, it usually is a layer problem. You must
make sure you have selected the right layer to
make the changes to.
See flowerborder.jpg

4. See Buttons Website:

5. Buttonmakers and Downloading Softfware

Cnet Download.com
Download Winzip 8.1 (unzipper program)
Download Winrar 3.3 (unzipper and
unarchiver program)
Download buttonz
Download Spot-IT 3.0

5. You can use Fireworks to create complex
rollover buttons

In Fireworks, go to "Edit" and select "Insert New Button"
This will call up a menu giving you the ability to control each state of the Button you are making
The easiest way to do this is to create a basic button
and select "copy over graphic" to use this same
button for each state of the rollover button
Now select the state of the button you want to
edit, for example, "Down", and you can change the
background color or the text color to vary the
state of the button on rollover.
When you save this button in Fireworks, you go
to "Export" and make sure you select export
html file and file slices and check "selected
slices only"
When you insert this button into a webpage, you
want to go to Dreamwever and select "Insert"
and choose "Image Objects" and then select
"Fireworks Html"
Remember, when you copy this button image
over to the web, you will be copy several
different small gif files--one for each slice of
the rolloever--and an html file, which contains
the code to work the rollover.
Here are some of the small image files that were
created when I created rolloverbutton on this
webpage: tester.gif, tester.htm. tester_f2.gif,
tester_f3.gif, tester_f4.gif.

5. Remember, you can always use
the Flash buttons and Flash Text tools in
Dreamweaver to create basic buttons.

In Dreamweaver, go to "Insert" and
then choose "Media" and then select
either Flash buttons or Flash Text.

6. Basic Rules to create Navigation buttons

Keep buttons relatively small. Bigger is not better
Be consistent with your buttons. Use similar
buttons throughout your website
Try to center or layout text on buttons in
a consistent, easy to read way.
Make sure that if your button has an
anti-alias edge that it uses a color that
blends into the background. Set the Matte
color to the samecolor as the webpage's
background color.
Remember that anti-aliasing small type
can make it harder to read.
In order to make it easier to read small
type on your buttons, you can double or
even triple the text layer to make
the text sharper to read.
These fonts were designed to look good
as smaller text even though they are
aliased:

Geneva, Georgia, Monoco, New York,
Trebuchet, and Verdana
Make all your website buttons using the
same settings. This give your website
a unified and uniform look.
Always save the button template for your
website as a "png" file. You want to be able
to go back and see what settings you
used if you have to create similar buttons
for another website.

7. Using Spot IT 3.0 to create basic buttons

8. Using Fireworks to create buttons and images for
your Web genre websites.

Before you really start work on your "web genre'
website, you need to create a new "site" in
Dreamweaver and a new local folder on your
computer.
The easiest way to make buttons using
Fireworks is to use buttons from "Styles"
which is located under "Assets."
You can change the color, texture, and
rectangle roundness of the button in the
properties box.
Model Buttons page
Model Buttons page 2
Fireworks creates "png" files. Do not put
"png" files on the web.
Use "Export Wizard" or "Export Preview" to
save your "png" files to either "jpg" or "gif"
files for the web.
Remember, try to compress the file size of
your image files so that they don't take
too long to download on the web.
Demonstrate cropping and feathering an image.
Demonstrate creating buttons and adding text.

9. You can use Fireworks to insert new Buttons that the
program already has made. (These are called canned buttons")

Go to Edit and choose "Insert" and select New Button."
Go to Edit and choose "Libraries" and select
"Animations", "Bullets", "Buttons", or "Themes"
In Dreamweaver, you can drag images to a file's
Library so that you can use them on other parts
of the webpage.
To view a file's Library in Dreaweaver, go to
"Windows" and select "Library." Make sure
your menus table is open.
Using Library in Dreamweaver can be and easy
and useful way to keep track of the buttons and
image elements you use on a webpage.

10.. Basic Elements of a Basic Webpage for Digital Design

11 . Creating a Page Template for your website

Example of Page Template for Digital Design website
Example of Page Template for Digital Photo website
You can use Fixed-width or variable-length tables
to create the outer limits or your webpage.
Be careful using variable-width tables because
your webpage content will look different in
different browsers with different screen resolutions.
Once you have created your initial table, you can
now use layers in Dreamweaver to layout the
grid for your webpage.
Once you have created a basic model for all
webpages on your website, save it as a
template.
Now everytime you create a newpage for your
website, you can do so by going to "File" and
selecting "new from template."
Using templates makes it much faster and
easier to create additional pages for your website.

12. Make sure you layout your website in terms of:

Website Home Page
Main Topic Pages for the Site
Subsidiary or Secondary Pages

13. Every page in your site should have links to the Home
Page and the Main Topic Pages. This helps give the
Page a clear Information Hierarchy.

Lynch- Basic Information Site Structures

14. Tips for creating your Web Genre Websites.

Create and use a Webpage Template.
Check to make sure your links and images work.
Check for contrast between your text and your
webpage background.
Use invisible tables and layers to layout a grid
to balance the placement of images and text on
your page.
Keep a log of what are the names of your image
files, what fonts you use, what colors you use,
the size of all your images in Height and Width,
and the names of your webpage files.
Try to limit your pages to no more than one-and-
a-half screens in height.
Check your spelling and try to reduce the number
of words you use in each line of text to the absolute
bare essentials.
Does your page have a clear focal point, or does it
have multiple points?
Does your webpage have a clear information
hierarchy, from most important elements given
the most emphasis and the least important
elements given lesser emphasis?
Does your webpage look cluttered? Does every
thing seem to be balanced and in its place on
the page?

15. Creating text-based navigation bars for text links

See Digital Design Home Page
See cclewis.com: Digital Photography
In Dreamweaver, go to "Insert" and
select "Special Characters". Notice
the special characters you can insert
into your page

16. Using Dreamweaver to create Image maps

See example of imagemap on cclewis.com
When you use imagemaps, make sure you
use "Alt" text to let the reader know where
the link takes you.
Model Buttons and Images page

17. Model Websites from Students' Web Genre Links