USING THE LAYOUT GRID

GoLive's layout grid simplifies the process of creating web content using tables. Instead of formatting tables with cells, rows, and columns to position your content, use GoLive's layout grid to drag and drop elements onto a grid that ends up a table as far as browsers are concerned. Layout grids can contain tables, although it's not advisable to put layout grids inside layout grids. Layout text boxeswhich serve as containers for most of your contentand images and multimedia elements can be positioned directly onto the grid.

GoLive inserts special source code to enable the use of layout grids. This code can be stripped out of your HTML documents when you publish the pages to your web server, or you can convert layout grids to standard HTML tables, which also strips out the code. It doesn't affect the way browsers interpret your tables to leave the code in, but some folks like to keep their code as clean as possible.

Adding a Layout Grid

You can design your web pages with one large layout grid that represents the entire page, or you can implement a number of layout grids on a single page to create more complex layouts:

Drag the Layout Grid object from the Basic set on the Objects palette onto the page or double-click the object to place it at the blinking insertion point, as shown in Figure 35.13.

Figure 35.13. Create a layout grid.

Hold down the Shift key when you click the Optimize button in the Layout Grid Inspector to reduce only the width. Hold down the Alt key (Windows users) or the Option key (Mac users) while clicking the Optimize button to reduce only the height.

Choose Window, Inspector to display the Layout Grid Inspector if it isn't already on the screen, as shown in Figure 35.14.

Figure 35.14. The Layout Grid Inspector.

Resize the layout grid either by dragging its handles or by setting the width and height values in the Layout Grid Inspector. If the layout grid has a background image, you can select Use Image Size in the Layout Grid Inspector to make the layout grid automatically the same size as the image. After you place all the content on your layout grid, you can click the Optimize button in the Layout Grid Inspector to make the grid conform to the size of your content.

Adjusting Settings in the Layout Grid Inspector

The Layout Grid Inspector contains a number of options that affect how you work in a layout grid:

Select Snap for Horizontal and Snap for Vertical to make the objects on your grid snap to the grid lines. If you use the arrow keys to move objects on the grid, the objects automatically snap to the closest grid line.
Deselect Snap for Horizontal and Snap for Vertical to move your objects freely in 1-pixel increments regardless of the spacing of the grid.

Set the top margin and left margin values to 0 in the Page Properties Inspector to position your layout grid in the very top left corner of the web page. To see the page properties in the Inspector palette, click the Page Properties button at the top of the Layout Editor window.
To change the spacing of the grid, enter a size in pixels for both the Horizontal and Vertical fields.
To turn off the grid lines, deselect the Visible check box for both the Horizontal and Vertical options.
To set the position of the grid in relation to the page, choose an alignment from the Align pop-up menu. Choose Default to align the grid with the upper-left corner of the page. Choose Right or Left to wrap other web content around the layout grid.

Adding Layout Text Boxes to the Grid

Layout text boxes act as containers for text you want to add to the grid as well as any images or other media elements you want to encapsulate, as shown in Figure 35.15. Layout text boxes have their own attributes you can set using the Inspector palette.

Drag the layout text box object from the Basic Objects palette onto the grid.
Adjust the size of the layout text box by dragging its handles or by setting the Width and Height values in the Layout Text Box Inspector.
You can set the background of the layout text box to contain a color or an image. Choose Color in the Layout Text Box Inspector and then select a color or choose BgImage, and then select an image file. See Figure 35.16.

Figure 35.16. Layout text boxes can have background colors and background images.

Figure 35.15. A layout text box containing text and an image.

Adding Images and Other Objects to the Layout Grid

You can drag images or other media files from the Site window directly onto the layout grid or into a layout text box on a Layout Grid. You can alternatively drag an object from the Objects palette onto the grid to create a placeholder and then use the Inspector palette to link to the desired object, as shown in Figure 35.17.

Figure 35.17. Place images and media objects directly on the grid or put them inside layout text boxes with other content.

You can click an empty area anywhere on the grid to put the blinking insertion bar there and then paste layout text boxes, images, and other objects that have been previously copied.

Setting the Background of a Layout Grid

You can set the background of a layout grid to a color or to contain a tiled image much like a web page would, as shown in Figure 35.18:

1.	Select the layout grid.
2.	Choose Background Image in the Layout Grid Inspector and then browse to select an image file.
3.	To set the layout grid to the same size as the image, click the Use Image Size button.
4.	Select Background Color in the Layout Grid Inspector and set the color.

Figure 35.18. Set the background of a layout grid.

Grouping and Ungrouping Objects on a Layout Grid

You can group only objects contained on a layout grid. The advantages to grouping objects on a layout grid are obvious and make rearranging your layout much easier:

Select the objects on your layout grid that you want to group or ungroup, holding down the Shift key to select multiple objects.

Click the Group Selection button or the Ungroup Selection button in the toolbar, as shown in Figure 35.19. You also find the same buttons in the Transform palette.

Figure 35.19. Group your content to make it easier to rearrange the page.

Positioning Elements on a Layout Grid

Position the elements on a layout grid by dragging the objects around or by precisely specifying the x and y pixel coordinates of the selected object or group. Set the x and y coordinates using the toolbar or Transform palette, as shown in Figure 35.20.

Figure 35.20. Position elements precisely on the layout grid.

Distributing and Aligning Objects on a Layout Grid

Use the Align palette to align and distribute objects within the layout grid. You can align a selection of objects to each other or align an object to its parent layout text box, as shown in Figure 35.21. To distribute objects, select them all and click one of the distribute buttons in the Align palette, as shown in Figure 35.22. Click the Distribute Spacing button to distribute the space instead of the objects, as shown in Figure 35.23. If you want to specify the exact number of pixels between objects, check the Use Spacing check box and enter a value in the corresponding field, as shown in Figure 35.24.

Figure 35.21. Align objects to each other or to a parent object.

Figure 35.22. Distribute objects evenly.

Figure 35.23. Distribute all spacing evenly.

Figure 35.24. Distribute with specific pixel spacing.

Converting a Layout Grid to a Table

You don't have to convert your layout grids to standard HTML tables, but you can if you want to because layout grids are really just tables with a little extra code that makes them work like grids in GoLive. When you convert a layout grid to a table, the special code that makes the layout grid work is stripped out:

Select the layout grid you want to convert and then choose Special, Convert, Layout Grid to Table.

In the Convert dialog shown in Figure 35.25, the following options are presented:

Select Strip Control Row and Column to remove the 1-pixel empty control row and column GoLive inserts at the bottom and right of the table, respectively.
Deselect Strip Control Row and Column, and then select Replace Spacer by Image to replace the Netscape Spacer elements with a transparent spacer GIF file that GoLive automatically inserts for you. The Spacer element and the spacer GIF serve the purpose of enabling empty cells in a table for Netscape browsers. The Spacer elements are ignored by Internet Explorer browsers.

Figure 35.25. Options for converting a layout grid to a table.

Click OK.

Converting a Table to a Layout Grid

You can convert a table to a layout grid by selecting Special, Table, Convert to Layout Grid, or by simply clicking the Convert button in the Table Inspector, as shown in Figure 35.26.

Figure 35.26. Convert any table into a layout grid.