Expression Web DWT's

Make sure you download Tina Clarke's free Expression Web DWT e-book before you start. Create your DWT following the step-by-step instructions.  Now you are ready to develop your content or reuse existing content.

New Content Page

There are two ways of creating this new page. 

Step 1: File >  New > Create from Dynamic Web Template > Choose template > Save File with file-name.htm/l

OR

File > New > Page or Click the New Page Icon

Step 2: Save the page with the file name you intend to use. If you are working with a style sheet that has a light colored background, you can attach the style sheet. If the background is dark, I do not as it is difficult to see the content.

Step 3: Create the content for your page including any graphics you want to use. Add a page title and your meta tags for keywords and description. Save the page. Validate the page.

Screenshot of content page before dwt is attached.

Click on image to view actual page. If you view the source for the page, you will not see any of the <div> tags that are part of the dwt.

Step 4: Attach the dwt to this page making sure to choose the correct editable region.

Screenshot attach dwt dialogue box.
Click thumbnail for larger image.

If you have other editable regions that need to be changed, click on the region and make the change. Example: You may have your masthead as an editable region. Make the changes and save the page. If your menu is an editable region because it changes from section to section, make the changes here.

Step 5: Save the page, make sure it validates. You are finished. Finished Page with DWT Attached

Existing Content Page

Step 1: Open the existing page in Expression Web. If it has an older dwt attached to it, detach the page from the dwt.

Format > Dynamic Web Template > Detach from Dynamic Web Template

Step 2: Clean up any coding errors and remove inline styles. In Code View, delete everything between the opening and closing <body> tag EXCEPT the actual content of the page. Make sure you do not leave behind any of the <div> tags from the previous layout. Leave the current doctitle and meta tags as is unless you need to edit them. Validate the page before you attach the dwt.

Step 4: Attach the dwt, make any edits you need to other editable regions like the masthead or menu. You are finished.

There are of course other ways to do this. To me this is the simplest especially for those of you new to using dwt's.