Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Templates Exercise

VCB328 Advanced Web Design

Exercise: Templates

Templates are a useful tool when building large, multi-page sites. Dreamweaver allows you to create a template page (much like a "master page" in Quark or InDesign), which can be used as the basis for any number of pagesin the site. If a part of the template page is changed, all of the pages based on the template will be updated automatically. This is very useful if say, you want to add a link to every page on a site; instead of opening and updating each page individually, you need only make the change once.

Exercise

Create a template, and a mini web site consisting of 5 or more pages based on the template.

Procedure

Create a new folder called "templateExercise." Inside that folder put a copy of banner.jpg and the following pictures: start.jpg, barker.jpg, clarke.jpg, cort.jpg, and cuyahoga.jpg.
Launch Dreamweaver.
Under Site choose New Site. Give the site a name ("Template Exercise") and choose the "templateExercise" folder for the local root folder. Dreamweaver requires a site be created/specified in order to make templates (you can use an existing site rather than create a new one).
Before you add any content choose Save as Template. Name the file "freighterTemplate." You'll note that Dreamweaver will create a folder called "Templates" in your root folder. You will also note that the template file name now ends in ".dwt" (for "DeamWeaver Template").
Now it's time to add some content. First, we'll add the elements that won't change. In this case, we'll begin with the banner. Look in your Files window and locate the file called banner.jpg. Drag it onto your page. Around the <img> tag put a set of <div> tags. In the first <div> tag write id="banner"
Below the banner create an unordered list with the following items:

Home
Barker
Clarke
Cort
Cuyahoga

As with the banner, surround the list with another set of <div> tags. Give these the id name "navigation." Don't worry about linking these yet, we'll do that later.

Below the list add another set of <div> tags with an id of "footer." Inside the <div> tags put <p>Copyright 2007 Your name</p>
Now we need to create a couple of "editable regions." These are the parts that will change from page to page. To do this, first to into your code and place your cursor (click)somewhere after the end of the list <div> and before the footer <div>.
Choose Insert > Template Objects > Editable Region. In the dialog box that follows give it the name "picture." You should see a little blue box with "picture" written on it appear. below that you should see white box that also says "picture." Highlight the text in this lower box and delete it. Then find the "start.jpg" image in your Files window and drag it into that box.

Look in your code. Note how the <img> tag is surrounded by a tag that says
. This is how Dreamweaver sets off editable regions within a template.

We need to put a set of <div> tags around the <img> tag as well, but these should go outside the editable region. In the opening <div> tag write id="boatPic".
Go back to your code. Click somewhere after the </div> tag you just created and before the footer. Create a new editable region (as above), but call this one "pageText."
We need some Greeking (dummy copy) for the text area. Go to http://www.lipsum.com/ and generate 5 paragraphs of lorem ipsum text. Highlight and copy the first paragraph and paste it into your template where it says "pageText."
As we did with the picture, surround the "pageText" editable region with a set of <div> tags. Give these the id name "bodyCopy."

At this point we are ready to create our html pages based on the template. Be aware that the template isn't finished yet—we'll come back to it a bit later—but it's finished enough to start generating pages based on it.

Choose File to New. In the dialog box that appears, at the very top you will see two buttons: General | Templates. Click on the one that says Templates. In the next window that opens you will see a list of your sites (you may have just the one, that's okay); choose your class site, if it is not already selected, and look in the middle column—you should see your template listed there with a little thumbnail image of it. Click Create.
A new html document will open that looks identical to your template. However, you will note that all of the content (and code) is locked—except for the editable regions. These are the areas that change from page to page. Save this page into your exercise folder as index.html.
Now change the picture to barker.jpg. In the content area, paste the second lorem ipsum paragraph that you generated earlier. Choose File > Save As and name this page barker.html.
Change the picture and text 3 more times, so that you end up with 5 total pages.
Go back to your template and one at a time, highlight each of your links and point it to the corresponding page you have created (Barker should point to barker.html, Home should point to index.html, etc.). When you go to save, Dreamweaver will ask you if you want to update all of the pages based on the template. You should say Yes.
Test your pages: open one of your pages in a browser (not the template) and try the links—make sure they all work. Also make sure that each page is different, and features the correct ship.

Bonus: The pages as we created are pretty dull at the moment. However, you can add CSS to the template page and they will be applied to all of the "child" pages automatically. Try adding the following styles:

<!--

body {
width: 750px;
margin: 0px;
padding: 0px;
}

#banner {
margin-bottom: 1em;
}

#navigation {
float: left;
width: 120px;
}

#boatPic {
margin-left: 120px;
}

#bodyCopy {
margin-left: 120px;
}

-->

</style>

Add your own styles. Make the pages pretty.

Course Outline

Syllabus

Student Resources