To achieve consistent appearance and facilitate easy navigation, web sites typically match designs across many pages. In StudioLine, Layout Templates and Layouts define common design elements, such as the background, logos, headlines, navigation buttons, and image placeholders. They also control certain automated and default behaviors, such as the creation of image views and image processing defaults.
The following chart explains the differences between templates and layouts, in terms of their scope, when they are used and how they interact.
|Scope||Affects all new pages of a site, and their image views (if any).||Affects the single page and its image views (if any).|
|Timing||When page is created or when template is manually applied to an existing page.|
If the template is modified, all applied pages will be updated.
|A layout is an integral part of its page.|
|Interaction||May be defined as the site’s default. May be applied manually to an existing page.||May be saved as a new Layout Template.|
If common design elements or settings are to be shared by multiple pages, place them in a Layout Template. If common design elements or settings are to be used by a single page with automatically created image views, place them in the Layout. If design elements are limited to a single page, place them directly in the Page Editor.
When a page is created, the default Layout Template from the Site Settings is always used to initialize the new page. To apply a different Layout Template:
Note: Once a different template has been applied to a page, this step cannot be reversed with the Undo function. Prior customizations, defaults and image settings for this page and its image view pages could be lost permanently. To avoid problems, apply the correct template before working on the page itself.
The Layout and Layout Template modes are an extension of the page editor and offer largely identical functions. One can think of layouts as the control layer for a page, and layout templates as their blueprints. To view and customize the layout of a specific page:
To view and customize a layout template:
From a creative standpoint it is often easier to first design a boilerplate page without deciding immediately whether some objects belong on the layout. Once the creative process is complete:
Note: This is not available for Layout Templates!
The “Image View” window allows you to create templates for image display that will appear on your website page. Using this tool, you can edit and create effects for all of the images on that particular website page.
The true powers of templates and layouts come to light when you define Image View pages. Layouts with Image Views will automatically generate interlinked sub-pages with common style elements, navigation buttons and automatic text generated from image and page descriptors.
Typically, the initial image defined with the Image Prototype for a particular webpage would be relatively small, like a thumbnail. Once multiple photos are imported from Image Archive onto the page, the resulting webpage would be composed of a gallery of thumbnails, or whichever size you chose using the Image Prototype. Then you could create additional Image Views for that webpage with increasingly larger sizes. The resulting sub-pages display only one picture each, at the size that you specify using the Image Prototype. A web visitor would simply click on a picture to see a larger version, or choose a navigation link to browse between Image View pages.
With the use of the Image Views window, you can create sub-pages for each main page, and assign individualized effects for the images displayed.
To create sub-pages or additional Image Views for your website page: Open the Layout or Layout template.
The Image Views window appears on which you can see a mini version of your website page, and a default sub-page, called Image View 1. If you would like more than one sub-page, press the “New Image View” button, and an additional page will be created called the Image View 2.
Whenever possible, use placeholders instead of static text. This way, text is automatically substituted through image, page and system descriptors.