Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we will explore Dreamweaver's template features. Taking advantage of Dreamweaver's templating abilities can speed up your development time and more importantly can take the pain out of making site-wide or region-wide changes to your site. Creating your Dreamweaver templates requires just two basic steps. First, we design the page that we want to serve as the basis for the template, and it can be as simple or as complex as you need it to be. Now second, you have to define editable regions inside your template. When working on template based pages all non-editable page elements will be locked down and you won't be able to change them. Changes to those regions must be made in the source template.
So we want to make the process of editing our Cheek Chastain site and creating new pages a little bit easier. So I am going to go ahead and open up the index page. So as you are working along with us, we are in the Chapter 6 Exercise Files and we are opening up the index exercise file. I am just going to preview this in our browser. Usually you do this at the stage when you are laying the page out and designing it and you start looking for common elements and what might make good, base template region. So as I click around, I notice there are some areas of commonality. The navigation really doesn't change.
Now in the interior content, when we get into the subsection pages, not on the index page, we have a banner graphic right up here at the top, and then for the most part the sidebar changes as well. It's similar on some pages but on other pages the content changes, sometimes it's sub navigation, sometimes it's just different sections. So we see that we have that banner graphic that changes on each page, we have content area that changes, we have sidebar areas that change. So these are all things that probably need to be contained within an editable region. Our navigation, on the other hand, isn't changing.
Although, if we pay attention, something about our navigation is changing. Notice that every time we click on a page, the link for that page actually indicates the current page that we are on. So we may not need to change the navigation on each page but we certainly need something in a template that's going to be able to indicate the current page. So we will use an existing page that we already have to create our template structure. Looking at the News page, this one offers us a lot of possibilities. There's really not a lot of complex structuring in the news area and it's kind of empty, and we have the Upcoming Events, which repeats more often than not in most of the sidebars. So this one actually gives us a really good base for our templates, so we will use the News page.
So I will close out of Firefox and I will go back in the Dreamweaver. Now I will close the index page because it doesn't really make a good candidate for a template. The index page has some very unique content on it and it's probably something that we are going to have to create individually. So I will go ahead and close that, and I am going to open up the news.htm. This is the page that we are going to base our template off of. Okay, so creating a template is very simple. We just go up to File and choose Save As Template. Now when we do that, Dreamweaver prompts us and says Okay, we need to put a template into your site. You will notice that it would list any existing templates that we would have, which we don't have any right now.
I am just going to go ahead and name this template cheek_main to give it some identity. This is our main template. Dreamweaver will assign a .dwt extension file to this file. So it is a specific type of file. You can also go ahead and give it a description. So I will just say Gallery page main template. You can be as descriptive as you would like there. I am going to go ahead and save, and it's going to ask me if I want to update links. I am going to go ahead and say Yes, and that's very important and we can find the reason why when we look over at our site panels. Notice that there is a Templates folder over there now, it wasn't there before, and Dreamweaver placed that right on the root. As I expand this folder out, you can see that there is our new cheek_main.dwt.
Now if we look at our file itself, up at the top it says < > cheek_main.dwt. So now you are not editing an XHTML file anymore, you are editing a template file. As we explore more of that templates, we will see what the structure actually is. So we need to go ahead and blur all the specific content so that as we build pages off of this we can just plug new content in. The first thing I am going to change is the title of the page. You will notice that this is Cheek Chastain News. Well, we are not working on the news page anymore, so I am just going to clear out the word News and now this title will show up each time we build the page off of this and we will be able to change the title.
I am also going to go down into my Content. Now remember the next step in creating templates is to define editable regions. So we will start by defining editable region here in our main content and I am going to change the headline from LATEST NEWS to DEFAULT HEADING. Now the rest of the content, we can just go ahead and highlight that and type in Content Goes Here. Now it's styled as Heading 1 right now and I am just going to go ahead and take that and change it to a Paragraph so that there is no default styling on this.
Now we could just go ahead and select both of these elements and define the editable regions out of them, but when you define an editable region, you really need to pay attention to where you are placing it. Notice there are element structure down here at the tag selector says div#newsArea and that's inside of a div called content. Well, each channel page, build off this template, will have at least one interior div inside of the content and some pages will have more than one. So we really need the entire area inside the content div tag to be editable, because some pages are going to require a multiple interior divs and some are only going to need the one. So what we are going to do is we are actually going to select the div#newsArea div tag using our Tag Selector, and then we are going to place our first editable region in the file.
I am going to go up to Insert > Template Objects > Editable Region. Every time we put in an editable region, it's going to ask us for a name for this. This is going to be our main content, so we are going to go ahead and called this main content and we will hit OK. If you look at the content on the page, it's now surrounded by a sort of teal line and it says the main content right up in the tab. I always check the code to make sure that the editable region was placed exactly where I want it. So when I check the code now, we see some Dreamweaver specific code, TemplateBeginEditable, and then we have another tag that says TemplateEndEditable.
Notice that it is wrapping all the way around the newsArea div tag but it's inside the content area div tag, and that is exactly what we wanted. So I will switch back to Design view and we can keep adding editable regions. The next thing I want to do is come over to my sidebar and I will select the entire sidebar and we will go up and insert another editable region. So Insert > Template Objects > Editable Region. I like to name them using very descriptive name, so this will be sidebar.
Once again, notice that the editable region wraps all the way around the sidebar div tag, and that allows somebody to modify that div tag if they would like to and not just the content inside of it. So we will go back up and we will occasionally save. So what we have done now is we have defined two areas of content that are going to be editable, the main content area and the sidebar where we might change out links or we might live it the way it is. You will notice we didn't blow that content out, and that's because a lot of pages are going to be using this upcoming events over and over and over again.
So it's an editable region and we can remove it if we want, but it's also going to show up as a default so we can leave it there if we would like to as well. We can do more than just define areas of content as editable regions and in our next exercise what we are going to do is look at changing attributes for links and graphics, so that as people build pages based off its templates, they don't have to swap out the whole image or the whole link, they can just change one attribute and update the graphic or the link on that page.
Get unlimited access to all courses for just $25/month.Become a member
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.