Dynamic Web Templates with Expression Web 2

Author: Chris Leeds, Microsoft MVP
Web Site: http://ExpressionWebStepByStep.com

Expression Newsletter, subscribe now to get yours.

Visit the Expression Gallery to download the files associated with this tutorial: http://gallery.expression.microsoft.com/DynamicWebTemplate

Since the very beginning of web design, one of the main challenges for designers has been maintaining uniformity from page to page.

Without this page-to-page uniformity the best information will look little more than amateur.  Even though content is king, there’s no denying the intangible aspects of presentation.  The exact same content will be viewed differently depending on the design framework it’s presented within.

Over the years designers have used methods ranging from making a good solid page and just copying and pasting it as they need new pages; a good method for new pages but a problem for maintenance, to using server side includes; nice and generally efficient but server dependent and not all that design environment friendly.

HTML editor applications have provided a range of methods to aid the designer in maintaining uniformity, ranging from things like FrontPage shared borders to other versions of a “Save Time” include.  These methods often didn’t produce code that was acceptable in modern standards-based design practices, or lacked the flexibility required in real-world usage scenarios.

In Expression Web 2 the designer has opportunities to use both server side methods (PHP Includes and ASP.NET Master Pages) and ”Save Time”  methods such as the DWT (Dynamic Web Template).

Because the DWT method is server agnostic, meaning that no matter what kind of server your site is hosted on, you’ll be able to use the DWT, and that it has become a well refined technology, I recommend the DWT as a “first choice” for template systems on most websites.

Any page or template can be quickly converted into a DWT.  The rest of this article will show you exactly how.

Starting with an XHTML Template

1. Open Expression Web 2. If the last web opened appears, select File > Close Site.
2. Click File, Point to New, and then click Web Site. The New Web Site dialog appears.
3. Click Empty Web Site and then replace the last folder name in the location field with \DWT-Example, so that Expression Web will create a new site named “DWT-Example”.

   

4. Click OK to create the empty site. The new site is created and opens for editing with Expression Web 2.

   

5. With the new empty Web site now open in Expression Web 2, click File, point to Import, and then click Personal Web Package. The File Open dialog appears.

   

6. Browse to the location you saved the file DWT-Example.fwp and double click it. The Import Web Package dialog opens.

   

7. Make sure all the files and folders (in this case two) are checked, and then click the Import button. If you’re using Windows Vista you will see a Security Warning

   

   Click the Run button and then click OK on the Confirmation dialog.

8. In the Folders List pane double click the file default.html to open it for editing.

   
   (click image to zoom)

This file is a simple XHTML template. What you’ll do in the following steps is create a Dynamic Web Template and move elements from this layout template into it. You will then create new pages from the DWT and link them to the navigation area in the DWT.

Creating the DWT: Head

9. Click File, point to New, and then click Page. The New Page dialog appears.

   

10. With the General group selected in the left pane double click Dynamic Web Template in the pane to the right. A new Dynamic Web Template is created.

    

    Notice that this new Dynamic Web Template contains two Editable Regions; one in the body area where you can enter text via the Design Pane, and one in the head section of the code. While you can easily right click the page, and then in the context menu click Page Properties to add entries to the Meta tags in the Editable Region, it’s much easier to just work in the code pane and paste your content into the area.

11. Click the tab at the top of your workspace to switch back to the default.html file. Click and drag to select all the elements inside the head section in the Code pane.

    

    Right-click the selected code and in the context menu click Copy (or Ctrl+C).

12. Click the tab at the top of your workspace to witch back to the newly created DWT. Click the line number just to the left of <title>Untitled 1</title> to select the whole line.

    

13. Right click the selected line and in the context menu click Paste (or Ctrl+V). To paste the content you copied from the default.html file into the Editable Region.

    

14. Take a look at the code you’ve pasted. These are fairly common Meta tags. Adjust them to suit your site by editing the values. Also, notice that the character set is declared above the editable region. Click the line number beside the repeated line inside the editable region: <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> and then press the Delete key.
15. Notice that there’s a style sheet link inside the editable region, since one of the main benefits of a DWT is that it helps keep a site synchronized visually, move the style sheet reference to outside of the Editable Region. Click the line number beside <link href="images/main.css" rel="stylesheet" type="text/css" /> to select the entire line. Then right click the highlighted line in the Code pane and in the context menu click Cut (or Ctrl+X). Set your cursor to the right of the line: <!-- #EndEditable --> and press the Enter key on your keyboard to create a new line. Right click and in the context menu click Paste (or Ctrl+V) to paste the Style Sheet link outside of the Editable Region.

    

    That takes care of the work in the head area of this new template. It’s important to have at least an entry for each Meta tag you want to use. Once the DWT is attached to a page, changing content inside of the Dynamic Web Template’s Editable Region can be written back into all the pages that it’s attached to, potentially overwriting custom editing you’ve done on the content page’s head section.

Creating the DWT: Body

16. Switch back to the default.html file. Set your cursor anywhere in the Design pane of the page and notice that the first containing element listed at the top of your workspace in the Quick Tag Selector is a <body> tag. Point to that tag entry and click the drop-down arrow on it. In the drop down menu, click Select Tag Contents. Right-click over the highlighted code in the Code pane, and in the context menu, click Copy (or Ctrl+C).

    

17. Switch back to the Dynamic Web Template and set your cursor in the Design pane. Notice that there’s very little there: just an Editable Region and a single HTML <div> tag. Point to the <body> tag on the Quick Tag Selector and click the drop-down arrow. In the drop-down menu click Select Tag Contents.

    

18. Right-click the highlighted code in the Code pane, and in the context menu, click Paste (or Ctrl+V). You’ve now moved all the code from the original template file into this newly created DWT. You’ve also pasted over, and as such removed, the original Editable Region, but we’ll replace it in the following steps.
19. On your Common toolbar, click Save. The Save As dialog opens. Name the file template.dwt and click Save.

    

    Examine your new DWT. It’s visually identical to the original HTML template file from which you copied all of the elements. Clearly, there’s an obvious content area in this page; it’s where all of the content is. Clearly, this would be an area to which you would want a user to be able to edit or add content. In the following steps we’ll make it an Editable Region.

Adding an Editable Region

20. Set your cursor in the line that reads Free Template. Looking at the Quick Tag Selector, it’s clear that you’re in an <h1> element, but also that it’s contained within a <div>: <div #content>. Click the <div #content> entry on the Quick Tag Selector to select the tag and its contents.

    

21. With the <div #content> selected, Click Format, on the Common toolbar, point to Dynamic Web Template, and then click Manage Editable Regions. The Editable Regions dialog appears.
22. Type content into the Region name field, and then click Add.

    

    A new Editable Region is inserted into your page, wrapping the code you previously selected.

23. Click Close on the Editable Regions dialog and then, on the Common toolbar, click Save to save the changes to your Dynamic Web Template.

At this point you’ve got a DWT that’s ready to go, but because of possible inadvertent overwriting later, it’s important to get the content of your Editable Region adjusted EXACTLY how you would like it to be when it’s first attached to a new page.

Generally it’s recommended to have some simple text with a little mark-up in the region to give users a look at the styles affecting their content, and to serve to take up some space in the design. Lipsum text (www.lipsum.com) is popular among designers, but for this exercise we’ll just insert a line to identify the content region in the DWT and move on.

24. Set your cursor in the <h1> in the content area. Notice on the Quick Tag Selector that the <h1> is now contained in both the <div #content> but also the <DWT:editable>. Point to the <div #content> entry and click the drop-down arrow. On the drop-down menu, click Select Tag Contents.

    

25. Type (Content Area) and click Save on the Common toolbar.

Now that the hard work is done and you have a good solid DWT to start with, it’s remarkably fast to create an entire website. The following steps will create a logical folder structure for a simple Web site, and then link the pages together. Uniformity and ease of editing are assisted greatly by the use of the DWT.

Creating a Simple Web Site Based on the DWT

 
26. In the Folders List task pane, click and drag the original default.html file into the images folder to get it out of the root of the web site.
27. Click the drop-down arrow on the New Page button again and then click Create from Dynamic Web Template. The Attach Dynamic Web Template dialog appears.

    

28. Double-click template.dwt. A new page is created based on the DWT. Click Close on the Updated Files alert box.

    

29. Type Home Page in the content area, replacing the default text. Select the line “ Home Page” and, on the Common toolbar, click the drop-down arrow on the Style box and then click <h1>. Press Enter on your keyboard to break to a new line and type Some default paragraph text...

    
    (click image to zoom)

30. Click Save on the Common toolbar. The Save As dialog appears. Type default.html in the File name field and then click Save to save this page in the root of your site.
31. In the Folders List pane, click the root folder and then click the drop-down arrow on the New Page button. Click Folder and name this folder about.
32. In the Folders List pane, right-click the default.html file and, in the context menu, click Copy (or Ctrl+C).
33. In the Folders List pane, Right-click the “about” folder and, in the context menu, click Paste (or Ctrl+V). You’ve just pasted the default file from the root into the “about” folder.
34. Right-click the “about” folder again and, in the context menu, click Copy (or Ctrl+C) to copy the “about” folder and the default file inside of it.
35. Right-click the root folder in the Folders List pane and, in the context menu, click Paste (or Ctrl+V). Repeat that step twice more so that you’ve got three copies of the about folder.
36. Right-click each of your copied folders and click Rename in the context menu (or slowly double click and the name becomes editable). Name to: products, services, and contact.

    
    (click image to zoom)

37. Open each page inside your new folders and change the <h1> in the content area to reflect the actual page it’s on: About Us, Our Services, Our Products, and Contact Us.

    
    (click image to zoom)

That takes care of creating the pages and folders for a whole site structure. Now we can use the DWT to update the navigation structure for all pages in an easy single step.

Updating the Navigation Structure

38. Switch back to the template.dwt.

    
    (click image to zoom)

    We need to make the menu on the left side of the DWT match the new Web site architecture that we just set up.

39. Set your cursor in the first link in the menu and right-click. On the context menu, click Hyperlink Properties. The Edit Hyperlink dialog opens. Double-click default.html in the root folder of the site to select it and change the link. Repeat this process for each of the remaining links: About Us, Products, Services, and Contact Us—for each link browsing into the appropriate folder and double-clicking the default.html file within it.
40. Select the last link, “Expression Studio,” and press the Delete key on your keyboard to eliminate it.
41. Click File, and then Save All. Click Yes on the Update Attached Files dialog and Close on the Update Confirmation alert box.

    
    (click image to zoom)

42. In the Folders List pane, click the site’s root default.html file to select it, and then, on the Common toolbar, click Preview. The site’s home page opens in a browser.

    
    (click image to zoom)

43. In the browser that opens, click all the links in the menu you edited previously to make sure that the appropriate pages are linked, etc. Notice as you browse the pages in this site that every page is identical in appearance thanks to the DWT.

Conclusion

That concludes a quick tutorial on creating a Dynamic Web Template in Expression Web 2 and then using that template to create a site faster than you could use any other method. While it was convenient to change the navigation in just one single page and have all the pages in the site updated, imagine how much more convenient the long term maintenance of this site will be. Add to that, the fact that a user other than the designer can edit the content of a page without the possibility of straying away from the formatting of the Dynamic Web Template, PLUS the fact that there’s no server side requirement at all and it becomes clear that the DWT is a tool that should be in every web designer’s arsenal.

Chris Leeds is a long-time Microsoft MVP and the author of two Microsoft Press books about Expression Web (http://ExpressionWebStepByStep.com). Besides writing about and using Expression Web, Chris is also the inventor of ContentSeed (http://ContentSeed.com) a very simple Content Management System that enables end users to be able to edit content on their web site with nothing more than a browser.