Videos for this class

There are six videos related to Part 1. Be sure to look at these videos.

Templates versus style sheets

Templates and style sheets are two different features. They can be used separately (that is, you can use one in a site and not the other) or they can be used in the same site. These materials deal with using templates, and another site has material on using style sheets (in Dreamweaver and in general).

In general templates are used for making pages on your site have a common look. You could have a section of the page for headers, another section for footers and comments, another section for navigation, and so forth. You may have been creating this effect for quite a while by simply designing a page, saving it under a general name, and then using that page as the basis for any new documents, saving each document under a unique name. There are no default templates in Dreamweaver. You must create your own or use templates others have created, if you have inherited a website from someone else.

Style sheets are in general used more for formatting and appearance of elements on a page. For example, on your site, you might want to specify that all paragraphs use a 14 pixel arial, helvetica, sans-serif font, and all H2 headers use a large arial, helvetica, sans-serif font with a hexidecimal color of #1d46fa (like the headings above). You could also create emphasis in places by changing the weight of the font or changing the color in particular places. Thus, within a general template, you could change the appearance of parts of the page by using different styles within parts of the document. This will make more sense when we get to the style part of the class.

The W3C (the World Wide Web Consortium, the group that creates the standards for HTML coding used on pages) does not have any standards relating to templates. It does, however, have some detailed standards about style sheets. In fact, they want site managers to use styles. I think that is one of the reasons with the 2004 release of Dreamweaver that Macromedia started creating styles for you as you apply font traits.

What are templates and why use them?

A template is a special document (in Dreamweaver) used as the basis for creating other documents on your site. When you create a template, and save it as a template, Dreamweaver adds the extension of .dwt (dreamweaver template) (rather than .htm or .html) and saves the template in a special folder called Templates. Dreamweaver creates this folder for you and saves the template in that folder if you have no templates on your site already. Each HTML document based on a template uses the same layout and structure of the template and often the same font style and coloring as the template. This part of the "template definition," however, does not distinguish a template-associated document from just a regular document you may use each time you create a document on your site.

The second important trait of a template, which distinguishes it from a regular HTML document, is that each template (and thus each document based on the template) has parts of the page which can be changed. These parts are called editable regions. It also has parts of the page which are protected and cannot be accidentally changed when using the template. These two parts of the template document distinguish it from just a regular HTML page you are using to create other web pages on your site.

There are, thus, three reasons to use templates:

1. Templates provide site identity and web page consistency for your site. Pages on a site should have a common appearance, as a visual reminder to visitors that they are still on the same website as they navigate through your site.
2. Using templates protects parts of the page from accidental changes and deletions. This advantage becomes more important if you turn your site over to someone less experienced in Dreamweaver or if your site's pages are going to be created by several people. Even though content is coming from different people, the look of the pages will be similar. Related to this, use of a template to create new documents is easier to show parttime help, versus creating a document from another document, since only parts of the page can be changed.
3. The final reason, which is only achievable if you use templates, is templates allow you to change quickly the layout or appearance of your pages. For example, if one of the protected parts of the template is a navigation area, you can change the URL for a given link or add/delete links to the navigation area, by making changes in the template. Then you can almost instaneously update all of the pages using that template. The larger your site gets, the more this is an advantage, even if you are the only one working on the site.

Recognizing the use of templates

Template use on a site is not recognizable by simply looking at a page posted on the web. In fact, as is shown in the video Introduction to Templates in Dreamweaver 2004, two pages can look the same, even though one was created using a template and one was not. However, if you look at the source code, by picking (for example in Internet Explorer) View, Source, you can see a reference at the beginning of the document to the template used in the document, as shown below.

If you inherit a site from someone else, there are several ways to determine if templates have been used on a site.

One way is to look at the site structure, in the Files panel display. The existence of a folder called Templates (capital T) with template files in it is an indication that templates were created in Dreamweaver for the site (although they might not have been used). The display to the left shows two templates: generalpages.dwt and people.dwt.

As you open documents in a site, using Dreamweaver, there are several ways to tell if a template is associated with the open document.

One is that, as you move the cursor around the document, it will display as a NOT symbol, as is showing to the right. If the cursor is over a protected part of the document, protected by the template, then the NOT symbol appears.

Another visual symbol on the document is the display of the region names, as is shown to the left. The default color is aqua. The region names are created at the time the template is created, but names can be changed.

A final visual clue is the display of the template name in the document window, in the top right part of the window. In the screen capture to the left, the template used to create this document was generalpages.

When you go to use templates, it is possible that the region elements might not appear. If so, go to View on the main menu in Dreamweaver, then Visual Aids, and be sure that Invisible Elements has a checkmark in front of it.

Sometimes the page color or table color or cell color you are using makes it hard to see the template region names. You can change the color being used to highlight the region name by going to Edit on the main menu, then picking Preferences. Select the category of Highlighting, as shown in the right sceen capture, pick another color for the Editable regions. Depending on colors you are using for backgrounds in your documents, you might need to pick another color to better see the regions.

Using a template on just one document

This is a matter of opinion, certainly, but the main reason to create and use templates is that you will have multiple pages which have the same layout. I have seen sites in which there is a template for the front page and a template for other pages, but, of course, there is just one front page. It would seem that having a template for your front page, which COULD have a very different structure than the other pages on your site, is a waste of time. You only have one instance of that template on your site. It is just as easy to have the document there and directly change the document. If you have multiple people working on a site, and you don't want them to change the front page, just make that particular document read/write only to you as the site owner. They might be able to change a copy of the front page on their local computer, but they would not be able to post this page to the server, certainly not to the CALS server.

Using existing templates on a site

Before you begin creating templates, I wanted to make sure you had experience using templates and editing templates (and documents associated with those templates). There are two videos which show creating documents using templates: Using Templates in Dreamweaver: Example One shows using the generalpages template distributed for the class, and Using Templates in Dreamweaver: Example Two shows using the people template.

When you want to create a new document using a template, begin by picking File from the main menu, then New (for New document). The resulting display has two tabs at the top of the diplay, as shown below. Click on the tab Templates. The display will show all sites defined on your copy of Dreamweaver. Click on the site name you are working with (in this example, templates is the site name) and templates associated with that site will be listed. You can see here two templates.

Notice that at the right of this window, where you pick the template you want to use, the template is shown visually in the Preview section of the window.

After selecting the template, you click on the button Create at the bottom. This means you are creating a document that uses the template, NOT that you are creating a template.

When using a template to create a new web document, as is shown in the two videos, parts of the new document's page will be protected, with the NOT symbol appearing as you move your mouse around the page. But there has to be at least one editable region, a section whose content can change each time the template is used.

The template generalpages has three editable regions: Page title, Content, and Date. The names of these regions were created when the template document was created. The title part of the page is changeable, but other parts of the first row in the document are protected: the reference to the College of Agriculture and Life Sciences, the reference to the University of Arizona, the ECAT graphic, the navigation links at the left, and some of the general information at the bottom of the page. As shown in the videos, the amount of content put into an editable region can vary.

The video showing using the generalpages template also illustrates that, although the font styles (font face name, font size, font coloring) is set into the template, in an editable region one could still select another font style or font color. However, most people using a template would probably not stop to do this.

You would need to also remember to enter the title tag in the document you were creating. Most templates will have Untitled Document as the existing title tag, but even if a more specific title tag is in the template, it should be changed as the template is used, so there is a unique title tag for each document.

After entering content in the editable regions, you would then save the document under an appropriate name and in the appropriate folder on your site.

In the template examples shown in the video, the generalpages template is used for all parts of the site.

The second template demonstrated in the videos is a layout for information about people. It has a similar structure as generalpages, but the "main content" area was split into two cells--one for a text description of the person's job, and another for a graphic.

One thing the people template illustrates is placing an image in a document. Because the document being created will be stored in another folder, not the template folder, you cannot place images in a template or in a document using a template by simply typing in the filename. You need to use the browse (folder) option in the Properties panel to select the image when you place it.

Editing a template

One of the major reasons for using templates on a site, even if you are the only person working on a site, is changes to common features on pages can be made rapidly on many pages. An example we actually had in ECAT is the change of the location of the search document on the CALS server, and we had in our documents in a template-protected section a link to our search page. By editing the template for the new URL, the dozens of pages using that template were instantly updated.

The video Editing a Template in Dreamweaver shows three changes to the generalpages template: changing of the image used on the page (in the header area); changing traits for the title section of the document (in the video the color of the text was changed, but it could also be changes in font size and font style); and adding of a new link in the navigation area for a new section added to the site.

To edit or change a template, you actually open up the template document, by double-clicking on the template found in the Templates folder, or by using File, Open and selecting the template file that way. After opening a template (versus a document created from the template), as you move your mouse around the page, you will not see the NOT symbol appearing. You can make changes in any parts of the template, and it is in the "protected" section of the template that most changes would be made. (We will look in Part 2 about deleting regions, adding regions and moving regions.)

When editing the template, you will still see the (aqua) region names labeling the editable regions of the template.

After making one or more changes in the template, you need to save the changes. You can use either File, Save as Template or File, Save. Prompts that then appear will vary depending on which option you use. Both are demonstrated in the video on editing templates.

If you use the File, Save as Template option, you will see the list of templates in the folder. If this is a new template, you would type in a new name, but let Dreamweaver add the extension of dwt.

If you use an existing template name, you will need to verify you are overriding the existing file.

When you use this option, and you open a document using the template, there will not be any changes showing. Therefore, you need for force the updates, by picking Modify, Templates, then Update Pages to update all pages on the site using the template.

This feature works whether or not the pages are open. If they are open, then you have to save the changes to that particular (opened) document. But files not opened are changed (and saved) automatically, as is shown in the video on Editing a Template.

If you pick Update Pages to force changes in a template to its documents, you will see this display showing to the right. You can see here that it is looking at the Entire Site (for the templates site, which is the name of my local site). Your site folder would probably have a different name. Also I am updating files using the template (that box is checked in the window, not the box for Library items).

Notice the checkbox for Show log, which will show results after the updating occurs.

You begin the updating by clicking on the Start button.

This display will then show, indicating the number of files examined, the files updates (here there were 21 files out of 27 using the template).

If you pick the File, Save option, to save the revised template, since it is a template, Dreamweaver knows the files associated with the template. This window appears, referencing the files using the template you have just saved. There is no reason I can think of to pick the Don't Update option. You would want to update the files using the template and thus you would select the Update option.

This feature works whether or not the web pages are open or closed in your copy of Dreamweaver.

When you go to use a template, to create a document, there is a box (highlighted here) indicating Update page when template changes. You can see the default is to turn on this feature. However, if you have inherited someone else's site, this might have been turned off when they created pages.

In these cases, after updating a template, to get those changes appearing in the documents, you might have to pick the Modify, Templates, Update Pages option.

As is demonstrated in the video Editing a Template in Dreamweaver, if you are selecting a link as you create a template, you need to select the local file using the browse or folder icon in the Properties panel. Never just type in a filename for a local file on your system, because Templates are stored in a separate folder from the rest of the documents and the links in documents using the template will not work. The only time you would type in a link is if you were typing a complete URL, including the initial http://

Applying a template to an existing document

Since there was an option in the menus for applying a template to a document, I thought I would experiment with this feature, to see the limitations of it. The video Applying a Template to an Existing Web Document illustrates several scenarios. In all examples, I am trying to apply the generalpages template to an existing web document.

The initial procedure is the same. You have a HTML document open and you pick Modify, Templates, then Apply Template to Page. You will be asked to select which template (if you have more than one) to use, and then this type of display appears.

Since the editable parts of the template have region names, Dreamweaver is trying to associate particular parts of the document with region names in the template.

You would select the area of Document body and then pick from the drop down listing associated for Move content to new region, as shown to the right. The area you would use to plug the content from the current document is the Content region in the generalpages template. (Remember that in other templates you might use the "main area" might have a different region name.)

As the first example in the video shows, if the existing document is pretty much simple text, even though there are a lot of paragraphs, that "body" fits okay into the existing template. Again the video shows having to delete the "title" and put that into the Page title region, and then the Date region information was typed in.

The second example in the video illustrates another common problem you might encounter: the existing document already has a graphic header which conflicts with the new layout. All of the content, including the graphic, are put into the Content region, and then the graphic header had to be deleted. But this example also shows a two-column cell in the Content area, and that empty content column had to be deleted.

The third example shows a different method. Rather than applying a template to a document, a new document using the template was created. Then the existing document with the content was opened. In this video, I opened up the HTML coding display in the original document, copied all of the text inside a particular cell, and then pasted that content into the Contents region.

If you have an existing site with an established look, and you want to take the content from those pages into your new template-based site, you will have to do one of these types of steps in order to move the content from "one layout" into "another layout."

Detaching a document from a template

In the final part of this first lesson on templates, I address making changes in just a single document that is using a template, but changing something that is protected by the template. In the video Separating a Document from its Template, the example is the contact information at the bottom of this page. For this one document, I want to make the contact different from the contact that is showing in the template. Basically you can only do this by one of two ways: (1) use some program that lets you edit the HTML document outside of Dreamweaver, and save the edited file under the same name; or (2) detach the document from its template.

The main program you should have, if you are working on a Windows machine, which lets you edit an ASCII text file such as the HTML document is Notepad. As is shown in the video, this program is normally accessed through the Start button, then Programs, then Accessories. It is one of the programs that comes installed on a Windows machine. The main drawback of using something like Notepad is that you have to understand the HTML coding in your document. In the example in the video, the change was found at the bottom of the document, so it was not so difficult to find it, but changes in the "middle" of a more complex layout might be hard for you to find, particularly if you are not familiar with looking at HTML coding.

The other way to make a change such as the contact information in this template, but to only change this one document, is to detach the document from the template. Go to Modify, Templates, then pick Detach from Template.

You can tell instantly that the document is not associated with a template anymore because as you move your mouse around the page, you won't see a NOT symbol appearing anymore. Now you can go to any part of the page and make changes in that part, using the Design mode in Dreamweaver if you wish.

However, from this point on, if you change the template, like add a link in the navigation area or change the graphic used in the template, this document is not associated with the template anymore. Thus these changes have to be made separately in any documents detached from the template.

When posting a site using templates

Whether you use FTP or Dreamweaver or some other program to post your site to a server, it is not necessary to post the Templates folder to the server. When you create a document, or edit a template, of course you need a copy of the template or templates in your local site. But you do not have to post the Templates folder to a server.

If you have multiple people working on a site in different locations who are not working on the same local computer networking, you could post the template files to a server as a way to give people working on the site access to the most current templates. But they would need to download a copy of the template or template to their own local computer.

This material was used in a distance class on Templates and Style Sheets given by Linda Ffolliott, ECAT, College of Agriculture and Life Sciences, University of Arizona. To use this material, contact Linda Ffolliott at ffolinda@ag.arizona.edu