This lesson demonstrates how to design the look and feel of the Web site using a page template.
As a unit, the Web pages that comprise a Web site should have a similar visual design and layout. The individual pages should appear related, so that the Web site is cohesive. It is good practice to begin a project by thinking first of the Web site design and then creating the individual Web pages. Otherwise, you could get a Web site that consists of several disjointed Web pages that have no organization or apparent visual relationships.
The best way to create a common look and feel for your Web site is by using a page template. A page template is a single file that you can use to control common elements on all of the pages in your site. After you apply the template to the pages, you can minimize the effort of future design changes by only making the change once on the template; the change is then applied to all of the pages that use the template. You can create two kinds of Web page templates: design-time templates and dynamic templates. Dynamic page templates use Struts-Tiles technology to generate pages on the web server at runtime. Pages that you create using Design-time templates are created immediately. This tutorial demonstrates the use of design-time templates.
The page template is designed to have common areas and content areas. A common area is a shared area common to all pages that use the page template, which is useful for elements that are the same for every page, such as site banners and navigation areas. The content area will be different for each page. After the template is applied to individual pages, you can edit the content areas in those pages to add information specific to that page. Page elements such as text and images specific to a particular page are the types of elements that go into content areas of the page template. You can create as many content areas and common areas as you want in a template.
A page template controls the look and feel of a site layout in a very different way than using a style sheet.
Page templates and style sheets control the common look and feel of a Web site in very different ways, though they can be used to complement each other. For example, you can use a page template to control the site's layout and content areas, and use a style sheet to control the visual display of tags, such as font size and color. In general, page templates control the location of data on the page, while style sheets control the appearance of that data.
Page Templates
A page template is a model for other pages. To make a template, start by creating an ordinary Web page and adding elements to it, such as pictures, text, and tables. Every element placed on the template will appear on the individual pages linked to the template. This ensures that the pages will look the same. Then, add content areas to the template. The content areas are the parts of the template where each individual page will have its own content. When you open a page that is linked to a template, you can edit only inside the content areas of the template.
Style Sheets
Style sheets control the appearance of text, tables, images, and other elements on Web pages. For example, you can set all of the first-level headings on your site to be the same color, size, and font. When you change the definition for first-level heading text in the style sheet, the matching text on every page changes to match it.
For this tutorial, we are going to create a page template and define some content and common areas in order to design a consistent look and feel for the entire Classifieds site. This page template ensures each page looks like the following design:
Creating a new page template
Adding some elements to the blank template
Adding a content area
Your basic template structure should now look like this sample:
You have now created a page template with some common and content areas defined for your Web site. Click Next to begin the next lesson.