Laying out page content

You can create different types of page layouts using layout grids, tables, floating boxes, frame sets, and Photoshop smart objects. With the exception of frame sets, you use the Layout Editor to lay out your page content. You use the Frame Editor to lay out frames and add pages of content in a frame set document. (See Working with frames.)

Introducing the layout grid

Using GoLive layout grids, you can create table-based page designs without having to deal with size attributes of individual table cells and row and column spans. As you drag text, images, and other objects onto the layout grid and move them into position, GoLive automatically creates the necessary table cells and adjusts empty ones around the content. To add a layout grid to the page, you drag it from the Basic set of the Objects palette. (See Using the layout grid.)

The quickest and most efficient way to lay out images and other media files on your Web page is to drag them from the site window onto the layout grid. GoLive automatically creates resource links between the source files and the embedded images or media on the page. You can use layout text boxes to arrange blocks of text on the grid and place images inside the layout text boxes when you want to wrap text around them.

Using standard HTML tables

Even if you're using layout grids, you might want to add a standard HTML table to a page--for example, when you want to show the borders of rows and columns in a chart of information. It's easy to add a table or convert a layout grid to a standard table and use the Table Inspector to set its attributes. (See Working with Tables.)


Borders on tables can visually separate information. A. Layout grid (no cell borders) B. Standard HTML table with borders

Designing pages with Photoshop sliced images

 Another way to lay out a Web page is to create the design in Photoshop and slice the image into sections. When you drag the sliced Photoshop image from the site window into the document window, GoLive automatically creates a smart object relationship between Photoshop and the page, sets up a folder and creates a table to contain new Web-formatted images for every slice, and displays the Save for Web dialog box to optimize each one. (See Adding Photoshop images.)

Hiding and showing images in floating boxes

 You can create page layouts using nothing but GoLive floating boxes to hold your page content, or use them with other objects on a layout grid to create layered effects. Floating boxes are based on the DIV element so you can overlap them, freely position them anywhere on the page, and attach JavaScript actions to them. For example, you can use floating boxes and the predefined show/hide actions to hide or show images in the Web browser based on mouse events (such as clicking). (See Laying out pages with floating boxes and see Hiding and showing floating boxes.)