(NOTE: THIS IS BETA DOCUMENTATION AND IS THEREFORE INCOMPLETE AND SUBJECT TO CHANGE. PLEASE NOTIFY HELP@MEDIALAB.COM OF ERRORS OR SUGGESTIONS)
SiteGrinder Pro introduces the ability to change the "content area" of a page after the page is built without conflicting with other page elements.
Having an adjustable area of content solves a number of problems in web design:
- You can change the contents after the page is built
- You can build many pages from the same basic design but with different amounts of content
- Visitors to your pages can force certain browsers to enlarge the font size without ruining the design
If any of these things happens on a page without a pre-configured growable area, the relationship between the content area and any "footer" layers positioned below the content area will change. When the content shrinks there will be an anooying gap, and when the content grows it will cover the footer. This is demonstrated in the following example.
On the left is the original pageSiteGrinder built without a specified grow area.
In the middle is the same page after deleting most of the main text using an HTML editor. Notice the new gap between the remaining text and the footer.
 |
On the right is the original page rebuilt with a grow area that has then had the same quantity of text removed after the build. Notice the footer has moved up this time. |
SiteGrinder Pro allows you to specify vertical areas of a document that can expand. Everything below this area will automatically shift downward to make room for the expanding section.
All that is required to accomplish this is to create a rectangular layer that indicates the vertical height and vertical position of this area, and to add the "-grow" hint to the end of the layer's name. All layers positioned between the bottom of the "-grow" layer and the bottom of the document will shift to accommodate whatever is put into this area.
The -grow hint is particularly useful when you want to use a single page design to generate a number of pages differing only in their textual content. Adding the -grow hint to the -xmedia (eXternal Media) hint, for example, you can take a single design along with a folder of HTML files and instantly generate a page for every file in the folder. Each page will have a different height to match the needs of each HTML file.
The -grow hint is only used with -text layers and -xmedia layers.
IMPORTANT: The -grow hint is an advanced feature and has a few restrictions. Layers that are beneath the -grow layer in the layers palette and may seem to provide a background color for the grow layer won't actually stretch with the -grow layer. Stretchable documents need to have an interior background color or an interiorgrow-tile to avoid visual gaps that would be created using a normal layer in the background of the -grow layer.
Interior vs. Exterior
SiteGrinder allows you to define two basic tile types, interior and exterior. It is important to understand the difference.
An exterior tile works similarly to the web page background color. It fills the entire web page background behind everything. It is covered wherever there are other elements, including other kinds of tiles, but it appears everywhere else.
An interior tile fils the "content area" of your page and is behind everything but the exterior tile.
If your page is centered then SiteGrinder Pro automatically determines the content area to be the rectangle that contains all the visible layers on your page.
If your page is not centered then SiteGrinder Pro considers the content area to be the size of the Photoshop document.