(This tutorial using CS4 and assumes you have already made your local site folder and your index page)
When you open Dreamweaver, you get the following layout.
For this tutorial, we will use one of the preset designs Dreamweaver provides us with. It is very low-grade, but it works fine for what we are doing. I have edited the design and saved it as my index already. So, go to your files panel on the right sidebar. It will look like the below item. Find your index, and open it.
Once again, my design is very weak, but it will work fine for what we are doing. As you can see; I have a header, footer, Spry Menu, and content sections. Now we have to decide which sections of the website is going to be altered on each page, and what sections will stay the same. For what we are trying to do, only the content sections are going to change on each page.
Once you have an idea of what will change, we can begin to make our template. Go to File -> Save as Template.... You will get the following dialog box. The site should be correct, there should be no templates in the list (ignore the one I have there), the description should be blank, and the Save as box should have the name of the file you are saving; in this case, it is index. Give the template a description if you want to, give it a separate name if you want to, and press Save. You will be asked if you want to update the links, press Yes. Dreamweaver creates a Template folder in your local site folder and places the template inside.
The file you are on is now named: index.dwt. Now we have to decide what sections of the template are going to be editable on each page. For this, only our content area is editable. So, click on either the divider holding the content, or highlight everything in the divider. Make sure the area that is going to be editable is fully selected. Now we make this an editable region. To do this, go to Insert -> Template Objects -> Editable Region (or use the hotkey combination: Ctrl+Alt+V). You will get a dialog box, wanting you to name the region. Lets call it Content. A little label above the section appears with the name you gave it. Now save the template by using the hotkey: Ctrl+S. And the template is created! The template is shown below.
Almost done. We now have to recreate the index page of your site, but this is very simple. You will use this same method to create each page of your website. Go to File -> New. You will get the New Document creation wizard. Find the tab labeled Page from Template. Locate your site in the adjoining menu, and locate your template in the next adjoining menu. Click on the template name and a picture of it will display by its side. Before we press the Create button, make sure the Update page when template changes box is checked. Now you can press the Create button.
You now have a new document that looks exactly like your template. Save this as index if this is your homepage, or whatever is appropriate if this is not your homepage. It will ask if you want to overwrite the other index page, press Yes. Move your mouse around the screen, and you will notice that you can only press inside the locations of the page that you specified as editable. Now, just for fun, lets look at the code. Most of the code is grayed out, with the exception of the code that is editable. Notice comments have been added before and after your editable regions. These comments say: <!-- InstanceBeginEditable name="Content" --> and <!-- InstanceEndEditable -->. These comments tell you what areas are editable. You can try highlighting and changing the code of the non editable sections, but it will simply not change.
Depending on how you prefer to edit your pages, you can change information in the tagged sections of your Design View or you can edit in the non grayed out areas of code view. Edit the section(s) in any ways that are appropriate.
Hmm, we should probably change the Header of our pages because the word Header just simply doesnt do it. This is where using the template becomes helpful. Go back to your template file. I'm going to change the header to Dreamweaver CS4 Rocks!!. Highlight the header and make the necessary changes.
Save the template by using the hotkey: Ctrl+S. Dreamweaver now displays a dialog box, asking you what files to update. It will only display files that use the template you edited. Select all the files and press Update. You will then get a dialog box telling you alot of things that we really dont have to worry about. Just press Close.
Now view your index.html file. You will notice that everything we changed in the template has been changed aswell. If your index file was open when you edited the template, you will have to save your index file by pressing the hotkeys: Ctrl+S.
That is all there is to it. Now to make large scale changes to your website, such as the header, footer, menu, whatever, you can simply do it in the template and update all your pages instantly. Remember to make sure the Update page when template changes box has been checked every time you create a page based on the temple.
If you have any questions or if something is unclear, please respond and I will assist you. This is my first tutorial so I am bound to have left something unclear.