Home / Articles / Designing Adobe GoLive Web Pages

Designing Adobe GoLive Web Pages

Chapter Description

Adobe GoLive provides you with a variety of tools for laying out your Web pages. It also provides you with several ways to quickly add objects and apply colors frequently used in your Web site, saving you both time and effort. In this lesson, you’ll explore the various tools for page layout as you work on the design of three Web pages.

Editing a component

An additional benefit of using a component to place frequently used page content throughout your site is that you only need to edit a single file to make changes to it. When you save your changes to the component, GoLive automatically updates all pages containing it.

Now you'll edit the component for the navigation bar. You'll move the images in the navigation bar down so that they're vertically centered on the layout grid.

  1. In the document window, notice that the Items In Stock, Repairs, and Appraisals images are aligned to the top of the layout grid. Try to click the Items In Stock image to select it for editing. Notice that you selected the entire component instead.

    You can't edit the objects in the component from this page. Instead, you must edit them in the source file in which you created them.

  2. Double-click the component on the page to open the component's source file. (You can also double-click navbar.html in the Components folder, located in the Extras tab in the right pane of the site window.)

  3. In the navbar.html window, 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.

  4. Click the Align Center button () on the toolbar to center the images vertically on the grid.

    Figure 51Images centered vertically on grid

  5. Choose File > Save to save navbar.html.

  6. Click OK for GoLive to automatically update the pages that use navbar.html as acomponent. When the update is finished, click OK to close the dialog box.

    Figure 52

  7. Choose File > Close to close navbar.html.

  8. Make the hottest.html window active, and notice that the component has been updated automatically.

  9. Save and close the file.

14. Previewing in GoLive | Next Section Previous Section