Home
Textbook
Calendar
Term 1
- Class 1-1
- Class 1-2
- Class 1-3
- Workshop 1
- Class 1-4
- Class 1-5
Term 2
- Class 2-1
- Class 2-2
- Class 2-3
- Workshop 2
- Class 2-4
- Class 2-5
Term 3
- Class 3-1
- Class 3-2
- Class 3-3
- Class 3-4
- Workshop 3
- Class 3-5

Web Templates

What is a "template" for a web page?

A web page template is just an html document that has all the nested divs, css references - the layout structure - but no content. By saving this document and using it each time you create a new page you keep your site consistent from page to page. By using SSIs for the shared content (navigation, header, footer etc) the template is very small and contains layout instructions only, no content. It would be feasible to create multiple sites with the same template that look completely different. You could have a single template for all your clients, but have a completely different look and feel for each client. You can then hand off this css and template to a client and they can create new pages without knowing anything about html or css. They just add the content.

Is a Dreamweaver template different than a hand-made template?

Yes. Dreamweaver does two things that make it a very powerful tool for handling templates. It gives you three site management capabilities:

Dreamweaver embeds comments into the template file that allow you to protect the fragile structure of the html. Your clients will not understand how important the <div> and </div> tags are and may delete one of them - destroying the page structure. If you create a dreamweaver template and have them edit using Dreamweaver or Contribute, the structure of the html is protected from accidental change.
Dreamweaver allows you to associate a family of layouts as a "Template" allowing greater variation in the site pages while still controlling site consistency. For example you could have a side-bar template, and image gallery template, and a two-column template that allow you to have varying page layouts without losing consistency. See three layouts within a single "template" for a WWU site:
full-page | two-column | side-bar
Dreamweaver keeps track of each html file that uses a particular template within a given site. When you change a template after creating web pages, Dreamweaver can automatically update these web pages to use the new features. If you have a site with dozens or hundreds of pages this is invaluable for keeping your site consistent as you add features.

But most important, the code thus created is NOT now limited to editing in Dreamweaver. It is still editable by any other editor. Because the additions to the html code are simply html comments, you are not prevented from later moving to another editor or browser to edit the files. You can use Dreamweaver to create templates, then use these templates in any other editor without a problem. (However you will of course lose the management capabilities mentioned above.)

Special characteristics of Dreamweaver Templates

saved as Templates/*.dwt in your web folder
updates to Template are automatically updated in their "child" files as well. For example if you were to add another column to your template, or add an additional css file, Dreamweaver can automatically change every page in your site that used that template.
protects areas of the file so they can't be overwritten in Dreamweaver (or Contribute)

What does Dreamweaver add to make a template?

Added within the Template: Comments Defining Editable Sections

Dreamweaver adds comments to demarcate the areas it will allow you to edit in the file created from a template. The user, using Dreamweaver or Contribute, can only edit the areas inside the comments (other editors are unaffected as they ignore these comments).

(editable area follows)

(editable area ends)

The string in quotes following name= is the specific area of the template that the user can modify. At minimum there will be one in the header / title area and something in the content, but you can define as many as you need.

Using Notepad or other editors the user can ignore these areas and edit anything, but if your users use Dreamweaver or Contribute it can help you maintain consistency throughout the website and prevent the problem of "web page drift" as web pages drift away from their defined formats. It can also help your less-skilled users from inadvertently wiping out the structure of the page.

Added to the file made from the Template: Comments associating a template to the file

Dreamweaver also adds a comment to the beginning of the html file (immediately after the <html> tag) that associates the file with a specific template. It adds this line with the url.dwt being the filename of the Template you have already created:

and then this line at the very end of the file immediately before the </html> tag:

Page Updated 01.24.2010