Ch.5a Page Template

8/9/2019 Ch.5a Page Template

1/30

Hong Kong Baptist University

Week 5

Creating Page Template

8/02/2010

Dr. Tony Chun-Kuen WONG

Coordinator, BBA(Hons) Information System Management Major

Coordinator, BBA(Hons) Information System & e-BusinessManagement Concentration

Department of Finance and Decision Sciences

School of Business


Objectives

Format tables

o ow a e po n ers o crea e we - es gne a es Create a page template

va ua e examp es o page emp a es

2


2/30


Using Table Elements

,be familiar with the HTML table elementsand attributes

information, which consists of table rowelements , and individual table data cells. These are the three elements you willuse most frequently when you are building

.

3


4


3/30


Basic Table Code

3478-ABStock NumberDescription

List Price

78mm Socket

47.50

3476-AB76mm Socket

45.00

-

80mm Socket

50.00 < TR>

5


6


4/30


Captions and Table Header

lets you add a caption to the top or bottom

of the table., .

use the align=bottom attribute to align the caption at thebottom of the table.

e < > ag e s you crea e a a e ea er ce apresents the cell content as boldand centered

7


8


5/30


Defining Table Attributes

Table attributes let you further define a

number of table characteristics. You canapply attributes at three levels of tablestructure: global, row-level, or cell-level.

9


10


6/30


11


12


7/30


Spanning Columns

The COLSPAN attribute lets you create cells

that span multiple columns of a table.Column cells always span to the right.

13


14


8/30


Spanning Rows

The ROWSPAN attribute lets you create

cells that span multiple rows of a table. Rowsalways span down.

15


16


9/30


Relative or Absolute Widths

Set relative table widths as percentages in

the table width attribute. If you chooserelative table widths, your tables will resizebased on the size of the browser window.

the table width attribute. Fixed tables remain

size.

17


Calculating Table Widths

The most common width for page templatetables is approximately 975 pixels. This width

supports the 1024 x 768 screen resolution.

18


10/30


1024

19


Default Table Spacing

Default spacing values are included in thetable even when you dont specify values for

, ,cellspacing attributes

Depending on the browser, approximatelytwo pixels are reserved for each of thesevalues

You can remove the default spacing byexplicitly stating a zero value for each

20


11/30


21


22


12/30


23


24


13/30


25


Table Pointers

Write easy-to-read code - You can simplify yourtable creation and maintenance tasks by writing

,

Remove extra s aces - Alwa s remove an leadinor trailing spaces in your table cell content

Center tables - Centering a fixed table makes thetable independent of resolution changes, because

26


14/30


Table Pointers

Stack tables - Because of the way browsers,

smaller tables rather than one large one

Nest tables - You can nest tables by placingan entire table within a table cell

27


28


15/30


29


30


16/30


Creating a Page Template

In this example youll see how to take a

template for the page layout

Figure in next slide shows a sketch of thees re ayout. s ayout s es gne or a

base screen resolution of 1024 x 768, so theta e w e xe at a w t o p xe s.

31

Hong Kong Baptist UniversityPrinciples of Web Design Chapter 5

Sketch of the visualized layout32


17/30


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 ofthe tem late.

Row spans and column spans break across.

33


Build the Basic Structure

Start by building the basic table structure,including all the cells and rows of the table

extraneous cells as necessary

The basic structure is a 3-row by 4-columntable

34


18/30


Setting a Fixed Width

One of the design characteristics of thetemplate is a fixed width that is notdependent on the users browser size orscreen resolution

To accomplish this, use a pixel value in the

35


36975


19/30


Creating the Page Banner

The page banner cell is R1C1. This cell

spans the four columns of the table using thecolspan attribute.

37


38


20/30


Creating the Feature Cell

The Feature cell in the layout is R2C2, and

spans two columns. This column spanrequires the removal of one cell in row two tomake room for the span.

39


40


21/30


Creating the Link Columns

The New Link and Linked Ads columns in thela out reside in cells R2C1 and R2C3respectively. These cells span rows 2 and 3of the table. The row s ans re uire theremoval of cells R3C1 and R3C4.

41


42


22/30


43


Creating the Page Banner

Column widths must be set in only one cell

per column

Its also best to set the column widths in onlyone row of the table

Settin the column width ensures that the

text will wrap properly

44


23/30


45


Testing the Template

To verify that your template works properly,

populate it with test content

Test the template in multiple browsers

46


24/30


47


48


25/30


49


50


26/30


Template Examples

The following templates cover a variety ofpage ayout nee s

You may choose to stack different templateson to of each other for more com lexlayouts

51


52


27/30


53


54


28/30


55


56


29/30


57


Summary

Plan your tables by sketching them out first

Use fixed table widths if you want todetermine the size of our a e rather thanletting the browser determine the width

Use relative widths if you want to build tablesthat resize with the browser window,

58


30/30


Summary

Work on your pages with the table borders

turned on, which displays the celloun ar es. en you are n s e w t your

layout you can turn the borders off.

Size your tables based on the page size youwan o crea e. se x as your asescreen resolution. In most cases youll set

,allowing the content to flow down the page.

59


Summary

Test your work! Table settings, especiallycell widths and heights, can vary based on

the users browser.

Reference (Read the source code)

oe ar r nc p es o e es gn ap er

http://oc.course.com/webwarrior/sklar4/index.cfm?action=home&cha ter=5

Homework

Documents

Ch.5a Page Template