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 Educator.com

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!

Creating Editable Regions

  • Create a new page from the template & save it as template-page.html
  • Show how page areas are locked except the editable area
  • Everything is locked on a page created from a template automatically
  • We have to “unlock” the content areas of the page that we want to be able to modify from page to page
  • To unlock these areas, we create editable regions on the page
  • We will create 2 editable regions on our template, one for the left column and one for the right column
  • Create 2 editable regions on the page named left & right
  • Save the page & update template-page.html
  • View the page created from the template, you will now see 2 tabs & you can edit within these regions of the page

Creating Editable Regions

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
  • Create Editable Region for Content 1:53
    • Insert Editable Region
    • Set Name for Editable Region
    • Save and Update Template
  • Create Editable Region for Nav Bar 4:48
    • Select and Insert Editable Region
    • Save and Update Template
  • Update Current Page 7:16
  • Summary 7:49

Transcription: Creating Editable Regions

We are now going to take a look at working with Dreamweaver templates.0000

I have created a new template for my website, called innerContent, that was based on my inner.html page that I had all set up and organized and designed.0005

I have converted it to this .dwt file as a template, and I did create a new page from it, called page-from-template.0019

I am going to close up that page-from-template; I want to work on my template file.0029

Right now, my template has no editable regions; so what happens is: I can't edit anything on any pages created from this template.0036

I also notice my template does not have a title; so I'm going to go ahead and copy the Wanderlust Travel from the top of the page, and I'm going to paste it into my title area.0047

I'll do a quick save; remember, whatever is in your template goes onto every page on your website.0062

Now, the other thing I should do is just double-check and make sure there is nothing else I want to change before I start working with this.0069

This page looks fine; there are some minor edits I need to do, and I clearly need to style this--that type of thing.0080

But overall, this page is in good enough shape to be able to create my editable regions and start applying this template to other pages.0089

So, how do you create an editable region?0101

I am going to close up, by right-clicking, my Properties area, just because it's taking up a fair amount of space on my screen right now.0104

And what I am going to do is select the area I want to be able to change.0113

So, I look at the page and say, "OK, on this page, if I am basing every other page on it, what do I want to change?"--and clearly, this area here would be the area I would want to change when I create a new page.0119

I want to put proper content into this area; so I'll go ahead and select that.0135

Now that I have it selected, I'm going to go to the Common tab in the Insert bar, move over to this area, and it is basically the last dropdown black arrow.0142

If I click on it, I am going to choose Editable Region.0154

Now, yours may have shown Make Template; as long as you haven't used this dropdown yet, that is where it is going to be--but click on the down arrow and go down to Editable Region.0159

As long as I use that Editable Region, it is now going to remain as the pencil icon.0173

When I chose that, you can see, Dreamweaver is prompting me for the name of this region; what we do is give each piece a name--and when we go to apply a template, you will see why that name is important.0179

I am going to name this Content Area--it's my main content area on my pages.0194

I'll go ahead and click OK; and when I do that, you will see, this area changes a little bit.0202

First of all, whatever I named that editable area shows up in the tab here; and all of my content that I had selected is now inside that area.0209

Let me go out to that page-from-template after I save, and you will see what happened.0222

Let me open up page-from-template (that is the page we created from this template originally), and you can see, nothing is editable at this point.0228

I am going to go over to my template, my .dwt; I have added an editable region--now I need to save.0240

As soon as I save, Dreamweaver is going to say, "This page was created from this template; do you want to update that page also?"--and I am going to say "Update."0248

And you will see, Dreamweaver checked out the page and did update it; so let's see what happened.0260

If I go over to page-from-template, you will see I now have that tab area; and look at what I am able to do.0267

As soon as I move out of that area, I can no longer edit; but when I am in that box of content, or content area, that editable region, I am able to update.0274

So, what I want to do is the same thing in this right-hand column, to create another editable region.0288

You can have multiple--you can even nest editable regions inside of others.0296

I am going to select these two pieces; this is going to become another navigation bar within a section or area of the site, if I need it; and I also want to highlight some of the images from our different travels in this area.0302

What this is, is a placeholder--it is just basically an image tag with no image inside of it.0321

I'll select that, just like I selected the content in this area; I'll click Editable Region; it is going to create that region; and I am going to call this Right Column.0330

That is going to become an editable region, just like this; and you can see, it is editable in my template, but once I save this, it will also be editable in any pages created from that template, provided I say "Update."0345

I will go ahead and say "Update"; you can see, Dreamweaver changed it; and if I go over to page-from-template, it has been edited.0364

Now, I had page-from-template open when I did this; so notice, it has been changed and not saved.0375

You don't have to have these pages open in order for Dreamweaver to change them, and it is actually better if you don't, because this was changed, but I might (after working in the template for a while) say, "Well, I know it looks like it hasn't been saved, but I didn't make any changes to it."0383

So, you go to close it, and you say, "No, don't save changes"--but what ends up happening is: when I reopen it, you will see...0404

Open Recent, page-from-template: you can see, it looks like Dreamweaver did not update it.0417

But Dreamweaver did--it is just that this page has not been updated, because I added an editable region here and another one here, but did not save it because it was open.0424

If this ever happens, there is a way you can force an update to this page: I will show you that now.0437

If I click the Modify menu and go down to the bottom For Templates, notice, there is an option that says "Update Current Page."0445

I can go ahead and do that, and look at what happened: Dreamweaver compared this page to the template and updated it for me; now, I will do a save.0456

That is adding editable regions to Dreamweaver templates that allow those areas to be editable on any new pages you create from the template.0470

Everything that is not in an editable region on that template page is locked down, and you cannot change it unless you go back to the .dwt file in order to do that.0482

That is how you create editable regions on Dreamweaver templates; and if you want to be able to edit it on any pages from that template, you need to go ahead and specify those to Dreamweaver.0495

We also took a look at how to update a template page, or a page created from a template, just in case you closed it and didn't get that saved.0510

This also allows you to just double-check and make sure that your template and your page created from the template do match.0522

That is how you create editable regions on your web pages within template files in Dreamweaver, and also how you can force an update to a page created from a template, just in case you need to, within Dreamweaver.0531

That is adding editable regions to Dreamweaver templates; and I think you will find this a very handy feature for working with pages within your website.0550