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.
Create a template, and a mini web site consisting of 5 or more pages based on the template.
- Create a new folder called "templateExercise" in your root folder. Dowload this zip file; it contains a folder with six images that we will use in this exercise: start.jpg, barker.jpg, clarke.jpg, cort.jpg, and cuyahoga.jpg.
You need to have a site set up in Dreamweaver in order to create templates. For purposes of this exercise, the root folder you created for this class should work fine. Otherwise it's best to create a new root folder and set up a new site in Dreamweaver.
- Launch Dreamweaver and create a new html page.
- Before you add any content choose Save as Template (save it into your main root folder). 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, 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
<!-- TemplateBeginEditable name="picture" -->. 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:
<style type="text/css">
<!--
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.
- FTP the "templateExercise" folder AND the "Templates"
folder to your server space. Update your home page so that there is a "Templates"
link and that it points to the index page you created
from the template.
