Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have created a new page based on our template, let's examine another possible scenario when dealing with templates and in many cases, you will be building templates around a preexisting site. Now rather than having to recreate all those pages so that they become part of the template workflow, you can apply your templates to existing pages and just make some minor modifications. So that's what we are going to do. Go back to your Chapter 6 files and if you are following along with us with the exercise, we are going to open up the news.htm exercise file from the Chapter 6 folder.
So if you remember, this is the page that we actually based the template off of to begin with. There are a couple of different ways to apply the template to the page as well. So I am going to show you a couple of them and I will show you the one that I think is easiest. We can go up to the menu and we can go to Modify > Templates and choose Apply Template To Page and then we can just browse for the template we want to apply and it would apply it to our page and that's pretty easy. But there is a way that I think is a little bit easier and it's using our Assets panel. So let's switch over to our Assets panel, and once again once you've switched over to the Assets panel, make sure that you are on your template assets and that is the second icon from the bottom of the icons on the left there.
So there is our cheek_main template. Now, applying the template to the page using the Assets panel is amazingly simple. All you have to do is select the template from the Assets panel and literally drag and drop it onto the page that you want as soon. As you let go of the mouse, our Inconsistent Region Names dialog box comes up. So what we are doing now is we have applied the template to the page. Now Dreamweaver has got to figure out where all this content goes inside of the template. So if I choose Document Body, notice that it says right now Not Resolved.
Oh! Well, the problem is the navigation, the banner graphic, that was all part of the template. So applying the template to this page without modifying the page first just means you get a lot of duplication. So let's go up to Edit and choose Undo. So we have actually got to prep our page to make sure that our page is going to work properly. So when we review the news page, we notice that the only content that really need to be mapped to the template is the interior of the content region. So what I am going to do is I will click inside that and then I will use the Tag Selector to select the news area div tag.
So I am just going to go ahead and select the whole div tag by clicking on it with the Tag Selector. So let's go ahead and cut this and now what we will do is we will just get rid of all this other content and it's pretty easy to do. We will just select the body tag and once you have the body tag selected, just hit Delete and that just takes everything off of the page. I will go ahead and paste my content back in and there is all my latest news. Now, it's not styled, it's not controlled by anything, but that's okay because it is still inside our news area div tag which is exactly what we need. So now, I am going to take the cheek_main template again, drag it over to apply it.
This time we will map document body to the main content region and again, we will take the head and say you go nowhere. So now we will say okay. Aha, that looks a little better. Now we notice that our content is right inside the main content editable region and styled exactly the way it was before. Now, the other thing that we have to remember to do is to make sure our editable attributes are exactly what they need to be. So we will do that by going up to Modify > Template Properties. The banner alt text can be changed, so we will just highlight that and say News. We will select the banner image, and it already has the news banner because that's the default banner.
So we will just leave it alone. Current page also says news and document styles are the base.css styles. So that's all set up the way we need it as well. So we will go ahead and click OK there, save our file and now our news page is also based off of our template. Now up until now, we have kept our use of templates pretty basic. If you are working on a site with a simple structure and a few changing elements, the techniques we have used so far might be all you ever need. But in the next series of exercises, we will delve into making your templates smarter and having them deal with content that is far more complex.
We will start by examining repeating regions.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66502 Viewers
61 Video lessons · 96925 Viewers
56 Video lessons · 110607 Viewers
82 Video lessons · 105187 Viewers
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.