< Previous | Next >

 

Lesson 4: Design the look and feel of the Web site

This lesson demonstrates how to design the look and feel of the Web site using a page template.

Show Me

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.

Learn more about the difference between page templates and style sheets

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

  1. In the Enterprise Explorer view, right-click your project name, ClassifiedsTutorial.

  2. Select

    New | Web Page Template from the pop-up menu. The New Web Page Template file wizard opens.

  3. Accept the default folder (/ClassifiedsTutorial/WebContent). This is where your template file will be located after it is created.

  4. Type a name for your template file in the File Name field. For this tutorial, name the file template. Note that the resulting file's full name will be template.jtpl.

  5. Select the

    Design-time Template radio button.

  6. Ensure

    JSP is selected as the markup language under the Basic Templates folder.

  7. Click Finish. The new template is opened in Page Designer.

Adding some elements to the blank template

Now that the template has been created, you need to add some elements to the blank template.

  1. One of the easiest ways to lay out the structure of a page template is by using an invisible table. This way, you can specify sections of the page to be used in different ways, and you can control the placement of objects on the page.

    1. Click the Design tab to switch to the Design view of Page Designer.

    2. In the Palette view, expand the

      HTML Tags drawer by clicking on it.

    3. Drag the

      Table component from the palette onto your blank template. The Insert Table window opens.

    4. For this template, you will need 3 rows and 1 column. Type 3 in the

      Rows field and 1 in the

      Columns field.

    5. Click

      OK. The table displays on your template page.

  2. At first, the table will appear very small. You need to edit the attributes of the table to adjust the size and structure of the table.

    1. Right-click the table and select

      Properties to open the Properties view.

    2. In the Properties view, click the

      table tab.

    3. In the

      Alignment field, select

      Center. This centers the table on the page.

    4. You need to increase the overall size of the table so that the structure of the template will expand depending on the size of the screen that the page is displayed on. Otherwise, the design of your pages will appear at a fixed size and could appear very large on small screens, or very small on large screens. In the

      Width and

      Height fields, enter 90 and select the percentage (%) sign.

    5. Because you do not want the outline of the table to actually appear on your pages, you need to also set the

      Border to 0 pixels. Page Designer displays invisible table borders as dotted lines:

  3. Because you want a banner at the top of every page announcing the Web site name and visuals to tie the site together, you need to format this area for in the layout table. Also, though you likely would have a graphic designer create a logo or banner image for your site, you can add text as a placeholder for the banner in this template.

    1. Select the top cell in the table.

    2. With this cell selected, specify a

      Height of 70 pixels on the

      td tab in the Properties view. If you knew that you were creating a template that needed to accommodate a banner graphic that your graphic designer was creating, you could specify that this cell be the exact size of the banner graphic.

    3. In the Properties view on the

      td tab, also set the

      Color to

      Gray by clicking the Browse colors icon. If you wanted to use a different color, you could use the color picker tool to select a color from anywhere on the screen, or you could type the RGB value (such as #808080 for gray) into the field.

    4. Click anywhere in the top row and type Welcome to the Classifieds!

    5. Because the default text is small and hard to see, you need to increase the size of the font. Select the whole phrase and click Format > Font.

    6. To make the banner more prominent, select

      Impact as the

      Font. Select

      6 as the

      Size, and select

      White as the

      Color to stand out against the gray background of that cell.

    7. Click OK.

    8. To center the banner text, select the text again and click

      Format | Align | Horizontal Center.

  4. To allow users to go to different pages, you need a row of links beneath the banner. You will add tabs for navigation later, but for now, format the second row to leave room for the buttons.

    1. Select the second cell in the table.

    2. Set this cell to the same size as the banner cell by entering a

      Height of 70 pixels in the Properties view on the

      td tab.

  5. The third row is where your content will be located. You need to ensure that the content will align with the top of the row.

    1. Select the third row in the table.

    2. In the Properties view on the

      td tab, select

      Top for the vertical alignment.

Adding a content area

You need an area of the template where the specifics of each page can be displayed, such as the search results on the filtered_records page, or the form to fill in a new posting on the new_record page. Now that you have the common structure and color scheme defined for the site, you are ready to add a content area.

  1. On the Palette view, click the

    Page Template drawer.

  2. Drag a

    Content Area component into the third row. This is where your individual pages will supply specific content. The Insert Content Area for Page Template window opens.

  3. Accept the default Content area name of bodyarea by clicking OK. The content area name allows you to specify different names for different content areas for organizational purposes. For instance, if you were designing a site that would always have two content areas on every page, you could name the area that will be populated with the main content bodyarea and the area that will be populated with search results searcharea. This also helps if you need to apply your page template to pages that already exist, because you can then assign areas of existing pages by markup tags to populate specific content areas of the template. The content area is inserted into the table cell.

  4. Save your changes to the page template.

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.

< Previous | Next >