Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The most successful templates are the ones that take full advantage of page structure. It's very common to have a several items on a page that are basically the same structure, just repeating over and over again. Product descriptions and thumbnails are good examples of this. Instead of having to continually build the same structure manually, you can just create repeating regions within your templates to speed up that process considerably. So here I have the tour_detail.dwt. Now if I scroll down I can see the complex structure that we are going to need for each of the tour packages that are going to be displayed with the tours.
In this case, we have the headline, we have the price and the number of days, we have a tour description, a map showing where the tour is, tour options and ratings and a couple of links for people to click to learn more about the tour or to book the tour again. Now some tour packages may have four tour, some may have five, some may have nine and so because of this we don't really want to have to manually create the structure over and over and over again, so this tour package description is a perfect candidate for a repeating region. So the first step in creating a repeat region is to identify the structure that needs to repeat. And if I click anywhere inside the tour description, I can see that it is surrounded with a parent div tag.
That div tag has the class tour description. So if you click inside any element, say that paragraph right in the middle for example, you can click on that div tag and you'll notice that it selects the entire thing. Now this is a really important tip in terms of structuring these repeating regions. You want to make sure they're encased in either a paragraph or a div tag or some type of a block level element that's going to make it easy to repeat these over and over and over again. If these are just loosely constructed with headlines and paragraphs and images, we can repeat them over and over again, but we'd have to be very careful as to how we select them.
Using something like a div tag to encase them and then giving that div tag a class that helps not only with the styling but with the identification of the content is a really important organizational step in creating repeating regions. So with that div tag selected, we want to go up to Insert > Template Objects > Repeating Region. We're going to be prompted to name our region and we're going to go ahead and name this repeating region tourDetail. I am going to go ahead and click OK and our repeating region is added to the page.
Now a couple of changes have just happened to our template as well. Before we start scrolling around and deselecting anything, I wanted to deal with one of the most important changes right off the bat. You'll notice that I have the contents inside the div tag still selected. This is really important. If you've clicked off of it, simply click back inside the paragraph and click on the div tag again to select all of the contents inside this repeating region. Essentially, repeating regions by default are not editable. So you can repeat this content as often as you want at any page based of this template but you wouldn't be able to change them.
So the first thing we need to do here is to insert another editable region within the repeating region. The easiest way to do that is just leave it selected because now we can go right up to Insert > Template Objects > Editable Region. Now in this case, I want to name this editable region tourSpecific. I am going to go ahead and click OK and you could see that now the tourSpecific editable region is sitting inside, that tour detail region. Okay perfect. Well I mention that, there was another big change to our template page as well and if we scroll up we can see that.
The mainContent region and it has a totally different highlight color. This highlight color indicates a nested region within our template. Nested regions are also locked by default. So if you recreate a repeating region, you can do a lot of damage to existing editable regions on the page. We still need to edit Tour Name and the body copy for the tour, so I am going to go ahead and highlight both of those lines of copy and with both of them highlighted, I am going to go up to Insert > Template Objects > Editable Region and we are going to go ahead and type in tourDescription for this region.
So editable regions can really help your templates become a lot more flexible and help you build complex structures quickly. However, you should be aware of the fact that some content that used to be editable might not be any more. So you want to double check your page, make sure you still have editable regions where you need, and if you don't just go ahead and insert them again. So go ahead and save this and now we're ready to go ahead and build templates off of this page. Now if you are working along with me and you're in the 13_08 folder you're going to get this message, Update Template Files.
Well we have finished files that's part of this chapter and in the finished files we already have the page that we are about to build next. Now we don't want to update that page, so just say Don't Update. We're going to talk later on in our next movie about updating templates. So for right now we're just going to skip that step. We can now close this template and we want to build a brand-new page based off of it. So go to File, choose New. Now when we go into Explore California site, we see our two templates there. We have our main_template and our tour_detail.
Notice how easy it is to choose between the two of those visually. Main_template has a very basic structure. While tour_detail provides us considerable more starting structure to that page. So we want to choose tour_detail, Update page when template changes, and go ahead and Create. Now I am going to go ahead and save this page. It's typically the first thing I do when I create a new page based off of a template. That way any links that I create or any images I place in the page will be able to be resolved pretty simply. I am going to go ahead in the 13_08 directory, find the tours sub-directory and open that up.
We are going to call this page tour_detail_backpack.htm. I am going to go ahead and click Save to save the file. Now I am going to go up o my breadcrumbs and I need to add a breadcrumb here. So I am going to click right after All Tours, hit space, and I need to add another character to this. Now sometimes special characters can be hard to remember exactly what their encoding is and so because of this, Dreamweaver gives us up here in our Insert panel a Text tab.
In the Text tab we have a lot of special characters that we can add simply by grabbing a pulldown menu or if you don't see the one you are looking for here, you can go to Other Characters. So here we need this double right angle bracket character, the one looks like two arrows are going to the right. I am going to click that and I see that I get these special character encoding for that there. I click OK and it adds it for me. Lovely and then right after that I am going to go ahead and type in Backpack cal. Now just to save us a little bit of time, I am going to go over to the tours folder and I am going to open up this tour_detail_backpack_reference file. I can open that up and then here I am just going to copy this body copy, 'want to chance to get away from at all,' and I am just going to scroll down and get all that body copy, copy that and paste it right there.
So copying and pasting, nothing wrong with that. And of course we are going to change Tour Name to Backpack Cal. Now we need to go ahead and add our repeating regions. So I am going to scroll down towards the bottom of the page and I can see where we have our repeating regions down here. Now the Backpack Cal tour has five packages. We have one on the page already, so I am just going to hit this plus symbol once, yup. and you have to scroll back down, twice, three times and finally four times. It's unfortunate it just doesn't stay right there but you do move backup the page, so you do have to scroll back down.
It's a little bit of a pain but it's certainly better than making those by hand. Now what about the content for these guys, because right now they are all exactly the same? Well we have got another file that can help us with that. I am going to go over to my Files panel open the Assets folder and I am going to open Big_sur.txt and here we have all of our tours. Now a lot of times your CSS, as helpful as it can be, kind of get in the way. Notice for example that if I try to highlight this 3 days 750, it's really hard to highlight, and that's because of what we are doing with the CSS there.
So what I am going to do is go up to my document toolbar, right-click and choose Style Rendering. It's going to bring out my Style Rendering toolbar. Now on the Mac it's going to dock here with the document toolbar. On the PC it's going to be wherever you had it last. I am going to go ahead and turn off all style rendering, which is this little icon right here that look like some stairs, and we are just going to get a default rendering, which means it's going to be really easy to select all of these different pieces. Okay, while it's really crucial to go ahead and keep these organized, Big Sur Retreat is not going to change. So I am going to scroll down to the second one and then flip back over to my text file.
On my text file, I am going to scroll down, find my retreats, and the second one is Channel Island Excursion, so I am just going to start copying and pasting. So I am going to copy the title, and then paste that, go back to the text, copy the days and the price, paste that, copy the body copy, paste that, and I'll be sure not to replace the image and be sure not to replace the options down here until its time. And then the Rating, I am going to copy that and paste it right there, replacing the option on everything else.
That tour detail I don't need that open anymore, so I am going to close that so that I can switch back and forth between these guys. Okay, so again a little bit more manual labor but certainly better than having to built the structure ourselves every single time. I am going to copy and paste each headline. Now you want to be very careful when you are selecting these. Occasionally, you are going to paste it and you are going to lose your heading. Just the way that this is formatted, so you want to be very careful about that. If it happens just undo it, carefully select the text and do it again. So you always want to go a little slow at first and then make sure you are getting this just right and you don't have too much selected.
So I am going to copy that and paste it, and there is our third one done. I've got two more to do. At least I didn't pick a tour that had 9 trips, right? Select that, copy it, paste it, copy that and paste it. I am also fond of saying that this type of work is why it's always good to have interns. So if you're in a situation where you can have interns in your office, this is fantastic experience for interns and it's good for you to have them as well.
So there is our last one. We'll paste that. Oops, see that happened to me. So you have to be really careful if that happens. No big deal. Just undo it, paste it again and you will be good. You just want to make sure you are not replacing the tag as well and with the headline it's sometimes easy to do that. There is my last body copy. We'll paste that in and finally we'll replace the difficulty. Now as soon as I have got all of this text placed in here, there is no reason for my styles to still be turned off.
So I am going to back to my Style Rendering toolbar, toggle my styles back on, and I am going to close this. Now we are almost done, but you'll notice that all of the maps are still pointing to Big Sur. So what I am going to do now is go down to each one of these maps, go to my Files panel, and open my images. If I scroll down through my images, I can see that I have a whole section of maps here. So I am going to select the Channel map for example and using the Point to File icon down here in the Properties Inspector, I can just grab that and point to say the map of the Channel Islands.
That's a very quick and easy way to change your images when you need to swap them out. I'll do the same thing here. I'll highlight my image and for The Death Valley one, I'll just point to map_valley. For the John Muir one, I'll go ahead and point to the map of Yosemite and finally for Mt Whitney I'll go ahead and point to map of Whitney. Now we also need to go ahead and change the book now link and the learn more links so they'll to be contextually sensitive to the tour we are doing, but I think you guys have the idea of going and using the repeating region and then adjusting the structure within each one of those elements to be what you need it to be.
Go ahead and save the file, and then we go. We've used our nested template to build a page and then the structure it provided us really saved us a lot of time compared to trying to build that all manually. We were also able to take advantage of our repeating regions to quickly display the tour packages for this specific tour. Taking full advantage of Dreamweaver templates by using such features as nested templates, repeating regions, and optional regions will always require a lot of planning before you start constructing your templates.
But as you can see it's really worth the effort.
Get unlimited access to all courses for just $25/month.Become a member