Adding a layout grid to the page

To simplify the task of laying out, grouping, and aligning multiple objects on your page, add a layout grid and make it the same size as the window. After you've added the objects to the grid, you can optimize the grid's size to fit around the objects using the Layout Grid Inspector. For more advanced layouts, you can add multiple layout grids to a page, for example, to lay out objects in a header area and a footer area. However, you should not place a layout grid on top of another layout grid. When the layout is complete, you can convert the grid to a standard HTML table if you want. (See Converting a layout grid to a table.)

If you want the layout grid to cover the entire page without any margins in the browser window, use the Page Inspector to set the Margin Width and Height to zero--the layout grid moves to the upper left corner of the window. (See Specifying page margins.)

If you know that you'll always want the page margins to be zero, you can create a page with just this defined and set a preference to use the page whenever GoLive creates a new page. (See Setting preferences for opening pages.)

All objects placed on the layout grid are considered part of the grid object. This comes in handy if you create a nice layout grid design and wish to reuse it. You can save the design as a component, page template, stationery, or library object and store it for later use. (See Working with Site Assets.)

To add a layout grid:

Drag the Layout Grid icon from the Basic set in the Objects palette to the page, or double-click the icon to place it at the insertion point.


Object icons from the Basic set in the Objects palette A. Layout grid B. Layout text box (for adding text to the grid)

To resize the layout grid:

Do one of the following:

• Select the grid and drag one of the three resize handles on the right side, bottom, and lower right corner of the grid. The new width and height appears in the Layout Grid Inspector.
• In the Layout Grid Inspector, enter the desired measurements for Width and Height.
• If the layout grid has a background image, select Use Image Size in the Layout Grid Inspector to adjust the size of the grid to the image size. (See Adding color or backgrounds to page elements.)
• If you have finished laying out objects on the grid, click Optimize in the Layout Grid Inspector to automatically reduce the size of the grid to its minimum size (to fit around the outer borders of all the objects and no more than that). You can Shift-click the Optimize button to reduce the width only and Alt-click (Windows) or Option-click (Mac OS) the Optimize button to reduce the height only.

To minimize horizontal page scrolling in a Web browser, make sure that the final width of the layout grid is no larger than 580 pixels, the width of a standard 14-inch monitor.

To customize the layout behavior of the grid:

Do any of the following in the Layout Grid Inspector:

• To position objects freely on the grid with 1-pixel accuracy, deselect Snap for Horizontal and Snap for Vertical, and press the arrow keys to move the objects pixel by pixel.

As a shortcut that bypasses the Layout Grid Inspector, you can also hold down Alt (Windows) or Option (Mac OS) and press the arrow keys to move the selected objects by pixels.

• To make objects move in increments equivalent to the spacing between the grid lines, select Snap for Horizontal and Snap for Vertical, and press the arrow keys.
• To change the spacing between the grid lines, enter a size in pixels in the Horizontal or Vertical text box.
• To hide the grid lines, deselect Visible for Horizontal and Visible for Vertical.
• To set the position of the grid in relation to the document window, choose an alignment from the Align pop-up menu in the Layout Grid Inspector. Choose Default to align the grid with the upper left corner of the page. Choose Left or Right to wrap other text and objects around the grid.