Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Converting a Page into a Template

  • We are going to create a template for our website so all of our pages will have a consistent look
  • There are a few different ways to create a template
    1. You can build a page with the complete look you want to have & convert that page to a template
    2. You can build a blank page with your design, convert that to a template & move your page content into it
    3. Start with a blank DW template page & build your page from there
  • I never find myself doing the last option, it is possible to do it that way
  • We presently have pages that have been created but do not have any specific CSS positioning attached to them
  • We are going to use a page that has been created using CSS positioning but has no content & use that page as our template
  • Open inner.html, this will become our template page
  • To do this, choose Save As Template from the File menu
  • We need to give our template a name, we will use 2 column as the name
  • We just created a Dreamweaver template
  • Note the .dwt file extension
  • Look in the Files panel, there will now be a Templates folder within the site with this file in it
  • Also take a look at the Assets panel, our template is now listed within that area

Converting a Page into a Template

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • How to Work with a Template 0:27
    • Create Blank Template File
    • Example Template File
  • Preview in Browser 2:22
  • Create Template from File 3:56
    • Save as Template
    • Template Description
    • Save and Update Links
  • Create New Pages from Template 6:26
    • Editable and Non-Editable Regions
  • Summary 10:33

Transcription: Converting a Page into a Template

We are now going to take a look at creating a template, specifically a Dreamweaver template file, which is a .dwt extension.0000

Within the site files right now, I do not have a Templates folder; but when I am done with this exercise, I will--Dreamweaver will have created it for me, and Dreamweaver will keep track of it for me--which is a very nice feature within Dreamweaver.0010

How do we work with templates?0028

First of all, there are a couple of different ways to create them.0030

You can create a blank template file, and let me show you how to do that.0034

If you go up to File, New, you end up in this New Document interface; and I do tend to find, for people new to Dreamweaver, this is a bit overwhelming; but let me just show you a couple of things within this area.0039

First of all, I know I want a blank page; so it's one of these two options.0055

And Dreamweaver actually has it in both locations, so either way, you can get to a blank .dwt file if you want to build from scratch.0062

If I click on HTML Template here, you can see, when I move over to the right-hand side, it says "Dreamweaver template document."0072

That will get me a .dwt file; the other location is in the Blank Template area.0084

If I click HTML Template, you will see it gives me that same information.0091

If I wanted to do that, I could create a completely blank file and start from scratch.0097

What I tend to find the normal workflow ends up becoming is: I have a page; I get it all organized and set up the way I want it; and then I realize, "OK, I now have a great base page for my template file."0105

So, that is what I have at this point; and the name of this file is inner.html.0120

I'm going to go ahead and open that; and what this is going to be is an inner page for all of my site files within the Wanderlust Travel website.0127

If I put this into the browser (because I know it looks a bit strange now), let's look at it in the browser.0142

What I have is a page created using CSS and the basic CSS properties that were looked at throughout the formatting and positioning regions or sections of this course.0149

I have a header here, and notice, I don't have styles for my text quite yet; but I have a header area for the page.0165

This is going to become my page content; right now, this page just has some Latin text on it, and that is basically just taking the place of text for now, until I actually get the correct text dropped in.0174

My right-hand column has some text in it, and it has this blue square.0189

This is known as a placeholder image, and it is just going to take the place of an image; and as I create my pages, I will drop in the correct text or navigation for this area and image for here.0196

That is going to be my page; when the user clicks on one of these categories (specifically these four categories), this is the page they will be looking at.0212

My homepage is going to have a little different layout, and you will find that is very common on websites: the homepage has a very different look from the inner page areas.0223

So, let's take this inner.html page and make it a Dreamweaver template.0236

What I do is take this page...and the absolute, sure way to make this always work is to use this method.0242

Come into the File menu and say Save as Template; what it is going to do is ask you which website you want to save this template in--and I am going to give it a description; I'm going to name it Inner Content Pages.0252

I am going to save this as inner as well.0271

Now, don't feel like you have to name it the same name as the original HTML page--you don't; you can put any name in here.0274

So, why don't I say, "Oh, let's call it inner-content."0284

Now, I have a dash in here; and when I am working in templates, I tend not to use dashes, just to make sure it's pure text; that is just because, in the olden days, you couldn't use dashes; so I'll stick with that--for my template names, I'm going to use this type of headless CamelCasing (lowercase first word, uppercase everything else).0291

I'll click Save, and here is where the magic happens, provided you make the correct selection here.0316

As long as you say yes, the magic happens; if you say no, you will have a lot of problems.0323

What happens is: this page was sitting in my main folder, and Dreamweaver is going to take this and move it inside the Templates folder.0331

So, if I say no here, links that I may have in hyperlinks, images, style sheets...quite a few things...will no longer work, because the path to those particular items is not correct any longer.0341

As long as you say yes here, you will have no problems; Dreamweaver will take care of it for you.0356

You can see, I have just moved into an innerContent.dwt file; it looks just like my inner page, but it's not; it is a special Dreamweaver template file.0363

And if I go over to my Files panel, you will see, I now have a Templates folder; if I open it, there is my innerContent template.0376

Now, what I am going to do is close up this template; I want to create some new pages from this template.0386

And I am going to say, "Am I sure I want to continue?"--I'll explain this message in a minute--and I'll say, "Yes, I want to continue."0394

I am going to create a new page from this template; so I go out to the File, New, and this takes me right to Page from Template; in case yours did not, move into Page from Template.0405

This is the website I want; this is the template I want; and notice, inner content pages was my description, so that goes underneath a preview of the page.0419

Now, in here, it does look like Contact Us has moved down just a little bit; I don't have to worry about that; I'll be adjusting that piece later, when I get to working in responsive design.0432

I am going to click Create; make sure this stays checked (it is checked by default); and there is my page, created from a template.0446

Now, this area here, up in the upper right, tells me that this was created from a template; it also tells me which template it was created from.0458

Notice, it is an untitled file right now; so I am going to save this, and I am going to save it as page-from-template.0471

I'll put it right in my regular files.0483

Now, what I want to show you is what I can do on this page.0487

And if you notice, everywhere I go, I can do absolutely nothing; I always try and get my classes to start editing here, and we get this little symbol.0492

I think it is important for you to see that that happens; as soon as you move a page into a template, everything is locked down on that page.0505

So, when you make a template, what we have to do is create areas on the page that we want to be able to edit on any of our pages; the rest of the page we will keep locked down.0515

We need to create editable content areas, or what is known as editable regions, within our templates, in order to actually edit the pages created from this template.0528

I am going to do that in another lesson; I just wanted to show you that, once you create a template...0543

And I'll go back to my Files panel: if I open up that template (and let me do it so there are no problems--I like to use the Assets area), now notice, it doesn't show me any templates right now; and that is because the Assets panel does not autorefresh.0549

I need to go down to the bottom of the page, now that I have created a template, refresh it--and you can see, there is my template.0568

This is where I want to actually work and open templates from.0576

That way, I know that that folder in the Files panel can't accidentally get other files placed in it.0582

I'll select this one--selecting the icon; I'm going to click the pencil at the bottom; and that will open the template for me.0589

Now, notice: I can edit anything within the template itself; it's just pages from the template--whatever editable regions have been created, that is the only thing you can edit.0599

I have no editable regions right now on my template itself; that is why I cannot edit on any pages created from it.0613

My next step is to create editable regions on my template page, so that I can actually change the content between pages created from this template.0622

That is how you create a Dreamweaver template, either starting new in the File, New and either of the Blank Page areas, or you can simply do a File, Save as Template if you have a page you are going to use as a base, and Dreamweaver takes care of the rest for you.0633

That is how you can create a Dreamweaver template file, a .dwt file, in order to create other pages from it, using the Dreamweaver template feature built into the program.0655

I tend to use quite a bit of template files; they come in very handy--it makes it easier to keep your pages up to date.0671

That is how you create a Dreamweaver template.0679