Unit 11. Using Dreamweaver Templates (I)

Unit 11. Using Dreamweaver Templates (I)

We're now going to learn what templates are, how to create them, and how to base files on them.

Introduction

Each time we want to create a web site we have to follow a uniform format. Most of us make copies of previously created files, and work on these copies by changing their content. This is the easiest way to have a page with a previously created structure. Templates are a kind of copy of the page on which the rest of the web site is going to be based, but they include the possibility of establishing editable zones, while other zones cannot be modified. It isn't possible to modify the properties of a page that is based on a template, apart from the title. When you want pages with, for example a different background color, you need to create a different template with different colors, and base the pages on the template depending on the background color you want for each one. When you modify the design of a template, you can update all pages based on it. Template are files with a DWT extention saved on the web site inside a folder named Templates.

Creating Templates

Templates can be created from zero, or starting from an existing page.

One way of creating templates from zero is through the Assets panel. The Assets panel can be opened through the Window menu and then the Assets option. Also by pressing F11. Once you have opened the panel you need to select the button. This way you can work with templates. The Templates Assets panel's bottom buttons are similar to the ones in the CSS Styles panel . The only different button is the first, used in this case to update the list, the rest of them allow you to create a new template, edit a selected template of the list, or clear it. To create a new template you need to click on the button (if it isn't activated, right-click and select New Template). When you press the button you create a new file in the templates list. You can also change its Name. To modify a template select it from the list an click on the button. To delete a template select it from the list and click on the button. Templates are saved in the actual web site inside the Templates folder which is automatically created.

To create a template from an existing file, you need to open the file, and then save it as a template through the File menu, and Save as template. When you select the former option, you see a window like the one on the right. It's necessary to specify the name which you want to save the template as through the Save as field and then select the Site in which it's going to be saved from the sites list.

Unit 11. Using Dreamweaver Templates (II) Editable zones.   All of the elements of a template are blocked by default, and therefore they can not be modified. It is compulsory to establish the zones that can be edited in the pages based on this template. To edit a template you have to open it in Dreamweaver. A way to open it is through the Assets panel by double-clicking on it, or by selecting it and clicking on the button, as we have just seen. Once the template is open it's possible to establish its properties through the Page properties. As you can remember, it can be opened it this way: Pressing a combination of the Ctrl+J keys. Clicking on the Modify menu and selecting the Page properties option. Right clicking on the opened file in Dreamweaver and selecting the Page properties option. To insert an editable zone you need to place the mouse in the place in which you want to insert it, and then go to the Insert menu, Templates objects, and the Editable zone option. You can also press the combination of the Ctrl+Alt+V keys... In the new window you need to establish a Name for the editable zone. There cannot be two editable zones inside the template with the same name. Later on you would modify the name through the properties inspector of the editable zone. An Editable zone is represented in Dreamweaver as a box with a blue label. The name of the editable zone appears in the label. You can insert objects inside the window, and they will be appear by default in files based on those templates. The objects inside the editable zone can be modified. All the objects of these editable zones will be in the site, but they will not be able to be changed. In this case, the teacherClick logotype image would be in all the sites based on this template, while everything inserted inside the editable zone EmailForm will not. Unit 11. Using Dreamweaver Templates (III) Using the templates   The use of templates can be a bit complicated at the begining. We're going to see how to base a blank site in a template, the fact that it is empty makes it easier. Once opened the file, you have to go to the Modify menu, Templates, Apply template to Page. Before doing this, it's preferible to assure that the file opened in Dreamweaver is the same thatthe one we're going to work with and the same as the template is going to based on. After clicking on the Apply option in Template to Page, you will see a window like the one at the right, in which you need to select one of the templates from the list of templates site. It's recommended to activate the Update page when template changes option, in order to make the page automatically updated in case of modifying the template in which it's based. Instead of being working on an empty file, its possible to apply a template over an existent file. Then, when you apply the template, the names of no coincident regions between the existent document and the template will be displayed. In that case a window like this is shown. In this window you have to establish a correspondance between the region name of the blank file and the region name of any template. In this example, the blank file region which didn't coincide with any template region was the Document body region. In the Move content to the new region the head region of the template has been selected in order to establish the needed correspondance. After establishing the correspondance, the template is loaded in the blank file. In this case that it is not possible to change the background color of the template, you can still change all the elements of the table and form, since they are in an editable template zone. In this case you can change the font, the cells color, combine them, etc. If you want a page to stop being based on a template, you have to go to the Modify menu, then the Templates option, and Separe template. When you separate a page from a template, the page content would be still the same as when it was based on a template, but without the restrictions established by the template. To practice the different elements you can perform the Step by step exercise in Creating a template