Setting up Templates in Dreamweaver

Do you set up a web page and then do the ol’ “save as” trick to make your other pages look the same? That works alright at first, but then, you realize that you made a little mistake, or maybe you just want to adjust the color a bit or update a link. That’s when it becomes horribly tedious right? Going back through every page and having to adjust each detail is a miserable thing.

Well, there is an easier way– templates. Even if you don’t feel comfortable setting up external CSS style sheets you can still use templates. Using a template allows you to set up all of the elements that you would like to remain the same on all of your pages in one place, and just have your other pages reference the template. It makes it so that when an adjustment is needed you only have to do it on the template page and not each individual page.

So lets make a simple website using a template:

Make a folder. It can be anywhere and be called anything. This is just going to be the folder that we keep all of our website files in. I made one on my desktop and called it “mySite”.

Open Dreamweaver.

If options pop up choose new HTML, and for layout choose none. There is an option here for a new template. The reason I am saying to choose html rather than the template option is because you cannot preview a template in a browser. So if you would like to preview your template while you make it, it is better to make it first as an html document rather than as a template.

If no options pop up then go to File>New then choose HTML, and for layout choose none.

Over on the right hand side of your screen there should be an area near the bottom that says files. There will either be one pull down picker or two. If there is only one then next to it, it will say, “manage sites.” If there are two pull down pickers click on the first one and at the bottom of it, it will say “manage sites”

Either way, click on Manage Sites.

A dialog box will appear. You can click the advanced tab. The only thing that we really care about for the purpose of this tutorial is setting it so that the folder we just made is our root folder.

Give your site a name. My sites name is MySite.

Set the local root folder to be the folder that you made at the beginning of this tutorial. You can use the little folder icon to browse for your folder if that makes it easier to find for you. Press okay.

Go to File>Save As> and save your blank html page to this folder. I called mine template but you can call yours whatever you would like.

Now back to your html page. Below your page you should see a properties tool bar. If you don’t see it go to Window> Workspace layout>Default. On that properties bar you should see a button that says “Page Properties”.

Click “Page Properties” a dialog box will appear. Fill in any colors or fonts that you would like to be consistent throughout your site. This is what I filled in:

Click okay.

Now let’s insert a quick table into our page.

To go Insert>Table choose row 4 columns 1 and 600 pixels for the width. Press okay.

on your html page there should now be a very short and squat table. You can select the whole table and stretch it down to give your self some more space.

Click inside of the topmost cell. Using the properties inspector set the background to black and choose heading1 type out a name for your website. You can center the words using the center type button.

Click on second cell from the top. Using the properties inspector click on the split cell button.

Split this cell into three columns. Into the first cell type “Home” into the next type “About” and into the last type “Links” This will become our navigation. I centered the text using the center button again.

Now let’s make a footer.

Click on the very bottom cell, set the background to black and choose heading 2. Type in some whatever you would like your footer to say.

Now let’s make a content area. Click on the blank cell that is right above the footer. In this cell let’s put another table. (this isn’t the best practice for web design but for the purpose of this tutorial it will do)

Go to insert>Table> for this table I choose to use 2 columns and 1 row.

In the left side of the new table add some text and in the right side add a picture. To make adding the picture easier you might want to find one on your computer somewhere and save a copy of it to the folder that you are working out of. It will appear in your right hand side bar under files and you can just drag it into your html document from there.

Okay, let’s pretend that this is pretty much the layout that you want for your site. You tested it in a browser and you would like pages to be like this. Maybe you want the text to be different and the picture to change but you like the rest. We are now going to convert this into a template.

Go to File>Save as Template.

A dialog box will pop up. Choose the site (the one that you defined in the first steps of this tutorial) and choose a name for your template. Press okay.

Yeah! We made a template. Now lets try using it.

Go to File>New… and choose HTML, layout none.

Do this three times and save the pages as “Home”, “About”, and “Links”. Make sure that you are saving in the site folder that you defined earlier.

Click on one of your pages. Go to Modify> Attach Template and choose the template that you just created.

Now every page that you have should look exactly like your template page.

But you might notice something that is a bit annoying. It isn’t letting you select anything on your page. This is useless you may be thinking. Who wants a site that nothing can be changed on. Well don’t you worry. What we need to do now is to go back to our template and tell it exactly what areas it needs to allow to be editable.

Click on your template file. Make sure that you click on the actual template file. It’s file extension will be .dwt

If you click on the html file you used to make the template then none of this is going to work. You can actually just delete that file now if you would like.

Click on the third cell down from the top in the main table. Make sure that the cell is selected– you can command click to select the cell if it is being difficult. Make sure that you are clicking on the cell that holds the smaller table, not a cell of the smaller table. The cell should turn red.

With the cell selected go to Insert> Template Objects> Editable Region. You can also right click/command click and select Template> New Editable Region if you prefer.

A dialog box will pop up. You can name the region or just press okay to keep the defaults. Save your file. Dreamweaver will ask you if you want to update the files that use the template. Click yes.

Go back to your Home page. Now you will notice that there is a thin blue box where that cell used to be. You will also notice that you can select and change everything in this box. Try deleting out the table with the text and monkey and typing something else in.

The page will always begin looking the exact same way as the template page but you can adjust anything on the page that is in an editable region. It will only change on that single page.

If you want to adjust every page you can go back to your template. Trying going back to the template and setting up your navigation to have links to all of the appropriate pages. When you save your template you will notice that those links now work on every page that you template is applied to.

You can set tables, table cells, or divs as editable regions.

If you want to make your colors and fonts editable without having to open up template file every time, you can select all of your styles that are in the code part of your template page (everything that is written between <style> and </style> and go to Text>CSS Styles> Move CSS Rules.

When the box shows up choose “new style sheet”, name your style sheet and save it to your root file. Make sure that you attach your template to your style sheet. (Under Text> CSS styles> attach style sheet.

If you decide in the end that on a particular page you want to edit outside of the bounds that your template allows you can go to Modify>Templates>Detach from Template. Once the page has been detached though, it will no longer reflect any of the changes you made to your main template so I would advise waiting as long as possible before detaching any page from your template.

Well that about sums up templates. I hope that you find them useful and that they save you hours upon hours of unnecessary work.

On a completely unrelated note. I need a new razor. Desperately. Feel free to send me one.

Share and Enjoy: