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!

Applying a Template

  • We are going to look at how to move page content onto a template page
  • In Dreamweaver this is known as applying a template to a page
  • Now that we have a template with editable regions, we can move our pages onto this template
  • You can apply a template to any existing page
  • Open specials.html & have the assets panel open
  • Right click the template in the Assets panel and Choose Apply Template to page
  • You must designate where to move the content from the html page onto the template page
  • Once that is chosen, the page is moved into the template page

Applying 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
  • Applying a Template 0:40
    • Apply Template to About Us Page
    • Move Content to New Region
  • Delete Library Item 4:51
  • Apply Template to Contact Us Page 5:27
  • Summary 7:34

Transcription: Applying a Template

We are now going to take a look at how to work with Dreamweaver templates--specifically how to take pages that are not on your template, that have already been created and have page content, and how to apply the template to that page.0000

What we are going to do is make a few of our pages in our website attach themselves to this template, so they can all match.0017

I am specifically going to be working with these four up in the navigation bar.0027

I'm going to be opening these pages and placing them into this template look for our website.0033

Let's get started: I am going to move over to the Files panel first, and I need to open these specific pages that I want to work with.0041

I'll go ahead and open About Us.0050

As you can see, this has a library item on it; but it doesn't have anything that looks like our template right now.0054

What I am going to do is place this into the template; so I'm going to go up to Modify, go down to Templates, and go to the very top one.0063

I'm going to tell Dreamweaver to apply my template to this page.0074

What Dreamweaver is going to do is ask you which website and which template--we don't have very many right now, so that is an easy task.0081

Just make sure "Update page when template changes" stays checked; it is checked by default.0090

I'll click Select; yes, that is the template I want to apply to this page.0097

Now, I tend to find that people get very confused by this dialog box, but it is actually very simple.0103

When you take a page like this (this HTML page), it has complete HTML code on it; my template page has complete HTML code on it; if they didn't, we wouldn't be able to view them in the browser.0112

The problem is: we can't take everything from both pages and merge it together, because then we are going to end up with duplicate HTML code, and the browsers will not be happy about that.0128

Dreamweaver is actually asking you here, "What do you want to do with the extra code that you have when you try and take these two pages and put them together?"0141

What I want to do is say, "Everything in the body section", the body section of this page is everything we are looking at here, in the document window, and what I want Dreamweaver to do is take all of this and put it into that editable region on my template page.0151

The way I do that is: I select the body section, and I am going to say, "Move that content to a new region."0170

And I want to put it into this editable region--so, what this is, is a list of editable regions; so I am going to choose Content Area.0179

Everything here is going to go into that first column on my template.0191

The next piece: Dreamweaver says, "OK, you have this styles.css file attached to this page; what do you want me to do with that?"0196

You won't always get this document head prompt; it is only if there is content up in the upper area of your page in the coding that Dreamweaver is asking you about.0206

And we have a styles.css attached to this page, so that is why we are getting document head; and what I am going to do is tell Dreamweaver to send it nowhere--send it off into space somewhere (in other words, delete it!).0218

So, the body content, which we are looking at, is going to go into that column in our template; we told Dreamweaver, "Remove any extra coding in the head; just delete it."0234

I will click OK, and this is where the magic happens.0246

You can see, our About is now within this page; it is on my Dreamweaver template page.0251

Now, the one thing you want to watch as you do this is: always scan through the new, updated page.0258

You can see, this is the about-us.html page now; it is attached to my template file, the innerContent template; and that is great, but I want to make sure there was nothing on the page that I want to get rid of.0265

Once in a while, you can get extra things at the bottom here, such as extra spacing--it all is based on what your original page had in the content area.0281

I am going to go ahead and select this copyright here; and I am getting that little symbol, because it is a library, so when I select it, it grabs the whole thing; and I am going to delete that library item from here.0291

I am also going to backspace, so I don't have a lot of extra space at the bottom.0306

There is my About Us page, all set to go.0312

I just moved it into my template area.0316

You can see, we still don't have styles for this area or styles up at the top; I'll deal with that moving forward.0320

Let me go out to the Contact Us page and do the exact same thing.0327

Here is our Contact Us page; right now, this is a form, and this form I am going to move into that main content area on my template.0332

I am going to do it a little bit differently this time: if I move over to the Assets panel, and I right-click the template itself, notice, I have an Apply here.0343

Some people find this a little bit easier: what this is doing is: I have selected the template, and did a right-click on it; and it is somewhat hard to see here, but I am going to click Apply, and it gets me into the same interface.0356

So, if you don't like the Modify command, you can always go to the Assets and right-click the exact template you want.0373

And the body section, which is what you are looking at--I am going to put that into the content area; my head section--I am going to say, "Put that nowhere."0381

There we are; I'll go ahead and click OK; there is my form, all set to go.0393

Now, I do have this library item down here again; I am going to delete that, and my file is all set; I'll go ahead and save that.0402

I'll let you work with that same concept on the Destinations and the Specials page, using whichever method you like--either the Modify, Templates, Apply Template to Page (and you always want to have the page open within the Dreamweaver document window if you use this Modify method) can also have that same document open within the document window, right-click on the exact template you want, and say Apply, and that will apply whatever template you have clicked on to whatever page is open in the document window.0414

That is how you apply a Dreamweaver template file to a page; what that does is allow you to choose the content within that present page, and you tell Dreamweaver where to place it on the template.0454

You will see, I could very quickly move these pages into my template files; and now, I can control the overall look, feel, and styles.0469

Instead of having to do it on each individual page, what I can do is do it on my template; and on my template file, I have my styles attached, so now, I can start modifying and customizing all of the pages on my website very easily from one file.0480

Go ahead and make sure you do the Destinations and the Specials page, moving those into the template file, as well.0499

That is how you apply or move your pages into a Dreamweaver template you created; you can see, you get that interesting interface.0509

But once people understand what it means, you will find it a very simple process.0518

That is how you apply templates to a page in Dreamweaver.0524