Lessons

Lesson Info

Creating a Template

what are templates about the word template means so many things to different people. Write a lot of people here template and they think, oh, pre designed layout that I'm probably not gonna like anyway. It's a fair guess. Sometimes that's what templates are. You can get templates for power point. You can get templates for photo shop. You can get templates for WordPress. The basic idea is that it's a collection of style information that could be used over and over. Dreamweaver templates are a little bit different. Dreamweaver templates are whatever you want them to be in terms of the design, and what they really are is a functionality and dream layer that lets you create multiple pages from one page layout, much like templates within a theme in WordPress are used over and over as you deliver that content from the database. A template and Dreamweaver is a layout that you can then generate other pages from. And if you make changes in that layout will be updated across all those pages. And ...

that's particularly time saving. When you have 10 or 20 pages and you realize, Oh, I want to add another section and that means adding a link to every page on the site. It's really nice to have a template, so I can use CSS to change style things. But I can't use CSS to add text to every page. That's where templates and CSS work together and become so powerful. If I had more time, I go ahead and set up navigation links at the top and all kinds of other things. But to keep it simple, I'm just going to create three pages and link them together with these arrows and create a little slide show. And this will be a really simple little website at the end of the day. But first I'm gonna turn this page into a template. Now, in Dreamweaver, you can start a page by creating a template, or you can take any existing page and turn it into a template, which is nice because a lot of times we start designing something and then we think, Oh, I'm gonna create five other pages that look just like this. Let me create a template for this to create a template you just choose, save as and then choose. Actually, there's an even better way save as template is better. You can choose, save as and just choose the dream We were template. But save as template is a slightly superior option because it better reconciles the code for templates That's in the header area you don't even see. So save as template, I want you to notice that it's letting me come up with a description and a name for the template because I'm gonna refer to this template later. So I'm gonna call this my main front template. You can call this anything you want. This is just for use within Dreamweaver. This is just for your reference. Within one website, you might have different templates for each main section of your site, for example. So the ability to manage multiple templates is why you have to name. I'm saving it in the sight I'm in. But I could actually say this into a different site. And I can use a template from one site into another site, which is also kind of handy sometimes. So save now, it says, Do you want me to update the links? Yes, you do. But let me show you why. If I go into the files panel now, what Dreamweaver did when I created that template was create a folder called Templates and inside it create off a new file called Main front dot dwt that dwt is unique to Dreamweaver. It stands for Dreamweaver template expression, Web from Microsoft for a while kind of copy that and called them dynamic Web templates. Interesting that they both use the doctor and every P. But my understanding is that it originally was a Dreamweaver feature, and dot data beauty is for Dreamweaver templates, but you'll see it referred to with both terms, certainly in my writing. Uh, saving it in a folder called templates is not optional. For Dreamweaver to be able to use this template effectively, it has to stay in that subdirectory called templates. Most of the files on your site you can move around. You can create folders you can organize into subdirectories, but there are a few things that have to stay consistent. Your index page has to stay at the top level in the main folder, and templates have to stay in the templates hold. And that's why it said, you want me to update links because now those links are in a little bit different relative location to what they were before. The relationship between the image of the eager it hunting and the page that eight group appears on has now changed because it's inside a subdirectory. And that's why Dreamweaver had update those links and again giving you a quick crash course of a lot of concepts at once links to images and links to other pages or relative. And that's why it's so important that you Onley change the names or the locations of those in this files panel if you change them outside of Dreamweaver. If you start organizing the files in your website a side of Dreamweaver, you'll break all these links. If you do it in here, Dreamweaver will fix them for you, and that's really handy. Well, let me go back down. So now what I want to Dio is use this template to create three pages, so I've got a main front Dreamweaver template. Let me create a new page. Remember that all those options in the new page dialog. It's kind of overwhelming all these choices, but one of them here is called site templates and insight templates. You'll see all of the sites that I've set up in my version of Dreamweaver. These are the sights I've personally set up. Whatever you've set up will show up here and you'll see any templates available from the site. And you can, Like I said, even used templates from other sites in your sight. But I'm gonna use the main front template I just created and I'm gonna choose create. Now it's gonna create a page that looks just like the one I just had. But I've missed a really crucial step to making templates work. Let me go ahead and close this and do it again and show you what I missed. This is the most complicated thing When it comes to templates, I want to create a template because it makes it easy to create more pages that look like it. But I don't want them all the look exactly the same, right. I'm gonna want to change the image, and I'm gonna want to change the links on those arrows so that I can link those three pages together differently on each page. That means there has to be away in this template that I can change some of the things, but I may not want to be able to change everything in this template on all of the pages, something like the name of the site at the top. Or if I had navigation links at the top, those things. I probably want the same on every page, and I'd love to preserve the ability to update them across all of those pages. And because some of the parts of your pains, you might want to update across all of them and others you want update in each individual page. Dream leaders templates haven't option that allows you to create changeable and not changeable sections of a template. So essentially you lock down parts of the template so they can only be changed in the template itself. That's what allows you to update multiple pages, and you open up other parts of the page that could be changed in any new page but can never be updated across all of them. Complicated concept Let me see. If it makes more sense is I put it into action, so there's an option here under templates. If you insert template of making what they call creditable regions, so an edit herbal region and Dreamweaver isn't area of a template that can be edited in pages created from that template. So I'm gonna purposely leave this title, not an edible region, because later I might want toe add my byline to it and have it automatically appear in all the pages. Five time. I'll show it to you. But this main area of the page I'm gonna want that absolutely to be changed on each page. Now, I could choose just the image and make it creditable, and I'd only be able to change the image and I could do the arrows. But then I got three edible regions to manage, and that's a little complicated. So this is another place where def tags come in handy. Around all of these elements, I have a diff tag called Main Content. If I select it here, you'll see Div main content. When we laid out this page, we created a div in there that has all of the main content. I might have a foot or below it, that I would also leave locked, same way I'd leave the header locked. But the main content. I'm gonna make everything inside their creditable so I can change the links on the arrows. I could change the image. I could do anything I want in this part of the page. And the way I do that is first to select that Div. You see, it's highlighted in blue and then choose insert template, creditable region. Now I get to me in that region, I'm just gonna call it may and content so it matches and I remember what it is. But again, I could call this George or Angie or whatever. I choose a lot of these names air just for my reference and Dreamweaver. So now everything in there The caption, the image, the arrows, all of those air edit herbal. Now I'm gonna save it just to make sure of preserved it And know when I create a new page from template new site template, choose the main template create I create a new page. Now you see this blue kind of area here that says main content that tells me this is the edit herbal region. And if if I want to change something in here, I just select it. So if I want to replace this with the image of the owl now, let me go in and let me save it first. Same early and often. I don't have to during we would remember it, but it's better. So I'm gonna call this index to I could call it something else, but not one of index one index to index three. And I'm gonna link the three together and naming them logically is gonna make it easier to link them together too. I'm gonna call this index, too, and I'm gonna insert in place of this another image. And if you come down here, if you're replacing one image with another, it actually works bus to just replace the source. So I'm gonna use this little icon here any time you see it. Icon, that looks like a folder. It means browse for file. So look for that. I'm gonna come out so I can see what I'm doing. Going images. I have that owl in flight open and you see it replaces that. Cool. Now I'm gonna create another one new page from Template save as I'm gonna call this one. Index three index three dot html and I'm gonna change this one. Select the image, go to source and I don't have the third image in here yet, so I'm gonna go find it. Remember Utkan copy images from other places. It's no problems. Go grab one of those quail pictures together. One's cuter, open. And, yes, I want a copy. This from there to here so that it everything for this site is in this folder and it's gonna ask me where I'm gonna save it with my images. It seems like a logical place to put it. So now I have index to with my owl index three with my quail hopes soon back out so you can see a little better. What? I'm doing noise. Now here's something that throws people. If you think about it logically, you'll probably figure this out on your own. But my index page is the way I want it. And it is the one that used for the template. But it's not made from the template. So let me show you why that's a problem. Twice. Let me open the template back up and show you the power of templates. So now I've got three images. I said if I had time, I do this. I definitely have time to show you a few more things. So if I add by Jenny and Warner here and I hit return, I don't never and I had save. Dreamweaver is now offering to update all of the pages made from that template, but what's the problem that I just did? It's updating index to an index three, but it's not updating Index one because Index one wasn't made from the template. This is a little bit of an advanced it. I made a page stated as a template created two more pages. That first page wasn't made from the template. So if I want this update, all of these, then I need to actually make the first page over again from that template. And because the template looks like the first page, that's gonna be the easiest thing in the world to do. So I'm gonna close this. I'm gonna create a new from template. I'm gonna save it, and I'm gonna call an index and it's gonna say, Are you sure you want overwrite your index page and I'm gonna say yes, I really am. And now my bylines on there, too. And now if I make changes to that template like taking my byline back off or changing the color or changing the size. I could do that either in the style sheet or the template, depending on how it's done. Now it's updating all three of those and now close. You'll see that it worked on all of them, right? So the power of templates is it was very easy to create those three pages. It's also very easy to change those three pages and the locked areas. The not creditable areas are the areas I can change across all of them and the edit herbal regions that whole div in the middle that I made edible can be changed on each page. But I can't make global updates in that area because they can only be changed individually. Right now, I could go back to that template and say, Wow, this is a little confusing To have this here, I could replace this image with just a grey box or something so that as I create new pages, I never confuse it. But it doesn't really matter. It's just my starter page. I can leave it looking like the front page. It's not a problem