Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our previous movie we created a template for our Cheek Chastain Site. Now we will explore creating new pages based off the template and how to apply the template to pre-existing pages. As we mentioned previously, if you look at the Files panel, we have the templates folder on the root of our site and inside we have our cheek_main.dwt. Now when you upload your site later you don't necessarily have to make sure that templates go along. All of the template code is Dreamweaver specific; you may have noticed that it was in a HTML comment tag. So browsers will ignore it but Dreamweaver understands that it needs to do something. So this is can stay local if you want it to. If you are sharing it with a group, of course, you will want to upload it.
Well you don't create a new page from a template by double clicking on the template. That would open up the template all allow you to Edit it. So there are a couple of different ways to do that, and let's explore them. If we go to File and choose New-- From the New Document dialog box that comes up, on the left hand side notice that we have page from template and if I click on that, I get to go to all my sites and I can click on the chapter6 site and look at the cheek_main. When I select that, I see a preview of what the page is going to look like on the right hand side. Now based on what CSS you are using or whether you are using any default, it may look a little different. Ours, for example, is looking unstyled right now, although we know it's going have a CSS attached to it.
Now I am actually going to hit cancel because although that's a very easy way and a very visual way of doing it. I think that there is maybe even an easier way. Next to your Files panel, you are going to see an Assets panel, so go ahead and click on the Assets panel. Of all your asset categories in there and all these categories are listed accounts on the left hand side. The second icon from the bottom is template, so if you don't have that one selected click on it now. This is going to show you a list of all the templates in your site and right now we only have the one. Now if you are on a Mac you want to Ctrl +Click this, but if you are on a PC you will want to just Right Click it and as you do that you can choose New from Template. So go ahead and Right Click the cheek_main and say New from Template.
It creates a brand new page for us, and we have got all of our editable regions on the page. So we will go ahead and throw in some content here. Now rather than forcing you to type a bunch of content, we have a text file with some content inside of it already that we are going to use for our main content. So, let's go back to the Files panel. So if you are following along with me, you are going to want to find the _text folder in chapter6 directory, open that up, and Double Click the about_text. So we are going to recreate our about page. Go ahead and select all the text on a page and copy it. Once you have copied it feel free to go ahead and close the text file. I am going to move over to where my default heading is and I am going to go ahead and highlight that entire region and I am going to paste my copy.
So you can see our text comes in and there is about text. Now because this was in the editable region there are certain things that we can change. For example, all our content should be pasted inside the DIV that says newsarea. Well we are not on the news page anymore, so we need to change that id. I will use the Tag Selector to do that. Click anywhere inside your new text and just go ahead and go down to your Tag Selector and either Right Click or Ctrl+Click that and choose Quick Tag Editor. That will come up and from our ids -- we get a list that comes up, and this list is actually populated from your CSS. So it can prevent a lot of typing. I am going to scroll up and I want to find the aboutArea id.
So I will select aboutArea and hit Enter and that will replace the newsarea. Now we are now going to see any immediate change, but now it has defined as aboutArea and all the content inside of that will be styled using that CSS instead of the newsarea CSS. Let's go ahead and add some formatting to our text. I am going to click in the headline Our Gallery Your Gallery and I will change its formatting using the Property inspector to Heading 1. I will scroll down the page and I will set change directions to heading 2, and The Cheek Chastain Gallery heading must also be a heading 2 so go ahead and do that.
Now we have made some significant changes to our files. So we are going to go ahead and save this. So go up to File and choose Save. Now you want to browse to your root directory, which in this case when we defined our site is the starting file, and we are actually going to save this as about.htm. So we are going to overwrite the existing about file. So go ahead and hit save and it's going to ask us if we want to replace it and we are going to say yes. Now we are almost finished with this. we just need to place a couple of images on the page. Place your cursor right in front of the C in Cheek Chastain and I am going to open up my images directory from my Files panel. Now I could do this from the Assets panel as well, but it's just as easy to do from the Files panel. What I need to do is just browse and find my image.
So I am going to scroll down and there is a file that is the information2.jpeg and you may actually need to expand that out a little bit so that you can see it, but if you can't see the title you can always hover over it and Dreamweaver will pop it up in a tool tip. So we will go ahead and select that and I am just going to drag that and drop it right in front of the Sea in Cheek Chastain. It's going to ask me for some alternative text, so I will just say About Cheek Chastain and it pops my image on the page.
I need one more image and that will go right in front of Directions and it happens to be the infomap.gif, so it's right above our information2 JPEG and I will just drag it right above Directions and we will go ahead and give it an alt text of Cheek Chastain Map, now there is our map. So we will scroll up, save our file, and let's test it in our browser. As we test it, everything looks pretty good; hold on, there is a problem, we haven't change our banner graphic out yet, it's still indicating that the news is the current page so we need to change both of those.
So let's take a look at how we edit those attributes. Let's go back in to Dreamweaver and what I want you to do is go up to the menu and go to Modify and choose Template Properties. So, Modify > Template Properties, this is going to list any template parameters that you might have in our later exercises we will see how we can create these template parameters ourselves, but right now we are dealing with the template parameters that we created when we made editable regions. So let's go ahead and change out our banner alt text and we will go ahead and just highlight that and we will type in About Cheek Chastain. Then we will select our banner image and we will change that out. Now because we told Dreamweaver to the type of attribute was URL, it gives us this nice little browse folder and I am just going to browse and I am going to go in my images directory, banners, and I will find the about banner. And I will ahead and choose that and the document styles are going to stay the same, so we won't change that, but current page has changed.
So we are going to change the current page from News to About, and again, we will go ahead and click OK. Notice that now our gallery info is indicated as the current page and our banner graphic has changed. So we will save that again, test it in our browser, and there we go; gallery info is now indicated as the current page. All the rest of my links are now active including News and we have got the banner graphic that corresponds to the About Page; so there we go, we are done. So let's go ahead and quit Firefox and go back into Dreamweaver. Now through the use of templates we built a new page for our site in less than half the time that it would have taken us without using templates.
So next we will take an existing page from our site and apply our template to it to convert it to our template workflow.
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.