How To Create A Dynamic Web Template

What is dynamic web template?

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

When you are adding web pages of a Dynamic Web Template in a website, that template defines the layout for those pages. It allows to add more number of Dynamic Web Templates in a website, and you can also attach a Dynamic Web Template to as many pages as you like.

If you want to create more HTML pages with Dynamic Web Templates that can be shared in the same layout. If you want to make changes in a template to edit it while making changes to other regions in that template.

It allows 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 main objective of website design is to maintain a consistent look and feel for your site. You can get it with Dynamic Web Template. 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.
Provides consistent navigation throughout your site.
Provides consistent look throughout the site.

Create a Dynamic Web Template

If you want to create a Dynamic Web Template (DWT) you need to start with an empty HTML page and save it as a *.dwt file. Here's step by step process 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 – Now select the Manage Editable Regions from Menu open the Editable Regions dialog.

editable_regions

Step 4 – You can type a name in Region Name for the editable region and then click Add. To add more repeat it for additional editable regions.

region_name

Step 5 – If you have complete adding 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 – Once you select the Dynamic Web Template in the master.dwt file and click the Open button. You will get a warning message then click Yes.

warning_message

Step 8 – The same template is applied to the index_2.html file. You can add the same template to as many HTML pages as you want to the website.

same_template

Step 9 – Here you can edit only the main-content section. To edit the content , move the mouse to the other section and the mouse curser also changes to the red cross circle.

main_content_section