Expression Web help

• About
• Expression web tabbed menus
• Expression Web Forum
• Expression web resources
• CSS
• 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
• .style1
• Build Expression Web DWT Tutorial
• Graphic Template example
• Free Expression Web Templates
• Add RSS to Expression Web
• Expression web forms
• Contact
• RSS feeds
• 10 Tips
• Page includes
• Insert flash in expression web
• Expression web dropdown menu
• 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

Click save

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

maincontent

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

testpage

as the file name.

Save as type - web page - should be selected.

Click save

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.

 

 

  RSS

Our forum feed can be found here

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now