Chapter 5 Creating Page Templates

1. Chapter 5Creating Page Templates

2. Chapter 5 Principles of Web Design Objectives • Understand table basics • Format tables • Follow table pointers to create well-designed tables • Create a page template • Evaluate examples of page templates Principles of Web Design 2nd Ed. Chapter 5

3. Chapter 5 Principles of Web Design Using Table Elements • To build effective page templates, you must be familiar with the HTML table elements and attributes • The <table> element contains the table information, which consists of table row elements <tr>, and individual table data cells <td>. These are the three elements you will use most frequently when you are building tables. Principles of Web Design 2nd Ed. Chapter 5

4. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

5. Chapter 5 Principles of Web Design Basic Table Code <TABLE BORDER> <TR><TD>Stock Number</TD><TD>Description</TD><TD>List Price</TD></TR> <TR><TD>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR> <TR><TD>3478-AB</TD><TD>78mm Socket</TD><TD>47.50</TD></TR> <TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR> </TABLE> Principles of Web Design 2nd Ed. Chapter 5

6. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

7. Chapter 5 Principles of Web Design Captions and Table Header • <caption> lets you add a caption to the top or bottom of the table. By default, captions display at the top of the table. You can use the align=“bottom” attribute to align the caption at the bottom of the table. • The <th> tag lets you create a table header cell that presents the cell content as bold and centered Principles of Web Design 2nd Ed. Chapter 5

8. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

9. Chapter 5 Principles of Web Design Defining Table Attributes • Table attributes let you further define a number of table characteristics. You can apply attributes at three levels of table structure: global, row-level, or cell-level. Principles of Web Design 2nd Ed. Chapter 5

10. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

11. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

12. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

13. Chapter 5 Principles of Web Design Spanning Columns • The COLSPAN attribute lets you create cells that span multiple columns of a table. Column cells always span to the right. Principles of Web Design 2nd Ed. Chapter 5

14. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

15. Chapter 5 Principles of Web Design Spanning Rows • The ROWSPAN attribute lets you create cells that span multiple rows of a table. Rows always span down. Principles of Web Design 2nd Ed. Chapter 5

16. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

17. Chapter 5 Principles of Web Design Relative or Absolute Widths • Set relative table widths as percentages in the table width attribute. If you choose relative table widths, your tables will resize based on the size of the browser window. • Set absolute table widths as pixel values in the table width attribute. Fixed tables remain constant regardless of the browser window size. Principles of Web Design 2nd Ed. Chapter 5

18. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

19. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

20. Chapter 5 Principles of Web Design Calculating Table Widths • The most common width for page template tables is approximately 750 pixels. This width supports the 800 x 600 screen resolution. Principles of Web Design 2nd Ed. Chapter 5

21. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

22. Chapter 5 Principles of Web Design Default Table Spacing • Default spacing values are included in the table even when you don’t specify values for the table’s border, cellpadding, or cellspacing attributes • Depending on the browser, approximately two pixels are reserved for each of these values • You can remove the default spacing by explicitly stating a zero value for each attribute Principles of Web Design 2nd Ed. Chapter 5

23. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

24. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

25. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

26. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

27. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

28. Chapter 5 Principles of Web Design Table Pointers • Write easy-to-read code - You can simplify your table creation and maintenance tasks by writing clean, commented code • Remove extra spaces - Always remove any leading or trailing spaces in your table cell content • Center tables - Centering a fixed table makes the table independent of resolution changes, because the table is always centered in the browser window Principles of Web Design 2nd Ed. Chapter 5

29. Chapter 5 Principles of Web Design Table Pointers • Stack tables - Because of the way browsers display tables, it’s best to build several smaller tables rather than one large one • Nest tables - You can nest tables by placing an entire table within a table cell Principles of Web Design 2nd Ed. Chapter 5

30. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

31. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

32. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

33. Chapter 5 Principles of Web Design Creating a Page Template • In this example you’ll see how to take a design sketch for a Web page and build a template for the page layout • Figure 5-19 shows a sketch of the desired layout. This layout is designed for a base screen resolution of 800 x 600, so the table will be fixed at a width of 750 pixels. Principles of Web Design 2nd Ed. Chapter 5

34. Chapter 5 Principles of Web Design Creating a Page Template • Notice that the basic structure of the table is 3 rows by 4 columns. Each column uses 25% of the total width of the template. Row spans and column spans break across the layout to provide visual interest. Principles of Web Design 2nd Ed. Chapter 5

35. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

36. Chapter 5 Principles of Web Design Build the Basic Structure • Start by building the basic table structure, including all the cells and rows of the table • As you customize the table you can remove extraneous cells as necessary • The basic structure is a 3-row by 4-column table Principles of Web Design 2nd Ed. Chapter 5

37. Chapter 5 Principles of Web Design Setting a Fixed Width • One of the design characteristics of the template is a fixed width that is not dependent on the user’s browser size or screen resolution • To accomplish this, use a pixel value in the global WIDTH attribute Principles of Web Design 2nd Ed. Chapter 5

38. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

39. Chapter 5 Principles of Web Design Creating the Page Banner • The page banner cell is R1C1. This cell spans the four columns of the table using the colspan attribute. Principles of Web Design 2nd Ed. Chapter 5

40. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

41. Chapter 5 Principles of Web Design Creating the Feature Cell • The Feature cell in the layout is R2C2, and spans two columns. This column span requires the removal of one cell in row two to make room for the span. Principles of Web Design 2nd Ed. Chapter 5

42. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

43. Chapter 5 Principles of Web Design Creating the Link Columns • The New Link and Linked Ads columns in the layout reside in cells R2C1 and R2C3 respectively. These cells span rows 2 and 3 of the table. The row spans require the removal of cells R3C1 and R3C4. Principles of Web Design 2nd Ed. Chapter 5

44. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

45. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

46. Chapter 5 Principles of Web Design Creating the Page Banner • Column widths must be set in only one cell per column • It’s also best to set the column widths in only one row of the table • Setting the column width ensures that the text will wrap properly Principles of Web Design 2nd Ed. Chapter 5

47. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

48. Chapter 5 Principles of Web Design Testing the Template • To verify that your template works properly, populate it with test content • Test the template in multiple browsers Principles of Web Design 2nd Ed. Chapter 5

49. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5

50. Chapter 5 Principles of Web Design Principles of Web Design 2nd Ed. Chapter 5