Home / Articles / How to Create Page Layouts in GoLive CS2

How to Create Page Layouts in GoLive CS2

Chapter Description

In this self-paced, step-by-step lesson, excerpted from our best-selling Classroom in a Book series, you'll learn how to create HTML page layouts using a variety of GoLive methods, including the GoLive CS2 layout grid, HTML tables, CSS (Cascading Style Sheets) layers, and liquid layouts.

Getting started

In this lesson, you will create a new blank site and add provided images to the site window. You will then use the new Layout Grid object to create a page layout.

GoLive layout grids make it easy to create CSS-based and table-based designs for your Web pages. Instead of hand coding CSS or setting up table cells, you can add a single layout grid to the page, draw text boxes or layers, or drag objects anywhere on the grid. GoLive adjusts the properties of the layout grid as you add content and reposition it.

Using layout grids, you can position multiple objects on your page with 1-pixel accuracy.

Before starting, open the finished file to see what you will create using the layout grid.

  1. To ensure that the tools and palettes function exactly as described in this lesson, delete or deactivate (by renaming) the Adobe GoLive CS2 preferences file. See “Restoring default preferences” on page 3.
  2. Start Adobe GoLive CS2. Close the Welcome Screen if it appears.
  3. Choose File > Open.
  4. Navigate to the Lesson03 folder, and open the lesson03_site_folder. Select the lesson03.site file and choose Open.

    The site window appears.

  5. Double-click to open the index.html page.

    The index page of this site was created using the Layout Grid object with the Layout Text box. You will create a page similar to this in this lesson. You can leave this page open for reference, or choose File > Close.

  6. Click on the site window and choose File > Close. When the Adobe GoLive CS2 alert window appears, click OK; you do want to close the site “lesson03.”

Creating the site

Now you will create your own Web site by following the steps in this lesson.

  1. Choose File > New to open the New options window.
  2. Choose Site > Create Site and select Blank Site. Click Next.
  3. In the Specifying a Site Name and Location window, type student in the Name text field.
  4. Choose the Browse button beneath the “Save To” text field and locate the Lesson03 folder. Click OK (Windows) or Choose (Mac OS), then click Next.
  5. The “Use a Version Control System?” window appears. Choose “Don’t Use Version Control.” Click Next. Read about Version Cue in Lesson 13, “Using Version Cue and Adobe Bridge with GoLive CS2.”
  6. In the “Publish Server Options” window, choose “Specify Server Later.” Click Finish.
  7. Keep the site window open.
5. Using the CSS-based layout grid | Next Section Previous Section