Macromedia Dreamweaver MX 2004 Design Professional Tables WORKING WITH

MacromediaDreamweaver MX 2004Design Professional

TablesWORKING WITH

2Working with Tables Web Collection: Dreamweaver MX 2004 Chapter E

Create a table

Resize, split and merge cells

Insert and align graphics in table cells

Insert text and format cell content

Perform Web site maintenance

Working with Tables


TableTables are placeholders made up of small boxes called cells, into which you can insert text and graphics

Cells are arranged horizontally in rows and vertically in columns

Using tables on a web page gives you control over the placement of each object on the page


Maintaining a Web SiteDreamweaver provides you with many management tools

You can run reports to check for pages that have no title page or search for images that are missing Alt Text


Planning a Table


Anatomy of a Table

Cell

Border

Row

Cell Spacing


Anatomy of a Cell

CellVertical alignment

Horizontal alignment

Width

Height

Text Wrap

Border color

Border width

Background image

Background color


Anatomy of a Row

Row

Vertical alignment

Horizontal alignment

Width

Height

Text Wrap

Border color

Border width

Background image

Background color


Anatomy of a Table

Rows

Columns

Width

Cell padding

Cell spacing

Alignment

Border color

Border width

Background color

Background graphic

table


Create a TableColumn textbox

Table Width

Table Border

Rows TextBox

Summary TextBox


Layout View

Draw LayoutCell button

Layout Tablebutton

Layout modebutton

ExpandedTables modeButton

Standard modebutton

Layout categoryTable displayed in Layout mode


Accessibility

Accessibility


Resize, Split and MergeCells

You can resize the rows or columns manually or by entering numbers in the properties inspector

You can also take one cell and split it into two or more cells

You can take two or more cells and merge them into one cell


Resize Cells(resize column width)

Selected CellClick and drag column

Enter valueinto the Wtext box


Resize Cells(resize row height)

Resizing pointer -Drag or specify in Properties


Split Cells

Number of Rows text box

Split cells intorows option button

Split cells intorows or columnsbutton


Merge Cells

Merges selectedcells using spansbutton


Table HTML

Colspan tag


Add Graphics to aTable Cell

You can insert graphics in the cells of a table by:– Using the Image button– Insert bar– The Image command on the Insert

Menu


Add Graphics to a Table Cell

tripsmart.jpg

packing_cube.jpg

Passport_holder.jpg

headphones.jpg


Aligning Graphics inTable Cell

You can align both horizontally and vertically within a cell

Vertical alignment


Align Graphics in aTable Cells

Cascading Alignment– Text <div>

– Cell <td>

– Image <img>


Align Graphics in aTable Cells

Centeredbanner

Centeredimage

AlignCenterbutton


Inserting Text

Type

Copy/PasteImport delimited text file

Where is your cursor?


Importing Text

Delimited text file– Export as delimited text from:

• Spreadsheet programSpreadsheet program• Database programDatabase program

– Import tabular data to Dreamweaver


Insert Text

Headings

Descriptiontext

Pageheading


Format Cell Content

Formattedtext

Font listarrow

ColorIcon

Size list arrow


Format Cells

Formattedtext

Tabletag

Columnsare spacedfurther apartnow

CellSpace=12


Web Site Maintenance

Broken links (Link Checker)

Orphaned files (Link Checker)

Unused images (assets panel)

Web-safe colors (assets panel)


Web Site Maintenance

Untitled documents (reports)

Alternative text (reports)

Navigational structure (site map)

Testing pages on a variety of environments


Reports Dialog Box

Report onList arrow


Link Checker

No broken links

Your total number offiles and links differ


Orphaned files

Two orphaned files listed


Assets panel

All colors areWebsafe


Reports - Untitled Documents

Report onlist arrow

UntitledDocumentsCheck box


Reports - Missing Alt Text

Missing AltText checkbox checked


Reports - Missing Alt Text

Two missing “alt”tags found


Test in a variety ofenvironments

Platforms

Browsers

Monitor size

Connection speed

Processor speed


Chapter E SummaryWorking with Tables

Resize, split and merge cells

Add and align graphics in table cells

Add text and format cell content

Perform Web site maintenance