|
Tables
I
- How are Tables used?
- Tables are an extremely powerful tool for laying out data and
images in DW4.
- Adds vertical and horizontal structure to a web page.
- A table is made up of adjoining cells.
- Inserting a Table:
- Place your cursor where you would like to insert a table, in
the document window.
- On the Objects Palette, choose the Insert Table button, the
Insert Table dialogue box will appear.
- Fill in the number of Rows and Columns you would like, choose
the width of the table, size of border (or none for no borders),
and cell padding and spacing as needed.
- Cell Padding: Is the pixels between the cell content
and the cell walls.
- Cell Padding Default: 2 pixels
- Cell Spacing: Is the pixels between each of the table
cells.
- Cell Spacing Default: 1 pixel
- Once the Table has appeared in the document window you should
align the Table in the document window, by selecting outside the
Table, then align in the Properties Inspector.
- Adding Content:
- For text or images, simply place the cursor in the cell where
your content will be placed.
- For an image, just selected the Insert Image icon on the Objects
Palette, then select the image from the Select Image Source dialogue
box.
- For Text, just place the cursor and you can begin typing text
or paste material you have from your cache.
- Navigate with in a Table:
- Use the Arrow keys or Tab key to move from cell to cell.
- Selecting Table Elements:
- Select the entire Table by clicking on the outside border of
the Table.
- Select an entire Row or Column by clicking inside one of the
cell of the row/column you would like to select, then dragging
your mouse to include any cells for selection.
- Select individual non-adjacent cells with the mouse and by holding
down your Shift key while selecting the cells of choice, with
your mouse.
- Formatting Tables and Cells: Select the Table
- Change the appearance of a table or apply a preset design to
your table.
- When formatting, remember that (logically) edits to the <TD>
tag have precedence over edits made to the <TR> tag and
likewise for the <TABLE> tag.
- Set Table properties by selecting the Table and using the Properties
Inspector.
- Adjust:
- Rows: add or delete rows
- Cols: add or delete columns.
- W: change the width in pixels or as a percentage.
- H: change the height in pixels or as a percentage.
- Assign Cell Padding or Cell Spacing as needed.
- Cell Padding Default: 2 pixels
- Cell Spacing Default: 1 pixel
- Align the Table as needed.
- Choose a background colour or select an image for the background
from your files.
- Choose a border colour, as needed.
- Clear Row Height: Removes height specifications from
Selected cells.
- Clear Column Width: Removes width specification from
Selected cells.
- Convert Table Width to Pixels: Converts between measurements.
- Covert Table Width to Percentage: Converts between
measurements.
- Column, Rows and Cell Properties: Select a cell.
- Highlight the Column, Rows and Cells for editing.
- Use the Properties Inspector:
- Merg Cells: Joins adjacent cells, they become
one cell.
- Split Cell: if you wish to undo a merging of
cells.
- Horiz: determine horizontal placement of content.
- Vert: determine vertical placement of content.
- No Wrap: changes the default setting for wrapping
text within a cell.
- Header: defines the content of the selected cell
as header style, bold and centered.
- Bg: choose a background image.
- Bg: choose a background colour.
- Brdr: choose border colour
- Design Schemes and Tables:
- Select the table, then Command / Format Table.
- Choose from the many Design Schemes.
- Edit the Design Schemes as required.
- Apply.
- Resizing Tables and Cells:
- Select the Table.
- Drag one of the selection handles to resize the table.
- Drag a corner selection handle while holding down the Shift
key to resize in proportion.
- All Cells, Rows and Columns can be resized when you allow the
mouse to select the border and drag the border to it's new location.
Note: the changes to the W and H section of the Properties
Inspector.
- Reset Width and Height
- Select the Table
- Select Modify / Table and choose Clear Cell Height or Width
- To resize a Row:
- Select the row by highlighting the row.
- Allowing the Table Arrow to select the row by moving the
mouse over the outside borders of the row.
- Change width in Properties Inspector.
- To resize a Column:
- Select the Column to be resized by highlighting the cell
or at the top of the cells, let the Tables Arrow do the selecting
by allowing it to appear when moving your cursor along the
top of the columns.
- Change width in the Properties Inspector.
- Adding and Removing Rows and/or Columns:
- Click the cell where you want the new row or column to appear.
- Right click.
- Select Table from the Context Menu, then choose the appropriate
selection for adding or removing.
- Or, select the Table, then change the settings for table rows
and table columns in the Property Inspector.
- Nesting Tables: A Table with in a Table.
- Place your cursor in the cell where you would like to place
a Nested Table.
- From the Object Palette select the Tables Icon to insert a Table.
- Fill out the Insert Table dialogue box, to your liking, select
OK.
- The Table will appear inside your existing table.
- Splitting and Merging Cells: Join adjacent cells - as long
as the entire selection is a rectangle - or dividing previously joined
cells.
- Select the cells you wish to Join or Split.
- On the Properties Inspector choose the Join or Split icon.
- Fill out the appropriate dialogue box, as required, select OK.
In Class Exersize:
- In teams, make table for the ba_con project , supplied by Instructor
- Place images in the table, edit table as needed to look like the
art work supplied.
- Class Review of teams work.
Due Project Reminder:
Project 1: End of Class 6
Project 2: Site Map during Class 6
|
