1
Revised Fall 2003
First: go over how to get pictures off the web
Note copyright concerns.
Examples of tables: Alcohol web site, CNN
What they are: tables, rows, columns, cells
Originally designed for making charts of scientific data, but adaptable to page layout.
Cell grids don’t have to be “square”: cells can “span” columns and rows.
They can be temperamental: especially among different browsers.
Tables in Dreamweaver
Start and save new page as table.htm.
Set page size at 760 x 420.
To insert a table, go to Insert > Table
Brings up dialog box (settings can be changed later)
Rows: number of rows
Columns: number of columns
Cell padding: spacing between cell contents and cell wall
Cell spacing: spacing between each cell
Width: set as a percentage or absolutely in pixels (explain difference)
Border: border around table and between cells.
Make 3 rows, 3 columns, cell padding and spacing at 5, width at 65%.
Puts table on page: 3 evenly spaced rows and 3 evenly spaced columns.
Look at properties window. . .
# of rows, # of columns, width and height (normally don’t have to set height, but can)
Cell padding and spacing; alignment works just like it does with a picture (text can flow around a table).
Border.
Six buttons: clear row heights, clear column widths; convert column widths to pixels; convert column widths to percent; convert column height to pixels, convert column heights to %.
Experiments:
Change width of window with mouse; notice that table changes size to stay at 65% of screen size. This is what happens when you use percent. Can wreak havoc on layout, etc.
Change table width to 550 pixels. Now, change size of window and notice that table width stays the same, even if you “close over” the table.
Type something in first three cells. Use TAB to move to next cell.
Preview. (F12)
Change cell space and cell pad to “0.” Note the differences.
Can also change background color.
BG color; border color.
Making a sample JFK Page Design
Make a page design with heading at top, left navigation column, main text column and navigation area below. show sample: table_example.htm
600 x 300 page size.
Insert > Table
3 rows, 2 columns,600 pixel width, zero for borders, padding, etc.
Drag center column divider over to left—about one-third of the way from left edge.
Highlight left columns (all) by clicking and dragging mouse over them; set width to 200 pixels in properties window.
Copy all text from sampletext.txt page to the main (second down and across) column.
Might have to fix width of columns.
Select two top cells. Click Merge Cells icon in properties window.
Cut and paste title/subhead from coldwar.html into top cell.
Select topunder Vert.
Note that same thing is going on in left cell. . . can make it hard to find cursor.
Change its vertical alignment to top.
With leftmost cell still selected, change color to pale yellow (#FFFFCC)
Need to put some space between main text and columns.
Highlight table and set cell pad to 5.
Now, insert picture. . . will use table within the table. (to put a caption in)
Click before “In” in second paragraph.
Insert > Table
2 rows, 1 column, width 160
Set align to left. (This allows text to wrap around table)
Position cursor in top cell of new table. Insert > Image
Jfk.jpg
Wet width to 200; height to 252; still messed up. . .
Highlight the table, and click the Clear Column widths icon.
Position cursor in bottom cell. Type
“JFK: His administration made use of the TV networks.”
Highlight and make Arial size 3. Bold JFK.
Highlight new table and set cell pad to 10.
Delete spaces at bottom of main cell.
Type 3 separate lines in left column: About JFK, JFK’s Legacy, What the networks say.
Make links to
Preview page.
Now, let’s change page design. Allow other information to right of main column.
Save astable2.html
Delete links from left cell. Highlight both left cells and set the cell width to 30.
Set background color to #FFFFFF.
Click in main cell. Modify > Table > Insert Rows or Columns
Insert 1 column to the after the current selection.
Need to make table wider, so highlight it and set width to 700.
Click in new right column, check that vert align is top (need to do this before inserting new table)
Highlight main cells and make width 450.
Click back in right column. Insert > Table
4 rows, 1 column, width 100 percent (why?)
Top cell height 300.
Type in second cell: “Michael Curtin Biography”
Third cell: 300 height
Type in fourth cell: “The New Frontier: An Overview”
Preview page.