week five

Page Design, Tables and Layout

This week we will briefly cover the basics of page design and layout and spend more time demonstrating how to use the Dreamweaver table tools to orient information and graphics on your site/page.

Watch the Quicktime movies firsttable.mov and layoutview.mov — The movies are located on the CD that accompanies your textbook, and is in the Movies folder OR go to the online video library at Lynda.com and view section #9, Tables

Demonstration: Basic Table [MX2004] Note: Same in DW8

There are five ways to make a table in Dreamweaver without using cascading style sheets (CSS):

  1. From scratch in code view or design view (Standard)
  2. Layout mode (View>Table Mode>Layout Mode)
  3. Using a tracing image as a template
  4. Using layers (NOT ADVISED)
  5. Creating table in another program

There are two views: layout view which allows you to see the cells (boxes) that hold your content, and standard view which allows you to see rows and columns of the table

Creating a table from scratch

To insert a table:
In the Design view of the Document window, place the insertion point where you want the table to appear.
Note: If your document contains no content, then the only place you can place the insertion point is at the beginning of the document.

Do one of the following:
Click the Table button in the Common category of the Insert bar.
Choose Insert > Table.
The Insert Table dialog box appears.

Cell Pad: adds room inside the table

No Cell Padding
Background color (Bg) = #FFFF66

1
2
3
4
5
6
7
8
9

Cell Padding = 6 pixels
Table row (tr) = #FFFF66
Border color (Brdr) = #000066

1
2
3
4
5
6
7
8
9

 

Cell Space: adds to the border width

No Cell Spacing

1
2
3
4
5
6
7
8
9

Cell Spacing = 6 pixels

1
2
3
4
5
6
7
8
9

 

Navigating the table

To move from one cell to another using the keyboard, do any of the following:
Press Tab to move to the next cell.
Pressing Tab in the last cell of a table automatically adds another row to the table.

Press Shift+Tab to move to the previous cell.
Press the arrow keys to move up, down, left, or right.

Formatting issues

When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.

The order of precedence for table formatting is:

  1. Cells
  2. Rows
  3. Table

For example, if you set the background color for a single cell to blue, and then set the background color of the entire table to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.

Demo: Selecting Table cells in DW8, and applying a style to the border using the CSS panel

Using Layout View

  1. Save a new document in your local site folder, and name it tableLayout.htm.
  2. In the Insert bar, click the Layout tab, then click the Layout view button to switch from Standard view. The Getting Started in Layout View dialog box appears and describes the Layout view options.
  3. Review the options, then click OK to close the dialog box.
  4. In the Insert bar there are two Layout options available—Draw Layout Cell and Draw Layout Table; these options aren’t available in Standard view. If the Property inspector isn’t already open, choose Window > Properties to open it.
  5. In the Insert bar, click the Draw Layout Cell button.
  6. Move the pointer to the Document window; the mouse pointer changes to a drawing tool (looks like a small cross). Click in the upper left corner of the document, then drag to draw a layout cell. When you release the mouse, a layout cell appears in a layout table.The layout table expands to fill the Document window, and sets the page’s layout area. The white rectangle is the layout cell you drew.
  7. You can place additional layout cells in the empty
    area of the layout table.
  8. In the Document window, position the pointer below the last cell you drew; then drag to draw a layout cell. Continue to hold the Control key (Windows) or Command key (Macintosh) and draw more layout cells.

By default, when you draw a table or cell in Layout view, Dreamweaver creates the table with fixed width columns. You can change a fixed-width table or cell to relative width by using the Autostretch feature. Autostretch allows you to create a relative width table, and applies flexible layout for the column you set as an expandable column, so that a table automatically spans to fill a browser window.

Information about column widths appears in the column header area at the top of each column of a table. Table width information appears in the table’s column header. A fixed-width column has a specific numeric width, such as 200 pixels, while the column header for an autostretch column contains a wavy line. You can only make one column in a table autostretch.

You can easily change which column Autostretch applies to. You’ll set one of the columns of your table to automatically stretch so that the table fills a browser when viewed.

ASSIGNMENTS


PROJECT 4 — Midterm Project: Homepages as Portraits
This is a two week assignment that consists of two parts, planning your project, and producing your project.
Download PDF instructions

Part I should be completed and emailed to me by Monday, March 12.
Part II is the completed homepage project and is due on the webhawks.org server by Monday, March 19. Email me the link to your site.

READING ASSIGNMENT
Chapter 7 & 8 OR
VIDEOS:
Review Dreamweaver 8 Essential Training, series #9 & 10