Convert FrontPage Shared Borders to Dynamic Web Templates in Expression Web

If your existing Web site uses Shared Borders, you are missing out on the power of other techniques including Dynamic Web Templates (DWTs), Master Pages, and Page Includes. This article focuses on the DWT solution and shows you how to convert your Shared Borders into a DWT, preserving the look and feel of your old Shared Borders layout, but with all of the advantages of a DWT.

What are DWTs?

A Dynamic Web Template defines a web page layout that can be attached to any number of other pages. The DWT contains page layout and formatting information, as well as fixed content areas. Because a DWT is a web page, it can incorporate any type of layout or content that HTML allows.

DWTs are much more powerful than Shared Borders. For example:

• A single website can use as many DWTs as you like, while a single website can accommodate only one set of shared borders.
• DWTs can control standardized content anywhere on the web page. Shared Borders can only control content along the edges (top, bottom, left, etc.) of the page.

Editable and non-editable regions

With Dynamic Web Templates, you can protect those portions of a page that you want standardized by specifying non-editable regions. You can also maintain flexibility by specifying editable regions for those portions that need to change. Most DWTs contain a mixture of these editable and non-editable regions.

For example, the header and footers of the web page in the following screenshot are not editable, while the section in between is editable.

There is no visual indication that one section is editable and another is not, but when you attempt to edit a non-editable region your cursor changes to the universal no sign and you can’t edit those regions.

A non-editable region appears identical on every page. It's very common to make page headers, page footers, and style sheets non-editable. This guarantees that those elements will remain uniform.

An editable region is one whose content can be different on every page. For example, there may be the same (non-editable) navigation on every page, but the home page is likely to contain different (editable) content than the static Contact Us page or the About Us page.

The following screenshot is of the master.dwt file that defines the editable and noneditable regions of the web page illustrated in the previous screenshot. You edit the *.dwt  file when you want to make changes to elements and formatting in non-editable regions of your website and apply those hanges to all pages that use the DWT file.

When you create or edit a DWT, you have complete control over both editable and non-editable regions. But when you save the changed .dwt file, Expression Web propagates only the non-editable regions to the pages the .dwt file is attached to. The following table summarizes the capabilities of editable and non-editable regions.

Creating DWTs with Expression Web

Expression Web includes features for creating DWTs and attaching DWTs to web pages. The basic instructions include:

1. Create a DWT just as you would an ordinary web page—except that you create one or more editable regions before saving it.
2. Save it with a .dwt file extension.
3. Attach the .dwt file to other pages in your website. To attach a DWT, you simply open an ordinary web page or select it from the Folders list. Then, on the Format menu, point to Dynamic Web Template, and then click Attach Dynamic Web Template.

For more detailed information about these procedures, see the Expression Web Help topics online:

http://expression.microsoft.com/en-us/library/cc295433.aspx

Converting your Shared Borders to Dynamic Web Templates

The process for creating a DWT based on the content of your Shared Borders site has three parts:

• Creating a DWT that includes all of the content from your Shared Borders.
• Removing the Shared Borders from your site.
• Attaching the newly created DWT to each page that previously used Shared Borders.

But before making any global change to your web site (especially when you're using a new technique), you should create a backup copy of the web site. This ensures that if you make a mistake or don't like the results, you can restore your site to its original condition.

Determine which pages share the same Shared Borders settings

To begin, first determine whether all of the pages in your site share the same Shared Border settings. For example, the default settings for your site may include top and bottom borders, but some pages may not have the bottom border. To determine the Shared Border settings for each of your pages, use the Shared Borders report in FrontPage.

To view the Shared Borders report in FrontPage:

1. In FrontPage, on the View menu, point to Reports, point to Shared Content, and then click Shared Borders.
2. In the Reports view of your web site, the Shared Borders column lists which shared borders each page currently displays.

   

Remove Shared Borders from your web site

In this procedure, you'll clear the Shared Borders settings in your existing web site. This will remove the Shared Borders from each page in your site, but retain the shared border content in the _borders folder, which you can find in the Folder List view.

1. In FrontPage, on the Tools menu, click Site Settings, and then click the Advanced tab. Make sure the Show hidden files and folders check box is selected, and then click OK.

   

2. On the Format menu, click Shared Borders.
3. In the Shared Borders dialog box, under Apply to, make sure All pages is selected and all of the check boxes are clear, as in the following screenshot.

   

Recreate the bordered structure of your site

The next step is to format a new, blank web page with a page layout, such as CSS layout or table-based layout) and content that mimic your original shared borders. You'll need to create the layout manually, but you can recreate the shared border content by cutting the content from the old shared borders and pasting into the newly created tables.

This process will vary somewhat depending on the placement of shared borders on your site. For instance, if you previously had a top shared border, you need to add a similar area to your new DWT, and if you previously didn't have a right shared border, you wouldn't create one in the new DWT.

1. In Expression Web, on the File menu, point to New and click Page.
2. In the New dialog box, on the Page tab, in the left column select CSS Layouts. In the right column, click on the layout that best resembles the layout of your page.  For example, for the web page we illustrated earlier:

   

   the comparable layout is the second layout labeled “Header, nav, 2 columns, footer” which provides a resizable left column and fixed width right column:

   

   This produces an HTML page with <div> elements for containers and a CSS file that defines a basic layout for the page. Once you start adding your shared border content in the next steps the layout will start to take shape.

   Note: If working with CSS-based layouts is new to you and you’d prefer to stick with a table-based layout for now, you can. Create a new blank page in Expression Web, and use the Table menu to create a new table with the appropriate number of rows and columns that make up the page layout of your shared borders pages.

3. On the File menu, click Save As. In the Save As dialog box, set the Save as type field to Dynamic Web Template (*.dwt) and make sure you save the file name with the *.dwt file extension.

   Now it’s time to add your Shared Borders content.

4. In Expression Web, in the Folder List task pane, open the _borders folder. That folder should contain some or all of the following pages, including top.htm, left.htm, right, and bottom.htm, depending on the Shared Borders options you selected.

   

   If you don’t see the _borders folder, you may need to turn on the option to show hidden files. To do this, on the Site menu, click Site Settings. In the Site Settings dialog, click the Advanced tab; then, under Options, select Show hidden files and folders, and click OK.
   
   

5. Open one of the pages in the _borders folder, put your cursor anywhere in the Design view of the page, press CTRL+A to select everything on the page, and then press CTRL+C to copy the selection.
6. Open your *.dwt file that you saved in step 3 of this section. Put your cursor in the top, left, right, or bottom container in the page, according to whatever you copied in step 5, and press CTRL+V to paste the content.
7. Repeat steps 5 and 6 until you’ve copied and pasted the content from each page in your _borders folder into your *.dwt file.

Set the editable regions of your dynamic web template

Now that you’ve placed your Shared Border content into your dynamic web template, it’s time to distinguish between editable regions in the page and non-editable regions. Determine the areas in the CSS (or table) layout that you created where you want users to be able to edit and change content. For example, if you have left and right borders (whose content you want to remain the same from page to page), the editable region would be the area in the middle.

1. Place your cursor in the <div> element (or table cell or other container element) that you want others to be able to edit. In the Quick Tag Selector bar along the top of the page, click the tag of the element you want to make editable.

   

2. From the Format menu, point to Dynamic Web Template and then click Manage Editable Regions.
3. In the Editable Regions dialog box, in the Region name box, type a descriptive name (such as right column). Any additional editable regions will be displayed in the Other regions on this page box as you add them.
4. Click Add, and then click Close.
5. Repeat all of these steps for each editable region you want to create. All other areas are considered non-editable.
6. From the File menu, choose Save to complete your Dynamic Web Template.

Attach the new Dynamic Web Template

In order to apply the DWT to your site, you need to "attach" the new .dwt file to the desired pages.

1. Select all the web pages you want the DWT to control. For example:
   • To select all the pages in your site, in the Folder List task pane click the top folder in the list.
   • To select all pages in specific folders, press SHIFT+CLICK or CTRL+CLICK on each of the folders to which you want to attach the DWT.
   • To select more complex collections of pages, display and sort them in Reports view, and then press SHIFT+CLICK or CTRL+CLICK on the ones you want.
2. With the desired folders and/or pages selected, from the Format menu, point to Dynamic Web Template, and then click Attach Dynamic Web Template.
3. In the Attach Dynamic Web Template dialog box, select the template you just created, and then click Open.
4. If you want to associate the body of each web page with the editable region name (such as main) that you created in the previous procedure, in the Choose Editable Regions for Content dialog box, click OK. If you want to apply special names to the editable region on a page-by-page basis, in the Choose Editable Regions for Content dialog box, and then click Skip This Page.
5. Click OK.

Conclusion

Now that you have converted your Shared Borders to a Dynamic Web template, you have all of the power and flexibility of Dynamic Web templates at your fingertips. By using Dynamic Web Templates, you can create HTML pages that share the same layout. In addition to providing a shared layout, you can make some regions in a template available for editing while preventing changes to other regions in that template. This means that you can allow others to add and edit content, yet still preserve the layout of the pages and the template itself.

If you need additional help with these steps or want to discuss anything, try posting a question to the forum for Expression Web at http://social.expression.microsoft.com/Forums/en-US/web/threads/ or search the forum for related issues.