ITEC 745 - Roderick - Fall 2005
USing Templates

745 Home 745 Schedule 745 Links 745 Forum 745 Helpers 745 Syllabus
Templates are a way of creating a master page containing recurring elements of a website and centralizing them to promote consistency amongst the design and layout of pages. There are many ways of going about templating. At its simplest, templating can be done by taking a HTML page with the standard elements of a site and merely re-saving it for each page new page in the site. At its most complex, it can be accomplisehd using an advanced content management system where authors may never see the HTML page. For the purposes of this course, Dreamwaver provides an internal facility for creating templates, applying them to pages in the site and for making global changes to all pages containing the template.

Templates are typically created for the sub-pages of websites where groups of pages need to maintain a common set of elements such as navigation, design and layout. For intstance, your ITEC 745 websites have some five or so pages making up the site. For some of you, while your home page maintains a distinctive introductory look, chances are your sub-pages have a similar look and feel.

WHY TEMPLATES?....
There are two main advantages for templating. The first is that it creates a consistent user space where elements are the same for every page allowing for greater usability. The second is that Templates allow for ease of management and updating of a site for authors. With the facilities provided in Dreamweaver and other authoring tools, web builders can go to a single page and change elements for entire sub-sections of sites. For instance, as a site grows, the navigation system must have links added. Isn't it nice to be able to go to one place and change it for however many pages might be in the sub-site?

SIMPLE TEMPLATES
Most of you found the advantage or creating your initial "about me" page and then by going to "Save As", could take that page and save it as "goals", replacing text, page title and other elements you could save the work of recreating many page elements and ensure it looked like the other pages. This is a simple form of templating.

DREAMWEAVER TEMPLATES
Dreamweaver has a nice facility for creating, managing and updating templates which can be applied across sections of a local site. In fact, these facilities have been much improved in the new MX version. You can use more than one template for a given site, perhaps to manage different sub-sections but templates can only be used within a single Site Definition. (That means, using your SFSU web space as an example, if you define your site with the "itec745" folder as the root level, templates created in that Site Definition can only be used within that section.) Templates are given the ".dwt" extension when they are created. Template pages allow authors to "lock" recurring areas of a page and to define "editable" areas where content for each new page will be placed.

STRUCTURING TEMPLATES
Strategizing your template setup centers upon choosing the location of editable areas. The whole beauty of templates is that it allows you to extend common elements such as navigation, logos, footers, search windows or any other elements that can be common amongst pages in your site that are attached to the Template. These then consistently repeat throughout all sub-pages attached to the template. When updates need to happen at the Template level, all attached pages are updated across the site. This means web authors need only update main elements in one place, greatly reducing maintenance overhead.

TEMPLATES FOLDER -Find the Best Place For It and Don't Mess With It
When you create a template, Dreamweaver creates a "Templates" folder at the root level of your defined site. Because of this, it's important to note that if you're working on a sub-section of an overall site, like your "itec745" website within your overall "SFSU" website, if your site definition is set to your "SFSU", your Template folder will be placed there. It's best to keep the Templates folder for each particular sub-website in your overall directory structure. Otherwise, if you ever go to move the site, you will have to contend with getting the Template folder in there at that time.
Once you've created your templates, do not move the folder, remove the template files from it or put anything besides ".dwt" template files in there.

NON-EDITABLE <HEAD>
Because templates force the <head> of an HTML document to be uneditable, it complicates things that must go there such as Behaviors or Style Sheets. In Dreamweaver 4, external Style Sheets can be added without problems but not so with earlier versions. A special procedure must done to add Document level Style Sheets and Behaviors or Javascript. This really amounts to applying your own "Editable Region" tag in the head and placing the coding there.

LINKS IN NON-EDITABLE REGIONS
Any linking items (either hyperlinks or images) in non-editable regions of a document will be relative to the template file and not the HMTL page the template is applied to. Generally, you will have no problems if you create your hyperlinks or add your images using the Property Inspector's File Icon or when using absolute paths for links to external websites. When editing non-editable areas in your template, if you are in the habit of typing in your own links to documents within your site, remember to make it relative to the Template's location. More info....

 
© 2005 Andrew Roderick. Some Rights Reserved. ( Creative Commons License). XHTML | CSS | 508
Email Instructor | Department of Instructional Technology - San Francisco State University