Web Page w/ MFW > Slice the Document - Lesson 02

Web designers use a process called slicing to cut web documents into smaller pieces, for a variety of reasons. Smaller images download more quickly over the web, so users can watch a page load progressively rather than waiting for one large image to download. In addition, slicing makes it possible to optimize various parts of a document differently. Slicing is also necessary for adding interactivity. Here you’ll create slices for some of the graphic elements in the web page. Later you’ll add interactivity to these slices as well as set optimization and compression settings for them.

1. With the Vintage image still selected, choose Edit > Insert > Slice. A slice is inserted on top of the image. Slices have a green overlay by default.
2. Click anywhere outside the slice to deselect it. Red slice guides define the slice, spanning the width and height of the document. When you created the slice, MFW auto-sliced the rest of the document for you.
   
   Note:
   If you don’t see the red slice guides, choose View > Slice Guides.
   
3. Shift-click the Worldwide Airports graphic and the Great Weekend Rates graphic on the left side of the document to select both at the same time.
4. Choose Edit > Insert > Slice. In the message box that appears, choose Multiple. This allows you to insert multiple slices at the same time. Slices are inserted on top of each of the selected graphics. Adding additional slices changes the layout of auto-slices in the rest of the document.
5. Click anywhere outside the slices to deselect them. There is now a space between the Vintage slice and the Great Weekend Rates slice. This is a thin auto-slice.
6. Place the pointer over the Vintage image’s left slice guide.
   The pointer changes to the guide movement pointer, indicating you can grab the slice guide and drag it. By dragging a slice guide, you can change the shape of a slice.
7. Choose View > Guides > Snap to Guides to turn on Snap to Guides if it is not already selected.
8. Drag the slice guide to the left until it snaps with the right slice guide on the Great Weekend Rates graphic, as shown in the illustration below.
9. Release the mouse button. The Vintage slice now extends all the way to the edge of the Great Weekend Rates slice, and the tiny auto-slice is deleted. Think of slices as table cells in a spreadsheet application or word processor.
   Dragging slice guides to resize a slice in MFW resizes other slices just as dragging cell borders in a table resizes other table cells. If you drag a slice guide over and beyond auto-slices, the slice guides merge and the unnecessary auto-slices are deleted.
10. If the Layers panel is minimized or isn’t visible, click its expander arrow or choose Window > Layers. At the top of the panel is the Web Layer. It contains all of a document’s web objects. The three slices you created are listed here. The Web Layer is always the topmost layer in any document. It can’t be moved, renamed, or deleted.