Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a base template

From: Dreamweaver CS3 Beyond the Basics

Video: Creating a base template

In this chapter we will explore Dreamweaver's template features. Taking advantage of Dreamweaver's templating abilities can speed up your development time and more importantly can take the pain out of making site-wide or region-wide changes to your site. Creating your Dreamweaver templates requires just two basic steps. First, we design the page that we want to serve as the basis for the template, and it can be as simple or as complex as you need it to be. Now second, you have to define editable regions inside your template. When working on template based pages all non-editable page elements will be locked down and you won't be able to change them. Changes to those regions must be made in the source template.

Creating a base template

In this chapter we will explore Dreamweaver's template features. Taking advantage of Dreamweaver's templating abilities can speed up your development time and more importantly can take the pain out of making site-wide or region-wide changes to your site. Creating your Dreamweaver templates requires just two basic steps. First, we design the page that we want to serve as the basis for the template, and it can be as simple or as complex as you need it to be. Now second, you have to define editable regions inside your template. When working on template based pages all non-editable page elements will be locked down and you won't be able to change them. Changes to those regions must be made in the source template.

So we want to make the process of editing our Cheek Chastain site and creating new pages a little bit easier. So I am going to go ahead and open up the index page. So as you are working along with us, we are in the Chapter 6 Exercise Files and we are opening up the index exercise file. I am just going to preview this in our browser. Usually you do this at the stage when you are laying the page out and designing it and you start looking for common elements and what might make good, base template region. So as I click around, I notice there are some areas of commonality. The navigation really doesn't change.

Now in the interior content, when we get into the subsection pages, not on the index page, we have a banner graphic right up here at the top, and then for the most part the sidebar changes as well. It's similar on some pages but on other pages the content changes, sometimes it's sub navigation, sometimes it's just different sections. So we see that we have that banner graphic that changes on each page, we have content area that changes, we have sidebar areas that change. So these are all things that probably need to be contained within an editable region. Our navigation, on the other hand, isn't changing.

Although, if we pay attention, something about our navigation is changing. Notice that every time we click on a page, the link for that page actually indicates the current page that we are on. So we may not need to change the navigation on each page but we certainly need something in a template that's going to be able to indicate the current page. So we will use an existing page that we already have to create our template structure. Looking at the News page, this one offers us a lot of possibilities. There's really not a lot of complex structuring in the news area and it's kind of empty, and we have the Upcoming Events, which repeats more often than not in most of the sidebars. So this one actually gives us a really good base for our templates, so we will use the News page.

So I will close out of Firefox and I will go back in the Dreamweaver. Now I will close the index page because it doesn't really make a good candidate for a template. The index page has some very unique content on it and it's probably something that we are going to have to create individually. So I will go ahead and close that, and I am going to open up the news.htm. This is the page that we are going to base our template off of. Okay, so creating a template is very simple. We just go up to File and choose Save As Template. Now when we do that, Dreamweaver prompts us and says Okay, we need to put a template into your site. You will notice that it would list any existing templates that we would have, which we don't have any right now.

I am just going to go ahead and name this template cheek_main to give it some identity. This is our main template. Dreamweaver will assign a .dwt extension file to this file. So it is a specific type of file. You can also go ahead and give it a description. So I will just say Gallery page main template. You can be as descriptive as you would like there. I am going to go ahead and save, and it's going to ask me if I want to update links. I am going to go ahead and say Yes, and that's very important and we can find the reason why when we look over at our site panels. Notice that there is a Templates folder over there now, it wasn't there before, and Dreamweaver placed that right on the root. As I expand this folder out, you can see that there is our new cheek_main.dwt.

Now if we look at our file itself, up at the top it says <