Microsoft Office Online
Sign in to My Office Online (What's this?) | Sign in

 
 
Microsoft Office FrontPage
Search
Search
 
Check for updates: (c) Microsoft
Office downloads
 
 
 
Help and How-to
Choose your version
Training
Related Products and Technologies
Support and Feedback
Technical Resources
Additional Resources
Warning: You are viewing this page with an unsupported Web browser. This Web site works best with Microsoft Internet Explorer 6.0 or later, Firefox 1.5, or Netscape Navigator 8.0 or later. Learn more about supported browsers.
Email this linkEmail this link Printer-Friendly VersionPrinter-Friendly Version Bookmark and ShareShare
Convert a Web site from Shared Borders to Dynamic Web Templates
 

June 2004

By Jim Buyens, FrontPage MVP

Applies to
Microsoft Office FrontPage® 2003

Summary

If your existing Web site uses Shared Borders, you are missing out on the power of Dynamic Web Templates (DWTs). This article shows you how to convert your Shared Borders site 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?

Dynamic Web Templates provide master Web page layouts 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 Web site can use as many DWTs as you like, while a single Web site 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.

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. This affects each page that uses the template as follows:

  • 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.
  • 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.

Changing an ordinary page template has no effect on pages that you created from the template. But if you change a DWT, you can propagate those changes throughout your FrontPage Web site. If you ever decide to modify the appearance of the standardized elements of your site, you just modify the DWT.

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, FrontPage propagates only the non-editable regions. The following table summarizes the capabilities of editable and non-editable regions.

Type of region Modify in DWT? Modify in attached pages? DWT changes propagated to attached pages?
Editable Yes Yes No
Non-editable Yes No Yes

Creating DWTs with FrontPage

FrontPage 2003 includes features for creating and attaching DWTs. You first create a DWT just as you would an ordinary Web page—except that you create one or more editable regions before saving it. Then you save it with a .dwt file extension and attach it to other pages in your Web site. 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 information about these procedures, see Create a Dynamic Web Template.

The sections below explain how to recreate your Shared Borders pages as DWTs.

Before you begin recreating your pages

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

 Note   If your site is a Windows SharePoint® Services site, the following procedure will not back up lists, data sources, and other database-driven features of your site. If your SharePoint Services site uses Shared Borders, your site administrator can create a backup of your site. For more information about backing up a SharePoint site, see About backing up and restoring sites created with Windows SharePoint Services and Back up and restore Web sites created with Windows SharePoint Services.

To back up your FrontPage site

  1. Open your Web site in FrontPage.
  2. On the View menu, click Remote Web Site.
  3. At the top of the document window, click Remote Web Site Properties.
  4. On the Remote Web Site tab, under Remote Web server type, click either FrontPage or SharePoint Services or File System, and then do one of the following:
    • If you specified FrontPage or SharePoint Services in step 4, in the Remote Web site location box specify or browse to an http:// address.
    • If you specified File System in step 4, in the Remote Web site location box specify or browse to the address of the remote Web site to which you want to publish folders and files. For example type C:\My Web Sites\Web Site 1 if the location is on your computer or \\MyNetworkShare\My Web Site if the location is on a file server.
  5. Click OK.

Determine which pages share the same Shared Borders settings

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.

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.

To view the Shared Borders report

  1. From the View menu, point to Reports, click Shared Content, and then click Shared Borders.
  2. In the Shared Borders column, you will see a list of which shared borders each page currently displays.

Decide whether to use Design or Code view

Now you're ready to recreate your shared borders in a Dynamic Web Template. You can use either Design view or Code view to do this. If you decide to use Design view, there are more steps . Code view is faster, and while it deals with code, it's very straightforward.

ShowUsing Design view to recreate Shared Borders in a DWT

This method involves the following major activities:

  • Remove the Shared Borders from your existing Web site.
  • Recreate the borders of your site on a new Web page.
  • Save that page as a DWT.
  • Determine editable regions.
  • Apply the DWT to all the pages throughout your site.

Remove Shared Borders

In this procedure, you'll clear the Shared Borders settings in your existing Web site.

To remove Shared Borders settings

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. 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. (If the Shared Borders feature is not available, see Add Shared Borders to the Format menu.)
  3. In the Shared Borders dialog box, under Apply to, make sure the following settings are in effect:
    • All Pages is selected.
    • The Top check box is cleared.
    • The Left check box is cleared.
    • The Right check box is cleared.
    • The Bottom check box is cleared.

Recreate the bordered structure of your site

The next step is to format a new, blank Web page with tables and content that mimic your original shared borders. You'll need to create the tables manually, but you can recreate the shared border content by cutting the content from the old shared borders and 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.

Open a new blank Web page that will become your DWT, and then do the following based on your page design:

ShowTo add a top border area

  1. From the Table menu, click Insert, and then click Table.
  2. In the Insert Table dialog box, do the following:
    • Under Layout Tools, click Disable Layout Tools.
    • Under Size, in the Rows box, enter 1 and in the Columns box, enter 1.
    • Under Layout, select the Specify width check box, enter 100 in the Specify width box, and then click In percent.
    • Under Borders, in the Size box, enter 0.
  3. Click OK.
  4. From the Folder List open the _borders folder and double-click the top.htm file.

     Note   If the Folder List isn't visible, press ALT+F to display it.

  5. Press CTRL+A to select everything on the top.htm page, and then press CTRL+C to copy your selection to the clipboard.

     Note   FrontPage won't select the attributes applied to the BODY element, such as bgcolor or background (if, for example, the shared border were using a background color or picture). You'll need to copy and paste the attributes in the BODY tag separately.

  6. Return to the new Web page and set the insertion point inside the one-celled table you created in step 3.
  7. Press CTRL+V to paste the content from the clipboard into the table cell.
  8. Click OK.

ShowTo create a table for positioning the left border elements, the main content area, and the right border elements

  1. Set the insertion point at the bottom of the Web page.
  2. From the Table menu, click Insert, and then click Table.
  3. In the Insert Table dialog box, do the following:
    • Under Layout Tools, click Disable Layout Tools.
    • Under Size, in the Rows box, enter 1. In the Columns box, do one of the following based on the use of borders in your site:
      • If you have both left and right borders, enter 5 in the Columns box.
      • If you have either a left or a right border (but not both), enter 3 in the Columns box.
      • If you have neither a left nor a right border, enter 1 in the Columns box.
    • Under Layout, select the Specify width check box, enter 100 in the Specify width box, and click In percent.
    • Under Borders, in the Size box, enter 0.
    • Click OK.

ShowTo create a left border area

  1. Right-click the leftmost cell in the table you just created, and click Cell Properties.
  2. Under Layout, select the Specify Width check box, enter 1 in the Specify Width box, and then click In percent.
  3. Click OK.
  4. Right-click the second cell from the left, and then click Cell properties.
  5. Under Layout, select the Specify Width check box, enter 24 in the Specify Width box, and click In pixels.
  6. Click OK.
  7. From the Folder List open the _borders folder and double-click the left.htm file.

     Note   If the Folder List isn't visible, press ALT+F1 to display it.

  8. Press CTRL+A to select everything on the page.
  9. Press CTRL+C to copy this selection to the clipboard.
  10. Return to the new Web page and set the insertion point inside the leftmost cell.
  11. Press CTR+V to paste the content from the clipboard into the cell.
  12. Click OK.

ShowTo create a right border area

  1. Right-click the rightmost cell in the table you just created, and click Cell Properties.
  2. Under Layout, check the Specify Width check box, enter 1 in the Specify Width box, and click In percent .
  3. Click OK.
  4. Right-click the second cell from the left, and then click Cell properties.
  5. Under Layout, select the Specify Width check box, enter 24 in the Specify Width box, and click In pixels.
  6. Click OK.
  7. From the Folder List open the _borders folder and double-click the right.htm file.

     Note   If the Folder List isn't visible, press ALT+F to display it.

  8. Press CTRL+A to select everything on the page.
  9. Press CTRL+C to copy this selection to the clipboard.
  10. Return to the new Web page and set the insertion point inside the rightmost cell.
  11. Press CTRL+V to paste the content from the clipboard into the cell.
  12. Click OK.

ShowTo add a bottom border area

  1. Set the insertion point at the bottom of the page.
  2. From the Table menu, click Insertand then click Table.
  3. In the Insert Table dialog box, do the following:
    • Under Layout Tools, click Disable Layout Tools.
    • Under Size, in the Rows box, enter 1. In the Columns box, enter 1.
    • Under Layout, select the Specify width check box, enter 100 in the Specify width box, and then click In percent.
    • Under Borders, in the Size box, enter 0.
  4. Click OK.
  5. From the Folder List, open the _borders folder and double-click the bottom.htm file.

     Note   If the Folder List isn't visible, press ALT+F1 to display it.

  6. Press CTRL+A to select everything on the bottom.htm page, and then press CTRL+C to copy your selection to the clipboard.
  7. Return to the new Web page and set the insertion point inside the one-celled table you created in step 3.
  8. Press CTRL+V to paste the content from the clipboard into the table cell.
  9. Click OK.

ShowUsing Code view to recreate Shared Borders in a DWT

This method is shorter and more direct than using Design view, but requires working in Code view to accomplish the desired results. This method involves the following major activities:

  • Remove the Shared Borders Web component code from a new page.
  • Remove any Shared Borders from your site.
  • Save the new page as a DWT.
  • Determine editable regions.
  • Apply the DWT to all the pages throughout your site.

Remove the Shared Borders Web component code

This activity will remove the Web component code that makes shared borders.

To remove Shared Borders Web component code

  1. Open a new Web page and verify that this page displays the usual border content for your site.
  2. Save and close the new Web page.
  3. In the Folders List right-click the file you just created, click Open With and then click FrontPage (Open As Text).
  4. Locate any instance of the text <!-- msnavigation --> and select it. This text identifies content that comes from the Shared Borders feature.
  5. Press CTRL+H to display the Find and Replace dialog box.
  6. Make sure the Replace With box is empty, click Replace All, and then click OK.
  7. Locate and delete the following tag from the <head> section: <meta name="Microsoft Border" content="tlrb, default">.

     Note   This tag identifies which Shared Borders the page uses. The letters tlrb identify the top, left, right, and bottom borders, respectively. The letters in your page may vary, depending on which shared borders were in use.

  8. On the File menu, click Save and then click OK.

Remove Shared Borders

Now that the Web component code has been cleared from your new Web page, and you've saved it, the next step is to remove Shared Borders from any pages in your site that use them.

To remove Shared Borders

  1. On the Toolsmenu, click Site Settingsand then click the Advanced tab.
  2. Make sure the Show Hidden Files and Folderscheck box is selected, and then click OK.
  3. On the Format menu, choose Shared Borders (If the Shared Borders feature is not available, see Add Shared Borders to the Format menu.) In the Shared Borders dialog box, under Apply to make sure the following settings are in effect:
    • All Pages is selected.
    • The Top check box is cleared.
    • The Left check box is cleared.
    • The Right check box is cleared.
    • The Bottom check box is cleared.
  4. Click OK.

Save the new DWT

Now that you've recreated your borders, the next step is to save your Web page as a DWT. You should have your new page open. If not, double-click the page you created to open it.

To save the DWT

  1. With the new page open, from the File menu, click Save As.
  2. In the Save As dialog box, from the Save As Type list, click Dynamic Web Template (*.dwt).
  3. Type the name of the new file in the File name box, and then click Save. The file will be saved with a .dwt file extension.

Determine editable regions

Determine the areas in the table 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.

To set editable regions

  1. Place the cursor in the table cell that you want others to be able to edit, and press ALT+CLICK to select that cell.
  2. From the Format menu, point to Dynamic Web Templates and then select Manage Editable Regions.
  3. In the Editable Regions dialog box, in the Region name box, type a descriptive name (such as main). Any additional Editable Regions will be displayed in the Other Editable Regions box as you add them.
  4. Click Add.
  5. Repeat for each Editable Region you want to create.
  6. When you have added all the editable regions, click Close.
  7. 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.

To attach the DWT

  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 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 Templates, 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.

Maintaining Dynamic Web Templates over time

When someone is editing a Web page that has a DWT attached, only the editable regions are available. Changing non-editable regions, or changing most page properties requires the modification of the main template. You can, however, change the page title.

To change non-editable regions, Themes, linked style sheets, and other page-level properties, open the .dwt file itself, make the desired modifications, and then save the new DWT. If you're using a disk-based Web or Windows SharePoint Services, FrontPage will automatically replicate the changes made to the DWT to each page that uses that template.

More information about Dynamic Web Templates and other FrontPage shared elements is available from the FrontPage Assistance on Microsoft Office Online. See Sharing Elements.

Using Dynamic Web Templates with FrontPage 2002 Server Extensions

Life is slightly more complicated if your Web site resides on a server with the FrontPage Server Extensions installed. Because the FrontPage 2002 Server Extensions predate the existence of DWTs, they don't maintain a proper cross-reference of pages that use each DWT. As a result, changes you make to a DWT may not propagate to the pages to which it is attached. To work around this limitation, see Attached Pages Are Not Updated When You Save Changes to a Dynamic Web Template - Microsoft Knowledge Base Article 821957 .

Conclusion

Now that you have converted your Shared Borders Web site 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.

Jim Buyens is a FrontPage MVP (Most Valuable Professional) and the author of Microsoft Office FrontPage 2003 Inside Out.

Get Office 2007
Get Office 2007
advertisement
Printer-Friendly VersionPrinter-Friendly Version