If you’ve made it this far, you’ve most likely already completed my first step in this tutorial called Preparing a website in Adobe Dreamweaver. If not, I’d suggest hopping over and following the steps, it should only take a few minutes and will get you ready for the next part. So far, you should have created a Site in Dreamweaver, opened your Files tab and made four new web pages each with a little bit of silly content in them. With luck if you open any one of the pages you’ll see different content depending upon which one you open.

Now this is important so please read this part … building web pages is not about designing web pages. The two are very different subjects and we’ll get to the design a little later but for now, let’s keep your View in Design (View > Design in the menu) and focus on making our website technically accurate. Once that’s done, we can make it really cool.

In Adobe Dreamweaver we can create short cut files called Templates which allow us to store the common aspects of multiple pages in a single file. These common files most often include the header and footer areas as well as common side bars of a website which allows us to address some of the most basic principles of website design.

CRAP. Yes, I said it.

CRAP is a basic principle of design which breaks a creative project into four areas, my belief is that if your layout features all four it’s a good design but if it’s lacking any one of the four, it isn’t. CRAP stands for:

1. Contrast
2. Repetition
3. Alignment
4. Placement

Each of the lessons we cover in this series helps reinforce these four basic concepts, in this tutorial we’re talking about Repetition. Each web page in your website should have the same basic design and layout regardless of the page. We’re also addressing Placement by placing the correct content in the correct areas. Just wait, in lesson three we’re going to talk about the structural hierarchy of xHTML documentation publishing … very exciting.

Creating a Template in Adobe Dreamweaver

If we wanted to we could just add the header and footer HTML into each of our pages but that would lead to human error and sloppy coding, more importantly as the site grew it would mean that we had to change dozens or hundreds of pages instead of just a few. I’m too lazy to be faced with hundreds of updates every time I want to change a common element so instead we need to find an easier way and luckily with Dreamweaver it’s a pretty simple short cut.

thisismyurl.com/wp-content/uploads/2008/10/picture-4.png" rel="lightbox[roadtrip]">Under the File > New option you can create a Template by selecting Blank Template > HTML Template > <none> this will open a new window similar to the one we created in our last Tutorial but this time it’s a Template file. Saving the file will prompt us with a new dialog box which is going to prompt us for the name of our new Template. I’ll call mine Untitled-5 but you can name yours anything you’d like.

Once you’ve saved your Template you should notice a new folder in your Files panel called Templates. This is where your template files are stored, if you double click the folder you’ll see a new file with the extension .dwt, this is your template file.

Adding an Editable Region to your template

While Templates are amazing for duplicating you’re content across multiple pages, you’ll need to be careful so that you have the ability to have unique content on each page. By default a Template will apply itself over top of all your local content so we need to add an Editable Region.

Before we do this, I want you to type the following three words in your Template document, each word should be on a line by itself.

Header

Content

Footer

Now that we have these three key elements of the website design labeled, I want you to add an Editable Region by first selecting the word Content and then going to the menu item Insert > Template Objects > Editable Region. It will ask you to name your region, let’s call it Content to make thing easy. When you’re done this process the work Content should be surrounded by a blue outline with the title Content. Congratulations, you’ve just added an Editable Region to your template. Now, when we update the content across your website you’ll be able to instruct Dreamweaver where to put the content you previously entered.

Let’s save the Template file and close it now.

Applying your template to pages

A Template is great but useless if we don’t apply it to pages so that’s exactly what we need to do now.

Open about.html and select Modify > Templates > Apply Template to Page … so that we can apply the template file to your page. We need to select the template from the Templates list and click OK to continue. Next we’ll be asked where we want to put pre-existing content, this is the content we placed in lesson one and it’s important that you select the content and specify you that original content to appear in the proper area. If you named the Content area Content as I wrote, you should select that from the drop down box. Once you’ve done that, click OK and you’re done.

When you view your about.html file in Dreamweaver you should see a yellow line around the main text area and the words Header and Footer outside those areas. This yellow line represents your Editable Region in your Template object. Everything outside the yellow is stored in your template file and can not be edited while on this page.

Save your work and apply the same template to your three other files, when you’re done your website has a proper Dreamweaver Template file attached and you’ll be ready for lesson three, in which we’ll cover how to structure your HTML document.

This tutorial will be broken down into the following chapters, each published individually over the coming weeks.

1. Preparing a website in Adobe Dreamweaver
2. Building your first Dreamweaver Template file
3. Structuring your website with Adobe Dreamweaver
4. Improving the common elements in Dreamweaver
5. Placing page content in Adobe Dreamweaver
6. Hyper linking in Dreamweaver
7. Working with Images in Adobe Dreamweaver
8. Adding Cascading Style Sheets with Dreamweaver
9. Putting your website on a remote web server with Adobe Dreamweaver
10. Adding Google Analytics to your Dreamweaver Template