• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

The Layout Grid

With single-pixel accuracy, GoLive's unique layout grid is helpful for designers looking to control their layouts. Text, images, and other objects can be easily placed, arranged, and aligned using the grid.

Layout grids eliminate the need for using tables or frames to create multi-column pages. Grids can be customized so objects snap to their lines, painlessly aligning elements with respect to the grid and to each other. Grids can be sized to fit any page, or any portion of a page. They can also be placed on top of and adjacent to each other, though you can only place two grids side-by-side, and it's best to position them vertically, rather than side-by-side to keep the tables simpler.

Grids are not always the right solution, and you will want to read Chapter 7 ("Working with Tables"), Chapter 9 ("Working with Frames"), and Chapter 12 ("Layers and Positioning"), before you decide which layout options are best for your pages. You may choose to use more than one.

To create a layout grid:

1.
Open a new GoLive document.

2.
Drag the Layout Grid icon (Figure 4.1) from the Basic tab of the Objects palette onto the Document window, or double-click the icon. A square layout grid appears (Figure 4.2) in the upper-left corner of the blank page.

Figure 4.1. Choose the Layout Grid icon from the Basic tab of the Objects palette, then double-click or drag it into the Document window.


Figure 4.2. A grid appears at the first available space in the Document window. Note the three handles on the grid, used for dragging and sizing.


This grid is set to its default values, which probably will not meet your needs. You will need to use the Layout Grid Inspector to change the grid's attributes.

To make adjustments to the layout grid:

1.
Click the grid to display the Layout Grid Inspector (Figure 4.3). In the Layout Grid Inspector, you can resize the grid, change its horizontal and vertical grid-lines, set the grid's color, and align two grids horizontally on the page.

Figure 4.3. The Layout Grid Inspector controls size, position, behavior, and color of the grid.


2.
With the Inspector visible, click in the Horizontal field in the Grid area. Type 12, to replace the default value of 16 pixels.

3.
Press Tab. The Vertical field is now selected. Notice that the horizontal gridlines are now closer together. They are 12 pixels apart.

4.
Type 12 in the Vertical field and press Tab to finish the new, denser grid (Figure 4.4)

Figure 4.4. One of the behaviors controlled in the Inspector is the density of the grid. The size of the grid's cells is expressed in pixels.


Closer grid spacing can be useful if you want to place a number of objects close together on a grid. Likewise, adding space between gridlines keeps objects further apart on the page.

Tip

By default, both the Horizontal and Vertical Snap checkboxes are selected in the Layout Grid Inspector. With Snap turned on, objects you drag onto a layout grid automatically snap to the nearest gridlines when you release the mouse.


Tip

Turning off the Visible checkbox hides the grid from view but doesn't prevent it from snapping objects into place if the Snap option is on. Because the grid will not be visible on the finished page, hiding the grid temporarily can make previewing pages in the Layout Editor a bit easier.


Tip

Grids can be resized by dragging the handles on the sides of the grid or by entering new numerical values—expressed in pixels—in the Layout Grid Inspector. They cannot, however, be repositioned, because "underneath" the grid is an HTML table; therefore, grids cannot be positioned at a specific point on the page.


Tip

Grids can be optimized so that they are just large enough to contain the elements placed upon them. Clicking on the Optimize button in the Layout Grid Inspector will retain the position of the upper-left corner of the grid, but the area of the grid without objects on it will be eliminated. Optimize only works when the grid contains objects and excess space.


Positioning a layout grid

A single layout grid can be used for an entire Web page, or you can divide the page into multiple grids. A single page-wide grid forms a consistent background for the entire docu-ment and is usually a good choice if your Web page contains lots of items that are positioned or aligned relative to each another. If your page design is modular, with common sections such as a navigation bar or logo section—a grid for each section is an option, but one that should be applied carefully, making sure that each element (text boxes, for example) lines up exactly into rows and columns on the grid. (Using Snap To Grid can help with alignment.) This will minimize the number of extra cells and columns that are generated, thereby streamlining your code. In the following example, two grids accommodate a modular layout.

To size a layout grid:

1.
In a new GoLive document, add a layout grid to the blank page.

2.
Drag the handle at the bottom-right corner of the grid downward and to the right until the grid extends to the bottom and right edge of the window (Figure 4.5).

Figure 4.5. Drag the layout grid handle to the bottom-right corner of the Document window.


3.
In the bottom-right corner of the Document window, click and hold the Page Size popup menu to open the menu, and select a width of 580 pixels, the common browser width for 14-inch monitors. The Document window enlarges a bit.

4.
Select the layout grid and drag its bottom-right handle down to the lower-right corner of the window to once again fill the page with the grid.

or

Resize the grid by typing 580 in the Layout Grid Inspector's Width field (Figure 4.6). Now, the grid matches the pixel width of the window.

Figure 4.6. Change the grid's width in the Layout Grid Inspector.


Tip

As you drag to resize the grid, the width and height measurements in the Layout Grid Inspector change, reflecting the grid's new size in pixels. While "eyeballing" may work when dragging a layout grid, you can always enter the precise size of the grid in the Inspector's Width and Height boxes.


Using multiple layout grids

Many Web sites use a navigation bar, logo, or other standing visual elements to unify the look of the pages making up the site. Multiple layout grids make it possible to add these and other standing elements to your Web pages to use as placeholders and positioners. Even better, you can save a layout of multiple grids and their repeating objects as a Custom object snippet, and use the object to quickly and accurately add elements to new pages as you build them.

Tip

While grids can be placed next to one another, problems with alignment, especially when browser windows are resized, make maintaining their placement difficult. One way to use grids effectively is to confine them to a unique portion of the page, say the top or bottom. Vertical grids don't cause as many alignment problems as horizontal grids, and offer an easy way to separate recurring matter—banners, logos, or other header and footer information—from rest of the page.


To add a second layout grid:

1.
Open a new page. Set the width of the page to 580 pixels and fill the Document window with a layout grid.

2.
Double-click the Layout Grid icon in the Objects palette. A second grid appears in the Document window (Figure 4.7). In this example, secondary grid will contain your Web site's table of contents.

Figure 4.7. A secondary grid (to be used for a table of contents) is placed over the primary grid (which fills the entire page).


3.
With the new grid selected, click the Layout Grid Inspector. Here you will change the settings of the grid.

4.
Click the Background Color field in the Inspector (Figure 4.8). The Color palette (which, by default, shares palette space with the Objects palette) opens.

Figure 4.8. Click the Inspector's Background Color field to open the Color palette.


5.
With the Color palette open, select a new background color for your layout grid, which changes the Layout Grid Inspector's Color field. The secondary grid changes to the color you've selected (Figure 4.9) differentiating it from the first one you created. You will find more details about choosing colors and using the Color palette later in this chapter.

Figure 4.9. The secondary grid's color changes to the selected one.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint