Introduction to page layout

The Layout Editor in the document window provides the canvas on which you drag files or objects (usually from the site window) onto your page. Tables, floating boxes, and special GoLive layout grids and text boxes provide the containers for holding and positioning text, images, animations and movies.

Table-based designs

Tables are used often for page layouts because most Web browsers can display HTML tables. GoLive provides two ways to create table-based designs for your page layouts, using a standard HTML table or the GoLive layout grid. GoLive layout grids are a special type of HTML table that lets you freely position objects anywhere on the page. (See Using the layout grid).

GoLive provides table-design tools for using standard HTML tables. Images, text, and other objects can be positioned on the page by placing them in table cells, other cells can be left blank, and table borders can be hidden. (See Working with Tables.)

Floating box layouts

Like objects on a layout grid, objects in floating boxes can be freely positioned anywhere on the page. Floating boxes also have the added advantage of being able to overlap other floating boxes so you can create layered effects. Using floating boxes together with a layout grid can let you create a table-based design with dynamic or interactive behavior on the page, such as triggering text to disappear and then reappear when the mouse pointer is over an image link. (See Laying out pages with floating boxes.)


Image links are attached to Show/Hide actions for stacked floating boxes. A. Holding pointer over image B. Makes text in floating box appear

Photoshop-based designs

The majority of Web design firms and professionals create their Web page layouts in Adobe Photoshop, including rollovers and animated GIFs, and then bring the designs into their Web pages. When you design a page layout in Photoshop, you can slice it into a table of individual images and GoLive will automatically put the slices into a custom HTML table in your page. When you save the Photoshop image for the Web, you can reformat the HTML and JavaScript code so that any rollovers are fully editable in GoLive.

You can use any of these methods to add your Photoshop designs to your Web pages in GoLive:

• Dragging a Photoshop image file from the site window into the page automatically creates a smart object link between Photoshop and GoLive. If the image is sliced, GoLive places the slices into a new table and saves each slice as a separate Web image. You can continue to update the design in Photoshop and GoLive automatically optimizes the sliced images for the Web. (See Working with a sliced Photoshop image.)
• If you want to preserve multiple layers of a Photoshop design, you can import the layers of the image as individual Web images in floating boxes (DHTML layers). Because the Web images are displayed in floating boxes, you can completely reposition them, overlap them, and apply other actions to them such as the Show Hide action. (See Hiding and showing floating boxes and see Working with Photoshop layered files.)
• You can use your Photoshop-based design as a tracing image and save individual cutouts as Web images in floating boxes. If you want, you can create a duplicate page that places the tracings in a table-based design by converting the floating boxes to a layout grid. (See Converting floating boxes into layout grids and see Building a Web page using tracing images).

Frame sets

Another type of page layout design can be based on frame sets. You use the Frame Editor to create a frame set and lay out frames that display individual Web pages. (See Working with frames.)

Site assets for speeding page design

Site assets, such as components and page templates, let you update common elements across your site and share your design work with others while restricting their access to specific areas in the layout. Stationery can be useful for setting up starting conditions in new pages and saving them with the site. (See About site assets.)

Related Subtopics:

Page layout workflow