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

Lesson 3. Designing Web Pages > Aligning and distributing multiple objects

Aligning and distributing multiple objects

Now that you've added all of the images, you're ready to align and distribute them. You'll align the tops of the three images for the navigation bar using the Align palette.

1.
To display the Align palette, choose Window > Align.

The toolbar lets you align objects relative to a layout grid, while the Align palette lets you align and distribute objects relative to each other or their parent.


2.
Click the Items In Stock image to select it. Then Shift-click the Repairs image and the Appraisals image to add them to the selection.

3.
In the Align palette, click the Vertical Align Top button () under Align Objects. (If the tops of the selected objects are already aligned, this button is dimmed.)

The tops of the selected images are aligned.

4.
With the three images still selected, click the Vertical Align Top button () under Align to Parent.

The three images are aligned with the top of the layout grid.

5.
Choose Window > Align to close the Align palette.

Now you'll move the three images together using a keyboard shortcut.

6.
Click away from the three images to deselect them, and select only the Items In Stock image on the page. Then hold down Ctrl+Alt (Windows) or Option (Mac OS), and press the Left Arrow key until the image moves no further.

7.
Select only the Repairs image on the page, and use the same method to move it to the left until it moves no further. Then select only the Appraisals image, and move it to the left until it moves no further.

The selected objects are moved horizontally on the page so that their edges touch each other.

Note

By default, a layout grid has options set to snap objects to the grid. To move a selected object 16 pixels (the default spacing between the horizontal and vertical lines of the grid), press an arrow key. To move a selected object 1 pixel, hold down Ctrl+Alt (Windows) or Option (Mac OS), and press an arrow key.

When you have finished placing objects on a grid, it's a good idea to optimize the grid, which you'll do now. Optimizing a grid reduces its size, so that it takes up less space on the page.

8.
Click the layout grid to select it. Then click Optimize in the Layout Grid Inspector.

Optimized layout grid

For the purposes of this lesson, you won't add navigation links to the images. You'll add these links later in Lesson 6, “Creating Navigational Links.”

9.
Choose File > Save to save navbar.html. Then choose File > Close to close it.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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