Design and lay out a Web page


    Adobe GoLive makes it easy to design and lay out visually compelling Web pages. You can create simple or complex professional-quality Web pages without writing any code.

    Once you've designed your page, you can save it as a page template. New pages created from a page template remain linked to the template--when you change the template, GoLive automatically updates the pages without affecting any content that has been added to them.

    Design and lay out a Web page

1. Set page dimensions and add a layout grid.

    Open a site, and choose File > New Page. (For information about creating a site, see Creating a site.) Choose 720 from the menu at the bottom right of the document window to display the current page at 720 pixels wide, the standard width for 17-inch monitors. Drag the Layout Grid icon Layout Grid icon from the Basic set of the Objects palette to the page. Type 720 in the Width text box in the Layout Grid Inspector to match the layout grid to the width of the page.

    Setting a default page size helps prevent you from adding objects, such as large graphic banners, that are too wide to display on a standard page. Layout grids let you create table-based designs without having to deal with rows, cells, and columns. Layout grids automatically lengthen to accommodate the objects you place on them.

    Layout Grid object

2. Add a background color to the page.

    Click the Show Page Properties icon in the upper right corner of the document window. In the Page tab of the Page Inspector, select Background Color and click the lower right corner of the color field. Choose a background color for your page from the list of swatches that appear.

    You can apply a color or an image to the background of your page to visually enhance it. Although colors that you choose for page backgrounds override the default colors used by most Web browsers, viewers can change browser preferences to override your page background colors. You can also select an image for the page background, but keep in mind that Web browsers treat the image as a tile and repeat it to cover the entire page.

    Show Page Properties icon

3. Add a text box and format the text.

    Drag the Layout Text Box icon Layout Text Box icon from the Basic set of the Objects palette to the layout grid. Move the pointer over the edge of the text box until it changes into a double arrow, and then drag until the box is the size you want. Click inside the layout text box to create an insertion point and type some placeholder text. On the toolbar, click the Align Center Align Center button, and then choose Header2 from the Set Paragraph Format menu.

    In GoLive, you can format text in a variety of ways: use paragraph styles, such as Header 1 and Header 2, to format paragraphs; use physical styles, such as Bold and Italic, to emphasize text; and use structural styles, such as Emphasis and Strong, to both emphasize and classify text. (For more information about formatting text, see About formatting HTML text.) You can also apply fonts, type sizes, and color to text using CSS (cascading style sheets), which contain a set of stylistic rules that describe how HTML documents should appear to viewers. If you need to update a CSS style, you simply edit the style rule and all content that hosts the style will automatically reflect the new properties. For more information about CSS, see About cascading style sheets.

    Layout Text box

4. Add a pre-optimized image.

    Drag an Image icon Image icon from the Basic set of the Objects palette to the layout grid. Select the image object in the document window, and drag the pick whip pick whip in the Basic tab of the Image Inspector to a GIF or JPEG file in the site window. You've successfully made the connection when the line from the pick whip connects with and highlights the filename in the site window. Don't worry if you don't have a GIF or JPEG file in your site: you can link an image file to the image object in the document window at any time.

    The standard image formats for the Web are GIF and JPEG. GIF images are typically used for line art, and JPEGs are typically used for photographs and other images with more than 256 colors. For information about choosing an image format, see Choosing a format for optimized images,

    Specifying an image file

5. Save the file as a page template.

    Choose Save As > Save As Template from the document window menu in the upper right corner of the document window. Type a name for the template in the Save As dialog box, and click Save.

    Page templates are predesigned page layouts that you can use as the basis for new pages. When you update a template, you automatically update all pages based on that template. For more information about templates, see Using page templates.