- Microsoft Expression Web Tutorial
- MS Expression Web - Home
- MS Expression Web - Overview
- Environment Setup
- MS Expression Web - New Website
- Blank Web Page
- Webpage Layout
- MS Expression Web - HTML Layout
- Horizontal Navigation
- Vertical Navigation
- MS Expression Web - Validate Pages
- Dynamic Web Template
- MS Expression Web - Search Page
- MS Expression Web - Images
- MS Expression Web - Hyperlinks
- MS Expression Web - Video
- SQL Datasource
- MS Expression Web - MS Word
- MS Expression Web - Gridview
- MS Expression Web - Master Pages
- MS Expression Web - Data Table
- MS Expression Web - Publish
- Backup Website
- MS Expression Web - Add-Ins
- MS Expression Web Resources
- MS Expression Web - Quick Guide
- MS Expression Web - Resources
- MS Expression Web - Discussion
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.
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.
Step 3 − From the menu, select the Manage Editable Regions… which will open the Editable Regions dialog.
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.
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.
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.
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.
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.
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.
Step 10 − To see how it looks, go to the File menu and select Preview in your browser.
