Dreamweaver - CS3

Lesson 46: Templates (1)

46/58 Lessons 

What are templates?

Templates are a special type of documents that you can design to have a fixed page layout, which you can use later as a layout for each page you make.

In a template, you work with two areas.
You have the locked area and you have the editable area.

In the locked area, you can only make changes to the template itself, not to pages that are based on this template.
And the editable area, you can make changes to the template and the pages based on this template.
If you make a change in the locked area of the template, this will be applied to each page based on this template.
And that’s the only reason we use templates.

Template

We can create a template in different ways.
We have the ability to create a template from a blank page, but it is much more practical, faster and easier to create a template from an existing page.

The first thing you do is open the page that you want to make a template.

In this example this is the page of the basis.html of bonzai site.

And actually this is more or less like the index page whose content has been removed.

The only thing I like about it are the menus, logo and the welcome title.

In the navigation bar, I first change it to “Home”, so that this is shown when “up” is displayed. In Lesson 49, I will tell you why.

Just click “Modify” in the menu bar and select “Navigation Bar” in the pop-up menu.

Select “Home” in the upper window, uncheck the box for the text “Show ‘Down Image’ initially” and click the “Browse” button to navigate to the page you want to link. In this case, this is the index page.

Ok, now my page looks like this.

To benefit from this html page to create a template, click the “File” button in the menu bar and choose “Save as template” in the drop-down menu.
This opens the “Save as template” dialog.

In the top box select the site where you want to make a template. Normally this will be the site where you are currently working,so this will be filled automatically.

In the middle box, other existing templates of this site are shown.

In the third box you enter an optional description and in the last section give you a name that you want to save this template as.

Click the “Save” button.

This gives you a warning window asking whether the links should be updated. Why does Dreamweaver do that?

Well because it saves the template in its own folder (templates) and the links to other pages as well as the links to the images should be adjusted so that they can be correctly displayed by the template.

Does this make sense?

So, click the “Yes” button.

As you can see, Dreamweaver will automatically create the “Templates” folder, containing the basis.dwt file.
A template always has the “.dwt” extension (it stands for DreamWeaver Template).

As you can see, the title is now converted to the template file basis.dwt from the basis.html.

When we try to connect we get message saying that our template does not contain editable regions.

Since I’m going to use this template with all pages, I need at least one editable region.

If I have to add all my pages to look like the template, that has little use, is it not?

For now, I click the OK button and in the next lesson I will be adding these editable regions.

Awesome!
You've completed Lesson 46
START NEXT LESSON