Creating a Dynamic Web Page Template

1. Creating a Dynamic Web Page Template LESSON 10 Module 5: Beyond the Basics with Expression Web

2. Lesson Overview In 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.

3. 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?

4. Project Continue 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.

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

6. Creating a Dynamic Web Template 1. 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.

7. Creating a Dynamic Web Template 3. 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.

8. Creating a Dynamic Web Template 6. 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.

9. Creating a Dynamic Web Template 9. 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.

10. Creating a Dynamic Web Template 12. 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.

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

12. Creating a Dynamic Web Template 20. 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.

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

14. Creating a Dynamic Web Template This 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.

15. Creating a Dynamic Web Template 1. Save your work. 2. Click on the File menu, and then click Save. 3. In the Save Embedded Files dialog box, click OK.

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

17. Using a Dynamic Web Template with a Style Sheet 1. 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.

18. Using a Dynamic Web Template with a Style Sheet 1. In the Select Style Sheet dialog box, select currentevent.css from your Web site folder and click Open.

19. Using a Dynamic Web Template with a Style Sheet 2. 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.

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

21. Creating a New Web Page from a 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.

22. Creating a New Web Page from a Dynamic Web Template • 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.

23. Creating a New Web Page from a Dynamic Web 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.

24. Assignment • Create your own external style sheet for your Current Event Web page.