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.

Adding text using a table

In addition to displaying information in rows and columns, tables can be used to lay out text and objects on a page. To add text to a table, you can type directly in a table cell, copy and paste text from GoLive or another application, and import text from a text-only file created in a word-processing or spreadsheet application, for example.

Now you'll use a table to add text that introduces Gage Vintage Guitars to the home page. Currently, the text resides in a text-only file. To save time, you'll copy and paste the text from the file into a single-cell table that you'll add to the page. You can place a table directly on the page or on a layout grid, which gives you more control over its placement but may result in more complex HTML code.

  1. iconDrag the Table icon from the Basic set () in the Objects palette to the area below the main heading on the layout grid.

    Figure 30Adding table to layout grid

    A table is added to the grid, and the Inspector changes to the Table Inspector. By default, the table has three rows and three columns. You'll change the number of rows and columns using the Table Inspector.

  2. In the Table tab of the Table Inspector, enter 1 for Rows, press Tab to jump to the next text box, and enter 1 for Columns. Press Enter or Return.

    Now you'll specify the width of the table. You'll also set the table's border width to 0, so that the borders appear as a solid or dashed outline in the Layout Editor but don't appear in the browser.

  3. In the Table tab of the Table Inspector, enter 400 for Width. If it isn't already chosen, choose Pixel from the menu to the right of the Width text box. Enter 0 for Border. Press Enter or Return.

    Now you'll copy and paste text from a text-only file into the table.

  4. Navigate to the folder Lessons/Lesson03/03Start, and double-click the intro.txt file to open it in a text editor.

  5. Create an insertion point anywhere in the text, and choose Edit > Select All to select all the text. Choose Edit > Copy to copy the text, and then choose File > Close to close the text file without saving any changes.

  6. In the index.html document window in GoLive, click in the newly added table to create an insertion point, and choose Edit > Paste.

    Text from the intro.txt file is added to the table.

    Now you'll precisely position the table using the toolbar.

  7. Move the pointer over the top left of the table until it turns into this (), and then click to select the table in the document window.

  8. On the toolbar, enter 179 in the Horizontal Position text box, press Tab to jump to the next text box, and enter 80 in the Vertical Position text box. Press Enter or Return.

  9. Now you'll optimize the layout grid to reduce its size.

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

    Figure 31

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

8. Creating a custom color palette and adding color to text | Next Section Previous Section