This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
web:layout_templates [2013/09/03 11:55] – [Layout Templates] henning_stummer | web:layout_templates [2015/12/03 11:02] (current) – [Layout Templates vs. Layouts] penelope_chapron | ||
---|---|---|---|
Line 3: | Line 3: | ||
To achieve consistent appearance and facilitate easy navigation, web sites typically match designs across many pages. | To achieve consistent appearance and facilitate easy navigation, web sites typically match designs across many pages. | ||
- | ===== Global | + | ===== Layout Templates vs. Layouts ===== |
The following chart explains the differences between templates and [[: | The following chart explains the differences between templates and [[: | ||
+ | |||
+ | ^Effect^Layout Template^Layout| | ||
+ | |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. | ||
+ | |||
+ | If common design elements or settings are to be shared by multiple pages, place them in a Layout Template. | ||
+ | |||
+ | ===== Applying a Layout Template ===== | ||
+ | |||
+ | 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: | ||
+ | |||
+ | * open the page | ||
+ | * open the StudioLine Explorer | ||
+ | * choose Layout Templates | ||
+ | * locate a suitable template and drag it onto the workspace. | ||
+ | |||
+ | **Note:** Once a different template has been applied to a page, this step cannot be reversed with the Undo function. Prior customizations, | ||
+ | |||
+ | ===== The Layout Editor ===== | ||
+ | |||
+ | 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: | ||
+ | |||
+ | * open the page in Page Editor mode | ||
+ | * switch to Layout mode | ||
+ | |||
+ | To view and customize a layout template: | ||
+ | * switch to Layout Template mode | ||
+ | * select a template | ||
+ | |||
+ | ===== Transferring Objects to the Layout ===== | ||
+ | |||
+ | 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: | ||
+ | |||
+ | * open the page in Page Editor mode | ||
+ | * from the Edit menu, choose Lock Layout Objects | ||
+ | * select any objects that should be located on the layout | ||
+ | * right click on the mouse to access the Context menu and choose Transfer to Layout | ||
+ | |||
+ | **Note:** This is not available for Layout Templates! | ||
===== Image Views ===== | ===== Image Views ===== | ||
Line 13: | Line 53: | ||
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. | 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. | ||
- | |||
- | ==== Application of the Image Views page ==== | ||
- | |||
- | This feature is a great time-saver for publishing pictures in a user-friendly manner. For a product catalogue, listing pages can show small preview pictures for each item - and the detail page with a full view is only a mouse-click away. | ||
- | |||
- | Photographers can design extensive thumbnail galleries that load quickly, yet visitors can still gain access to full-size images. By adding an Automatic Forward from the Page menu, one can even publish a self-running slide show. | ||
==== Creating Multiple Image Views ==== | ==== Creating Multiple Image Views ==== |