Multimedia%20and%20the%20World%20Wide%20Web

1
Multimedia and the World Wide Web

• HCI 201 Lecture Notes 4B

2
What will we learn today?

• Spanning rows and columns
• Controlling page layout with tables
• Layout design 101
• Grids bring order to the page
• Layout elements in tables
• Spacing and alignment with table
• Fixed vs. flexible tables

3
Spanning cells

• How to create a table like this
• Use table functions available in editing tools
• Split cells
• Merge cells

Todays opinion poll question Todays opinion poll question Political Party Political Party Political Party
Todays opinion poll question Todays opinion poll question Democrat Republican Independent
Do you favor or oppose increasing the minimum wage? Favor 70 35 55
Do you favor or oppose increasing the minimum wage? Oppose 25 60 30
Do you favor or oppose increasing the minimum wage? Unsure 5 5 15
4
Spanning cells

• How to code in HTML? lttd rowspanvalue
  colspanvaluegt...lt/tdgt
• value is the number of rows/columns that the
  cell will span within the table.

Two columns, Two rows Two columns, Two rows Three columns Three columns Three columns r1
Two columns, Two rows Two columns, Two rows r2
Three rows r3
Three rows r4
Three rows r5
c1 c2 c3 c4 c5
5
Spanning columns

• lttablegt
• lttrgt //this row has 1 cell
• lttd colspan3gt1.Three columnslt/tdgt
• lt/trgt
• lttrgt //it has 3 cells
• lttdgt2lt/tdgtlttdgt3lt/tdgtlttdgt4lt/tdgt
• lt/trgt
• lttrgt //it has 3 cells
• lttdgt5lt/tdgtlttdgt6lt/tdgtlttdgt7lt/tdgt
• lt/trgt
• lt/tablegt

1. Three columns 1. Three columns 1. Three columns
2 3 4
5 6 7
6
Spanning rows

• lttablegt
• lttrgt //this row has 3 cells(lttdgts)
• lttd rowspan3gt1.Three rowslt/tdgt
• lttdgt2lt/tdgtlttdgt3lt/tdgt
• lt/trgt
• lttrgt //it has 2 cells
• lttdgt4lt/tdgtlttdgt5lt/tdgt
• lt/trgt
• lttrgt //it has 2 cells
• lttdgt6lt/tdgtlttdgt7lt/tdgt
• lt/trgt
• lt/tablegt

1. Three rows 2 3
1. Three rows 4 5
1. Three rows 6 7
7
Spanning rows and columns

• lttablegt
• lttrgt
• lttd colspan2 rowspan2gt1lt/tdgt
• lttd colspan3gt2lt/tdgt
• lt/trgtlttrgt
• lttdgt3lt/tdgtlttdgt4lt/tdgtlttdgt5lt/tdgt
• lt/trgtlttrgt
• lttd rowspan3gt6lt/tdgt
• lttdgt7lt/tdgtlttdgt8lt/tdgtlttdgt9lt/tdgtlttdgt10lt/tdgt
• lt/trgtlttrgt
• lttdgt11lt/tdgtlttdgt12lt/tdgtlttdgt13lt/tdgtlttdgt14lt/td
  gt
• lt/trgtlttrgt
• lttdgt15lt/tdgtlttdgt16lt/tdgtlttdgt17lt/tdgtlttdgt18lt/td
  gt
• lt/trgt
• lt/tablegt

1 1 2 2 2
1 1 3 4 5
6 7 8 9 10
6 11 12 13 14
6 15 16 17 18
8
Spanning rows and columns
Nicole wants to change the table as follows
Name Item Type Finish Type Finish Price
Bacchus 48059 Wall Mount Interior Plaster 95
Praying Gargoyle 48159 Garden Figure Gothic Stone 125
Gargoyle Judge 48222 Bust Interior Plaster 140
Gargoyle Judge 48223 Bust Gothic Stone 155
9
Controlling page layout with tables

• Separate pages into different sections
• - Create one table for the entire page.
• - Add content into cells
• Text
• Images
• Forms
• Tables

Link list
Company logo
Image

10
Controlling page layout with tables

• Process
• - Diagram the layout before you start writing the
  HTML code.
• Prepare the content (text, image, etc.) in
  separate files, which you can insert into
  different cells later.
• Create the table structure for the outer table
  first, then gradually work inward.
• Insert comment tags to identify the different
  sections.
• Indent the code for the various levels of nested
  tables, make your code easy to read.
• Test and review the code as you proceed, catch
  errors early.

11
Controlling page layout with tables

• Design tips
• ltbody topmargin0 leftmargin0gt
• Make the layout table invisible lttable border0
  ...gt.
• - Create gutters and use cellpadding to keep your
  columns from crowding each other.
• Separate content sections and provide visual
  interest.
• Ensure the text flows from the top-down
  (valigntop).
• Avoid making very narrow columns where the text
  is hard to read. (total columns lt3)
• Let text flow around the relevant imageltimg
  src... align...gt

12
Layout design 101

• Grids bring order to the page

13
Layout design 101

• Grids bring order to the page
• A balanced and consistently implemented design
  scheme will increase readers' confidence in your
  site.
• No one design grid system is appropriate for all
  Web pages.
• Process
• Establish a basic layout grid --- a graphic
  backbone.
• Determine how the major blocks of illustrations
  will fit in the grid sections.
• Without a firm underlying design grid, your
  project's page layout will be driven by the
  problems of the moment, and the overall design of
  your Web site will seem patchy and confusing.

14
Layout design 101

• Layout elements in tables
• Line length
• If eye traverses great distances on a page, the
  reader is easily lost and must hunt for the
  beginning of the next line.
• Use tables to limit the line length, ideally to
  ten to twelve words per line.
• Margin
• Separates the main text from nontext elements,
  also provides contrast and visual interest.
• Use table cells to establish margins, and use
  them consistently throughout your site to provide
  unity.

15
Layout design 101

• Layout elements in tables
• Columns
• A multicolumn layout, with the page divided into
  columns of main text, site navigation, and
  perhaps a third column with links to related
  sites, provides a flexible space for variations
  in page layout and narrow the text column to a
  comfortable line length.

16
Layout design 101

• Layout elements in tables
• Gutter the space between columns that keeps
  columns from running into one another .

Add empty cell Use
cellpadding Use cellspacing
17
Layout design 101

• Spacing and alignment with table
• Tables can be used to combine different text
  alignments on the page.

18
Layout design 101

• Spacing and alignment with table
• Use invisible tables to control precisely the
  indent of a bullet list.

19
Layout design 101

• Spacing and alignment with table
• Use invisible tables to control precisely the
  indent of a bullet list.

20
Layout design 101

• Define a visual section with colored background
• Use the bgcolor attribute to color an entire
  table, a table row, or an individual cell. This
  is an easy, low-bandwidth approach to adding
  visual identity and structure to a page without
  relying on graphics.
• Working with images
• Tables give the designer much greater
  flexibility in positioning images on a page than
  simple inline image placement. You can use tables
  to create complex layouts that combine text and
  images or multimedia materials.

21
Layout design 101

• Playing visual tricks with table
• Something fancy you can do with tables is to
  take a composite image, split it in pieces, and
  then recombine it in the cells of a table. This
  technique is useful for creating wrap-around
  effects, image captions, or rollovers.

22
Layout design 101

• Playing visual tricks with table
• Something fancy you can do with tables is to
  take a composite image, split it in pieces, and
  then recombine it in the cells of a table. This
  technique is useful for creating wrap-around
  effects, image captions, or rollovers.

23
Layout design 101

• Use fixed-width tables for precise layouts
• - Your page layout will be stable whatever the
  size of the user's screen or browser window.
• - You can fix the position of elements on the
  page and control typographic features such as
  line length and spacing.
• - Center the table in the browser window or
  design a background graphic to fill the empty
  areas of the large display screens.

24
Layout design 101

• Use fixed-width tables for precise layouts

Define cell widths with absolute values to keep
the table from expanding to fill the window.
Include an invisible image as wide as the cell
to keep tables from collapsing when the browser
window is too small.
25
Layout design 101

• Use flexible tables for layouts that adapt

Give up the control of your page design and come
up with graphics and layouts that will still work
under varying viewing conditions.
26
Layout design 101

• Add little control over flexible tables (1)

27
Layout design 101

• Add little control over flexible tables (2)

28
Assignment 3 (due on 02/02/2005)

• Write an HTML file that includes
• An ordered list, specifying attributes type and
  start.
• Nest another unordered list into the above list.
• A table with the following structure
• (1) Specify border thickness, bordercolorlight,
  bordercolordark, cellspacing, and cellpadding.
  (2) Use different background colors to
  differentiate the spanned and un-spanned cells.
  (3) Same width for the 5 columns, same height for
  the 4 rows.
• Use a table layout for your page, and shape up
  your code.