1. Chapter 3 – Web Design Tables & Page Layout
Mr. Ursone

2. Tables Dreamweaver provides 3 ways to use the table feature:
Standard mode: Table is presented as a grid of rows and columns. Uses the Insert Table dialog box
Layout mode: freeform process where you draw the table and individual cells (more complex)
Expanded mode: allows you to edit table elements. Temporarily Adds cell padding & spacing to tables, increasing borders – this way you have easy access to items that are difficult to select for precise editing.

3. Understanding Tables
Tables Allow the user to add vertical and horizontal structure to a Web page.
Makes it easy to create the header/body/footer structure
A nested table is a table inside another table
Merge Cells: Combines selected cells, rows, or columns into one cell (available when two or more cells, rows, or columns are selected)
Split Cells: Divides a cell, creating two or more cells (available when a single cell is selected)
Table ID: Provides a name for the table within the HTML code. The table ID is similar to the alternate text for an image

4. Table Borders
The border command specifies the width, in pixels, of the line that frames the table and its various parts.
You cannot apply a border to an individual cell unless the table consists of only one cell
A border can help separate content within a table. Borders are especially useful if the table includes information that must be read across a row or down a column

5. Page layout Process of arranging text, images & elements on page
Rules: site should be easy to navigate, easy to read, and quick to download
Tables download fast & can be used anywhere
Tables allow you to position elements on a Web page with great accuracy / many design options

6. Typical Web Page Composed of 3 sections
Header – located at top, may contain logos, images or text that identifies site
Body – informational context about site
Footer – hyperlinks for contact info & navigational controls
Header
Body
Footer

7. Understanding Tables Table is presented as a grid of rows & columns
Row – horizontal collection of cells
Column – vertical collection of cells
Cell – the container created when row & column intersect
Cell padding – the amount of space between the edge of a cell & its contents
Cell spacing – the amount of space between cells
Border – when table’s border is set to 0 and the table is viewed in a browser the outline does not appear / when displayed in Dreamweaver an outline will appear
Percent – when table width is specified as percent it expands the width of the window and the monitor size where its being viewed
Pixels – a table with the width specified in pixels will remain the same size regardless of the window & monitor size
It is not necessary to declare table width – when no value is specified the table is displayed as small as possible & expands as content is added

8. Layout (Tab) Category under the Insert Bar
The layout category enables you to work with tables & other features.
In standard mode a table is displayed as a grid and expands as you add text & images
You define the structure of the table using the Insert Table Dialog box

9. Insert Bar Layout (Tab) Category
This toolbar contains buttons for creating and inserting objects such as tables, layers, and images
Standard mode
Expanded tables
Table
Insert row above
Insert row below
Insert Column to the Left
Insert Column to the Right
Draw Layout Table
Draw Layout Cell

10. Inserting Table Dialog Box in Standard Mode

11. Property Inspector Table Features
Table ID box
Clear column widths & clear row heights buttons
Convert table width to pixels
Convert table width to percent
Table background color
Table border color
Border width
Align box
CellPad & CellSpace boxes

12. Table Formatting
The order of precedence for table formatting is cells, rows, and table.
When a property, like 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
When a table is inserted it defaults to the left
Using the property inspector you can center the table by selecting it and applying the Center command
Default vertical cell alignment is middle

13. HTML structure within a Table
When you view your table in Dreamweaver:
<table> tag indicates whole table – clicking this tag selects the whole table
<td> tag indicates table data – clicking it selects the cell at the insertion point
<tr> tag indicates table row – clicking it selects the row containing the insertion point

14. Good to Know …
Default horizontal cell alignment is left – when you enter text or image to a cell it defaults to left margin
Its recommended that you add a table ID. It provides a name for a table within the HTML code / similar to alternative text for an image
Named anchor: a link to a specific place within a document
When you “merge” cells or rows you make them become one

15. Layout Mode You can draw & place boxes anywhere on the page
Layout mode provides more flexibility than Standard mode
As you draw the table and/or cells in Layout mode, Dreamweaver creates the code
When you draw your table Dreamweaver outlines the table in green and cells in blue
If Draw Layout Table & Draw Layout Cell buttons aren’t accessible, press ALT + F6

16. Layout Mode
Rulers provide a visual cue for positioning and resizing layers or tables – use them to help approximate cell width and height and cell location within a table
When you draw cells of different sizes in Layout Mode, Dreamweaver creates extra cells in the HTML table to fill in the spaces

17. Creating a Table in Layout Mode
Draw Layout Table button
Draw Layout Cell button
Layout mode
Layout category
Table width & Height
Layout Cell
Handles indicate cell is selected

18. Head Content & HC Elements
HTML files consist of two main sections: head section and body section
The tags are: <head> and <body>
Head content is found in the Insert Menu
Head section consists of site and page information
With the exception of the title the info contained in the head section is not displayed in the web browser
Keywords: are a list of words that someone would type into a search engine field
Description: Contains a sentence or two that can be used in a search engine’s results page