Dynamic Web Template


A Dynamic Web Template is a HTML-based master copy of a web page that you can create to contain settings, formatting, and page elements such as text, graphics, page layout, styles, and regions of a webpage that can be modified.

When you attach a Dynamic Web Template to the pages in a website, that template defines the layout for those pages. You can use any number of Dynamic Web Templates in a website, and you can attach a Dynamic Web Template to as many pages as you like.

By using Dynamic Web Templates, you can create HTML pages that share the same layout. In addition to providing a shared layout, you can make some regions in a template available for editing while preventing changes to other regions in that template.

This means that you can allow others to add and edit content, yet still preserve the layout of the pages and the template itself.

The Need for Dynamic Web Templates

The most important concept of website design is to maintain a consistent look and feel for your site and with Dynamic Web Template you can achieve it. Dynamic Web Template provides −

  • Basic pages such as a Sitemap, Contact, About, and Search pages. A visitor should be able to reach your home page from any page on the site.

  • Consistent navigation throughout your site.

  • Consistent look throughout the site.

Create a Dynamic Web Template

To create a Dynamic Web Template (DWT), you start with an empty HTML page and save it as a *.dwt file. Let’s go step by step and learn more about it.

Step 1 − Open the index.html file and select File → Save As… menu option, which will open the Save As dialog.

Menu Option

Select the Dynamic Web Template (*.dwt) from the Save as type dropdown and change the file name from the index to the master.dwt and click the Save button.

Step 2 − Now, you will see a new file master.dwt is created in the Folder list. Let’s create a new HTML file and call it index_2.html. Let’s open the master.dwt file and in the Design View or the Code View, right-click inside <div> tags of the main content.

HTML file

Step 3 − From the menu, select the Manage Editable Regions… which will open the Editable Regions dialog.

Editable Regions

Step 4 − In the Region name, type a name for the editable region and then click Add. Repeat to add additional editable regions if you want.

Region Name

Step 5 − Once you have added all editable regions, then click Close. Now go to the index_2.html file and select it in the Folder list as well.

All Editable Regions

Step 6 − Go to the Format menu and select Dynamic Web Template → Attach Dynamic Web Template… which will open the Attach Dynamic Web Template dialog.

Dynamic Web Template

Step 7 − Select the Dynamic Web Template which here is the master.dwt file and click the Open button. You will receive a warning message. Click Yes.

Warning Message

Step 8 − You can see that the same template is applied to the index_2.html file. Similarly, you can add the same template to as many HTML pages as you want to the website.

Same Template

Step 9 − On this page, you can edit only the main-content section. If you move the mouse to the other section, you will see that it is not editable and the mouse curser also changes to the red cross circle.

Main Content Section

Step 10 − To see how it looks, go to the File menu and select Preview in your browser.

Select Preview