Transcript Version 1.2 - Course Module Slide Options

LESSON
10
Module 5: Beyond the Basics with Expression Web
Creating a Dynamic Web
Page Template
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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?
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
Property
Value
height
250px
width
550px
left
240px
top
???px
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
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.
LESSON
10
Module 5: Beyond the Basics with Expression Web
Assignment

Create your own external style sheet for your Current Event Web
page.