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
- 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.
- 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".
- In Windows Explorer, download the design zip file from this location: http://sdl.dist.sdlmedia.com/vms/distribution/?o=A3485AFB-EDCE-4980-9F3E-961E0815E43D
- Copy the files in this zip file into the organizational items of your new Publication (accessed through WebDAV) as follows:
- 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.
- In the dialog that opens, fill in Page Template Design in the Name field
- Select the Source tab, ensure that Template Type is set to Dreamweaver, and make the text box empty.
- 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
Results
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
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
- 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.
- In the dialog that opens, select the Source tab.
- 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. - To make your navigation dynamic, do the following:
- 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.
- Find the
<nav>tag and replace its contents with an item representing the navigation you created yourself, say,@@navigation@@, to remove the hardcoded navigation.
- To make the footer dynamic, do the following:
- To make the meta description and keywords dynamic, do the following:
- Create a Metadata Schema with two text fields, "description" and "keywords".
- Select this Metadata Schema as the Metadata Schema in each of your Pages.
- Replace the contents of the
<meta name="description">tag with@@Page.MetaData.description@@. - Replace the contents of the
<meta name="keywords">tag with@@Page.MetaData.keywords@@.