Creating a Dynamic Web Page Template

Creating a Dynamic Web Creating a Dynamic Web Page TemplatePage Template

Module 5: Beyond the Basics with Expression Web

LESSON 10LESSON 10LESSON 10LESSON 10



Lesson OverviewIn this lesson, you will: Create a Dynamic Web Template. Use the external style sheet and Dynamic Web Template to create

additional pages for the Current Event Web site.



Guiding Question: What tool can be used to create multiple copies of something that

will look exactly the same each time? When you look at various Web sites, most of them will have pages

which are very similar to each other. What is the location of the elements that stay the same from page to page of a Web site?



ProjectContinue to work on your Current Event project. You will create a Dynamic Web Template which you will combine with your external style sheet to create additional Web pages.



What is a Dynamic Web template? A Dynamic Web Template (DWT) is an HTML-based master copy of a

Web page that can serve as the basic design for any number of additional pages. DTWs can contain settings, formatting, and page elements such as text, graphics, page layout, and styles. These settings, formatting, and page elements are non-editable on the DTWs. DTWs allow the designer to include editable regions within the template so that different elements can be included in the subsequent created pages.



Creating a Dynamic Web Template1. Click on the File menu and point to New and choose Page.

2. In the New dialog box, click General, Dynamic Web Template and OK.



Creating a Dynamic Web Template3. Click on the File menu and click Save.

4. In the Save As dialog box, enter contentPageTemplate in the File Name field.

5. Click Save.



Creating a Dynamic Web Template6. Click in the layer on the page and press Delete.

7. In the Toolbox, click Layer and drag it onto the page.

8. Click the layer to highlight it.



Creating a Dynamic Web Template9. With the layer highlighted, click on the CSS

Properties tab.

10. Specify the values for the Height and Width of your header.

11. Enter 0px for the Left and Top categories.



Creating a Dynamic Web Template12. Insert the header you created by clicking inside the new layer to

place the cursor inside it.

13. Click on Insert, point to Picture and click From File.

14. In the Picture dialog box, navigate to the location of the header that you created.

15. Click Insert to add the header to the template.

16. In the Accessibility Properties dialog, enter My Current Event header for the Alternative text value and then create a message for the Long description value and click OK.



Creating a Dynamic Web Template

17. In the Toolbox, double click Layer so that a second layer appears on the screen.

18. Click on this second layer and click on the CSS Properties and specify the values as indicated in the following table.

19. You will need to determine your own value for top so that this layer is right below your header.

Property Value

height 200px

width 200px

left 15px

top ???px



Creating a Dynamic Web Template20. Add another layer using the Toolbox.

21. With the layer highlighted, click CSS Properties and specify the values found in the following table.

22. You will need to use the same value for top as you did in the last layer.

Property Value

height 250px

width 550px

left 240px

top ???px



Creating a Dynamic Web Template Look at what has been created. Adjustments

may need to be made if the content layer isn’t the size that is needed. Layers can be adjusted by changing the values in the CSS Properties tab or by using the handles (little boxes) found on the outline of the layer to adjust the size.



Creating a Dynamic Web TemplateThis layer needs to be an editable region because the content will change form page

to page

1. Right-click in the new layer and select Manage Editable Regions.

2. In the Editable Regions dialog box, enter content in to the Region name field, click Add and then Close.



Creating a Dynamic Web Template1. Save your work.

2. Click on the File menu, and then click Save.

3. In the Save Embedded Files dialog box, click OK.



Using a Dynamic Web Template with a Style Sheet Applying a style sheet to a Dynamic Web Template will save time and

create consistency. The earlier created external style sheet can be attached to the newly

created Dynamic Web Template. This will ensure that the styles will match across pages.



Using a Dynamic Web Template with a Style Sheet1. Open the Dynamic Web Template (contentPageTemplate.dwt).

2. Click Attach Style Sheet in the Apply Styles or Manage Styles task panes.

3. In the Attach Style Sheet dialog box, click the Browse button.



Using a Dynamic Web Template with a Style Sheet1. In the Select Style Sheet dialog box, select currentevent.css from your

Web site folder and click Open.



Using a Dynamic Web Template with a Style Sheet2. In the Attach Style Sheet dialog box, click OK to attach the style sheet.

3. Save the work by clicking on the File menu and clicking Save.



Creating a New Web Page from a Dynamic Web Template

1. Click on the File menu, choose New and click Create from Dynamic Web Template.




2. In the Attach Dynamic Web Template dialog box, select contentPageTemplate.dwt.

3. Click Open,

4. Click Close on the Microsoft Expression Web dialog box.




A new Web page is now created that is resembles the original home page with an editable layer.

Changes made to the original template will be reflected in all pages associated with the template.




1. Save the new page by clicking on the File menu and clicking Save.

2. In the Save As dialog box, click Change title.

3. In the Set Page Title dialog box, enter the title of the page.

4. Click OK.

5. In the Save As dialog box, enter a name for the page into the File name filed

6. Click Save. Repeat these steps for each

new Web page created from the Dynamic Web Template.



Assignment Create your own external style sheet for your Current Event Web

page.

Documents

Creating a Dynamic Web Page Template