About This Guide

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 is an introduction to how you will determine what content will be on the pages of your site, how new pages can be added to a site, and how buttons and menus link pages to one another. It is not a guide to page layout. To find information about page dimensions, alignment, flow of elements or background colors and tiles, see the Page Layout Essentials Guide.

If you are unfamiliar with Photoshop's "Layer comps" feature you will want to read the layer comps guide or watch the layer comps training video before continuing.

This guide assumes you have already read both the general SiteGrinder 3 Introduction (or watched the associated video) and the Workflow Essentials Guides.

Once you have read this document you can find more information on this topic in the Pages Reference Guide.

Page Designs and the Page Workflow

Determining how many pages your site will have, designating the content that will appear on each, and linking pages to one another are some of the primary requirements of web design.

SiteGrinder provides several approaches which support widely varying web design projects.

The basic workflow:

Design a page in Photoshop by creating and positioning the layers that will be displayed on the page
Create a layer comp using Photoshop's "Layer comps" palette and add the "-page" hint to the Layer comp's name
Repeat 1 & 2 until you have as many page designs as you need
When you are ready to build, open SiteGrinder. In the build panel you will see all of your layer comp page designs listed. You can choose which to build using the checkboxes by their names and then build and deploy them to a site.

After you build and deploy the first version of your site there are two ways to add additional pages:

Create new layer comp designs in your Photoshop file and build and deploy them to the same site or...
...use the SiteGrinder Content Manager to create pages that are copies of existing designs, and them customize them using the Content Manager tools

Re-read the second option above very carefully. This is why we refer to pages more often as "Page Designs". Creating new pages from existing designs and then customizing them is one of the most powerful aspects of SiteGrinder 3. If you have purchased the "Control" add-on for SiteGrinder you can even create and customize new pages for your site from any computer on the internet - right in the browser window!

Here are just a few of the common scenarios that are simple to achieve thanks to the flexibility of this system:

A photographer can create a new gallery from an existing one and populate it with new images
A videographer can create a template video player page design and then copy that page as many times as necessary changing the video each new page will present.
A web designer can identify a few common designs for a site and build them using generic placeholder content. Later, in the Content Manager, the designer can add new pages based on whichever of the original designs is required and then add the content using the Content Manager tools.

You are free to think of your layer comp pages in Photoshop as either final designs or, more flexibly, as templates you can customize later and spawn new pages from in the Content Manager.

Linking Between Pages

Pages aren't much good if you can't navigate from one to another with hyperlinks, so SiteGrinder makes this very simple.

There are three ways of linking buttons and menus to pages:

A button or text menu item will automatically link to a page that has the matching layer comp name. This means a button named "Contact Us-button" will automatically link to a page whose layer comp is named "Contact Us-page".
The link for any button, menu item, or phrase within text can be set or changed in SiteGrinder's Content Manager.
Links can be set in the Photoshop file itself using layers with the "-link" and "-links" hints.

Page Organization And Multi-Level Sites

When you first deploy, SiteGrinder creates all of your layer comp pages at the same directory level. Once you are in the Design Manager you can create new pages from existing ones at the same level.

You can add sub-folders by choosing "New Folder..." from the Content Manager's File menu. You can create new pages within a sub-folder by selecting the folder in the "Pages" area of the Content Manager and choosing "New Page..." from the Content Manager's File menu. When you create a new page in the Content Manager you must choose a page design to base it on. You can optionally have SiteGrinder add a menu item linking to this page to any one of your text menus.

You cannot directly move a page from one level to another. To achieve the same result you must create a page based on the top level original but in the level you would like to put it in. At this point you will have a copy of this page at the top level and another in the sub-folder where you just created it. You can now delete the original.

Where to go From Here

Now that you are familiar with process of creating pages and determining which layers appear on them you may wish to check out these features in greater detail in the Pages Reference Guide or you may want to proceed to the Page Layout Essentials to learn how pages can be given backgrounds and alignments.