1. © 2010 Delmar, Cengage Learning Chapter 11 Creating and Using Templates

2. © 2009 Delmar Cengage Learning Chapter 11 Lessons 1.Create templates with editable regions 2.Use templates to create pages 3.Use templates to update a site 4.Use advanced template options

3. © 2009 Delmar Cengage Learning Creating and Using Templates Templates make sure that every page in your site has a consistent appearance A template is a special kind of page that contains: –locked regions –optional regions –editable regions

4. © 2009 Delmar Cengage Learning Understanding How to Use Templates The ideal process is for one person to create a template that has locked regions, as well as regions where content can be added or changed Once the template is fully developed, other team members can use it to create each page of the site, adding appropriate content to the editable regions of each page

5. © 2009 Delmar Cengage Learning Create a Template from an Existing Page Use the Save As template command Saved with a.dwt extension Stored in the Templates folder in the root folder

6. © 2009 Delmar Cengage Learning Create a Template from an Existing Page To view a list of templates in your site, open the Templates folder in the Files panel To preview a template before opening it, open the Assets panel, click the Templates button on the Assets toolbar, and then click a template in the list

7. © 2009 Delmar Cengage Learning Fig. 1: Template in the Assets Panel Assets panel Preview of selected template Templates button List of templates available in this site

8. © 2009 Delmar Cengage Learning Defining Editable Regions If your template is going to be used effectively, you need to have at least one editable region in it so that other users can add content You can specify a name for the region using the New Editable Region dialog box Editable regions are outlined in blue on the template page Names of the editable regions appear in blue shaded boxes

9. © 2009 Delmar Cengage Learning Fig. 2: Template with Locked and Editable Regions Editable region labels Blue outlines of editable regions

10. © 2009 Delmar Cengage Learning Defining Optional Regions An optional region is an area in a template that users can choose to either show or hide An optional region’s visibility is controlled by the conditional statement if Use the New Optional Region dialog box

11. © 2009 Delmar Cengage Learning Defining Editable Optional Regions Gives users the ability to show or hide a page element, as well as make modifications to it Using the New Optional Region dialog box, you can name the region and specify whether to show or hide it by default

12. © 2009 Delmar Cengage Learning Fig. 3: Save As Template Dialog Box Save as text box

13. © 2009 Delmar Cengage Learning Fig. 4: Assets Panel Showing Saved Template Preview of activities_pages template Templates button activities_pages template

14. © 2009 Delmar Cengage Learning Fig. 5: New Editable Region Dialog Box Name of new Editable Region

15. © 2009 Delmar Cengage Learning Fig. 8: Links Added to Activities_Pages Template Two links added to the template

16. © 2009 Delmar Cengage Learning Use Templates to Create Pages Creating pages with templates Modifying editable regions Creating links in template-based pages Attaching a template to an existing page

17. © 2009 Delmar Cengage Learning Creating Pages with Templates Templates save a lot of time, because part of the content and format of your page is already set Ensures that the page you create matches the look and format of other pages in the site

18. © 2009 Delmar Cengage Learning Modify Editable Regions When you create a new page that is based on a template, certain areas of the new page will be locked. –When positioned over a locked region, the mouse pointer will appear in the shape of a circle with a line cutting through it –Editable regions are outlined in blue and marked with a blue, shaded label

19. © 2009 Delmar Cengage Learning Fig. 9: Working with a Template- Based Page Pointer positioned over a locked region Notation that this page is based on the activities_pages template

20. © 2009 Delmar Cengage Learning Creating Links in Template- Based Pages When you add a link to a page that is based on a template, use document-relative links The path to a link actually goes from the template file (not from the template-based page) to the linked page To ensure all your links are document-relative, select the page element to which you want to add a link, then drag the Point to File icon from the Property inspector to the page you want to link to in the Files panel

21. © 2009 Delmar Cengage Learning Fig. 10: Using the Point to File Icon to Specify a Document- Relative Link Point to file icon

22. © 2009 Delmar Cengage Learning Fig. 11: New Document Dialog Box Page from template option Click to create new page based on activities_pages template Checkbox to Update page when template changes

23. © 2009 Delmar Cengage Learning Fig. 14: New Fishing Page Based on a Template

24. © 2009 Delmar Cengage Learning Making Changes to a Template Changes to your website will be necessary If your website pages are based on a template or group of templates, you will have a much easier time making those changes

25. © 2009 Delmar Cengage Learning Updating All Pages Based on a Template Any change you make to a template can be made automatically to all nested templates and pages that are based on the template When saving a modified template, use Update Template Files dialog box

26. © 2009 Delmar Cengage Learning Fig. 15: Update Template Files Dialog Box Files based on activities_pages template

27. © 2009 Delmar Cengage Learning Fig. 16: Activities_pages Template with New Link Added New link added to template

28. © 2009 Delmar Cengage Learning Use Advanced Template Options Setting parameters for optional regions Nesting templates Creating editable attributes

29. © 2009 Delmar Cengage Learning Setting Parameters for Optional Regions Including several optional regions allows users of the template can pick and choose from a wide range of content elements Setting parameters for optional regions specifies whether they are displayed or hidden based on specific conditions Use Advanced settings in the New Optional Region dialog box Can also write conditional expression based on JavaScript

30. © 2009 Delmar Cengage Learning Nesting Templates Nested templates are based on another template Nested templates are helpful when you want to define a page or parts of a page in greater detail An advantage of using nested templates is that any changes made to the original template can be automatically updated in the nested template Create a new page based on the original template, then use the Save as Template command to save the page as a nested template

31. © 2009 Delmar Cengage Learning Creating Editable Attributes Use the Editable Tag Attributes dialog box Choose an attribute of a selected element, specify to make it editable, assign it a label, and specify its type and its default setting Editable Tag Attributes dialog box was opened by clicking Modify on the menu, clicking Templates, and then clicking Make Attribute Editable

32. © 2009 Delmar Cengage Learning Fig. 19: Editable Tag Attributes Dialog Box