Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Now that we've created our root level artist template, it's time to create a nested template based off of our artist page. Before we do that, it might be helpful if we talk a little bit about what a nested template is. So what I am going to do is I am going to open up in our bios section of our exercise files, aimee.htm and this is Aimee Hutchins' bio page. Now, if I preview that in our browser, I can see that I have other bio pages of artists and there is a very similar format. So you always have the artist name, have their photo and you have a link to their gallery. On the right-hand side, we always have Bios and Galleries.
So, there is a lot of commonality with the artist template that we just built. You will notice also that each artist has a banner graphic that comes up when they are selected. So we could use the artist template to build these but in doing that, we would have to totally blow out the content in the middle and replace it each time and there is a lot similarities here because notice, you have the title of the artists, you have their banner graphic, you have their photo and you have a link that you need to change plus all of the text itself. So why don't we create instead a nested template that will allow us to have all the common features of the artist template but allow us to also specify areas of content that are unique to the Bios section.
So nested templates could be thought of as being more specific templates based off of a basic general template. Now there is a parent to child relationship. So if the general template updates, the nested template will update and all other pages will also update. So we are almost creating a cascade of templates when we do this. Now as we build this, we are also going to take a look at a feature known as optional region. So let's go ahead and close the browser and get back in the Dreamweaver and we will start building our nested template. Now I am going to leave aimee.htm open because this is the Bios page and it makes a good starting point for our nested template so we will just use it.
Now, we are going to build this nested template pretty much the same way that we built our root level templates earlier. We are just going to go ahead and build this page base off of the artist template that we created earlier. So to do that, I will select the content that we want to save and in this case, I am going to click inside the content area where we have our artist information and I am going to click on the div called bio to select that. So, I will use my tag selector to select that bio div tag. So it will select all of this information. I will go ahead and cut that and the next thing that we need to do is to get rid of all the rest of this information because it's all contained already within out template. So I will select the body tag and just hit Delete and that will do.
Now I will paste back in all of our bio information. Double check by clicking inside the content that you still have the bio div tag. That's very important what we will be doing next. To apply the templates to the page, we will go up to the menu and say Modify > Templates > Apply Template to Page. This time we get a list of all the templates that we have. We will choose the cheek_artist template and we always want to make sure this check box, Update page when template changes, is selected. That's the default behavior but it means if you update the template, obviously, all the child pages will also update. So I'll go ahead and Select and again, it is going to say okay, where do you want to place this content. So we will place the body in artist info area and it will place the Document head Nowhere. I am going to click OK.
And just like we had before, we now have a banner graphic or artist info side bar. So really, this is pretty much the same as we saw last time but as I scroll down, there is a little bit of problem here. Notice that we keep getting that repeating region and our bio pages really don't need that artist list. So we are going to have to change that. So what we want to do is we are going to go ahead and just hit Save, so it will save our aimee page right now. But we need to go back and we need to modify our existing artist template, so that the repeating region is actually also an optional region. So on some pages we will need it and on some pages we won't.
So let's go back to our Files panel, and I am going to go into our templates and I am going to double click the cheek _artist template to open that up. Now, I am going to scroll down and if I take a closer look at the structure of the repeating region, if I click inside of this as a matter of fact, I notice that the editable region is inside of a div tag with the class of artist side to it and then there is the repeating region outside of that. So if I just make the artist div tag optional, it's not going to fix our issue here. So we are going to actually select the div with the ID of artist list. So use the tag selector to click on that and select it.
So we've created optional regions by going up to Insert > Template Objects > Optional Region and selecting that is going to say well, what do you want to name this optional region. So we are going to go ahead and name this Artist List. Now, the behavior is to Show by default or not, we will leave the behavior Show by default and we will click OK. What that means is that we can modify and display and choose not to display it. So we will go ahead and save our artist template and it's going to give us that warning message about the block level element again and we want to update. So let's choose Update. We will get this little message that tells us who is updated and we will go ahead and close that template. Remember, as soon as you've done editing in template, my advice to you is just to go ahead and close it.
As we come back into our aimee page, we notice that it's still there. So we need to go ahead and control that optional region. So I am going to go up to Modify > Template Properties and notice that the only template property I am getting right now is that Artist List that we had before. I have the choice of showing it or not showing it by simply clicking the check box. So I am going to deselect it, do not show the Artist List. We will click OK and it's gone.
Excellent! So we need to turn our attention to making this a nested template and that's what we will do in our next exercise.
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.