GoLive 6.0 and CS Layout Grid Basics
updated 9/05

About the Grid

A layout grid is like a table because it allows graphics and text to be aligned on a page. Layout grids are actually somewhat easier to use than tables and allow for more accurate object placement. To use a layout grid, drag the Layout Grid object in the Basic Objects Palette(6.0) or Basics Object Toolbar (CS2).

Size the grid via its handles or in the Width and Height fields in the Inspector. The grid lines can be set closer or further apart via the Horizontal or Vertical fields in the Inspector. Alignment and background color or image can be set in the Inspector as well.

Graphics and other objects can be inserted easily via the site file, and if Snap is selected in the Inspector then the graphic will align to the closest grid lines.

Making the grid lines invisible in the inspector is one way to preview the grid.

A layout grid can be used to cover an entire page, or just part of the page. Two or more layout grids can be used together, although it is recommended that they be placed vertically as opposed to horizontally. In addition, layout grids can be used with tables.

Grid Inspector


Layout Text Box

In order to place text in a grid, a Layout Text Box must be added from the basic tab in the Objects Palette(6.0) or Toolbar (CS2). The cursor becomes a hand when it is placed over the perimeter of the box, allowing its position to be set on the grid. Placing the cursor over the box's square handles changes it to a double arrow allowing the box to be sized. Set links and background images via the Site File and the Inspector. Double click inside the Text Box to type.


Aligning Objects on the Grid

6.0

CS2

Although any object on the grid can be moved via dragging, the alignment toolbar can be very useful. The first two fields position the graphic relative to the top left corner of the grid. The second two fields provide another way to resize the object. The next group of buttons aligns objects to the left, center, right, top, and bottom of the grid. If more than one object is selected, due to their positions, some of the buttons may not be active. The last two buttons allow objects to be grouped, to act as one, or ungrouped. In order to do this, more than one object should be selected.

Alignment Palette

Using the Alignment Palette, multiple objects can be aligned, grouped and distributed (shift-click to select more than one) to the extent that there is room in the grid.

  • Align to Parent aligns objects to the grid.
  • Align Objects allows the alignment of objects relative to each other. The first three buttons align along the vertical axis, while the second three align objects along the horizontal axis.
  • Spacing allows you to specify the number of pixels GoLive will use to evenly distribute space between objects.