ch.5a page template
TRANSCRIPT
-
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
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
2/30
Hong Kong Baptist University
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
Hong Kong Baptist University
4
-
8/9/2019 Ch.5a Page Template
3/30
Hong Kong Baptist University
Basic Table Code
3478-ABStock NumberDescription
List Price
78mm Socket
47.50
3476-AB76mm Socket
45.00
-
80mm Socket
50.00 < TR>
5
Hong Kong Baptist University
6
-
8/9/2019 Ch.5a Page Template
4/30
Hong Kong Baptist University
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
Hong Kong Baptist University
8
-
8/9/2019 Ch.5a Page Template
5/30
Hong Kong Baptist University
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
Hong Kong Baptist University
10
-
8/9/2019 Ch.5a Page Template
6/30
Hong Kong Baptist University
11
Hong Kong Baptist University
12
-
8/9/2019 Ch.5a Page Template
7/30
Hong Kong Baptist University
Spanning Columns
The COLSPAN attribute lets you create cells
that span multiple columns of a table.Column cells always span to the right.
13
Hong Kong Baptist University
14
-
8/9/2019 Ch.5a Page Template
8/30
Hong Kong Baptist University
Spanning Rows
The ROWSPAN attribute lets you create
cells that span multiple rows of a table. Rowsalways span down.
15
Hong Kong Baptist University
16
-
8/9/2019 Ch.5a Page Template
9/30
Hong Kong Baptist University
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
Hong Kong Baptist University
Calculating Table Widths
The most common width for page templatetables is approximately 975 pixels. This width
supports the 1024 x 768 screen resolution.
18
-
8/9/2019 Ch.5a Page Template
10/30
Hong Kong Baptist University
1024
19
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
11/30
Hong Kong Baptist University
21
Hong Kong Baptist University
22
-
8/9/2019 Ch.5a Page Template
12/30
Hong Kong Baptist University
23
Hong Kong Baptist University
24
-
8/9/2019 Ch.5a Page Template
13/30
Hong Kong Baptist University
25
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
14/30
Hong Kong Baptist University
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
Hong Kong Baptist University
28
-
8/9/2019 Ch.5a Page Template
15/30
Hong Kong Baptist University
29
Hong Kong Baptist University
30
-
8/9/2019 Ch.5a Page Template
16/30
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
17/30
Hong Kong Baptist University
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
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
18/30
Hong Kong Baptist UniversityPrinciples of Web Design Chapter 5
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
Hong Kong Baptist UniversityPrinciples of Web Design Chapter 5
36975
-
8/9/2019 Ch.5a Page Template
19/30
Hong Kong Baptist University
Creating the Page Banner
The page banner cell is R1C1. This cell
spans the four columns of the table using thecolspan attribute.
37
Hong Kong Baptist University
38
-
8/9/2019 Ch.5a Page Template
20/30
Hong Kong Baptist University
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
Hong Kong Baptist University
40
-
8/9/2019 Ch.5a Page Template
21/30
Hong Kong Baptist University
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
Hong Kong Baptist University
42
-
8/9/2019 Ch.5a Page Template
22/30
Hong Kong Baptist University
43
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
23/30
Hong Kong Baptist University
45
Hong Kong Baptist University
Testing the Template
To verify that your template works properly,
populate it with test content
Test the template in multiple browsers
46
-
8/9/2019 Ch.5a Page Template
24/30
Hong Kong Baptist University
47
Hong Kong Baptist University
48
-
8/9/2019 Ch.5a Page Template
25/30
Hong Kong Baptist University
49
Hong Kong Baptist University
50
-
8/9/2019 Ch.5a Page Template
26/30
Hong Kong Baptist University
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
Hong Kong Baptist University
52
-
8/9/2019 Ch.5a Page Template
27/30
Hong Kong Baptist University
53
Hong Kong Baptist University
54
-
8/9/2019 Ch.5a Page Template
28/30
Hong Kong Baptist University
55
Hong Kong Baptist University
56
-
8/9/2019 Ch.5a Page Template
29/30
Hong Kong Baptist University
57
Hong Kong Baptist University
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
-
8/9/2019 Ch.5a Page Template
30/30
Hong Kong Baptist University
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
Hong Kong Baptist University
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