Multimedia and the World Wide Web

Multimedia and the World Wide Web HCI 201 Lecture Notes #4B

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 2

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

Spanning cells • How to code in HTML? <td rowspan=value colspan=value>...</td> value is the number of rows/columns that the cell will span within the table. 4

Spanning columns <table> <tr> //this row has 1 cell <td colspan=3>1.Three columns</td> </tr> <tr> //it has 3 cells <td>2</td><td>3</td><td>4</td> </tr> <tr> //it has 3 cells <td>5</td><td>6</td><td>7</td> </tr> </table> 5

Spanning rows <table> <tr> //this row has 3 cells(<td>s) <td rowspan=3>1.Three rows</td> <td>2</td><td>3</td> </tr> <tr> //it has 2 cells <td>4</td><td>5</td> </tr> <tr> //it has 2 cells <td>6</td><td>7</td> </tr> </table> 6

Spanning rows and columns <table> <tr> <td colspan=2 rowspan=2>1</td> <td colspan=3>2</td> </tr><tr> <td>3</td><td>4</td><td>5</td> </tr><tr> <td rowspan=3>6</td> <td>7</td><td>8</td><td>9</td><td>10</td> </tr><tr> <td>11</td><td>12</td><td>13</td><td>14</td> </tr><tr> <td>15</td><td>16</td><td>17</td><td>18</td> </tr> </table> 7

Spanning rows and columns Nicole wants to change the table as follows: 8

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 9

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. 10

Controlling page layout with tables • Design tips • <body topmargin=0 leftmargin=0> • Make the layout table invisible: <table border=0 ...>. - 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 (valign=top). • Avoid making very narrow columns where the text is hard to read. (total columns <=3) • Let text flow around the relevant image<img src=“...” align=“...”> 11

Layout design 101 • Grids bring order to the page 12

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. 13

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. 14

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. 15

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” 16

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

Layout design 101 • Spacing and alignment with table Use invisible tables to control precisely the indent of a bullet list. 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 • 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. 20

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. 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 • 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. 23

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. 24

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. 25

Layout design 101 • Add little control over flexible tables (1) 26

Layout design 101 • Add little control over flexible tables (2) 27

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. 28

Multimedia and the World Wide Web