Videos for this class

There are seven videos related to Part 2. Be sure to view these videos.

General comments about this lesson

Assuming you are the site manager, if you are going to use templates on your site, you will pretty much have to create them yourself. Also if you will be having others create content for your site, you really should be using a template for them to work with. As you have seen already, global changes in common links and graphics can be done quickly if a template is used to create documents. Incidentally, a document that is created using a template is called sometimes an instance of the template.

Much of what is covered in this lesson is NOT necessary. Specifically moving a field, deleting a field, creating an editable attribute, using a repeating region and using an optional region are all things you may not need to do at all in your own templates.

Deleting a region in an existing template

Regions can be deleted, even after a template has been used to create documents. However, you may not be able to put the information stored in the region in a meaningful place in your document. The video Deleting a Template Field demonstrates what will happen if you delete a field (region).

You have to begin by opening up the template, since this is editing the template. Select the region you want to delete, In the video this is the Date region/field. With the region selected, pick Modify from the main menu, then Templates, then Remove Template Markup, as shown to the right.

The aqua (default color) marking for the region will disappear, as is shown in the screen capture to the right. However, the text is still showing, in this case March 10, 2005. If I left it like this, then this becomes another uneditable part of the template and that date is then used on future instances of the template. The date would not be changed on documents already created using the template.

In the video after "removing the region," I also deleted the entire line in the template. This was a matter of choice.

When you delete a region and then save this "change" in the template, a screen comes up with a message for Inconsistent Region Names. Basically Dreamweaver wants to know what to do with the text that was associated with that region. Click on the column saying Not resolved, and then select in the window where you want the region information placed.

The choices are
- nowhere
- various remaining regions for the template you are working with
- doctitle (i.e., the title tag area)
- head

In the people.dwt template, the remaining regions are Person name, Photo, and Position summary.

If you pick head, this text will remain in your document, but it will not be viewable when you look at the document through a browser. In the video, I selected Nowhere. If I had selected the region Position summary, then I would have been able to keep the text, even though I might have to reformat it somehow, to separate it from the position description information.

Adding a region or field in an existing template

The video about Moving and Adding Fields in a Template introduces you to the concept of how to add a region. In this case, the template exists. I thought it might be easier for you to work with an existing template first, and then tackle creating a template "from scratch."

Using the people.dwt file, I inserted two new rows below the photo and position description. These rows would have the same column structure as the row above. In the one column I put a text label for Email, then the placeholder text in the next cell where the email will actually be typed. In the row below, I did the same for Phone and the placeholder text where the phone will be typed in.

With the text typed, acting as a placeholder, each part was selected separately, and then made a region.

Then I selected Insert from the main menu, and picked Template Objects, then Editable Region.

A dialog box, shown above, appears to assign a region name. Do not use the default names, which have no meaning, particularly if others will be using the template. Keep the name short but clear. The region name can have spaces in it, but don't use special characters.

The region should appear with the "aqua" coloring around it, just like the other editable regions in the template.

Just like making other changes in a template, you would need to use File, Save to save the revised template, and allow for the updating of the documents using the template. No information will appear in these "fields" until you open the existing instances and type in the new information.

Moving a region in an existing template

There are various ways to move an existing region, without losing the information. The main things to remember is to keep the region name the same and to NOT save the template before placing the region in its new location. If you try to save the template before placing the region in its new location, Dreamweaver will think you are deleting the region.

You can also open a template and save it under another (temporary) template name, to play with a template without affecting your documents. This, of course, won't change the documents using the template, since the template name is different.

In the video Moving and Adding Fields in a Template, I first inserted a new column inside the table structure, to the right of the Position summary area. Then using the Tag Selector, I selected the cell <td> tag since the region with the photo was all that was in that cell, and I cut that information. Then moving to the new cell area, I used Edit, Paste to paste the region in that location. Since the region name was the same, Dreamweaver, was able to move the display of the photo to the new location on the page.

As shown in the video, because of the table structure used, some of the cells had to be joined together for the rows for the email and phone regions.

Modifying a template to create a new template

The next logical step in learning how to create a template is to take an existing template and modify it. In the video Modifying a Template to Make a New Template, I take the generalpages template and change it to be a template for tips about products. The first step would be to take the existing template and save it as a template, using another name. Two of the regions have their names changed. There are various ways to select a region, to change the name. One shown in the video is going to Modify, then Templates, and clicking on the region name in the list of regions. With the region selected, then I used Modify, Templates, Remove Template Markup (the same feature used to delete a region). Two regions were removed, and new placeholder text typed in.

I then inserted a new row which would be for the product name, and made adjustments in the table structure so the navigation area to the left continued to be under the graphic.

The next step is the selection of each of the "placeholders" and making them editable regions.

With the new "placeholder" text selected, I then used Insert, Template Objects, and then picked Editable Region

The final step is to give a good name for each region.

I now have three new regions. The Date region continues as a fourth region.

I decided that it would be better to have a text label of Product: that will appear in the same cell as the name of the product. I clicked on the tag mmtemplateeditable in the Tag Selector to quickly find that place in the HTML document, and then turned on the display of the HTML coding.

Since the "label" is in the same cell as the editable region, I think it is easier to position the cursor in the code and then type in the text in front of the Product region, as I have shown in the screen capture below. This is another example of when sometimes you need to work directly with the HTML coding, especially when working around an editable region.

Although in this video I deleted a region and then created a new region (in the same area), I could have also simply given a new name to the region. Clicking on the region in the template, you can change the name in the Properties panel. Don't do this if you have data associated with the template, or that data MAY be lost. But since this is a new template (modified from another template) there are no instances for this new template. When an editable region is selected, the only option showing in the Properties panel is for the name of the region.

Creating a new template

You must have at least one editable region in the template. It is possible to have a template with just one region, but there must have at least one.

The video I created illustrates creating a template from an existing HTML (web) document. Although you can certainly start from scratch, I think you will find it easier to first create the document "look" you want, as a regular HTML document, and then select parts of it for editable regions, then save the entire document as a template. It is the identification of editable regions in a document that makes it a template. If you try to save a document which does not have any editable regions as a template, you get a warning message from Dreamweaver.

The video Creating a New Template in Dreamweaver Based on a Web Document illustrates a couple common problems you can have. One is that links may have to be reselected, if they are links to pages on your site. Links which have a complete URL, like to another site, would not be affected. As the screen capture below shows, and as was shown in the video, by reselecting the link to the homepage for the aboutus folder, the link now shows as ../aboutus/index.html. This coding tells the browser to go up one level in the site structure, find the folder called aboutus, and then find the document index.html in that folder.

The second common problem that can result from adapting an existing document is the reference to graphics in the document. The original document had a header that was in the same folder as the HTML document. But just like links, graphics have to be referenced using the folder or browse icon in the Properties panel. You may have noticed that when the document was first opened, the header graphic was showing, but after saving it as a template, the graphic disappeared in the display. That is because the template is in a subfolder beneath the location of the graphic. Referencing the image fixed this problem.

Another problem shown in this video is that the hotspots for the header have to be checked. Two of the hotspots were okay, because they were using an absolute URL. The screen capture below shows a reference to /aginfo.html. This hotspot for the link to the College's home page had to be made into an absolute URL.

Three of the hotspots which were references to pages with the "ECAT" site had to be deleted and recreated. For the link for each hotspot, I used the folder icon to select the file on my local site, to get the correct coding for the link.

This video demonstrates a problem that can be caused by deleting several paragraphs in an existing document and replacing them with a single line as a placeholder. I decided to leave this in the video, since it is realistic situation.

What this message above is saying is that the editable region called Main content is inside a tag for a paragraph. If this were left like this, then people using the template could not create new paragraphs in this region. Since I know I (and other users) will want to have multiple paragraphs at times, I can fix this by changing the coding.

Rather than move the editable region itself, I decided to turn on the display of the HTML coding, and I put the paragraph tags inside the region itself, as you can see in this screen capture.

As is shown in the video, I then used the Tag Selector area to select the P tag coding and then applied a font trait to that paragraph.

[Incidentally, as you will learn in the materials about style sheets, there is a better way to apply fonts than to apply to each paragraph. You can give instructions in the top part of the document (in a style sheet) about what type of font to use for all paragraphs in a document, or all cells within a document, and only give other font instructions for places that need to be different.]

If you take away only three things from all the information about templates, one should be how to use templates, a second should be how to edit and change a template (and its associated documents or incidents), and the third is how to make your own templates from your own documents. The next materials are things you might find useful, but are not essential for you in creation of your first templates.

Creating an editable attribute

The video Creating an Editable Attribute in a Template shows the several steps needed for changing a document trait. This is NOT a step you will probably have to do. It is a way, however, to make changes in documents you are creating from templates, without having multiple templates. In the video, I decided I wanted to have the cell in which the product name was appearing have a different color in the cell's background. This is a color the user of the template could pick when creating a document. The list of colors cannot be controlled really, so people using the template would have to know which color (or which hexidecimal code) to use to a given product. You make an attribute editable by editing the template.

To make an attribute editable, the attribute has to have a value associated with it. I selected the cell in the table structure for the product name, and in the Properties panel, I can see there is no color associated with that cell. I picked a default color, which in this case is #FFFFFF for white.

With that cell still selected, (the cell where the attribute will changed is located), I go to Modify then Templates, then Make Attribute Editable.

There are multiple cell attributes (for example, height, width, horizontal and vertical alignment) which are possible in a table. But in this table, there are only two attributes which have values: valign for vertical alignment (with top being the value) and background color.

Dreamweaver shows the list of attributes which have values in the current cell, and I then select the attribute to be made editable. In this case, it is BGCOLOR for background color of the cell.

Having selected the attribute, I then pick the label of bgcolor, the type as color, and the default value (which I leave alone).

This modified template can be saved, and documents using the template updated as well, but existing documents are not changed in terms of the color of the cell.

If you look at the source coding, for the color in this cell, you will see some very unusual coding. This is coding that is understood by Dreamweaver as you use the template. Once you pick a color for the cell's background, the coding for the color changes to a more familiar format.

You pick a color for the cell as you use the template to create a document. It does not matter if you pick the color first, and then complete the editable regions, or if you type in information in the regions and then activate the prompt for the color.

To be allowed to pick a color for the cell, you have to pick Modify from the main menu, then Template Properties. There is at the time the video was made only one template property---the property for bgcolor. I pick that option, and then use the color picker to select a color for the cell, or I can type in a specific hexidecimal value.

If I don't activate this feature, when I use the template to create a document, then the cell remains the default, which is white in this particular template.

Creating a repeating region

Prior to creating these videos, I discussed with various webmasters in the college their use of templates. and actually did not find anyone using a repeating or an optional region in a template. In one of the books I read about templates, the example of when to use a repeating region was a recipe, in which the ingredients for the recipe were a repeating region. Sometimes there might be a couple of ingredients, and sometimes several.

But I wanted to give you at least one example, using one of the two templates in the practice folder. The example shown in the video Using a Repeating Region in a Template was for the people.dwt file. I decided to add a region for current projects, but since there would be varying number of projects, so varying number of rows would be needed. (This could also be done in a single field, in which line breaks were used between each project, but I decided to go with a repeating region).

I first added two rows to the template. The top row had the text of Current projects and this would not repeat multiple times. The second row with the text Short project title is the row that would repeat.

In the video Using a Repeating Region in a Template, I selected the cell that would be a repeating area, and then went to Insert, Template Objects, and picked Repeating Region.

Similar to creating an editable region, a window pops up to give a name for the repeating region.

The aqua colored label appears, marking this as the repeating region.

After the repeating region is defined, I then highlight the text which will be the editable region inside the repeating region. There has to be at least one editable region in a repeating region(as demonstrated in the video) but there could be more than one.

When you go to use a template that has a repeating region, you will see a window such as the one shown below appearing above the editable field. After typing in one piece of information, you can click on the + symbol to add another occurrence of the region. You can use the up and down triangles to move the selected occurrence up or down, and thus change the order they are listed

The resulting document (for the template modification I made) shows spacing between the projects. This was caused by the cell padding that I had in the template, not by the feature of repeating a region itself. In the example in the video, it might have been better to place the text Current projects in a different size font or make it boldface, to help it be set apart from the list of projects.

Creating an optional region in a template

As I have said already, I could not find anyone really using the optional feature, but I decided to include a simple example. I choose to use the generalpages template for references to upcoming meetings which had a registration cost and registration contact. Rather than create a NEW template for this application, I can use the same template but add fields which are optional. The procedure is similar to creating a repeating region.

As shown in the video Using an Optional Region in a Template, I added a row beneath the main region, and typed in text in various cells. Since the entire row (in this case it is a single row) is optional, I select the entire row using the tag selector, and then go to Insert, Template Objects, and picked Optional Region.

The next display (shown to the left) gives an option of Basic or Advanced., and I picked the Basic tab. I don't want this region to show by default, but only when I prompt for it, so I then deselect the box for Show by default.

In a manner similar to identifying a repeating region, I now have to identify the editable region within the optional region. In this case, there are two new editable regions: one for cost and one for phone to register to call to register.

After saving the template, I can use the template. The main part of the template shows, and those regions are completed.

To get the optional region to appear, I have to pick Modify, Template Properties. This is the same template that I used to create an editable region, so there are two choices here.

In this case, I want to pick registration information from the list and then checked the box to show the registration information. Then closing the dialog box by clicking on OK, that optional row will appear in the display and I can fill in the information. This is shown in the video.

You might not need to use either a repeating region or an optional region in your template, but at least be aware of these options.

In this class, I gave you two templates so you could experience working with more than one. However, the people template could really be done using the generalpages template, by making the photo area an optional region.

Cautions on using too many templates on a site

Particularly if you have navigation for your site in your template, you need to be careful about creating too many templates, or you defeat one of the purposes of using a template. If you have, for example, three templates, and all have basically the same navigation, then you have to edit three templates if you make changes in the navigation. This is still easier than editing dozens of documents, if you had not used templates, but you need to be consistent in changes you make in your templates.

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