Using hot zones and cutting (Hotspots and Slices)

using hot zones and cutting (Hotspots and Slices) (lower) \ Next, we'll talk about cutting. As has been said before, designers in order to speed up the speed of the page to load the big picture into a small picture placed in the table, which was a time-consuming and laborious thing, now use the cutting fireworks will follow your cut automatically generate HTML form code, You just have to put the generated code in the appropriate position on the page. May have some friends to ask, is the picture after cutting faster download speed it? Yes, if you cut it properly, you can actually reduce the amount of downloads, because cutting the same color into a single file and using less color output will result in a smaller file size. Another reason to cut the picture is to reduce the viewer's psychological waiting time. When you wait for a big picture to come out, you feel slow because you can't do anything, but when the picture is cut, the small picture will soon come out and one after another, in the process of downloading viewers will be able to see a part of the picture, so he will not have the feeling of waiting, which is why we want to use the truth of cutting. In fact, and after the use of network multimedia playback in the streaming technology is the same, although perhaps this comparison is not very appropriate. In addition to splitting pictures, flipping diagrams, buttons, navigation bars, and so on in fireworks are based on cutting. Creating a cut is very easy, as long as you use the cutting tool as a rectangle to create the desired cut, using the polygon cutting tool (Polygon Slice Tool) to create a cut of any shape, as shown in figure: The green area of the picture is the area of the cut (fireworks by default green for cutting, blue for the hot zone, of course, you can modify the settings to change their color, but I do not recommend you to do so), the red line is the picture output after the form of the line, The rectangles that make up these red lines correspond to each cell of the table. You may have noticed, when cutting with irregular shapes, fireworks creates a rectangle along the edge of the polygon, because the tables and pictures only accept the shape of the rectangle, and the output will be processed into the hot zone of a polygon on a rectangular picture. Having said so much, let's do it, our goal is to create a round cut, although there is no circular cutting tool, but we can convert a circular hot zone to cut (this is also to create a precise cutting of the figure of the method). First Use the Circle tool (Ellipse Tool) to draw a circle on the artboard, then select Insert->hotspot to create a hot zone that is the same shape as the circle, and finally choose Insert->slice to convert the hot zone to a cut. If the middle does not go through the hot zone and choose Insert->slice directly, fireworks will create a rectangular cut. Select this cut to open the Object surface (Window->object) to see and cut related properties: The URL address of the link, alt text, the way to open the link (Target) These are the same as the hot zone, Auto-name Slices is used to set whether the cut picture is automatically named. You can see 2 items in the Type menu: Image and text. Select image cut will be output to save the picture, select text, you can enter text in the object version, the output of this part of the cut will leave blank cells filled with text. This feature is quite handy for pages that need to change messages frequently, so you don't have to create pictures every time. Before the final output, select file->html Setup came to document specific this can set fireworks automatically named the rules of the file name, generally no special requirements on the use of the default settings bar. Then you can output the HTML code, select File->export to complete the final work. The last thing I want to say is that when you select include Areas without slices in the output, the parts that are not cut on the artboard will be output to the same size picture, and if you do not select this, then fireworks will only produce a picture of the cut part, The parts that are not cut open with a 1x1, transparent GIF (pacer.gif) image, making the table look the same in different browsers. My suggestion is to use Spacer.gif to open the form, as for the truth, I think I do not say you should understand.