How to use templates in Dreamweaver

Author：Eve Cole Update Time：2009-05-30 18:50:16

There is a very powerful function in the web design tool Dreamweaver (hereinafter referred to as DW, the current highest version is 4.02, the example in this article is version 4.0), which is templates!

So what’s the charm of templates? What characteristics does it have?

Using templates, we can solidify elements that appear on every page of the site.

By using templates to create WEB pages, the entire site can have a unified style.

As long as the template is modified, all WEB pages to which the template is applied can be modified without the need to manually modify each page. For example, when you need to change your copyright, do you need to modify the copyright page by page? What if there are thousands of pages? I believe you will be two or three big at first. But if you use templates, this won't be a problem.

Below is a more comprehensive example that can quickly help you master the use of templates.

1. Edit page

Open DW and create a new site, which we will name "Spider Web".

Create a new blank page as an internal page (usually a website only has one homepage, so we don’t need to make a template for the homepage) and name it body.htm.

Edit this page and complete it as shown in Figure 1.

Figure 1, the body.htm page after editing is completed. Pay attention to point A, which will be used as an editable area and will be mentioned below.
2. Generate template

After editing is completed, we save this page as a template (note that it is not saved as an ordinary htm web page). You can save it as a template through FileàSave As Template in DW. After executing this command, the Save As Template window will pop up, as shown in Figure 2.

Figure 2, Save As Template window.

In Figure 2, B is the site selection, we select "Spider Web", C is the template file name we want to save as, we fill in the body. Press Save in the upper right corner to save.

At this time, we press F8 to call up the site (site manager), and you can see body.dwt in the Templates folder (when there is a template file, DW will automatically generate the Templates folder, and dwt is the template type file)

3. Edit template

When you open the body.dwt template file in Site, you will find that it seems to be no different from the body.htm page, but it is actually different. You cannot add editable areas in body.htm. Editable areas can only be added in template files.

In order to let everyone better understand the "editable area", we first use this template to generate an html file: click FileàNew From Template, the Select Template window pops up, select the body in the templates, and then click Select in the upper right corner to generate a new htm file. We rename this new page body2.htm. Now we use DW to open both the body.htm and body2.htm files and compare the differences. You will find the words "Template:body" written in the upper right corner of the body2.htm page. (This page is generated from the body.dwt template file) At the same time, you will be surprised to find that the body2.htm file cannot be edited (body.htm can be edited). By the way, this is because the "editable area" is not defined in the body.dwt template file, making the generated pages uneditable. So we have to add editable area in the template file. Here are the steps to add an editable region:

1) Open the body.dwt template file. We hope that the middle table can be edited (that is, A in Figure 1). But in the body.dwt file, not body.htm), so add the editable area here.

2) Place the mouse cursor in the table at A, right-click the mouse, and select New Editable Region.... The New Editable Region window will pop up, asking you to fill in the name of this editable region (we usually call it the editable region mark). We fill in Region01 and click OK to close this window to complete the editing of the current editable region mark. At this time, you can see the display in the table as shown in Figure 3.

Figure 3, New Editable Region window.

Note that there is an editable region marked Region01.

So far we have defined an editable area. If there are multiple editing areas, we can do the same.

※You can also generate a new editable region through ModifyàTemplatesàNew Editable Region…. If you want to delete the editable region, you can use ModifyàTemplatesàRemove Editable Region…, and then follow the prompts.
4. Generate pages using templates

In fact, we have mentioned before that the steps to generate pages using templates are through FileàNew From Template. Please refer to the relevant steps in step three. Now we use the template to generate a page named body3.htm. At this time, you will find that in the body3.htm page, except for the editable area Region01, which can be edited, the mouse is restricted elsewhere. We add the content we need in this editable area, for example, we can write an article at will. In this way, we can use templates to generate pages according to our needs.

5. Modify template content and update site files

Open the body.dwt template file and modify the areas we need to modify. For example, we can replace the logo image or modify any non-editable area, or even add or delete editable areas, etc.

The following uses changing the logo to illustrate how the template updates the file.

We change the logo image to another image we like, and save the body.dwt file after completion. At this time, DW will pop up a window asking if the file needs to be updated. Select Update, and DW will automatically update all pages generated with this template. , DW will pop up the Update Pages window during the update. After completion, the update log will be given in the Update Pages window.

※If don't Update is selected, DW will directly keep the template file and not update the page temporarily, but we can manually update the page, just select ModifyàTemplatesàUpdate Pages….

At this time we open any page generated with body.dwt, such as body3.htm. You will find that the logo image has changed.

It is not difficult to find that using this function, we can easily solve the problem of site update. The template function is very powerful. This article only serves as a starting point. Many functions cannot be mentioned due to space issues. You need to try more so that you can fully use it. Get a taste of DW’s template style.

In DW, there is also a function called library, which can be organically combined with templates, which will make templates more powerful. If readers are interested, I am willing to offer this gift to everyone.