Documentation Center

Quick Guide to creating a Page Template

This Quick Guide instructs you on the fundamentals of templating by walking you through the creation of your first Page Template, based on an HTML design we provide.

Before you begin

To perform this task, you must have the core software components of SDL Tridion installed and configured. Also, the WebDAV client needs to be set up, allowing you to browse the Content Manager organizational items structure from Windows Explorer.

About this task

After completing this Quick Guide, you will be able to use the Page Template to produce a Web page that looks like the one pictured below.

The Web page is in HTML 5 and uses a CSS3 stylesheet. You can change the resources to be compatible with other versions of HTML and CSS.

Step 1: Creating a Publication and uploading resources

Create a dedicated Publication for this exercise.

Procedure

  1. In Content Manager Explorer, create a new Publication called "Quick Guide to Templating" and create a basic structure for it. You can skip this step if you already went through the Quick Guide to creating a Component Template.
  2. In the root Structure Group, create a Page called "Test Page" with its Page Template set to the Default Page Template and its filename set to "testpage".
  3. In Windows Explorer, download the design zip file from this location: http://sdl.dist.sdlmedia.com/vms/distribution/?o=A3485AFB-EDCE-4980-9F3E-961E0815E43D
  4. Copy the files in this zip file into the organizational items of your new Publication (accessed through WebDAV) as follows:
    1. Copy the following files from the \images\ folder in the design zip file to the /Building Blocks/System/Template Building Blocks/Design/images/ Folder in your new Publication:
      • button-search.png
      • example.jpg
      • logo.png
      • trex.jpg

      You can skip this step if you already went through the Quick Guide to creating a Component Template.

    2. Copy \css\styles.css from the design zip file to /Building Blocks/System/Template Building Blocks/Design/css/.
  5. In Content Manager Explorer, navigate to /Building Blocks/System/Template Building Blocks/Design/. In that location, select the Create Ribbon tab and select New Template Building Block.
  6. In the dialog that opens, fill in Page Template Design in the Name field
  7. Select the Source tab, ensure that Template Type is set to Dreamweaver, and make the text box empty.
  8. Open the \design.htm file in the design zip file, and copy-paste all of its contents into the text box. Then select Save and Close to commit your changes.

Step 2: Creating the Page Template

Using the Template Builder desktop application, create a Page Template that uses the design items you copied.

Procedure

  1. In Content Manager Explorer, in the Tools Ribbon tab, select Template Builder.
    Template Builder opens.
  2. Select File > New and in the dialog that opens, navigate to Building Blocks\System\Templates\Page Templates\.
  3. Call the Template "Main" and set the type to Page Template. Then click OK to create the Template and close the dialog.
  4. In the main view, in the Building Blocks panel, from the Design group, drag the Template Building Block called Page Template Design into the middle area.
  5. In the same panel, from the Default Templates group, drag Default Finish Actions into the middle area, below Page Template Design.
  6. In the toolbar, press Run (the button with the arrowhead pointing to the right) and in the Open Page dialog that opened, select Test Page, the Page that you created in the root Structure Group. Click OK to close the dialog and run the Template.
  7. When the Template has run, select the item Result in the content area.
  8. In the Package panel below it, select the item with the value Output in the name column.
    The Item View panel on the right shows a preview of the rendered Web page.
  9. Save and close your Page Template.
  10. Access Content Manager Explorer and navigate to the root Structure Group. Open Test Page in this location and in its dialog, clear the Inherit from Parent option, and change the Page Template from Default Page Template to Main.

Results

You now have a Page Template, but it includes the contents of your original HTML page as hardcoded contents. Obviously, the contents of the articles on that Web page are not part of your design, but their look-and-feel and layout are. Create the article-level design(s) separately by creating a Schema, one or more Components, and a Component Template, as explained in the Quick Guide to creating a Component Template. Then return to this Quick Guide.

Step 3: Modify the Page Template to display Component Presentations instead of hardcoded content

If you followed the Quick Guide to creating a Component Template, you have now created a Schema, one or more Components, and a Component Template. Together, you can use these to create Component Presentations: publishable pieces of content you include on your Page. You can now remove the hardcoded contents of your Web page, still present in your Page Template source code, and replace them with instructions to render the Component Presentations on the Page instead.

Procedure

  1. In Content Manager Explorer, navigate to the Folder Building Blocks\System\Template Building Blocks\Design and open the Template Building Block called "Page Template Design" in this location.
  2. In the dialog that opens, select the Source tab.
  3. Find the sections called article, which contain the hardcoded content, and replace them with the following:
    <!-- TemplateBeginRepeat name="Components" -->
      @@RenderComponentPresentation()@@
    <!-- TemplateEndRepeat -->

    This code loops through the list of Components specified for the Page you are rendering, and renders each Component with its associated Component Template to produce a set of Component Presentations.

  4. Save and close your Template Building Block.
  5. Navigate to the Folder Building Blocks\System\Template Building Blocks\Design\images\ and delete the Multimedia Components called "example" and "trex"; they were only in use by the article sections you removed.
  6. Go to the root Structure Group, open "Test Page" and in the dialog that opens, select the Component Presentations tab.
  7. Use the Insert button to add one or more Component-Component Template pairs to the Page.
  8. In the Home Ribbon tab, select Preview to preview how the Page will look, rendered with the Page Template "Main". You should see your rendered Components, rather than your hardcoded content.

Step 4: Enhancing the Page Template (optional)

You now already have a working Page Template, but you can optimize it by removing the remaining hardcoded material, such as the title, meta description, the keywords, navigation and footer.

About this task

This task does not explain how to create dynamic navigation. This is left as an exercise to the reader.

Procedure

  1. In Content Manager Explorer, navigate to the Folder Building Blocks\System\Template Building Blocks\Design\ and open the Template Building Block called "Page Template Design" in this location.
  2. In the dialog that opens, select the Source tab.
  3. To make the Web page title dynamic, find the <title> tag and replace its contents with @@Page.Title@@. This makes the Page Template render whatever title is specified for the Page you happen to be rendering.
  4. To make your navigation dynamic, do the following:
    1. Create a dynamic navigation. To do this, you either need to create a Template Building Block that creates such navigation, and then include it in the Page Template, or use server-side technology such as ASP.NET Site Navigation controls (for more information, refer to this link: http://msdn.microsoft.com/en-us/library/e468hxky(v=vs.100).aspx.
    2. Find the <nav> tag and replace its contents with an item representing the navigation you created yourself, say, @@navigation@@, to remove the hardcoded navigation.
  5. To make the footer dynamic, do the following:
    1. Create a Component (and if necessary a Schema for that Component) that represents the contents of your footer. Note its Content Manager URI (a unique identifier found on the Info tab of the Component dialog).
    2. Create a Component Template that renders the footer. If you make this Component Template dynamic, you can update the footer without having to republish all the Web pages that contain the footer. Note its Content Manager URI as well.
    3. In your Page Template, find the <footer> tag and replace it with the following:
      @@RenderComponentPresentation("tcm:1-2", "tcm:1-3-32")@@
    4. Replace the first string with the Content Manager URI of the Component you created, and the second string with the Content Manager URI of the Component Template.
  6. To make the meta description and keywords dynamic, do the following:
    1. Create a Metadata Schema with two text fields, "description" and "keywords".
    2. Select this Metadata Schema as the Metadata Schema in each of your Pages.
    3. Replace the contents of the <meta name="description"> tag with @@Page.MetaData.description@@.
    4. Replace the contents of the <meta name="keywords"> tag with @@Page.MetaData.keywords@@.