Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.
In this movie we will continue to create the nested template we began in our last exercise. Make sure if you are following along that the aimee.htm file is still open from the previous exercise. Now often when creating a series of pages like our biographies, you are going to find yourself changing the same information over and over and over again, and in this case for each artist. To make the process of creating those pages based off of our nested template easier, we will use template parameters and template expressions to do a lot of the work for us. Before we can do that, we need to save this as a nested template, because right now it's still a HTML page.
So let's go to file and you want to scroll down and find Save As Template. I am going to save this as a template, so this is going to be our third template. Since it's going to be based off of the cheek_artist template, I am actually going to call it cheek_artist_bios and I am just going to call this my biography artist template. That's going to pass along information that's used to build our bio pages. So we'll hit Save. It's going to ask me if I want to Update Links and I am going to say yes.
So now this is another template. You can see up top it says cheek_artist_bios.dwt, but it's based off of the earlier cheek_artist template. So if I update the cheek_artist template, the locked regions here will update into this template, which will in turn propagate down to any pages based off of this, which is exactly what we are wanting. Now we still need to define some editable regions here, because we have got areas of the page that are going to change. So I am going to highlight the artist's name, in this case Aimee Hutchins, and I am going to go to Insert > Template Objects > Editable Region and we will call this one, Artist Name. Now, notice what happened when I did that. We have got an editable region here called Aimee Hutchins, it's the artist's name one, and now the artist info tag that used to be sort of that teal color is now kind of a yellow color.
If you are kind of wondering where this color scheme is coming from or what any of this stuff means, you can go up to your Preferences. So on the Mac go up to Dreamweaver > Preferences, on the PC you go to Edit > Preferences, and you want to take a look at the Highlighting category. You can see that we have a list of areas and different colors that will be used to highlight those. So editable regions are that teal color and then nested editable regions come in as a yellow color. If you want to change the color scheme, go right ahead, but if you are working in a collaborative environment, make sure that everybody is on the same page as to what color means what, because if yellow means one thing to you and something to somebody else, then it can really get confusing. So I'll go ahead and click OK.
So Artist Info is a nested editable region, and it has the Artist Name editable region inside of that. Let's keep going. Start from the T, this is where I will make some text up, start from the T and not the image, and select all the way down to select all of the bio information. Now don't select the link Aimee's Gallery. Let's not select that. Let's leave it unselected and we will talk about why we are not going to make it a part of our editable region here in just a moment. So let's go to Insert > Template Objects > Editable Region and we are going to call this editable region Artist Info. So now we have the Artist Name and the Artist Info and that's going to need to change every single time we do a bio page.
Now one thing that you will notice that I haven't changed yet, I didn't change the banner graphic, we didn't change the headshot, and we didn't change the length of the gallery. That's because we are going to take advantage of something called a template parameter. Now a template parameter can either be created by Dreamweaver when you do something like an editable attribute or you can create them yourselves. So you can create your own custom template parameters and then use them to modify objects or items on the page. Before we create our own, let's actually go back and look at a template parameter, and a template parameter being used.
I am going to go ahead and open up the cheek_main.dwt and when I open that up-- I am going to switch over to Code View. I'll scroll up to the head of the document and there's a lot of Template Code up here in this head. I just want to focus around line number 9, right here. Let me go and highlight this. We have a template parameter tag here; you can see it starts out with a comment and it says TemplateParam name ="banner image" type="URL" and then it gives it a value. Now that's the editable attribute that we put on the banner graphic.
So Dreamweaver automatically created this parameter because it's something we can change on each of those pages. So when we go and base our page off of this, we can change this value anytime we want to. And you are not locked into just using the template parameters that Dreamweaver can create for you. You can create your own. So what we are going to do-- I am going to go ahead and close this template and I am not going to save any changes that I might have made. We are actually going to create a template parameter that identifies the artist for that particular page of bios. We can then propagate that information into the name of the graphic, the links, name of the banner graphic, and speed up and automate that process.
So we will switch over to Code View, and I'll just click on Code View. And if your Code View screen isn't towards the top of the page, you want to scroll up into this head content and in the head content around line 9 or so, you are going to see a couple of template tags already up there. The one of the ones I want you to focus on is Instance parameter name and that's a template parameter, but it's an Instance parameter, meaning it's a parameter only here inside this client. Notice the name is Artist List, the type is Boolean and the value is false. Well, that's our Optional Area and we don't want to modify that.
So I am going to place the cursor right before the InstanceEndEditable, right before the Instance parameter name tag, and I am going to create a blank line. I would like to put my template parameters on their own line. It sort of makes them easier to find and edit. So we begin a template parameter by typing in an HTML comment. So if you are not familiar with that, it has the exclamation point with the two dashes. And then we will do a space and we define it by typing in TemplateParam, and it's a capital T and a capital P. As soon as you type it in, your syntax coding should kick in and it should turn green, indicating a template tag.
There are three attributes to a template parameter you must include: a name, a template parameter type, and then if you have that particular template parameter, a value. We are going to type in name="currentArtist" and that's going to be all one word and that is the actual name of the template parameter. So when we tell it we want to change this in the client pages, this is the template parameter that will change. Next I'm going to do type. Now, your template parameter types, you have already seen those, because if you remember when we were defining an editable attribute, that's also a template parameter and we could use between Text and URL and Boolean value. So we are going to choose Text. So I am just going to type in Text to assign it a text value. After that we need to do the value attribute. The value for this particular page will be Aimee. I am going to end my template parameter the same way you would end an HTML comment, two dashes and then close that out.
So the template parameter only requires that one tag. You pass in the TemplateParam value and you give it a name, type of parameter that you are going to use, and then a value for that specific parameter. Now, we can change that template parameter on all the pages based off of this, which means that we can use that parameter and pass that into our page using template expressions. Now that we have created the template parameter, our next task will be to create template expressions to take advantage of these parameters on the client pages.
Find answers to the most frequently asked questions about Dreamweaver CS3 Beyond the Basics.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.