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.

Specifying keywords

You specify keywords for a page so that Internet search engines and browsers can identify content in the page. To specify keywords, you add a Keywords element to the head section pane of the document window, and then use the Keywords Inspector to add a list of keywords for the element.

Now you'll specify keywords for the home page.

  1. To display the head section pane, click the triangle next to the Page icon () in the upper left corner of the document window.

  2. iconDrag the Keywords icon from the Head set () in the Objects palette to the head section pane.

    Figure 37Adding Keywords element to head section

    A Keywords element is added to the head section of the page, and the Inspector changes to the Keywords Inspector.

    To add an element to the head section pane, you can also drag it to the body of the page to have GoLive automatically open the head section pane and add the element to it.

  3. In the Keywords Inspector, click the New Item or New Keyword button() to add a new keyword to the list. Then enter a word or phrase that you want to use as a keyword in the text box at the bottom of the Inspector. (We used the phrase "Gage Vintage Guitars.") Press Enter or Return. The new keyword is listed in the Inspector pane and added to the document head pane.

    Figure 38Adding keywords using Keywords Inspector

  4. Click the Source tab in the document window to check that the keyword is added correctly. Click the Layout tab to return to the Layout Editor.

  5. Click the triangle next to the Page icon to close the head section pane.

  6. Choose File > Save to save index.html.

Adding comments

As you lay out content on a page, you may want to add hidden comments about its design for future reference. Comments appear in GoLive in the Comment Inspector and the source code and other HTML editors, but they don't appear in browsers. You can add comments to the head section or the body of a page.

Now you'll add comments to the body of the home page.

  1. iconDrag the Comment icon from the Basic set () in the Objects palette to an area nearby the "Check Out This Week's Hottest Buy!" text.

    Figure 39


  2. A symbol appears on the page to indicate the comment's location, and the Inspector changes to the Comment Inspector. You enter comments in the Comment Inspector.

  3. In the Comment Inspector, delete the text "your comment here," enter the following text: Remember to add navigation links to this page.

  4. Now you'll view the comment.

  5. Click elsewhere in the work area to have the Inspector change from the Comment Inspector. For example, we clicked on the text block, "Check Out This Week's Hottest Buy."

  6. Click the Comment icon on the page to select it, and then view your comments in the Comment Inspector.

  7. Click the Source tab in the document window to view your comment in the source code. Click the Layout tab to return to the Layout Editor.

  8. Choose File > Save to save your work.

Adding a date and time stamp

You can add a date or time stamp to a page, so that viewers can tell when you last updated the page. GoLive reads the current date or time from your computer's built-in clock and writes the result in a custom tag. It then updates the information dynamically whenever you save the page.

Now you'll add a date and time stamp to the home page. First you'll add descriptive text before the date and time stamp.

  1. In the table that contains the descriptive paragraph about Gage Vintage Guitars, click after the last character (!) to insert a cursor, and press Enter or Return to begin a new line of text. Then type Last revised: with a space after it.

    Now you'll add a date stamp to the page.

  2. iconDrag the Modified Date icon from the Smart set () in the Objects palette to the cursor on the page, or double-click the icon.

    Figure 40

    A date in a default format is added to the page, and the Inspector changes to the Modified Date Inspector.

    Now you'll specify a format for the date.

  3. In the Modified Date Inspector, choose a country from the Format menu, and select a date format from the list of options for the specific country. We chose U.S. (United States) and the long date form (day, date, year).

    Figure 41

    Now you'll add a time stamp with the text "at" preceding it.

  4. In the document window, after the date stamp, type at with a space before and after it.

  5. Drag another Modified Date icon from the Smart set in the Objects palette to the cursor on the page, or double-click the icon.

  6. In the Modified Date Inspector, choose a country from the Format menu, and select a time format from the list. We chose U.S. (United States) and the hours:minutes form.

    Figure 42Adding time stamp

  7. Choose File > Save to save index.html.

  8. Click the Preview tab to preview the page. Notice that the comment does not appear in the preview. Click the Layout tab to return to the Layout Editor.

  9. Then choose File > Close to close the page.

Now you're ready to design two other pages for the site.

10. Adding a component to an existing Web page | Next Section Previous Section