About 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, layers, 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 About GoLive table features.)

    Layer-based layouts

    Like objects on a layout grid, objects in layers (also called floating boxes) can be freely positioned anywhere on the page. Layers also have the added advantage of being able to overlap other layers so you can create layered effects. Using layers 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 layers.)

    Image links are attached to show or hide actions for stacked layers. Holding the pointer over an image (A) makes text in layer appear (B).
    Image links are attached to show or hide actions for stacked layers. Holding the pointer over an image (A) makes text in layer appear (B).

    Photoshop and Illustrator based designs

    Many Web design firms and professionals create graphically rich portions of their Web page layouts in Adobe Photoshop or Adobe Illustrator, and then bring the designs into their Web pages. When you design a page layout in Photoshop or Illustrator, 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 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 or Illustrator designs to your Web pages in GoLive:

    • Generating HTML files from Photoshop or Illustrator that you can open directly in GoLive.
    • Dragging a Photoshop or Illustrator image file from the site window into the page automatically creates a Smart Object link between Photoshop or Illustrator 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 or Illustrator and GoLive automatically optimizes the sliced images for the Web. (See Adding sliced Photoshop images and Adding sliced Illustrator SVG images.)

    Note: GoLive only recognizes slices in an Illustrator image saved as SVG.

    • If you want to preserve multiple layers of a Photoshop design, you can import the layers of the image as individual Web images in GoLive layers. Because the Web images are displayed in GoLive layers, you can completely reposition them, overlap them, and apply other actions to them such as the Show Hide action. (See Hiding and showing layers and Adding layered Photoshop images.)
    • You can use your Photoshop-based design as a tracing image and save individual cutouts as Web images in GoLive layers. If you want, you can create a duplicate page that places the tracings in a table-based design by converting the layers to a layout grid. (See Converting layers into layout grids and 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.)

    CSS-based designs

    You can base page layouts on cascading style sheets that give your pages a consistent presence and enable you to update the site's styles with a single file. Use the CSS Editor to create style sheets and link them to pages in your site. (See About the GoLive CSS workflow.)

    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: