TIP 46: Using the Completely Redesigned Layout Grid

Have you ever wished there were an easy way to put images and text exactly where you want them on a Web page? Well, the all-new CSS-based GoLive Layout Grid is the answer to your prayers.

The new Layout Grid object is found in the Basic set of the Objects palette . We call it new because, although previous versions of GoLive included a grid object, in the past it was a table-based object. GoLive CS2's vastly improved support for CSS reaches all the way to the Layout Grid object. Instead of writing a table tag, the Layout Grid now writes a <div> tag.

To use a grid on a page, either drag and drop it from the Objects palette or double-click to insert it at the point of your cursor (see Tip 37).

Resize the grid by dragging one of its three blue resize handles or by typing pixel dimensions into the Width and Height fields of the Layout Grid Inspector. Next, place other objects onto the grid and move them by dragging or by pressing the arrow keys to nudge right, left, up, or down.

You can drag images and movies directly onto the grid, but text needs to go inside a layout text box. If you drag and drop text onto a grid, GoLive creates a layout text box at the default size of 32x32 pixels, so you'll most likely need to resize it. You could create the layout text box first and then paste or drag text into it. Drag a layout text box from the Objects palette and drop it onto the grid, then resize as needed, or even better, use the new Grid Text Box tool to draw out text boxes wherever you need them on the grid (Figure 46).

Figure 46. GoLive CS2's new Grid Text Box tool makes it a breeze to draw text boxes on a grid wherever you want them.

Targeting Grid Locations

Click once at the intersection of two lines on the Layout Grid and look closely. You'll see a little blinking cursor indicating that you've just set a target. If you then double-click an object in the Objects palette, that object will land precisely in the spot you've targeted.

Select multiple objects on a Layout Grid by dragging across them or Shift-clicking them and then moving them all at once. If you want, you can use the Group and Ungroup icons on the toolbar to keep them together or break them apart, or open the Align palette from the Window menu and line them up however you'd like. Look in the Grid Inspector for additional options, such as coloring the grid or setting a background image.