Chapter 5 - Creating Page Templates

The 3.2 release of HTML in 1997 included table elements for the purpose of organizing tabular data in rows and columns. Web designers quickly realized they could use the table elements to build print-like design structures that allowed them to break away from the left-alignment constraints of basic HTML. With tables, Web designers had the control and the tools to build columnar layouts, align text, add white space, and structure pages. This misuse of the table elements, although well-intentioned, has created problems with Web site accessibility and compatibility that are still influencing Web design today. Although proponents of standards-based Web design (described in Chapter 1) see tables returning to their intended purpose, they currently are still used as the primary design tool throughout the Web.

Cascading Style Sheets (CSS) provides an alternate method of controlling page designs called positioned layouts (described in Chapter 10), which are now relatively well supported by the latest releases of the major browsers. CSS positioning offers a rich set of tools for creating complex page designs. The Web design community has been somewhat reluctant to embrace this new approach, because it fears that users with older browsers will not see the page designs as the designer intended. Current Web designers need to be fluent in both uses of tables-as they were originally intended, and also as a page layout tool. In this chapter you will learn how to use the table elements to create data tables, as well as investigate their use as a page layout tool. In Chapter 10, you will learn how to create table-less positioned layouts using CSS.

When you complete this chapter, you will be able to:

• Understand table basics
• Format tables
• Follow table pointers to create well-designed tables
• Create a page template
• Evaluate examples of page templates

Visualized Table Design

Tables are easier to design if you start with a sketch of the visualized layout.

Table Examples

These are the HTML files for the various figures in Chapter 5. You can view these in your browser and save the code to experiment with tables.

Figure 5-1: Tabular Data
Figure 5-2: Basic Table
Figure 5-3: Table with caption and header
Figure 5-4: Table with colgroup and col settings
Figure 5-5: Table with column span
Figs. 5-6 Table with row span
Figs. 5-7 Flexible table
Figure 5-9: Fixed Table at 975 pixels
Figure 5-11: Cell padding
Figure 5-12: Cell spacing
Figure 5-13: Default table spacing
Figure 5-14: Default table spacing removed
Figure 5-17: Centered Table
Figure 5-18: Stacked Tables
Figure 5-19: Avoid Nested Tables
Figure 5-33: 2-Column Table Template
Figure 5-34: 2-Column with Banner Template
Figure 5-35: 3-Column Table Template
Figure 5-36: 3-Column with Banner
Figure 5-37: 3-Column Sectioned Template
Figure 5-38: 3-Column Main Sectioned Template

Exercise File

Download the file template.htm to work on the "Creating a Page Template" project starting on page 141 (3rd Ed.).

Download the file navbargifs.zip to work on the Seamless Navigation Bar Project #6, page 158 (4th Ed.).

Individual Case Project

Design the page templates for the different information levels of your Web site. Create sketches for each template, and describe why the templates fit your content.

You will find all of the page templates shown in this chapter linked above Use these templates as starting points for your Web pages. Adapt the page templates to your own needs or build your page templates from scratch.Test the page templates with content in different browsers to make sure that they are displayed properly.

Once your templates test properly, start to build the files for your Web site by copying the templates to individual files and naming them to match your flowchart from Chapter 3.

Team Case Project

Assign page template design tasks to different team members, and design the page templates for the different information levels of your Web site. Each team member should create multiple designs for the type of page he or she is assigned. For example, one team member should be responsible for the home page designs, one for the section page designs, and one for the article level page designs. Create 2-3 sketches for each template, and meet as a team to determine which template designs are the best for your content. Be prepared to present and defend your page designs to your team members.

You will find all of the page templates shown in this chapter on the Principles of Web Design Online Companion Web site. Use these templates as starting points for your Web pages. Adapt the page templates to your own needs or build your page templates from scratch. Test the page templates with content in different browsers to make sure that they are displayed properly.

Once your templates test properly, start to build the files for your Web site by copying the templates to individual files and naming them to match your flowchart from Chapter 3.

Top