Lesson 5: Apply a page template to the Web site
This lesson illustrates how to apply a page template to the Web site so that all pages will have a consistent layout.
Now that you have made some preliminary design decisions about how your Web pages will be laid out using your page template, you need to apply the template to the pages in your site. Once you apply the template to the individual pages, every change in the template will appear in each Web page.
- Return to your site's structure by double-clicking
Web Site Navigation in the Enterprise Explorer view.
- Select all four page icons by clicking and dragging the pointer
to create a selection box enclosing the entire area around the page icons.
All of the icons within the box will be selected.
- Right-click and select
Set Template | Apply Template. The Apply Page Template wizard opens.
- Expand the
My Templates folder in the Templates box. If you did not create your own template, you could use one of the sample page templates provided.
- Select your template (template.jtpl) and click
Next.
- Because the pages in the Web site do not contain any content yet,
it is not important how we map page elements to the template content areas,
so you can accept the defaults and click
Next. If you already have content in the pages you wanted to apply the template
to, you can select a certain page as an example page for mapping existing
elements to template content areas.
Learn more about mapping content areas
You can apply page templates to Web pages that already contain some content and still be sure that the page will look the way you expect once the template elements have been added. If you have Web pages that already contain content, you can map certain sections of the existing page to content areas defined in the page template.
When you apply a page template, there is a page in the wizard called Map page elements to the page template :
The source for the content areas is defined in the
Page template content areas list. The elements for the Web page that you selected to apply the template to are displayed in the
Page elements list. In the Page template content areas list, you can select a defined content area, and in the Page elements list, select the tag element to which you want to map the content area. Then click
Map. Do this for each of the content areas. This associates the content areas in the page template with elements in your Web page.
For example, if you select one of the sample page templates, a headarea and a bodyarea content area are predefined. You can select the headarea content area and associate it with the HEAD (anything between the start and end HEAD tags) in your existing file. Any attributes defined in the page template for the headarea content area are applied to the HEAD region of the existing Web page. The preview boxes display the current page and a preview of what the page will look like once the template is applied, so you can see what the existing page will look like once the template elements are applied. You can use these preview boxes to help you decide how to map the template's content areas. All content areas must be associated with regions before you can finish applying the page template. Tip: By selecting a page element in the Page elements list, you can highlight a specific element in the preview of the current page. Also, you can view an enlarged preview by right-clicking
Preview of current page and selecting
Show original size from the pop-up menu.
Note: Though you have only created one content area named bodyarea, you may notice a second content area named headarea; headarea is included in page templates by default.
- Accept the defaults for mapping by clicking
Next.
These options control how any existing content in the pages is placed inside
the content areas of the template.
- Ensure all four of your pages appear in the
Pages to apply page template box, and that all four are selected. Note that on this page of the wizard, you can validate the application of the template to ensure that using the template will not introduce any markup errors in the pages.
- Click
Finish. The template is applied to
the pages, and the page icons are updated with blue bands to reflect that
each page has a template associated with it.
- Save the Web Site Navigation.
- Double-click one of the page icons to see the template applied to the page.