Creating and Modifying Dynamic Web Templates

Return to Session | Technology Serving Learning Institute Summer 2008 | CSTL | Southeast Missouri State University

Task: Creating and Modifying Dynamic Web Templates

In SharePoint Designer 2007, open a new page using the File | New | Page... or by clicking on the New Page Icon.
Type "Class Name" or the name of class you teach at the top of the document and hit enter to start a new line.
Save your file as temp_home.dwt using File | Save As... and select Dynamic Web Template as the file type.
Then insert an interactive button selecting Insert | Interactive Button... from the menus at the top of the screen with your cursor inside the paragraph below Class Name. The following dialog box will appear.
Now change the text to Home and the link to temp_home.htm as shown in the image below.
Then click after the first button and create a second button named Class Content with the settings as indicated below.
After these two buttons have been created, hit enter with your cursor after the second button to create a new blank line.
Now save your file again. You will be prompted to save embedded images. You can choose the folder that you wish to use by clicking on "Change Folder..." or just click OK.
Now go to Format | Dynamic Web Template | Manage Editable Regions... with your cursor in the blank line below the buttons you have created.

You will see the following dialog box.
In the Region name: enter the following text: Page Content and select Add as shown below. Then select Close.
Save your document again and close it.
Now select File | New... | Create from Dynamic Web Template... and in the dialog box that appears select temp_home.dwt and click Open.
You should now see the file that you have created with all but the (Page Content) area grayed out. This is the only part of this page that you can edit. Any changes to the grayed out area will need to be made in the Dynamic Web Template file and will affect all files based on this template.
Type Home Page into the Page Content area and save the file as temp_home.htm Then close this page also.
Open another new file with the temp_home.dwt template. Enter Class Content where it says Page Content, save it as temp_cont.htm, and close the page also.
Now reopen temp_home.htm and select the Preview in Browser button.

You can then select the Class Content button to move to that page and then the Home button to move back again. Close your web browser and let's make one change to the existing template to show how it will change both of the pages we have created.
To do this, open the temp_home.dwt file in SharePoint Designer 2007. Then select the Home button and right-click and select button properties. Then change the button to green by selecting "Border Bottom 2" as shown below. Then click OK.
Now save the file. You will be prompted to overwrite the images for the old button with the images for the new button as show below. Select OK.

You will then be prompted to update documents based on this template. Select Yes.

After updating, SharePoint Designer 2007 will display the following confirmation box which will display the number of files that were updated to reflect the changes made to the template.
Now you can go back and view your web pages again following step 16. Make sure you open the temp_home.htm and not temp_home.dwt since this file is not viewable in a web browser, but is used to create other pages.
Obviously this is an simplified example, but it should show you how to create and use dynamic web templates. Let's discuss how we might use these to improve class websites.

This page is adapted from work done by Kevin Dickson, a Facilitator in the Winter 2008 TSL Institutes.