Page layout workflow

Before you lay out the content on your pages, set up your site first--having all your media and resource files already organized in the site makes it easy to reference them on the page and GoLive site management tools ensure that all the reference links and JavaScript-based actions are kept up to date as you work. Because you work with an active site window, GoLive is able to manage and properly generate your links as necessary. (See Creating a site.)

You can also set up your pages with common elements like page titles, margins, and page backgrounds before you lay out the content. (See Setting up pages.)

You use the Objects palette to add objects to the page, like the layout grid, layout text boxes for holding text on the grid, and smart objects for linking to image files and their source applications. The Layout Grid Inspector lets you add a background color or image to the grid, and change the grid line spacing and the way that objects snap to the grid lines.

You use the site window to drag images, HTML files, and custom site assets onto the layout. Dragging objects from the site window saves you time because it automatically sets up the reference links between the objects and their source files.


Drag to add images and other files or site assets to the page layout. A. Component in a layout text box B. Layout grid C. Text in a layout text box D. Image linked to its source file E. Text in a floating box

To add content to a Web page:

1. Choose the type of container you want to hold the content, such as a layout grid, a floating box, or a table, and drag its icon from the Objects palette into the Layout Editor.

To simplify page layout, place a layout grid on the entire page.

2. Add content to the container using any of the following methods:
• Drag placeholder icons (such as an image placeholder or a smart object) from the Objects palette into the container and then link them to their reference files (such as an image file) in the site window.
• Drag files directly from the site window into the container. Dragging image files to the container bypasses the step for linking the placeholder to the reference file. Dragging Photoshop, Illustrator, or LiveMotion files bypasses the step for linking a smart object placeholder to the reference file. (See Adding Web-formatted images not using Smart Objects and see Adding images to a Web page using Smart Objects.)
• Drag HTML files, URLs, or e-mail addresses from the site window to create a hypertext link with the name of the file used as the link's label. Selecting text in the container before you drag the file from the site window creates a link without changing the text label. (See Linking files.)
• Drag site assets, such as a component containing a navigational bar, from the Objects palette into the container. (See Working with Site Assets.)