Slicing
and Dicing
|
Slicing
and Dicing |
You've probably seen this technique on many of the websites that you visit. A big graphic comes to your computer screen. However, it doesn't come in one piece -- it comes in little chunks. How'd they do that? Can I? The answer is absolutely -- with a little work with Fireworks MX. Below is a bitmap image of the work from my IBM computer.
When it gets served by a webserver, it goes across as one big image. depending upon the author, it may come in one scan line at a time from the top to the bottom. Or, if the author wishes, it might come in as a progressive scan where you can see bits and pieces of it and the image takes shape before it's fully downloaded to you. This is really helpful in rural areas like Anderdon Township where high speed internet is not available. Let's play a bit with it with Fireworks MX. In
particular, let's take a look at the slice tool. You'll find the slice tool in a group of tools with the category heading of "Web" on your tools palette. Now, after having selected the slice tool, use it to "slice" up your picture. As you slice, the original image will turn colour to let you know where the slices are. In my case, I've done a boring four section slicing.
Now, from the File Menu, choose the Export Option.
There are some definite options that you'll want to choose like the ability to put the images into a subfolder. Note, however, that we're asking Fireworks to save both HTML and Images. Exit Fireworks and load your browser and navigate to the webpage that Fireworks just created for you. Big whoop. Click for bigmap.htm When you're looking at it locally, all that you see is the original picture. The real effect come in when you play it over the internet. It becomes more apparent when you get a chance to see it over a slower connection. Part of the whole slicing process is that Fireworks optimizes individual slices rather than the big image. In the long run, you'll have faster loading images. But, let's explore the possibility. (It gets intense when you go further...) Since it's just a webpage, we could open it in Dreamweaver, right? Yes. If you've hung with me so far, you'll appreciate what comes next. Switch to view the source code. <table border="0" cellpadding="0" cellspacing="0" width="600"> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td> <tr> <td rowspan="2" colspan="2"><img name="bigmap_r2_c1" src="images/bigmap_r2_c1.jpg" width="394" height="202" border="0" alt=""></td> Fireworks very nicely sliced up your original image into smaller ones and placed them in a table for you. Maybe it's your fondest desire to not have the entire image displayed. Perhaps in the bottom right quadrant of your table you wish to include some textual information. You now have full control over your page and can do a little editing. Perhaps your original image was a background template where only one part changes regularly. Perhaps... There are huge possibilities available to you now.
|
