Dream Forum (http://www.it365cn.com/bbs/) There are many people asked about slicing the problem, there are also many people write such a tutorial, which also like this article through examples to explain, after reading some feel, If it's written in plain language, there are some places that are not very clear to beginners, and a part of the example tutorial is the FW directly generated HTM file and then import in the DW, which of course is a way but I do not like, think will generate some unnecessary code, also not easy to adjust. So I wrote another one, I do not know if there has been such, I have not found, hope is not superfluous.
Fireworks Section
1. Handle good pictures in FW. Picture size is 506*125
2. Cut the picture. First not busy with a meal, let's take a look at the law first.
The picture is surrounded by a simple color and no change in the border, up and down are some of the repeated gradient and gray points. Enlarge the view to cut. First cut four corner sizes are 13*13
Then cut up and down the four sides. The size of the top two slices is 13*3, and the left/right two slices are 3*13.
One might wonder why it was so cut into this, not 13*4,4*13, but the size of the dead. Look at it and see, the top and bottom borders are repeated every 3 like pixels, The left and right borders are repeated every 3 pixels. So you can use them as a background image in the DW table (if you're still not sure, just do it for a while, and go ahead and see for sure)
Finally hit the big picture, the whole picture package inside, size is the size of the entire picture minus the size of the border, width of 506-2*13=480; high for 125-2*13=99.
3. Set the output format and quality of each slice and name
This step is best to switch FW to 2-up mode (the left is the original image, the right side is the preview of the output), while combining the optimize (optimization) panel. The ultimate goal is to make the picture output the best quality, the smallest capacity. Some people may say, simply all set in JPEG format, The quality of 100 is not convenient and good? If there is an infinite space for you, it certainly does not matter, but if it is for others or companies to do, others will certainly want to occupy the picture of the smaller the better. And, if the picture quality is not much different, so that the smallest picture capacity and why not it! and give each picture a name, This is one of my favorite ways to make it easier to recognize images when you import them into your DW. If you don't want to name it yourself, FW automatically generates a name.
With less border colors and a shaded gradient of glowing effects, it doesn't change much, so choose to output the picture in GIF format and name the slice in the project (properties) panel. (If the gradient is complex, it still has to be output to JPEG, otherwise it looks like a piece of it.)
The image below is the picture size \ name \ format that I set
4. Output
Return to original (original?) mode, select the slices, right-click, select the first item expert Selected Slice ... (Output selected hot zone ...) Enter export
Dreamweaver part
1. Insert table in DW. 3 Rows 3 columns, 506 like pixels (picture width), the remaining parameter is 0
2. Insert the picture, in the upper and lower four corners and the middle of the picture, so that nine lattice has five is full of the
3. Set the background image
Set the background chart for the remaining four squares. Because the background of the table is tiled, the picture that is set as the background (engine_top in the figure) only needs 3*13 or 13*3 dimensions.
In the DW, it seems to be so good. Then press F12 Preview to see:
Why is it so when you look at a good preview in DW?
4. View source code.
Switch view to "code and Design" (Source and designs?) mode, see the corresponding code for the table as follows:
<table width= "506" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td> </td>
<TD background= "Engine_top.gif" >& N B S p;</td>
<td> </td>
</tr>
<tr>
<TD background= "Engine_left.gif" >& N B S p;</td>
"Http://www.webjx.com/htmldata/2005-06-05/engin_mid.jpg" width= "<td></td >
<TD background= "Engine_right.gif" > </td>
</tr>
<tr>
<td></td>
<TD background= "Engine_bottom.gif" >& N B S p</td>
<td></td>
</tr>
</table>
We have a:& n b s p in the lattice where we only set the background and don't insert anything. Use DW to draw a table if you do not insert anything there will be such a string of code, reflected in the browser will be a space, because there is a space, the table stretched, We just need to manually delete these items in the source code.
Preview again, OK!
In addition, you will also find that the middle of the figure can be any size of the picture, not just 480*99.
source File Download
