< Previous | Next >

Lesson 5: Apply a page template to the Web site

This lesson illustrates how to apply a page template to the Web site

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.
  1. Return to your site's structure by double-clicking Web Site Navigation in the Project Explorer view.
  2. 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.
  3. Right-click and select Set Template > Apply Template. The Apply Page Template wizard opens.
  4. 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.
  5. Select your template and click Next.
  6. 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.

    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:

    map page elements to page graphic

    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 display 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 context 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.
  7. Again, you are able to 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.
  8. 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.
  9. 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.
  10. Save the Web Site Navigation.

Click Next to begin the next lesson.

< Previous | Next >