8 Working With Templates

This section covers the following topics:

8.1 About Templates

Templates are the files used to place and arrange content on a web site. Templates are HTML files; page templates are complete files with <HEAD> and <BODY> tags, while subtemplates and region templates are partial HTML sections, placed within a page template between the <BODY> tags, and are used only for content related to the body.

The way Site Studio handles web sites is unlike typical web site development tools. One area where this is clearly seen is in the use of page templates, subtemplates, and region templates.

You can add whatever static content and dynamic content you like to any one of these templates. However, as you spend more time with each of these templates, you see why it makes more sense to add relatively little static content directly to the page. Adding content directly to the page limits reusability and makes localization more difficult, among other things.

The content that you add directly to a template is likely to be information that remains static, or consistent, across the site. It is what establishes the basic look and feel of the site, and may include such things as background colors, background images, and HTML tables (to position text and graphics).

The rest of the content is built from the contributor data files, which are updated by contributors and are associated with the templates. The templates control how the data is displayed, and the definitions control which data is displayed.

The templates are each similarly used to combine the static and dynamic content to complete each part of the site they control.

This section is about the three types of templates as viewed in the Site Assets pane:

8.1.1 About Page Templates

Page templates are fully-formed HTML files that define the layout and complete structure of a web page, including the placement of contribution regions (that is, editable areas on the page), navigation aids (in the form of fragments) and site-wide images (banners and the like). They provide the framework within which site content is displayed. The number of page templates required for a web site depends on the site complexity, but usually a small number can easily be used.

When fewer page templates are used, site-wide changes are made much more easily. The page template represents the asset that is a complete web page in HCSP, JSP, or ASP. Just as on a region template, or a subtemplate, you can place anything directly on the template, like text, or an image, or a fragment, and it appears on every instance that template is used. This is also true of subtemplates and region templates.

Page templates consist of standard HTML layout and formatting code, along with Site Studio tags to specify where fragments and/or placeholders go. As such, they are typically light-weight in that they only contain high-level references to where contribution regions go on the page; they do not specify anything about what goes in these regions, both in terms of content and visual presentation. That is handled by region definitions and templates. Page templates typically include site-wide graphics, such as corporate banners or page layout images, and other recurring, non-editable content, such as navigation aids.

As you reuse the page template, the objects arranged on it are displayed each time the page template opens. Also, when you use the page templates efficiently, then you can create an entire web site with few (or even one) page templates, ensuring that the standard look and feel of your web site is maintained while also making the site management as simple as possible.

For more information, see Section 3.12, "Page Templates."

8.1.2 About Region Templates

Region templates are partial HTML files that define the layout and look-and-feel of the data in contribution regions within web pages. They are partial HTML files in that they do not have a head and body section. This allows them to be inserted into other HTML code as the web pages are generated for the Site Studio site.

These templates consist of standard HTML layout and formatting code, along with Site Studio tags to specify where elements (from contributor data files) or dynamic conversions (of native documents) are placed. Some elements from contributor data files may be displayed in some region templates, but not in others, which allows the information to be reused across different pages. Region templates are used to display data within the placeholder and are used to arrange the elements (limited by the region definition) into the layout desired in your web site. For more information, see Section 3.10, "Region Templates and Region Definitions."

Since the creation of a region template requires you associate it with a region definition, it is recommended that you create region definitions first, then create region templates.

8.1.3 About Subtemplates

Subtemplates are the same as page templates, but with one important difference: subtemplates do not have <HTML>, <HEAD>, and <BODY> sections. As such, they are essentially chunks of HTML code that can be inserted in page templates. Subtemplates may contain very simple HTML code, but they can also be quite complex. The code in a subtemplate is treated exactly as it would be when placed directly in a page template, whether it is a script or a CSS file or any other inserted asset.

Subtemplates can only be placed within placeholders, and subtemplates may contain their own placeholder or placeholders. Subtemplates are often used as a way to divide one placeholder, singly placed on a page template, into multiple placeholders. This helps make a page template that is more easily reused.

8.1.4 About Cascading Style Sheets

Cascading style sheets (CSS) are used to control positioning, layout, and other styles on a page. Stylesheets are edited in source view. They are usually added to other objects such as a page template or a subtemplate, just as it would be inserted in any static HTML page.

8.2 Managing Templates as Site Assets

All templates, just as all other site assets, are easily managed through the Site Assets pane. Here you can add new templates, modify the information on existing templates, and remove templates from the site.

This section covers the following topics:

8.2.1 Creating a New Template

To create a template, perform these tasks:

  1. From the list of asset types, select the template type to create.

  2. Click the Create New icon (Figure 8-1), select New, and then select the template type (this will most always be HCSP).

    The Assign Info Form opens for you to check the template into the content server.

    Figure 8-1 Create New Icon

    Create new icon
  3. Enter appropriate values for the Assign Info Form.

    For guidelines on naming Site Studio assets, see Section 4.2, "Naming Site Assets."

  4. When complete, click Assign Info.

  5. The template is created.

There is an additional way to create page templates after the site hierarchy is created. For more information, see Section 8.2.2, "Creating a Page Template From the Site Hierarchy."

8.2.2 Creating a Page Template From the Site Hierarchy

Another method of creating page templates is available, but only after you have created a site hierarchy:

  1. In the site hierarchy, right-click a section and then select either Select Home Page, Select Primary Page, or Select Secondary Page, depending on where the page template is used.

    Depending on which you selected from the menu, one of these dialogs opens:

  2. Select Create a new page template.

  3. Click OK.

  4. Add the information to check the page template into the content server.

    For guidelines on naming Site Studio assets, see Section 4.2, "Naming Site Assets."

  5. The page template is created and associated with the section.

When you create a page template this way, the contextual data is presented in the Preview tab. If you create a page template through the site assets pane, then you must assign the page template to a section to see the data which opens based on which section the page is in.

8.2.3 Copying a Template

You can select a template from the list to copy, select a template from the content server to copy, or select a template from your local instance to copy.

Copying a template from the Site Assets pane

  1. In the menu on the Site Assets pane, select the template type.

  2. Select the template you want to copy from the list.

  3. Click the Create New icon (Figure 8-2), select Copy, and then Selected:

    The Assign Info Form opens for you to check the item into the content server.

    Figure 8-2 Create New Icon

    Create New icon
  4. Enter appropriate values for the Assign Info Form.

  5. When complete, click Assign Info.

  6. The template is copied.

Copying a template from the content server

  1. In the menu on the Site Assets pane, select the template type.

  2. Click the Create New icon (Figure 8-2), select Copy, and then from Server.

    A search results page opens.

  3. Click the corresponding Select button of the one you want to copy.

    The Assign Info Form opens for you to check the item into the content server.

  4. Enter appropriate values for the Assign Info Form.

  5. When complete, click Assign Info.

  1. The template is copied.

Copying a template from your local instance

  1. In the menu on the Site Assets pane, select the template type.

  2. Click the Create New icon (Figure 8-2), select Copy, and then from Local.

    An open file dialog opens.

  3. On your local instance, navigate to the template you want to copy.

  4. Select the file and click Open.

    The Assign Info Form opens for you to check the item into the content server.

  5. Enter appropriate values for the Assign Info Form.

  6. When complete, click Assign Info.

  7. The template is copied.

8.2.4 Viewing the Content Information of a Template

To view content information for a template, perform these tasks:

  1. In the menu on the Site Assets pane, select the template type.

  2. Select a template from the list.

  3. Click the Doc Info icon (Figure 8-3).

    The content information page opens.

    Figure 8-3 Doc Info icon

    Document Info icon

8.2.5 Viewing the Content Information of a Page Template from the Site Hierarchy

There may be times when you want to view the content information page for a page template. You can use the features available in the content server to update the metadata, send a link to the file by e-mail, subscribe to it, and so on.

You can view the content information page using the site hierarchy pane.

To view the metadata of a page template, right-click the desired page template in the site hierarchy pane and choose View Document Info.

8.2.6 Adding a Template to a Site

To add a template to a site, perform these tasks:

  1. In the menu on the Site Assets pane, select the template type.

  2. Click the Add to Site icon (Figure 8-4).

    A search results page opens.

    Figure 8-4 Add to Site Icon

    Add to Site icon
  3. Select the templates to add, click Site Studio, and then Select Marked Documents.

  4. Depending on your configuration, you may receive a caution that you are about to add existing asset(s) to your site. Click OK.

    The templates are now associated with the web site.

8.2.7 Removing a Template from a Site

To remove a template from a site, perform these tasks:

  1. In the menu on the Site Assets pane, select the template type.

  2. From the list, select the template to be removed and click the Remove From Site icon (Figure 8-5).

    When you remove a template, you are simply removing its association with a site. You are not deleting the file from the content server.

    Figure 8-5 Remove from Site Icon

    Remove from Site icon

8.3 Understanding the Contribution Regions

The area that the contributor can edit is called the contribution region. This area is defined by the designer by using a placeholder. Within that placeholder, the subtemplate (if used) and region template are used to control how the data associated within the contribution region is displayed. The definitions - placeholder, region, and element, are used to control how the contributor edits and interacts with that data.

Element definitions are used to determine what toolbar icons and editing capabilities are available to the contributor. The elements are arranged on the region template. The region template is the smallest "chunk" of HTML that is controlled as a site asset, allowing you to use and reuse that one particular section of HTML and associated content passed through the template. The region definition defines which elements are available to use in a region template. It also defines what level of access the contributor has in switching the region content.

A region definition can contain more element definitions than are placed in the region template. Those element definitions listed in the region definition, but not used on the region template, still appear in Contributor when editing the data file. This is especially useful to remember if you use a "teaser" of information on one page to go to the full set of information on another page. This concept is covered in more detail in Section 3.10, "Region Templates and Region Definitions."

The boundaries of the contribution region are set by the placeholder. In a general sense, the placeholder is the area that is called the contribution region. The placeholder is not an asset - it is just a marker on a page template (or subtemplate) that is used to show where the contribution region is relative to the placement of the other objects on the site template or subtemplate. The placeholder definition assigned to a placeholder defines if the contributor has access to edit data, and if the contributor can switch the content.

The placeholder definition also defines which region definitions are available in the placeholder, and which region templates are available and which is the default for each region definition within the placeholder.

Since a placeholder does not have to be accessible to contributors, and since a placeholder can contain a subtemplate that is then divided into other placeholders, it's not always the case that a placeholder is strictly a contribution region. But in a general sense, when you conceive of a simple placeholder, it is the contribution region that the contributor works with.

8.4 Inserting Placeholders

Placeholders are used on page templates and subtemplates to mark an area to place the content. Placeholders are not assets; placeholder definitions are used to define how the placeholder is used on the page, and what content is placed on the page.

To insert the placeholder, follow these steps:

  1. Click in the template where you want to place the placeholder.

  2. On the toolbar, click the Insert Placeholder button.

  3. The Define Placeholder dialog (see Section A.75, "Define Placeholder Dialog") appears.

    The dialog lists the placeholder names created in the Placeholder Definition Mappings dialog (see Section A.73, "Placeholder Definition Mappings Dialog").

  4. Select the placeholder name to associate with the placeholder and click OK.

8.5 Inserting Objects

Other site assets are easily added by placing the objects directly in the template. This can be done by selecting the icon from the toolbar, or by right-clicking on the template and adding the available site asset.

Adding an object to a page template, subtemplate, or region template is very simple.

To add an object, follow these steps:

  1. Right-click in the template where you want to place the asset.

  2. A contextual menu appears. Select Insert Object.

  3. A further contextual menu opens, and those site assets that are available to insert are displayed.

    For instance, you are not able to select an element unless you are in a region template.

  4. After the site asset has been selected, it is added to the template.

When you add an asset that has dynamic content (such as a placeholder), then a marker appears in place of what content might be there. When you add an asset that has static content, such as an image, then the content appears.

An asset can also be added directly in source view.

On a region template, the region definition limits which elements are available to add.

8.6 Inserting Fragments

Fragments are simple to add to any template. To add a fragment to a template, you select the fragment from the fragment toolbox, and it is inserted at the selected location in the template.

However, there is one important consideration to use with a fragment.

A number of the fragments that are shipped with Site Studio Designer are composed of snippets that are used in the head and the body of the page template. Since subtemplates and region templates do not have a head, only a body, then the fragments do not work properly if inserted on these templates.

For you to have fragments that work properly in a subtemplate or a region template, you should create your own fragments that have no head snippet, and one body snippet. Fragments that have a head snippet and body snippet will work in a page template, but will not work in other templates. This limits the reusability of the fragment.

For more information, see Chapter 13, "Working With Fragments."

8.7 Working With Text

Working with text in Design view is much like working with text in a word processing program (with word-wrapping, line breaks, formatting options, and so on). To add text to a page template, simply click in the page template where you would like to add the text and start typing. Designer takes care of the necessary HTML code behind the scenes.

After you add and edit your text, you can format it by changing the typeface and font size, indenting or centering the text, adding bulleted or numbered lists, and so on.

Adding text directly to a template is discouraged. When the text is on the template, rather than the contributor data file, this makes localization more difficult.

8.8 Arranging Objects on the Template

How you arrange the information on your page, if you need a specific layout structure, can be done either with HTML tables or the use of CSS to place objects.

For the most part, when you insert an asset on a page template, subtemplate, or region template, it is inserted where you place the cursor. However, this does not necessarily mean that the asset appears in the finished web page the same way it appears in Designer. Variances such as the consumer's browser choice, the browser window size, and what other objects a contributor has placed in the contributor data file can make the web site appear to be organized differently.

Using CSS is the more efficient method, because CSS files are a managed object and can allow for maximizing reusability. If you place a table in an asset, such as a subtemplate, then to use that same structure in other assets, you must re-create the table. If you do use tables in this way, then you must make the changes across multiple places when you want to make the changes.

With CSS, you can identify the exact placement of each site asset, including elements, within the style sheet.

Many prefer to use tables because they are easy to set up and create on the web page. A table offers a quick solution of structuring the relative placement. With a table, you can create a shape of cells that place data into relative placement to each other.

8.9 Applying CSS Classes

Site Studio, by default, applies font and paragraph settings directly (inline) to the text.

Alternatively, you can apply classes from a cascading style sheet to your text (and images). Using CSS classes, you can store all of your font and paragraph settings in one location and then apply those settings to your web page.

This saves you time, because rather than change the font and paragraph settings for each individual heading or paragraph, you can specify a class for each one. If you must change those settings, simply update the class.

To implement CSS classes, you insert a reference to your style sheet in the head of your page template. You can do this using a relative path, for example:

<link href="<!--$HttpRelativeWebRoot-->groups/public/documents/adacct/stylesheet.css" type="text/css" rel="stylesheet" />

Or, more typically, you put them in a fragment. Placing CSS references in a fragment does not expose the directory structure of your server.

Then, apply the class names from the style sheet to your text and graphics by editing the page template in Source view or by using the Properties pane in Design view.

Figure 8-6 Using the Properties Pane to Apply the Class "MyNewStyle."

Property classname in Properties pane

The Site Assets pane in Designer can be very useful for adding, editing, and identifying the path to the Cascading Style Sheet in the content server.

Many of the fragments that come with Site Studio contain CSS files as an asset to the fragment (see Section 13.12.5, "Adding, Editing, and Deleting Fragment Assets"). You can reference class names from those CSS files, too, if you like.

You may also want to make these classes available to contributors while working in the Contributor application. This helps you enforce consistency across the site and make site-wide style updates much easier.

8.10 Working With HTML Tables

HTML tables are often used in web page design. They can be used to structure a web page when you do not want to use cascading style sheets to do so. The treatment of HTML tables in a page template is no different from tables in other web pages.

There are two principal uses for an HTML table: (1) to present data in a tabular format, and (2) to lay out text and graphics on a web page. As the designer of the site, you may find yourself using tables more frequently for the latter.

Working in a table, you can control how content appears on the web page by specifying the size and location of the table, the size of each column and row, and the content that goes into each cell. You keep your site visitors from seeing the table by hiding its borders. In Site Studio, tables are especially useful for positioning contribution regions and the elements within them.

To make specific edits to your table, you can modify the HTML <TABLE> tag directly in the Properties pane. You can also make changes in source view.

Figure 8-7 Properties of the <TABLE> Tag in Design View

Table Tag Properties in the Properties pane

In the Properties pane, you can change the background color, border width, cell padding, and several other settings. All of the attributes that would be entered into the <TABLE> tag are available in the Property Panel. For a complete description of the <TABLE> tag, visit the World Wide Web Consortium (W3C) web site: http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE.

8.11 Viewing Templates in Designer

There are three ways to view a template while in Designer: Design view, Source view, and the preview. Each offers a different way to look at each template while working with that template in Designer.

In each template window in the Designer workspace, there will be three tabs at the bottom. Select the tab to choose with the Design view, the Source view, or the Preview for that template.

This section covers these topics:

8.11.1 Design View

When you open a template (page template, region template, or subtemplate) in Designer, it opens in the workspace in design view, where you can edit the template as needed. The workspace then functions as an editor that offers many common editing features.

Design view displays all objects as they are arranged on the template. In design view you will see the positioning of both static content (for example, a fixed banner graphic) and dynamic content (for example, placeholders and fragments). Depending on how the template was set up and what positioning methods are used (for instance, using tables or CSS to align assets), this view may approximate the page layout when viewed in a web browser. You see text, images, colors, hyperlinks, and tables as they appear on the actual web site, but dynamic content (from fragments and scripts) is represented as tags rather than the actual content. This is because most fragments and scripts require server-side scripting and dynamically rendered content.

Figure 8-8 Design View

Design view of a template for a web page

You can edit the text and objects using common editing keystrokes (for example, Ctrl+C and Ctrl+V to copy and paste), the application toolbars (see Section 5.10, "Toolbars"), and right-click menus (see Section 5.6.7, "Right-Click Menus"). To select an object, simply click it, so it displays selection handles (Figure 8-9).

Figure 8-9 Selected Object in Design View

Selected object in design view

For edits that cannot be performed using design view, you can use the properties pane (see Section 5.5, "Properties Pane"). If you cannot make a specific edit here, you can always edit the actual code in source view.

Designer can also highlight the location of HTML tags in design view. To turn this feature on, click the Show/Hide HTML Tags icon (Figure 8-10) in the formatting toolbar. You can click the down arrow next to the icon to show or hide specific HTML tags.

Figure 8-10 Show/Hide HTML Tags

Show/Hide HTML Tags icon

8.11.2 Source View

Source view displays the code that is in the template: HTML, XML, JavaScript, Idoc Script, Site Studio tags, and so on.

Figure 8-11 Source View

Source view of a template for a web page

The information in source view appears as color-coded text:

  • Black is used for XML code, HTML tag attributes, and text that appears on the web page.

  • Purple is used for HTML tags.

  • Blue is used for HTML tag attribute values.

  • Green is used for Idoc Script, HTML comments, and code inserted by Site Studio.

You can change many of these settings, including the typeface, indentation levels, and line wrapping. For more information, see Section 6.9, "Formatting the Code in Source View."

Source view offers complete control over the site template. This can be especially true if you are implementing several custom assets. In fact, you may find yourself starting off in design view to create the page and then switching to source view to customize the appearance and behavior of the page.

8.11.3 Preview

Preview provides an actual view of a web page with all assets in place, as it appears in a web browser for consumers. This is useful for previewing templates and checking how fragments and placeholders are positioned on the template (which may be hard to see in design mode, especially if the page layout is controlled by CSS).

Figure 8-12 Preview

Preview of a web page

Note:

Site Studio requires Internet Explorer 7 or higher to provide previewing capabilities.

8.12 Region Templates and Region Definitions

Region definitions specify what contribution regions on a web page contain, whereas region templates define what contribution regions look like. In other words, region definitions specify the structure (and attributes) of site content, and region templates define the visual presentation of that content on a web page.

There can be multiple region templates for each region definition. This allows site content to be displayed differently depending on the context within the site. If there are multiple region templates for a region definition, then the default region template is used unless a different one was specifically set to be used.

Since the creation of a region template requires you associate it with a region definition, it is recommended that you create region definitions first, then create region templates.

8.13 Working With Native Documents and Conversion Definitions

Native documents require that a conversion definition is available to define the rules and templates in place to convert the native document on the web page. To use and convert native documents, you must first have Check Out and Open and Dynamic Converter installed on the content server.

The dynamic conversion can only be located on a region template. Adding the conversion to the region template is simple, and works the same way that adding any other asset to the template would.

To add the dynamic conversion to the region template, follow these steps:

  1. Open the region template that you want the converted document to appear on.

  2. Right-click and from the menu select Insert Object, and then select Dynamic Conversion.

    The Insert Dynamic Conversion dialog (see Section A.78, "Insert Dynamic Conversion Dialog") opens.

  3. Select the dynamic conversion to use.

  4. Click OK.

For more information on native documents and conversion definitions, see Section 10.8, "Working With Native Documents."