How to Create a Template for a Web Page With Dreamweaver

Templates are especially useful when you want the same basic elements - such as logos, navigation bars and copyright information - on each page in your Web site. You can use templates to specify background colors, font sizes, and other common settings, saving you a lot of work designing each individual page. You can also define editable areas (everything is non editable by default) so that people using your layout won't make a mess of it by accident.

Creating a New Template

Start Dreamweaver and open a blank template page using File -> New -> Html Template
Insert the content you wish to appear on each page, including header, footer, links, images, background colors and font styles.
You can create editable areas in the template using "Insert -> Template -> Editable Area
When finished, click on the File menu and choose Save As Template. Type the name of the template and make sure it ends in .dwt.

Add Editable Areas

From the Dreamweaver menu select "Insert -> Templates -> Editable Area".

A box will come up and allow you to name the area and give it a description. Give it a good name that helps the user, like "Enter Body Content Here".

That's about all there is to it.

Sample Project

Start a new project. This shold be in its own folder which we will call "project4". Create the folder on the remote server and configure your Dreamweaver FTP setting to attach to it by settting the options for the new site, as we did before.

Create a new blank html template as described above, and call it "My Template.dwt". Note that the filename ends with .dwt (Dream Weaver Template) not .html.

In this document create a table with one column and three cells, called header, content, and footer.

Set the cell sizes and colors as follows:

header 600x150, color black, using <td width-600 height=150 color=black>
content 600x400, background color off-white <td width-600 height=400 color=#ffffcc>
footer 600x100, background color light blue <td width-600 height=1500 color=#3399ff>

In the header area, create a big header (h1) that says "My Template" and an h5 title below that that says "CAOT 112 - Instructor Jim Pickrell". Set the color of the text to white. You will have to do this because the background is black. Use <font color=white>xxxxxx</font>. Then center the titles.

In the footer area, create a big header (h2) that says "by Joe Student" (subsitute your own name) and center it.

Now click on the space in the "content" area, and select "Insert -> Template Objects -> Editable Area" . Call this area "Add your content here".

Have a look at the html code for this page. You should have a table section that looks something like this:

<table>
	<tr>
		<td width=600 height=150 bgcolor="#000000">
			<h1 align="center"><font color=white>My Template</font></h1>
			<h5 align="center"><font color=white>CAOT 112 - Instructor Jim Pickrell</font></h5>
		</td>
	</tr>
	<tr>
		<td width=600 height=400 bgcolor="#FFFFCC">
			<!-- TemplateBeginEditable name="Enter Content Here" -->
   		Enter Content Here
   		<!-- TemplateEndEditable -->
		</td>
	</tr>
	<tr>
		<td width=600 height=100 bgcolor="#3399FF" >
			<div align="center"><h2>by Joe Student</h2></div>
		</td>
	</tr>
</table

I have cleaned this up a little bit by indenting the tags. This makes it easier to read and lets us see where the tags start and end.

You can view your page in the web browser just the same as a web page, by clicking on Dreamweaver's earth button, then choose which browser you want to use.

Click here to see what my template looks like in html form. If you look at it in a web browser obviously you can't edit anything but you can view source and see exactly what the file looks like.

Be sure to save your file and make sure the name ends in .dwt (Dream Weaver Template).

Your template is now ready.

Using Your New Template

Select "File -> New Page -> From Template". A new page will be started.

Enter some text in the text area. You can use all the usual HTML tags.

Notice that the areas that are not tagged as editable, cannot be edited. When you move the mouse over these areas in Dreamweaver, the cursor changes to a circle with a slash to indicate that nothing can be changed.

Now save your new page as "templatetest.html".

View the page in a browser and see what it looks like. View the source and compare to what you typed. Do you see any differences?

Be sure to upload your project to the server.

Assignment

We will create a five page website using a template that we will design from scratch.

Create a template for a website with four areas: header, menu, content, and footer. Every page will have the same header, horizontal menu, and footer but different picture(s) and text. The horizontal menu will link to the five pages.The content area should be editable. Since we don't currently have photoshop it will be a challenge to make a nice header graphic bus see what you can do.

Once you have a nice working template, create five different pages using this template. Include some pictures and text. The topic be something about Egypt. I will provide pictures that you can use.

Here are some Africa pictures you can use: https://picasaweb.google.com/jim.pickrell/AfricaPictures#

Here are some pictures of Egypt: https://picasaweb.google.com/jim.pickrell/Egypt2011