Basic
Web Design
Phase Two
Slicing the Fireworks
Image Basics of Slicing
Your Web Page
Slice Tools
Fireworks MX® Slice Tool is used to cut one large
rectangular graphic into a collection of smaller rectangular
graphics. These smaller graphics are placed inside a Table
when Fireworks MX® exports
your document as HTML. The Table’s
borders are invisible so, when your document is viewed
in a browser, it appears as though the graphic hasn’t
been cut up at all.
There are many different reasons
why you would want to slice your graphic up into smaller
chunks. One major reason is download speed. Large graphics
take a long time to appear on screen. Users may lose
interest and leave your site if they’re left watching
a blank screen while your graphic loads in the background.
Small files load quickly and, at the very least, generate
interest for the users by giving them something to look
at.
Button rollovers are another good
reason for slicing an image. JavaScript functions that
swap images replace individual graphics. If your document
were one large graphic you wouldn’t be able to
apply rollovers to individual buttons. For the time
being it is only important to know that image slicing
is an important part of creating rollovers.
back to top
 Inserting
a Slice Object
You can insert a Slice into your document if
you choose the SLICE TOOL from the
tool menu . This process is very similar to that of
a Hotspot Insertion in that it can only be applied to
selected vector objects. Unlike a Hotspot Insertion
it will only create rectangular slices. This approach
is quick, accurate and can save you time.
Creating
Slices
Select the Rectangular Slice Tool from the
Toolbox and place your cursor in the Document Window
. We want to slice the map into 4 squares so, from
the center, click and drag all the way to the bottom
right hand corner of the window. Your map should now
be divided up into 3 sections, two squares at the
bottom and one long rectangle across the top.
Now
let's start this activity by slicing
up the image you created earlier.
Right click
here and select "Save Target As" to download our sample web page source
file in PNG format as shown below.
- Select the slice tool from the tool
menu at the left of the Fireworks stage.
- Start in the upper left hand corner
of the image and draw a slice around
the logo as shown below:
- Now slice the header as shown below.
Remember not to leave any gaps between
the slices. They MUST touch but NOT
overlap.
- Now lets slice the left hand navigation.
Create a separate slice for each link
- Now we'll slice the main stage area
creating several slices to isolate
the text and the image as shown below:
 The
lines that the Slice Tool creates are red and the
actual Slice Objects are a transparent Green.
Your
slices will always be rectangular because
HTML tables are rectangular and all of
your content must fit in HTML tables. back to top
 |
page 7 of 10 |
 |
|
