Creating a Dynamic Page Template with Microsoft Expression Web

Posted by: Minal Agarwal , on 1/7/2009, in Category Expression Web
Views: 30455
Abstract: This article gives you a basic insight into what are dynamic web templates and how do you create one and use it to create web pages with same look and feel.
What is a Dynamic Web Template?
A Dynamic Web Template is an HTML-based master copy of a Web page. It can contain page layout, page elements, settings, formatting, styles, graphics and certain regions that can be edited. The purpose of a dynamic web template is to derive or create pages in a web site based on it, to maintain an identical and consistent look and feel throughout the web site.
Why do I use a Dynamic Web Template?
‘I have a web site that has around 500 pages. I have to revamp certain portions of my web site, and that involves a lot of changes since I have to sit and edit each page manually!’
‘I have already created 20 pages in my web site and there are lots more to create. I am tired of copying and pasting the basic layout in each page. Is there a solution to this?’
Have you come across such a situation if not then you are lucky. If yes then you are at the right place! This is exactly why you would want to create and use dynamic web template.
You create a template with the layout and all the page elements, formatting, styles that would be common across all the pages in your website and create editable regions wherever you want to put elements that would be specific to each page. Then create new pages based on this template and go ahead with customizing each page. Isn’t this easy? All you have to do is attach the dynamic web template to your pages.
How do I create a Dynamic Web Template?
In the menu bar go to File > New > Page > New dialog box. Then choose Dynamic Web Template from the list of General Pages.
New Dialog Box
Click OK to create a dynamic web template as shown below:
New Dynamic Web Template
As you notice there is a box with brown border that is created. When you click on the box it shows <DWT:editable> in the top pane, see below:
Defualt Editable region
This area is an ‘editable’ region of the template. Even though it is not specifically mentioned, content of a web template is divided into editable region and non-editable region. Non-editable region is a specific part of the template, content of which is unalterable in all the pages that are created based on the template. Unlike non-editable region, an editable region is that portion of the dynamic web template, the content of which is specific to that page. To put it in simple words; when a page is created based on a dynamic web template all of the content of the page derived from the template is locked excluding the content in the editable regions.
So whenever you create a template for a website you would enter the elements like text, images and the same that would be common across all pages. You could create one or more editable regions in the template where you need to enter page specific data. Later when you create individual pages from this template you would fill in the content that is specific to those pages into these editable regions.
Though by default an editable region is created in the template you can always delete it and create a new one wherever and whenever you want. To do that, right click on the editable region and choose ‘Manage Editable Regions…
Manage Editable Regions menu
Editable Regions dialog box
Enter a ‘Region name’ and click on ‘Add’.
New Editable region
You can similarly create multiple editable regions in between non-editable regions in your template. Once you complete creating the template you can now create as many pages from your template as much needed in your web site. But before that you need to save it. A dynamic web template is saved with an extension of ’.dwt’. Save the template in the same location of your website, but you can save it anywhere else.
To create a new page based on the template, go to New > Create from Dynamic Web Template…
Create new page from dynamic web template
Attach Dynamic Web Template
Then choose the template and Open. Expression Web will inform you that the new page has been updated with the content from the dynamic web template.
Information window
Click on Close and go to the new page. The page would look exactly same as the template. But as you roll over your mouse you may notice a change your cursor in some regions. That is because all the regions except the editable regions are locked, and hence in the above example if you move your mouse over the image or anywhere else except the ‘PageContent’ region the pointer changes to a red circle with a cross line through it.
Non editable region
The content in the editable region is displayed and can be edited.
Expression Web maintains a link between the dynamic web template and the content pages derived from the template. So whenever you make any changes to the template, it will ask you if you would also like to update the content pages that are linked. Hence dynamic web templates help you to create multiple pages in your website with a consistent look. Also whenever you decide to make any changes in your pages, you do not have to go to each page and do it individually. Instead edit the dynamic web template and let Expression Web update all the linked pages with this change. Your job is much easier with templates.
You can always choose various actions on your pages related to the dynamic web template from the menu, by choosing Format > Dynamic Web Template. See below:
 Dynamic Web Template options
Conclusion
This article was to give you an overview of creating dynamic web templates and using them to create your web pages. I hope it was useful to you. If you like this article then subscribe to the RSS and stay updated with new articles.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook