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.

Creating a component to be used as a navigation bar

A component is an HTML source file that stores text and objects, such as a navigation bar, that you want to add to multiple pages in a site. When a component is added to a page, it's added as a single object and remains linked to its source file. To update a component, you simply update its source file to have GoLive automatically update all pages containing it.

At the top of each page in the Gage Vintage Guitars site, you'll place the company logo and a navigation bar for the site. Instead of creating this page content multiple times, you'll create it once and save it as a component that you can quickly add to each page. Now you'll create a new page that you'll store as a component. You store components in the Components folder, located in the site's data folder.

  1. To display the right pane of the site window, click the double-headed arrow () in the lower right corner of the window.

    Figure 9

    The right pane of the site window appears with the Extras tab selected. The Extras tab displays the contents of the site's data folder, which includes the Components folder.

  2. Place the site window at the bottom of your work area, so that the window is visible when you create a new page. To move a window, drag its title bar.

  3. Choose Window > Objects, or click the tab if the Objects palette is collapsed.

  4. For more information on working with palettes, see "Creating a custom workspace" on page 80. For detailed information on using the Objects palette, see "Using the Objects palette" on page 85.

  5. In the Objects palette, click the Site button ()to display the Site set of icons in the palette. (You can also choose Site from the Objects palette menu.)

  6. icon Drag the Generic Page icon from the Site set in the Objects palette and drop it on the Components folder in the Extras tab of the site window.

    Figure 10Adding new page to site's Components folder

  7. A new page, untitled.html, is added to the Components folder and appears in the Extras tab of the site window.

  8. Enter navbar.html to rename the file.

  9. NOTE

    To add a new page to a site, you can also choose File > New Page. If you use this method, make sure that you save the page to the appropriate folder on your hard drive.

    Now you'll open the navbar.html file.

  10. Double-click the navbar.html file to open it.

  11. The navbar.html file opens in the Layout Editor of the document window.

    Note that the default window size for new pages is 619. You'll use this default size in this lesson.

    Now you'll change the title of the page. Page titles, together with keywords, are used by Internet search engines and browsers to identify content in your pages.

  12. Select the default page title (Welcome to Adobe GoLive 6) next to the Page icon () in the upper left corner of the document window.

  13. Enter Navigation Bar as the new title.

  14. Choose File>Save.

    Figure 11Changing page title

You can check that a file is saved as a component by opening the Site Extras set () of the Objects palette, and choosing Components from the pop-up menu at the bottom of the palette. Your navbar.html file should now be saved in the Site Extras set, ready to be added to any page.

Figure 12

Now you'll begin designing the component by adding a layout grid to the page.

5. Adding a layout grid | Next Section Previous Section