• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Working with Layout Tools > Working with Objects on a Grid

Working with Objects on a Grid

You can add multiple objects to a layout grid, and work with them singly or as a group. Once objects are placed on the grid (unlike when they are placed in the Document window without a grid), they can be moved freely, as long as they stay on the grid. Just drag the object from one position on the grid to another. If the Snap checkboxes in the Layout Grid Inspector are activated, objects you drag will snap to the nearest gridline.

Object management tools

In this section, we will work with three GoLive tools: the Layout toolbar, the Align palette, and the Transform palette. Some of their features overlap, but each will help you align and group objects and gain more control over layout grids.

As you saw in the last section, the layout grid has its own inspector. The grid also has its own toolbar (Figure 4.10), which replaces the standard toolbar at the top of the screen when you work with a layout grid.

Figure 4.10. The Layout Grid toolbar appears when you select an object within a grid.


Actually, you can't use the Layout Grid toolbar's grid-related tools unless you have added an object to the grid. When you select that object, the toolbar's fields and buttons become active.

Tip

You can move an object on a grid with your keyboard's arrow keys. If Snap is selected in the Inspector, the object will move a grid square at a time, up or down, left or right. Holding down the Control and Alt keys (Windows) or the Option key (Mac) while using the arrow keys will move the object one pixel at a time. Additionally, the toolbar shows the position of the object in pixels relative to the upper-left corner —0,0 on the xy axis—of the page (Figure 4.11).

Figure 4.11. The Layout Grid toolbar shows the distance (in pixels) of a selected object from the left and top margins of the page.



Tip

Objects on the grid may be resized by grabbing their control handles and dragging out (larger) or in (smaller). They may also be resized by typing numerical values in the appropriate toolbar fields.


All of the alignment tools on the Layout Grid toolbar, plus additional tools, are included in the Align palette. With it, you can align objects to the grid, as on the toolbar, but you can also align them relative to one another, or distribute them around the grid.

To align a single grid object:

1.
Drag the Image icon from the Objects palette onto a new layout grid, and link to a graphic file by clicking the Browse button in the Inspector (it looks like a folder) and locating an image you want to add to the page.

2.
With the object selected, click one of the six alignment buttons in the toolbar to move the picture around the grid (Figure 4.12).

Figure 4.12. Move the image around the Document window with these buttons located on the Layout Grid toolbar.


Tip

You can also align objects within a layout grid using the Align palette (Figure 4.13). To open the Align palette, choose Window > Align. This palette contains the same controls as the toolbar, and then some.

Figure 4.13. Choose an alignment option from the Align palette. You align objects relative to the grid with the Align to Parent buttons.



The Transform palette works only with objects that appear on layout grids.

To use the Transform palette to position an object:

1.
Make a layout grid fill a page. Open the Transform palette from the Window menu, or click the Transform tab in the Align palette, if visible.

2.
Add an Image item to the grid.

3.
Use the Inspector to locate a graphic. In this case, I have linked to a 117-pixel square GIF image of a traffic sign. Note that the sign's size is visible in the Transform palette's Size boxes (Figure 4.14) and in the Inspector.

Figure 4.14. You can control an object's size and position with the Transform palette.


4.
Change the numerical values in the Size boxes of the Transform palette and press Return. In Figure 4.15, I have changed the width of the graphic to 200, with the distorted result.

Figure 4.15. Changing the width of the graphic to 200 pixels distorts the graphic.


5.
Return the value to its original number. Click the Constrain Proportions checkbox.

6.
Enter a new numerical value in either of the Size boxes. Note that both values grow proportionately.

To align three objects with the Align palette:

1.
On a new page, set the width to 580 pixels and fill the entire page with a layout grid.

2.
Distribute three objects on the page more or less randomly.

3.
Shift-click to select all three objects (Figure 4.16).

Figure 4.16. Three images are placed on the grid. All three are selected.


4.
Open the Align palette. With multiple grid objects, your options for aligning and distributing are more numerous (Figure 4.17).

Figure 4.17. Alignment options abound for multiple selected objects. Here, the top row aligns objects to the Parent (grid) and the second row aligns them to each other. The Distribute options will equally distribute the objects or the white space between them.


5.
From the Align Objects section of the Align palette, select Top Align (which will line up all the objects with the topmost object), Center align (which will align them to the center object), or Bottom align (which will align them with the bottom of the lowest object). The objects in Figure 4.18 are aligned to the center.

Figure 4.18. These objects are center-aligned to each other.


Tip

The Align buttons on the toolbar perform the same functions as the Align palette buttons when you're aligning multiple objects, just as they do when you're aligning a single object to the grid.


Tip

The Align palette's four sets of buttons align the graphics with respect to the grid (Parent), to each other, or you can distribute the objects evenly around the layout, either by the average distance between the horizontal (or vertical) edges of the objects, or by the amount of white space between them.


Tip

To use Distribute Object or Distribute Spacing, you must select at least three objects on the grid.


Tip

Only the Align and Distribute buttons that can currently be used will be active in the Align palette. For example, if all selected objects are currently aligned to the bottom of the grid, you can't choose Bottom under Align to Parent.


Tip

Use the Distribute Objects buttons to space multiple selected objects an equal distance from each other, horizontally or vertically. Use the Distribute Spacing buttons to make the white space between the multiple selected objects equal, horizontally or vertically.


Grouping objects

You can group multiple layout grid objects so that they can be moved as a single object.

To group objects:

1.
Shift-click to select several objects on the layout grid and align or distribute them as you like.

2.
Click the Grouping button in the Transform palette (Figure 4.19). The objects'individual selection handles disappear and the newly grouped object is now surrounded by a single border (Figure 4.20).

Figure 4.19. Click the Grouping button in the Transform palette to group selected objects.


Figure 4.20. Grouped objects are contained within a single border, allowing you to move them as one object when you click on the group.


3.
Drag the grouped object. All the elements move together.

4.
When you create a group, the Inspector changes to the Group Inspector (Figure 4.21). Use the lock icon to lock the group so that its elements will continue to move together. Clicking the lock opens the lock's hasp, making the objects independent once again.

Figure 4.21. The Group Inspector lets you know how many items are in your group. You can unlock a group by clicking the padlock, which opens its hasp.


5.
To break up a group, choose Ungroup from the Transform palette or click the lock in the Group Inspector to open the hasp and break up the group.

Tip

The Group and Ungroup buttons in the Transform palette also appear on the Layout Grid toolbar (Figure 4.22).

Figure 4.22. The toolbar also has Group and Ungroup buttons, which perform the same functions as the ones in the Transform palette.



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