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.

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.

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

In the Project Explorer view, right-click your project name, ClassifiedsTutorial.
Select New > Web Page Template from the pop-up menu. The New Web Page Template file wizard opens.
Accept the default folder (/ClassifiedsTutorial/WebContent). This is where your template file will be located after it is created.
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.
Select the Design-time Template radio button.
Ensure HTML is selected as the markup language. You can see this and other information by selecting the Options button.
Click Finish. The new template is opened in Page Designer. When a blank template is opened, you are reminded in a dialog box that you must add at least one content area to the template. Click OK to close the dialog box.

Adding some elements to the blank template

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

Begin by deleting the text Place content here.
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. In the Palette view, expand the HTML Tags drawer by clicking on it.
2. Drag the Table component from the palette onto your blank template. The Insert Table dialog opens.
3. For this template, you will need 3 rows and 1 column. Type 3 in the Rows field and 1 in the Columns field.
4. Then, click OK. The table displays on your template page.
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 Table width and Table 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.
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 the area for it in this 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 in the pull-down menu. If you wanted to use a different color, you could use the eyedropper tool to pick 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 give the site a newspaper-feel, select Courier 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. Then, click OK.
8. To center the banner text, select the text again and click Format > Align > Horizontal Center.
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.
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

ou 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.

On the Palette view, click the Page Template drawer.
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 wizard opens.
You can 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 organization 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.
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. Click Next to begin the next lesson.