Expression Web 3 Tutorial 
Step 7:  Dynamic Web Template (DWT)

Training DVDs and Online Class teach you step by step how to Design web pages and show you how to turn a page into a Dynamic Web Template.

NOTE:  I must emphasize to you, that you cannot make a DWT without first learning how to Design a Web Page.

What is a DWT?

A Dynamic Web Template is an HTML-based Template that we can create in order to quickly make new web pages.

As usual, there is more than one way we can create a Dynamic Web Template.  
Please Read Through This Before Actually Doing It.  Read over Option 1 and then Option 2.  Then follow the Tutorial that follows Option 2.

Option 1

1.  We could create a DWT from Scratch.  Click File, hover over New, then choose Page.

2.  With General chosen in the left column, choose dynamic web template from the middle column, then click OK.

After clicking OK, you will see the following:

dwt

The first thing you would do is delete the editable region on the DWT.  Then start Designing your layout by first creating a style that will remove the default margins from the body (or use a CSS Reset).  You can also add a background color while you're at it. 

 

body {margin: 0; padding:0;}   <-- Removes default margins from the body.

 

Then, you will simply be left with an empty div.  You can then style this div as the container.  Notice that this first div is an 'editable region'.  Therefore, your entire page will be editable. 

You will need to modify the editable region by adding more editable regions at the very end of designing this page. (Again, just delete this initial editable region, and after you've completed your layout etc... insert the editable regions that you want.

Typically, the only areas of a web page that need to be editable include the content areas.  The content is the unique feature of each web page.  The main navigation menu is typically a non-editable region. 

One Pitfall:

A dynamic web template can not be previewed in a browser like our other web pages can.  You need a special server set up on your computer in order to preview your dynamic web page.  Personally, that's just too much trouble to go through for this one web document.

Consider doing this:  design your home page and then save it as a dynamic web template, then add editable regions.  This way, you can easily preview the web page while you make it, and do so without the hassle and extra work of setting up a server just to view this one page! 

Such nonsense.  I certainly do not expect you to jump through hoops so you can preview your dynamic web template in a server.  That is too much work in my mind.  (Of course, if you intend to use PHP, then setting up a local server is a good idea.)

So, you have to design your home page anyway!  Why not save it as a DWT when you are finished!  So let's do that.

  

Option 2:  Keep It Simple

Design your home page and save it as a dynamic web template, then add editable regions to the .dwt, and finally create more web pages from the .dwt.

Either way you look at it, you must first learn how to make and design a web page before you can make a Dynamic Web Template.  Therefore, here are the necessary steps to take before saving your home page as a DWT"

 Design one Web Page (the home page)

  1. Make a Layout
  2. Add a Navigation Menu
  3. Insert all Graphics and Background colors, etc.
  4. Insert content boxes and add your home page content as you normally would.
  5. If you want a navigation menu in your footer, do that now as well.  Don't forget to add your copyright too. 
  6. Overall, just make one complete web page.  We will modify this page once we save it as a DWT.
  7. Save the page as a DWT.
  8. Add Editable Regions to the DWT.

 

NOTE:  When you save the home page as a DWT, the home page remains intact and you will continue to use it as the home page.  You also have a new page:  the DWT. 

 

Tutorial: Save the Home Page as a DWT

Have your home page open in the main editing window. 

1. Now go to the Folder List, choose your home page by clicking on the index.html file. Then click File and choose 'SAVE AS...'

2.  A new dialog box opens.

save as dwt

File Name:  Change the File Name to template or master, or whatever you want to name your DWT.

Save as type:  click the drop down menu next to Save as type and choose Dynamic Web Template (.dwt).

Click OK.  

The result will be a new page which will have the name template.dwt or master.dwt (or whatever you named it followed by .dwt).  The Dynamic Web Template has a .dwt extension.

You will also still have your home page, index.html in the Folder list.  

3.  Add Editable Regions:  do this by right clicking on an element that you want to make editable,  and choose Manage editable regions.   See the image below.

editable regions

Region Name:  name your editable region.  Do not place spaces in this name.

Click ADD.

Then click Close.  

 

Continue to add Editable Regions as you please.  Be aware, you must have at least one editable region in order to create new web pages from your DWT. 

 

Things To Keep In Mind

Do NOT remove the existing editable regions 'doctitle' and 'body'.Removing the doctitle will lock you out of the Page Properties, meaning you will not be able to add a page title tag to each new page, nor a description.

Also, do not specify a page title or description for the DWT.  Leave these as they are....blank.  Each web page your create from the template must be given a unique title and description.

How to Create New Pages From the DWT

1.  In the Folder List, right-click on the DWT file and choose New from Dynamic Web Template.

2.  Click the Save icon to name the new web page. 

3.  Add your content in the editable regions.   You will only be able to change that content in an editable region. 

***You will also be able to change CSS Styles by editing any web page.... please keep this in mind so that you do not screw up your pages. 

Check out the help section for more information about the DWT.

 

Summary

A DWT is just a fancy term for an HTML Template.  In order to make this template, you must first learn how to make a layout, insert navigation menus, insert images and other media, add content and HTML tags, style everything with CSS....etc.  Only then can you begin working with a DWT. 

A DWT is meant to streamline your efforts and save a lot of time.  You can quickly create new web pages from a DWT instead of creating every web page by hand. Another benefit of a DWT is the creation of a consistent look and theme throughout your entire site. 

Consistency in overall appearance is important for usability reasons....  it helps your visitor to know they are still on your web site without having to think about it.  ( A Great Book you should all read, "Don't Make Me Think" discusses these kinds of usability issues.)

 

 

Back to Step 6:  Designing the Web Page