Dreamweaver Templates

Name: Dreamweaver Templates
Author: Patti Scully-Lane

The Template feature is helpful in Dreamweaver because it allows you to create a “shell” or layout that is consistent across all of your pages. You can then…

Preview the first lesson free — get full access to all 4 lessons.

Request a demo Sign in

Course: On-Demand

In this lesson, you are going to learn how to make a template from a layout in Adobe Dreamweaver. Before we get started, we do have to set up a site because the template feature will only work if you are working within a site. So we're gonna go the site menu, to new site, and we're gonna name this "module five templates", and we're gonna click on this folder icon. Now I have saved the module five lesson files out to my desktop. You're gonna navigate to wherever it is you saved the module five templates folder from the lesson files folder in module five. Now, if you are unfamiliar with working with sites in Dreamweaver, you can go back to module one of this intermediate Dreamweaver course and watch managing sites in Dreamweaver for more information. We're going to click on the save button. And over here in our files panel we have all of the information for our website. And we have some individual pages in here. And if I click on my index page, I can see that I have a layout to my pages. If we click on our hikes page, I can see I have a similar layout here as well. Now, the way that this site was created was using individual pages. And so what that means is, say I need to change the name of a link, or maybe some information down at the bottom of my page. Well, if I do that, the way that I have set this up with individual pages means that I have to make that change on each one of the individual pages of my site. And so that's where the template feature in Dreamweaver comes into play, because the template feature allows you to create a shell. And that shell contains the information that is consistent across all of your pages. And then you make editable areas of your page, and only those areas can be updated by the user. And that way, if you need to make a change to the shell, when you do it will update the shell of all of the pages that were built based on that template. So it's a great feature to help you make changes to content globally. I'm gonna close out of both of these files, and we're gonna go over to the files panel, to design.HTML. So here is that shell. And we don't have any text content and we do have a graphic here, but we're gonna use this just right now as a placeholder graphic. The first thing that you need to do with a template is save that template. So we're gonna go to the file menu. Now, there are two ways to save a template in Dreamweaver. The first way is to go down to the save as template menu. This is the preferable way to do it. And the reason for it is we get this dialogue box, save as template, and it asks us what site we would like to associate this template with. So I'm just going to name this "design_template" and we're gonna save. Now, this is the crucial part. It asks us if we want to update our links. We always want to say yes when working with templates. And so if we look over here in our files panel, we now have a new folder in our site folder, and that's the templates folder. So Dreamweaver automatically created a templates folder and saved our design_template in there. Now you'll notice that this has a different extension, this no longer has the HTML extension. It has a DWT, that stands for Dreamweaver template. This is a feature that will only work within Dreamweaver. If you have people who are within your workflow who do not work in Dreamweaver, this could potentially cause problems with editing of your pages. So this has to be done strictly within Dreamweaver. If we go back over here and we open up that design.HTML again, the second way to save something as a template is to go to the file menu, to save as, and choose from the save as type, template file. Now, the thing about this is that if we click on that save button, it doesn't ask us about links. It doesn't put it by default into that template's folder either. So it really doesn't associate this template with the site. It saves it in the site, but it doesn't associate it as a template file. So just so that we don't get confused, we're gonna go to right click on that design.DWT, edit that and delete it. And yes, we really do want to delete that folder, and we can close it out here and just click okay. So when you work with Dreamweaver templates, the first thing that you have to do is save a template and associate that template with the site by having Dreamweaver automatically put it into the templates folder and the design underscore template as a DWT file. So in this lesson, you learned how to save an HTML document as a template in Adobe Dreamweaver.

Intermediate Provider : Patti Scully-Lane 4 Lessons · 26m in Arabic, German, English, Spanish, French, Portuguese, Urdu, Chinese

Course Description

The Template feature is helpful in Dreamweaver because it allows you to create a “shell” or layout that is consistent across all of your pages. You can then make editable areas on your pages so only those areas can be updated by the users. Templates allow easy changes to content globally. If you need to make changes to the “shell,” it will make updates to all the pages based on that Template.

What You'll Learn

Recognize the benefits of using a Template in Dreamweaver
Save an HTML document as a Template
Add editable areas to a Template
Create a new page based on a Template
Make changes to a Template and update all pages built from it

Key Takeaways

Dreamweaver's Template feature lets you create a consistent shell or layout across all of your pages.
Editable areas can be defined on a Template so users can only update those specific areas.
Templates allow easy changes to content globally across pages.
Changes made to the Template's shell are applied to all pages based on that Template.

Frequently Asked Questions

What does this Dreamweaver Templates course cover?

It covers recognizing the benefits of using a Template, saving an HTML document as a Template, adding editable areas, creating a new page based on a Template, and making changes to and updating a Template.

What is a Template in Dreamweaver?

A Template is a shell or layout that stays consistent across all of your pages, with editable areas that allow only those areas to be updated by users.

How do Templates help with making changes across many pages?

Templates allow easy changes to content globally; if you change the shell, it updates all the pages based on that Template.

What lessons are included in this course?

The lessons are: Make a Template From a Layout, Add Editable Areas in a Template, Create a New Page off of a Template, and Make Changes to a Template and Update Pages.

What skills does this course relate to?

It relates to Adobe Dreamweaver, Template Engine, Template Toolkits, Templates, Web Template Systems, and Windows Template Libraries.