Join our community
- Expression web tabbed menus
- Expression Web Forum
- Expression web resources
- Build Expression Web Template 1
- Build Expression Web template 2
- Build Expression Web Template 3
- Style horizontal Navigation with CSS
- Style vertical menu with CSS
- Style the main content area
- Style the footer
- Centre a page
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- RSS feeds
- 10 Tips
- Page includes
- Insert flash in expression web
- Expression web dropdown menu
- Use XML with Expression Web
- Point and click easy drop-down menu's
- Table Based Layouts
- ASP.NET Ad Rotator
- Display Data
- Search database using a text box
- Transparent Text
- Bold text - Formatting
- Date and time
- Who are you
How to build an Expression Web DWT (Dynamic web template)
What is a DWT and why would you want to use one?
DWT's are unique to FP2003 Expression Web and DW MX. Basically a dwt is a site wide template that you can assign regions to. You decide if that region is editable or non editable.
DWT editable region
This is content that you can freely change. Typically these editable regions will be your site content and graphics or news/call out boxes in the side panels of your site.
DWT Non Editable regions.
This is content that cannot be changed! We say cannot be changed but of course it can. Non editable regions can be changed only in the DWT page.
To understand this you need to understand how a DWT works.
Basically, you build a master template, much like the Expression Web tutorial that is available here
Once the master template is saved as a DWT, you attach it to blank pages to create a web site. When the dwt is attached to a blank page, you can only change the editable regions on that page.
So what is the benefit of a DWT?
Assume you have a master page, and only the main content area is editable. This would mean that things like the header/banner, the navigation and the footer CAN ONLY BE CHANGED IN THE DWT PAGE. If you change the DWT page, all the pages in your site that use the DWT will change also. So say you add links to the menu in the DWT. Once saved, it will update all the pages attached to it. This is a big bonus and a bit like page includes on steroids!
So when you have a master page completed, creating web sites is quick and simple. Site wide changes are even easier.
How to build a DWT tutorial.
To create a Expression Web DWT, we must first have a template to work with. Open the Expression Web template tutorial masterpage and do the following.
Click file, save as
Click on the Save as type - dropdown button
Select Dynamic Web Template from the dropdown
Your masterpage dwt should now be open in Expression Web
Select all the text except for the heading and the first paragraph.
Delete the text
Save your page
We now have a DWT that has been created from our original masterpage.htm.
The DWT is useless without editable regions. Whilst you can make any amount of changes in the DWT file, only the editable regions will be editable in the pages you create from the DWT
So we need to make an editable region.
Select all the text in the main text area of your DWT page
Right click with your mouse
Select manage editable regions from the drop down
In the region name box type the following
Click the add button
Maincontent is added to your editable regions
Click the close button
You can now see that the text on your DWT page is surrounded by a yellow border and titled maincontent
Save your page
So lets test the DWT
Click on the new page icon
A new blank page is created for you
Click on Format from the top most menu bar
Select Dynamic Web Template and then attach dynamic web template
Click on masterpage.dwt from the file list
Expression Web will tell you that 1 file has been updated.
This means that Expression Web has attached the DWT to your blank page.
If you have 45 pages in your web all using the DWT, Expression Web will kindly tell you that 45 files have been updated when you make any changes to the DWT and save them.
Click the close button
OK, you should now see the blankpage looks like our DWT page. At the moment the page will be called Untitled_1.htm (assuming you have not added any other pages.)
We obviously dont want the default DWT text in place so lets change it.
Click anywhere in the page title. Expression Web will highlight
this as being a H2 in the maincontent editable region. The maincontent area
is the only area we can change when making our web site. All other changes
must be made in the DWT page.
Our next tutorial shows how this is done.
Select the H2 tag from the quick tag toolbar this will select the whole of the heading
Type a new heading such as the following
New page text heading
Select the 'new text heading' text with your mouse
From the style dropdown list in your formatting tool bar select Heading 2 <h2>
Carefully select the paragraph text using your mouse. Delete the text
Make sure that the blank <p> tag is still in place
Start adding your new content
When you have finished adding content save your page
In the save as pop up type
as the file name.
Save as type - web page - should be selected.
Congratulations, you have created a basic but very powerful DWT.
how to build an Expression Web DWT Tutorial Flash based
Want to see what your page might look like with some graphics added? View an example template here. Nothing has been changed from our original Expression Web template tutorial save to say i have added the text 'Navigation' just above the left side menu.