Applying a page template to a Web site

Use a page template to control the common elements on all of the Web pages in your Web site. After applying a page template to a site, you can minimize the effort of future design changes by making the change once in the template instead of making the change multiple times to individual pages.

  1. Create a Web project.

  2. Create a Web site.

  3. Create a Web page in Web Site Navigation or add an existing Web page to the Web site.

The recommended way for maintaining consistency throughout a site is to use page templates. By using a page template together with Web Site Navigation, look and feel can be made consistent throughout a site. The page template contains the Web Site Navigation (such as the navigation bar, navigation trail, navigation bar, and navigation menu), that is created using the Web Site Navigation tools.

To apply a page template:

  1. Expand your Web project in the Enterprise Explorer view of the Web perspective.

  2. Double-click

    Web Site Navigation to open your Web site structure

  3. Select the pages that you want to apply a page template to by pressing CTRL and clicking the page icons.

  4. Right-click and select

    Set Template | Apply Template. The Apply Page Template wizard opens.

  5. On the Specify a Page Template page of the wizard, select the Page Template Type that you want to use. You can select a user-defined template from the My Templates folder, or a sample template from the Sample Templates folder

  6. If you selected one page to which you want to apply the page template, the page you selected will be used as your model to base your element mappings. You will skip this step and continue with the rest of the steps in this topic. If you selected multiple pages to which you want to apply the page template you need to select a Web page as the model for your element mappings. On the Select a Web Page to specify how to apply the page template page of the wizard, you will map the content areas of your Web page to the content areas in the page template. Select the page that you will use to map. Click Next.

    Restriction:

    • You cannot select a page that has a different encoding from the page template.

    • You cannot select a page that already has a page template.

    • You cannot select a page that uses a frame.

    • If the page template is not described by XML style JSP, you cannot select a page that is described by XML style JSP.

    • If the page template is described by XML style JSP, you cannot select a page that is not described by XML style JSP.

  7. On the Map page elements to the page template page of the wizard, specify how the page template should display the page contents.

    The source for the content areas is defined in the Page template content areas list. The elements for the Web page that you select on the previous wizard page display in the Page elements list. In the Page template content areas list, select a Content Area. In the Page elements list, select the element to which you want to map the content area. Then click the Map button. 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). Any attributes defined in the page template for the headarea content area are applied to the HEAD element 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.

    Tip:

    • By selecting a page element in the Page elements list, you can highlight a specific element in the preview of the current page.

    • You can view an enlarged preview by right-clicking

      Preview of current page and selecting

      Show original size from the pop-up menu.

    If you selected one page to which you want to apply a page template, click Finish. The template is applied to the Web page. If you selected multiple pages to which you want to apply a page template, click Next.

  8. On the Select pages - Page template will be applied page of the wizard, select the Web pages to which you want to apply the page template. If a Web page already has a page template associated with it, you cannot apply a second page template. Further, if the Web page uses a frame, you cannot apply a page template.

    Note: The page template is applied to all of the selected Web pages using the specifications set on the Select a Web Page to specify how to apply the page template page of the wizard. If the same elements are found in the other Web pages, the elements will be inserted in the correct content areas. If the same elements are not found in the other Web pages, the elements to insert will be expanded and then inserted in the content areas. You can manually alter the Web pages by deleting unnecessary elements after finishing the wizard.

    Restriction: If the Web page encoding is different from that of the page template, you cannot apply the page template. If either the page template or the Web page is described by XML style JSP, you cannot apply the page template. The pages to which you cannot apply the page template will receive an error message in the Pages to apply page template list of the wizard.

  9. Click Finish. The template is applied to the Web page.

 

Related concepts

Cascading Style Sheet (CSS) Designer

 

Related tasks

Adding content to a page template

Adding dynamic navigation to a page template