Download source
files here.
Fireworks 4 and Dreamweaver 4. (Although, this should work
for you in earlier versions). You should also have basic knowledge
of both programs. You will also need to define a new site
in Dreamweaver before we get started.
1. You should view the end result of
this tutorial by clicking
here. We will be placing our navbar inside a table set
to 100% with background tile. A lot of people have problems
with getting this to work in IE or NS. I will show you how
to do it and have it work in both browsers.
You will need to download the navbar
I created for this tutorial. I chose to create the navbar
only to show you how to slice in Fireworks and import in Dreamweaver.
I also chose to set the Fireworks HTML inside of a table set
to 100% wide, with a background tile. The effect is a navbar
that will always look the same no matter what resolution the
user views it at.
2. Open the navbar you downloaded for
this tutorial. It should look like this (only larger).
We want to create a simple rollover
effect. The first step is setting up our image so that it
has an up state and a over state. This is done with "Frames"
We already have one frame. This is always created when ever
you make or import a graphic, its automatically done. In the
screen shot below "Frames" are normally numbered.
I went ahead and renamed our existing "Frame" to
"up_state". To rename a frame just double click
on it.
3. We now want to duplicate our up_state
frame. To do this select the 
button on the "Frames Panel". Select the "Duplicate
Frames" option. You will be prompted as to where this
duplicate frame is to be inserted. Leave it at the default
settings and click OK. A duplicate frame of our up_state has
been added. Rename the new frame to over_state, we want to
be able to tell which is which (double click on the frame
you want to rename). The navbar should show up in both the
up_state and down_state frames. The "up_state" frame
should be the first frame as shown below.
4. Select the over_state frame. We are
now going to change the colors of the text. Normally you would
double click on text and change the color in the "Text
Edit" box. However, I converted all text to bitmap. The
reason is that not everyone will have the font that I chose
for the navbar. You can still change the color. Select the
text on the nav buttons and go to the "Effects Panel".
In the drop down list choose Adjust Colors> Color Fill.
From there choose the color black. You should now have black
text on the over_state frame. Click back on the up_state frame.
As you can see, we now have an up state and an over state
to our navbar.
5. Our navbar is all set. We just need
to slice it and add a "Simple Rollover Behavior".
Select the up_state. Go to the "Tools Panel" and
select the "Slice Tool"  .
It works just like drawing a square with the "Rectangle
Tool". Draw a slice around the "Home" button.
Don't draw over the diagonal portion if the button. See examples
below.
Add the slice like this.
Do not slice like this!
Do this for all of the buttons. (page1,
page2 and page3 buttons.)
6. Once all of the buttons are sliced,
we will need to add the "Simple Rollover Behavior".
Select all four slices you just created. (Hold the shift key
and click on each slice). Go to the "Behaviors Panel"
Click on the "Plus" sign (+), select "Simple
Rollover" from the pop up. The navbar is all set to be
exported. First hit the F12 button on your keyboard to test
out the rollovers. Hitting F12 will open your navbar in a
web browser.
I should also mention that we could
add links to each slice and add alt tags with in Fireworks.
Of course this can also be done in Dreamweaver. To do this
Fireworks select your slice and then go to the "Object
Panel". I wont get into detail, but I wanted you to know
that it was here.
7. We need to optimize our navbar before
exporting. Select the "Optimize Panel" Use the settings
below.
8. From the main menu, go to File>
Export. You should save this in a folder you set up in Dreamweaver.
(If you have not set up a site in Dreamweaver for this tutorial
go ahead and create a new folder and save the navbar in that.
You can set up Dreamweaver when we get to it.
Use the setting that I have used here.
Click
here to view settings. Once you have these setting set,
click on the "Options button" (image below) and
go to the "Table" tab. Change the "Space with..."
drop down so that it reads, "Space with: Nested Tables
- No Spacers". Click OK.
Click save to save our navbar. Its saves
it as an HTML file along with the images all sliced up it
also includes the Javascript for the rollovers. Aint Fireworks
cool?
Just for the record... If we select
the 1 pixel transparent image in the "table options"
it will throw off our navbar by 1 pixel in our table that
will have a background tile. They wont match up.
9. Now that we have exported our navbar
for Dreamweaver, we still have 1 step left. We need to create
a background tile. Go to the "Tools Panel" and select
the"Crop Tool"  .
We want to crop the right side of our navbar as this will
serve as our background tile. The area to crop is shown below
along with the background tile cropped.
Area to crop.
10. Go to the "Optimize Panel"
and use the setting shown below.
Yes, I do want you to save it as
a jpeg even though our navbar is gif. I will explain this
later. Also make sure "Quality" is set to 100%.
Once the settings are set export the
background tile and name it "bgtile". Also, while
in the "Export Window" set the "Save as
Type" To "Images Only" from the
drop down list. This will prevent saving this as an HTML file.
By default since we already exported thos once it will set
up the previous settings for exporting. We want it to be an
image all by itself not sliced like the Navbar. Click save.
The final bgtile image.
Continue to the
second portion of this tutorial for Dreamweaver.
Return to the
main tutorials page.
|
