Dreamweaver Templates, Easy substitute for SSI

[aussiemcgr]

One main thing people want to know about is how to make their footer, headers, menus, or whatever to be the same on each page of your website. The basic way would be copying and pasting code, but it proves to be a problem as soon as you need to edit a feature of the code and now you need to edit each page of your website to show the change. One of the most common ways would be to use SSI (server-side include), however the visual display in Dreamweaver just doesn't seem to like it too much. So what can we do to help us meet our goal while using Dreamweaver? Well, Dreamweaver has incorporated a useful tool to help you do this very easily. This tool is the Dreamweaver Templates (.dwt). So, lets get started.

(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.

[Peeki]

nice tutorial, dreamweaver is pricey for me though,

[IamShipon1988]

The only difference to dream weaver I see compared to other software is the WYSIWYG feature. You can live edit your work. But I think there are many free editors out there now that can do basically the same thing. I would personally recommend that once you get upto the level of understanding what coding is, to just use softwares like notePAD, oxygenXML, or Programmers Notepad +. I use Dreamweaver because of the nice interface. But it's kinda useless for me to upgrade since I only use the code view and create everything from scratch. (I got DreamWeaver when I bought the Photoshop and Fireworks package for the office)

It's a decent tutorial. The only thing I got out of this was how to select a pre-made template which is kind of simple since the option is right in your face every time you open up the software. Perhaps if you teach how to export a template from Photoshop or Fireworks and import (and edit) in DreamWeaver, would be a better tutorial to read.

[r4nintendods]

dreamweaver is a good web template tool...