Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Templates in action

From: Dreamweaver CS3 Essential Training

Video: Templates in action

In this chapter, we're going to take a look at {italic}Dreamweaver{plain} templates and library items, which can both be a very big help, especially if we're working with a very large site. Two of the biggest challenges web designers face are making pages look consistent, and updating changes throughout an entire site. Templates and library items can help you meet both of these challenges successfully, because they make it easy to create consistent-looking pages and page elements, as well as automatically update multiple pages when changes are required. At first glance, templates and library items might look like they're very similar in the way they're used and applied. But templates are used for entire page designs.

Templates in action

In this chapter, we're going to take a look at {italic}Dreamweaver{plain} templates and library items, which can both be a very big help, especially if we're working with a very large site. Two of the biggest challenges web designers face are making pages look consistent, and updating changes throughout an entire site. Templates and library items can help you meet both of these challenges successfully, because they make it easy to create consistent-looking pages and page elements, as well as automatically update multiple pages when changes are required. At first glance, templates and library items might look like they're very similar in the way they're used and applied. But templates are used for entire page designs.

They can lack colors, fonts, Cascading Style Sheets, tables, images and even behaviors, while leaving other parts of the document editable. Once you create a template, you can create as many new pages based off that template as you need. Library items are useful for page design elements, like a navigation bar, or a copyright notice, that needs to appear on all or most of your pages. Library items are little pieces of HTML, text, or images, that you can drop anywhere on a page, whether it's template- based or not, and save yourself the time from having to create all these items by hand on each page. We'll be covering both templates and library items on this chapter.

Let's start by taking a look at templates. Probably the best way to understand templates is to see them in action. I've already defined the teacloud 16 folder. I copied the 16_templates_library folder to my desktop. If you have access the exercise files, you can do the same. In my Files panel, you might notice that we have a Library folder and a Templates folder. {italic}Dreamweaver {plain}automatically creates these folders when you create a template, or a library item. If you don't use templates or library items, {italic}Dreamweaver{plain} won't put these folders into your directory structure. Also, the Templates and Library folders don't need to be uploaded to your server when you publish it to the web, unless you're working with another web designer who needs them. Otherwise, they are for {italic}Dreamweaver {plain}use only, and they only need to stay here locally on your computer.

Okay, in here I'm going to open up the file abouttea.html. This looks like several of the other pages we worked with so far. But you can tell this page has been created based off of a template for several reasons, which we'll be getting to shortly. Several other of the pages of my site have also been created from the same template. For instance, if I look inside the abouttea folder, we have fromthefields, we have teatypes, and you can see that each one of these looks very similar. The only real difference is what comes after the About Tea, and the actual page content down here. Let's just work with one file now. I'm just going to close everything, except abouttea.html.

When you open up a file with a template attached to it, you'll see a tab in the upper right hand corner identifying the name of the template. In this case, the template is called abouttea. You'll see tabs around each of the templates' editable regions. Notice that when I place my mouse over any other area of the page, I get that "no" symbol. I come into one of these editable areas, I get a cursor, and I can come here and start working with the text there, and up here. Everywhere else on my page is completely off limits. I can't click these images at the top to select them, or any of the text over here. I can't click the logo, or anywhere else on my page, outside of these editable regions.

That's one of the strengths of working with templates. You can decide which portions of the page are editable. You don't have to worry about accidentally changing other parts of the page. If I go over to my Assets panel, and I come down here, and select the Templates icon, you'll see a list of all the templates in your site. I'm just going to make that bigger. You can scroll through here, and actually see the template. Let's say I want to change my template. Instead of About Tea, I want this to say About Teacloud Tea. What I need to do, is come over to my Assets panel, find the template I'm using on this page, and double click it.

I've opened the template. Notice at the top here it says <