Multimedia and the world wide web
Download
1 / 28

Multimedia and the World Wide Web - PowerPoint PPT Presentation


  • 58 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Multimedia and the World Wide Web' - odysseus-grimes


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Multimedia and the world wide web

Multimedia and the World Wide Web

HCI 201 Lecture Notes #4B


What will we learn today
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
Spanning cells

  • How to create a table like this:

  • Use table functions available in editing tools

    • Split cells

    • Merge cells

3


Spanning cells1
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
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
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
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 columns1
Spanning rows and columns

Nicole wants to change the table as follows:

8


Controlling page layout with tables
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 tables1
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 tables2
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
Layout design 101

  • Grids bring order to the page

12


Layout design 1011
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 1012
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 1013
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 1014
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 1015
Layout design 101

  • Spacing and alignment with table

    Tables can be used to combine different text alignments on the page.

17


Layout design 1016
Layout design 101

  • Spacing and alignment with table

    Use invisible tables to control precisely the indent of a bullet list.

18


Layout design 1017
Layout design 101

  • Spacing and alignment with table

    Use invisible tables to control precisely the indent of a bullet list.

19


Layout design 1018
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 1019
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 10110
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 10111
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 10112
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 10113
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 10114
Layout design 101

  • Add little control over flexible tables (1)

26


Layout design 10115
Layout design 101

  • Add little control over flexible tables (2)

27


Assignment 3 due on 02 02 2005
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


ad