In Part One of this tutorial series I showed you how to insert editable regions for restricted editing only. This was so that a clients edits could simply be restricted to certain areas of the page. In this case we were protecting the design and layout.

In Part Two, I then showed you that if you place any server side code outside an editable region that it will be protected from editing and will be maintained in the page when it is saved. This opened up a lot of dynamic possibilities for your websites and developing processes.

In this tutorial, I will show you how you can team up Webedit Professional and Dreamweaver to make sitewide editing fast and very efficient. You will need to understand the way we will update the site so that it can be applied to any program that has a templating system. I will also show you how to set up a site from scratch and make it workable within the Dreamweaver program.

In this whitepaper, I will show you how to allow your clients to maintain a website within editable regions and allow yourself to make sitewide changes outside editable regions with a seamless process.

I must remind you again that the restricted editing tags you used in part one & two are the same ones that protect server side code as well as restrict editing!! This is very important to note; nothing has changed in this whitepaper, except that we are learning about more functionality – we can just do more with the same tools.

You already know that Webedit Professional maintains code that is outside an editable region. This means that it will only edit what is inside an editable region.

Editing a Dreamweaver template, on the other hand will allow you to do the exact opposite – it will edit what is outside an editable region, and will leave all the content inside the editable regions alone, and maintain all your client editing. Furthermore, Dreamweaver will ask you if you want to update all pages linked to the template when you make any changes to it, so it saves you production time when making sitewide updates. Imagine making the same change on 50 html pages, it wouldn’t be a good experience. Now imagine making this change to 1 page and then all other pages are automatically updated – sounds much better, because now you have more time.

Of course, if you would also like to update the actual content, then you can either use the online editor, or do it locally and then upload using Dreamweaver.

If you already know how to setup Dreamweaver templates locally, I invite you to do this now.

Your first approach to producing a website from scratch is to have your initial design layout. I’ll grab one from MyFreeTemplates.com and make it into a dreamweaver template. Before I even do this though I will need to setup my new site in Dreamweaver.


1. Open Dreamweaver and then create a new site by going to Site >> Manage Sites


fig1.1 – Create a new site in Dreamweaver

Then create a new site and follow the wizard. You should generally create a folder beforehand where you will keep your site – I usually create an images folder and a blank index.htm file as well (just to make dreamweaver happy).


fig1.2 – Site Manager Initial screen

After you fill in the rest of the details for the site, you will be ready to insert your layout and then save it as a dreamweaver template to build your full site from it.


2. Insert your initial site layout into this new site. I am going to use the MyFreeTemplates.com layout - jd_c040. Look below, this is a snapshot of what the new site will look like and the areas that I want the client to edit on each page.


fig 2.1 – The highlighted areas will be editable in WebEdit Professional Just copy the files over into your site using explorer


fig 2.2 – Dreamweaver sitemanager


3. Open the jd_c040.html file in DW then save it as a new template.



fig 3.1 – HTML page conversion to a Template, Save as Template


I tend to think of my sites in levels. So the first page or a homepage will be a levelone, then an inner page will be a level two. Usually the layouts are different and so I used different templates accordingly. This one will be called ‘levelone’.





fig 3.2 – Save As Template Dialog Box


You’ll notice when you click on ‘Save’ that a new folder will appear in your site manager called Templates. This is where DW will store your template files.


HINT - Please note that you don’t need to upload this folder when you are publishing your site – it is only for local use.



fig 3.3 - Sitemanager with new Templates folder


4. Setup your editable regions in this template. Simply highlight the content you want to make editable, then go to the top menu to Insert>>Template Objects>>Editable Region





fig 4.1 - Inserting an editable region in your Dreamweaver template


Make sure you name your editable region


fig 4.2 – Name your editable regions The end result should look like figure 4.3 – Dreamweaver will insert small header names to show you the name of the editable region.



fig 4.3 – Dreamweaver Editable regions Now that your levelone template is setup for dreamweaver, you may now go ahead and use this template to build your whole site.

5. Build new pages from the initial template. Go to File>>New. A dialog box with two main tabs (general & templates) will appear. Click on the Templates tab. This will show you all your current websites and all the available templates. When you choose a template, it will show you a preview (wow)
fig 5.1 – Create a new file from a template

Please note: This file you create is what I call the ‘output template file’. This is the file you can use in WebEdit Professional to place in your templates directory. WebEdit clones this file when it creates new ones so that all your future files are still linked to the original template that resides in your local ‘Templates’ directory.


Save your file over the existing index.htm file and continue to build the rest of the site. Don’t worry about linking the navigation etc yet – you can do this all in one file – your template. I have built home(index.htm), overview(overview.htm), contact us(contact.htm), services(services.htm) and partners(partners.htm)



fig 5.2 – The output site linked to the levelone template

Now upload the whole site and start editing with Webedit Professional. You will only be able to edit within the editable regions tags with the editor.


The easy part is that your client simply edits the site once you upload it. They will be restricted to only edit the content within the editable regions tags.
Now that the site is setup with editable regions and it is also linked to a template file, you can make sitewide changes using Dreamweaver without hindering any of your clients editing.

Just download all the html files of the site, so that your local copy is updated with the clients latest changes. Then make your change to the template file – when you try to save the file, Dreamweaver will ask you if you want to update the changes on all files that are linked to this template. Of course you do, click yes.

Dreamweaver will do the rest. Then simply upload your changes.

This editable region feature and the integration of WebEdit Professional and Dreamweaver have made life so much easier for me personally (seriously!). But there’s a lot more you can do now because of the server side code preservation and due to the fact that you can also add dynamic elements to the template itself (and let dreamweaver handle the rest).

I’m sure I’ll be playing around with more of this code very soon and I’ll show you some very cool features you can add to your template and ultimately the whole site. Next on the agenda will be some includes in your template rather than inserting the code for it. Did you know you can also use .php or .asp file as templates as well?