Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our template is finished and we are now ready to start the process of creating pages based off of it. Depending upon which stage of your site design you begin creating your templates, you could be starting from scratch or you could already have existing pages in your site that you want to fit into your template structure. But first, we'll examine the process of creating new pages from our templates before we take a look at applying templates to already existing pages. So here I am in the 13_05 folder and you'll notice I don't have any pages open.
When I need to create a new page based off of a template, I have a couple of options in Dreamweaver but I just want to show you one of the most powerful ones. I'm going to go to File and choose New and now notice the New Document dialog box comes up and one of my options over her on the left-hand side is a New Page from Template. I am going to go ahead and click on that and I get to see any of the templates that are currently inside my Explore California site. Notice that I have only one at this point, main_template, and when I select that I get a neat little thumbnail right over here.
That's why I like this method so much. If you have multiple templates you get to see a preview of which one you're choosing plus you get to read the description for it. So this is something where you have a lot of options and it's a very visual process so you can tell exactly which template you're going to be using. There's another option that I want to point here that is an incredibly important one. Notice we have a little checkbox right here and it says Update page when template changes. If you want to make sure that updating your template is also updating all of the pages based off of it, you need to ensure that that is checked.
If that's not selected you're basically just creating a standalone page and using the template as a means of jumpstarting that page. You won't have that parent to child relationship between the template and the page you're building and for the purpose of site maintenance that can be really important. So I'm going to go ahead and choose Create and now I have a brand-new page based off of my template. Now I know we're not working our template anymore because we have this little Untitled-12 up here and also I notice that I have this sort of cream-colored outline all the way around my page.
Mousing around page elements either shows a little "no you can't" symbol for areas that are locked, or when I get over an editable region I can enable those and change them. Now these are our highlight colors. This sort of cream colored means locked and this blue color right here it means editable. If you want to change those again you can and really quickly I'll show you where you could find those. I'm going to go up to my Preferences. So that's Edit > Preferences on the PC, it's Dreamweaver > Preferences on the Mac and you want to go to the Highlighting category.
When you go to the Highlighting category, notice that you have highlighting colors for locked regions, editable regions, nested editable. So there are all sorts of different color combinations up here. Now personally I like using red for locked regions because you know it just means stop. But you can keep the defaults if you'd like you want. I'm going to click OK. Notice that now the entire page has that sort of locked area around it. Okay now let's start adding some unique content for our new page. I'm going to change regionID to Tours.
We're obviously creating a page within a Tour section. As a matter of fact it's not a bad idea to go ahead and save this. So I'm going to go up to File and choose Save and inside the 13_05 folder I'm going to save this right in the root directory to tours.htm. So now we have our tours page and we could begin placing content on the page itself. Now if we look over in the _assets folder, we're going to find a page called tour_content.htm. We're just going to make this process a little quicker by opening this page up and then copying and pasting some content.
Now, the first thing I want to do is highlight my body copy which is right there and you could either cut or copy this depending up on how you want to do it. I'm just going to copy it. That way if I make a mistake I can come back and change it later and then I'm just going to highlight the body copy and choose paste. Now the page heading, I'm going to highlight that and I'm going to type in 'something for everyone.' Then if I go back to the tour content, if I click inside this area, Backpack Cal, I notice that there is a div tag with an ID of tourDescriptions all the way over to the left-hand side.
I'm going to click that and again go up to Edit and choose Copy. When I go back to tours, we're going to take advantage of something that we did when we created our editable regions. Remember, for our mainContent editable region the entire div mainArticle is part of that. That means that I can select this div tag now, hit my Right Arrow key, and that places me outside of the mainArticle div tag but still inside the editable region. So when I go up to Edit and choose Paste, now that div tag has been placed just below the mainArticle and those two div tags are now stacked right on top of each other.
That's extremely handy for the structure of our site and its one of the reasons that we took such care in creating that editable region for our mainContent. So now there are all of our tour descriptions and they look great. Wonderful. One last thing to grab from the tour_ content region. I'm going to scroll all the way down and you can see at the bottom there we have our Trivia. So I'm going to highlight that paragraph, copy it, so Command or Ctrl+C, go back to tours, scroll down and find your Trivia body and then paste it.
And then I'm going to save the page again. Excellent. Our tours page is almost finished and you can see how quick that was. Now you're probably thinking well yeah, but we were copying and pasting but more than likely you're going to be getting content from outside sources, whether its copywriters or clients or other team members, and you're probably going to be getting them in text files, Word documents or other HTML pages. So copying and pasting into template pages is actually a very common workflow. Okay, I can go close the tour_content now and as I mentioned we're almost done with tours but we are not quite done with it.
Remember our optional regions? Remember our editable attributes? So we need breadcrumbs to show up, because tours has a whole subsection of tours and we need to know where we are within that structure and we also would love for the tours submenu to show up, since we're in the tours page. We also need to indicate that the tours page is the current page and we need to indicate to our body tag that we do have breadcrumbs. So that's a lot of changes to make. How do we make all those changes? There is nothing on the page right now that says we want this to display or that display or assign this attribute.
Okay so anytime you have optional regions or editable attributes, you can access those through something called Template Properties. so I'm going to go up to Modify and choose Template Properties. Here we get a full listing of all of our editable attributes and optional regions. So, the first thing I'm going to do is set my bodyClass. So I'm going to highlight bodyClass and I'm going to make sure it says hasCrumbs. It does so we're in good shape there. Next, I need my breadcrumbs to display, so I'm going to highlight breadcrumb. I'm going to tell it to Show.
Next, I'm going to go all the way down and find my toursLink. Now remember tours is our current page so I want to select that and then I want to replace the word baseLink with current, all lower case. Now be sure not to replace tours and likewise make sure you still have that space between the two of them. It should read tours current. Finally I'm going to go down and find my toursSubNav, which is right there. Notice that it says false currently.
I'm going to tell it to Show toursSubNav. As soon as I do that, my page changes. If I scroll up, I can see the breadcrumb. The Tours is now displaying as the current page based on the CSS and the sub- navigation shows up as well. So you can see all that hard work we did earlier really paid off by allowing us to build an incredibly flexible page. We're almost done. We just need to go up and modify our breadcrumb. So I'm going to highlight the breadcrumb and I'm going to replace that with All Tours.
I'll highlight the link and I'm going to change the link to tours.htm. Yes, it is the current page that we're on but later on as we build those sub-pages those breadcrumbs will get longer and longer and we'll be glad that we have that link on the page. So now I'm going to go ahead and save the page. So there we go, our first page built from our template is finished. We could now use our template to rapidly build the rest of our site. Adjusting the template properties, allows us to change current links and the page layout based on the breadcrumbs.
Using our template, we could build that page after page after page for a site in probably about half the time that it would normally take us. Now, this is a good time to point out that you should not underestimate the importance of CSS to the templating process either. By having our CSS already written, we speed up the development time even more by simply adding the structure to the page. Our CSS and our templates take care of the rest.
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.