About This Guide

This guide describes the basics of how to use SiteGrinder to divide pages up into areas that can grow and move as well as how to create decorative background colors and tiles for such areas.

This is part of the SiteGrinder 3 Essentials series of short guides and videos which present crucial, "must know" information about various SiteGrinder feature areas.

This guide assumes you have already read both the general SiteGrinder 3 Introduction, the Workflow Essentials Guide , and the Page Creation Essentials Guide.

Introduction

SiteGrinder gives you total control over the size and alignment of each page in your site. For the page content, SiteGrinder doesn't use restrictive templates that determine where elements can go. Instead it gives you complete freedom to place page elements wherever you like. It also provides tools and techniques that allow those elements to change in position in sophisticated ways based on how other elements may grow or shrink.

The simplest way to determine the size of the content area of your site is simply to make your Photoshop document that size. If you want your page contents to be 800 pixels wide then make your Photoshop document 800 pixels wide and as tall as the tallest page in your site.

The simplest way to lay out the page elements within that content area is to create and position layers within your document and build a web page that looks exactly like the document did in Photoshop. It's fast and provides almost total "WYSIWYG".

For more advanced page control you can provide one or more rectangular layers with the -pagesize hint which will allow you to create, if you need to, different dimensions and alignment for every page in your site.

You can think about a web page design as breaking out into three areas:

The browser background. Think of this as what the browser displays in the entire area of its window, no matter how large the window is. You can control the color and a repeating tile at this level. Everything else draws on top of browser background.
The page content area. This is the stuff people come to your site to see. Many web sites use a different color or tile behind the content area to set it off from the browser background. This is very easy to do with SiteGrinder.
Individual elements or rectangular areas within the page content area, including boxes, columns, and footers.

SiteGrinder 3 provides a number of powerful hints and techniques to control the appearance and dynamic positioning of page elements without limiting your design freedom:

The Browser-background and browser-backgroundcolor hints control the appearance of the full browser window.
As of SiteGrinder 3.5, header-background and header-backgroundcolor make it easy to create a repeating header color or tile.
Layers using the "-pagesize" hint allow different pages within the same document to have unique dimensions.
The "-column" hint allows you to specify any rectangular area that should have special layout features.
Columns can grow and reorganize automatically if their contents change in size. They can also shift position if other areas change in size.
Columns can be positioned inside other columns for advanced layout techniques.
The "-centercut" hint provides powerful background image and tile support for individual columns.
The "-wrap" hint gives you the ability to specify how text should wrap around images in the final build.
The -accordion hint provides a single rectangular area in which to display multiple "tabs" of content using special buttons to select among them.
Several footer hints allow you to lock a layer group to the bottom of your content or the bottom of the browser window and optionally provide a footer background color and/or tile.
As of SiteGrinder 3.5 the -follow hint allows you to specify an area of content that will follow after the bottom of the page content as a shortcut way of creating a footer.
As of SiteGrinder 3.5 the -fixed hint allows you to attach layers to an edge of the browser window where it will stay visible in the same position even if the page is scrolled.

Techniques That Control The Entire Page

If you use no layers with page layout hints then SiteGrinder defaults to center alignment and a white background for the browser window. In that case there is no distinction between the background of your content and the background of the browser window.

Optionally you can create layers with the "-pagesize" hint that tell SiteGrinder what the content boundaries are for any page as well as specify an alignment other than center aligned.

Here is a list of the most common SiteGrinder techniques for controlling the appearance of browser background and and page content areas:

Set the browser background color: Add an image layer with the Color Fill layer style and the "browser-backgroundcolor" hint will set the entire browser window background to whatever color is specified for the Color Fill.
Set a repeating tile for the browser background: Add an image layer with either the Pattern Overlay or Gradient Overlay layer style and the "browser-background" hint. Determine how this tile repeats (vertically, horizontally, both, or never) by where you position it in the document. See the Background Colors and Tiles Reference for full details.
Tell SiteGrinder what the content boundaries are for any page: You can create separate pagesize layers for every page in your document, though usually they are only used when pages are very different in size from one another. The names of pagesize layers don't need to match the pages they are on. When a pagesize layer is visible on a page's layer comp it is used no matter what its name is. (Only one -pagesize layer can be visible on any given layer comp.)
Set a background color for your pagesize area: Apply the Color Overlay layer style to your "pagesize" layer.
Set a repeating tile for the pagesize background: Add an image layer named after the -pagesize layer with either the Pattern Overlay or Gradient Overlay layer style and add the "-background" hint. (ie "Contact-background") Determine how this tile repeats (vertically, horizontally, both, or never) by where you position it within the boundaries of the -pagesize layer. See the Background Colors and Tiles Reference for full details.

All of the above techniques can be used in almost any combination.

Click here for a set of pages demonstrating many of the more common combinations.

Techniques That Control Elements Within Your Pages

SiteGrinder 3 gives you amazing control over how your page elements behave as browser and element sizes require.

The most common SiteGrinder techniques for controlling elements are:

Create flexible growing pages that can accommodate expanding or shrinking elements by using -column layers.
Flow text around images using the -wrap hint.
Create header backgrounds with the header-background and header-bckgroundcolor hints (as of version 3.5).
Create smart footers that can stick to the bottom of the browser window or the bottom of your page content.
Create accordions that can contain multiple tabs using the same amount of page real estate.
Create "floating" areas locked to sides of the browser window that stay visible even when the page is scrolled using the -fixed hint.

These are discussed in more detail below.

Columns

SiteGrinder columns are loose rectangular groupings of elements that automatically shift position vertically when any of the elements change in size.

Figure 1.

The example above displays the same SiteGrinder-created page after different content edits. The page design features a wide column and a narrow column. Notice in the screenshot on the left the leftmost column is the tallest and in the screenshot on the right the rightmost column is taller. The position of the footer elements is based on whichever column is taller.

Because SiteGrinder can't guess which items are part of your background and which should be "alive" within a column, you need to indicate columns by creating a rectangular layer below column-organized layers with the -column hint.

The below example shows in orange the column layer that produced the above results:

Figure 2.

Any of the page elements fully contained by a column can grow and push down the others when changed in the Content Manager - even other columns. This nesting of columns is incredibly powerful and flexible.

Notice in the example above that columns are not limited to containing elements only in a direct vertical stack. Elements can sit next to each other horizontally and SiteGrinder will maintain this side-by-side relationship even as different elements change in size. Elements that may need to grow cannot overlap other elements that need to grow.

The other major benefit of columns is that they can have their own background colors and tiles, including tiles that can grow with the column. Apply the Color Overlay layer style in Photoshop to a column to assign its background color. Give a column a background tile by creating a -background layer that matches the column's name and apply the Pattern Overlay layer style to it in Photoshop.

There are a few restrictions to column use:

The main limitation of columns is that they cannot partially overlap each other: nested columns must be completely contained by other columns.
Columns cannot be used in a -footer layer group
If you use a -pagesize layer it must completely contain any columns.

If you want your columnized content to be able to expand within a rectangle that stays a constant size you can use the -scroll hint on a column layer, which will allow the page visitor to scroll through the content of your column if it grows larger than the -column layer's height.

IMPORTANT: At least one big -column layer such as that depicted above is required if you want your page to be able to expand as elements change in size.

For complete information about columns see the Columns Reference.

Wrapping Text Around Images

Photoshop doesn't have the ability to wrap text around images, but web pages do.

SiteGrinder 3's "-wrap" hint on an image layer allows you to position that image on top of type layers in a Photoshop document and have the text wrap around the image once on the final web page.

In the picture below we see the Photoshop document in front. Behind it we see the web page as it finally appears in the browser:

Figure 3.

Images are always positioned at the top of a given type layer and can be aligned top left or top right. Where you place the image in the Photoshop file relative to the text below determines the alignment of the image and the margins between the image and the text.

For details about SiteGrinder's wrapping features see the Text Wrapping Reference.

Headers

As of SiteGrinder 3.5 you can easily specify a color or tile to repeat across the top of your page using the "header-backgroundcolor" and "header-baclground" hints.

See the Page Headers reference guide for details.

Footers

There are three approaches to creating footer elements in SiteGrinder:

You can create a big -column layer surrounding every layer except your footer layers. In this case the layers whose top edges are below the -column layer's bottom edge will maintain their distance from the bottom of the column even as changes to the contents of the column cause it to become taller or shorter. This technique is used in Figure 2 above.
You can create a rectangular layer named "footer-background" and/or "footer-backgroundcolor" which will not only define the background color or tile for the footer area but will also serve as a boundary that groups footer elements. Any layer whose contents are entirely contained by a footer-background or footer-backgroundcolor layer's rectangle will become part of the footer.
For the most flexible footer you can add the -footer hint to a layer group's name in the layers palette and put your footer layers in the group. This allows footer elements to be outside the footer-background or footer-backgroundcolor layer rectangle.

For 2 & 3 above, if the browser window showing your page is taller than the content of the page, the layers in this layer group will be attached to the bottom of the browser window. If the contents of the page are taller than the browser window can display without scrolling then the contents of the -footer group will be attached to the bottom of the content. (If you find this description confusing just trust that the footer layers will do the right thing.)

For details about footers see the Page Footers Reference.

Accordions

Accordions are areas of a page that can hold several tabs worth of content displayed in the same rectangular area, one set of content at a time.

The site visitor chooses which tab to view by clicking tab buttons. When a tab button is clicked the new content animates into place, replacing the previously displayed content.

For details see the Accordions section of the reference guide.

Floating Areas Attached to Browser Edges

Some site designs call for elements that should always remain visible no matter the size of the browser window or what part of a long page the site visitor has scrolled to.

As of SiteGrinder 3.5 users can easily achieve this effect with the -fixed hint.

Common uses include:

"Floating" headers or footers that are always visible even as pages are scrolled
Special buttons that are attached to the left or right of the browser window

For more details see the Fixed Floating Elements section of the reference guide.

Where to Go From Here

If you have not yet read it you should continue to the Page Creation and Management Essentials Guide which explains how to designate unique content for multiple pages, how to organize pages, and how to spawn new pages after you deploy your site.

For details on all of SiteGrinder's layout features see the Layout Reference.

To continue exploring SiteGrinder feature essentials you can move on to the Hyperlinking Buttons and Text Essentials Guide or the Essentials Index .