Macromedia Dreamweaver MX 2004 Design Professional Tables WORKING WITH

Web Collection: Dreamweaver MX 2004 Chapter E 2Working with Tables 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

Web Collection: Dreamweaver MX 2004 Chapter E 3Working with Tables Table Tables 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

Web Collection: Dreamweaver MX 2004 Chapter E 4Working with Tables Maintaining a Web Site Dreamweaver 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

Web Collection: Dreamweaver MX 2004 Chapter E 5Working with Tables Planning a Table

Web Collection: Dreamweaver MX 2004 Chapter E 6Working with Tables Anatomy of a Table Cell Border Row Cell Spacing

Web Collection: Dreamweaver MX 2004 Chapter E 7Working with Tables Anatomy of a Cell Cell Vertical alignment Horizontal alignment Width Height Text Wrap Border color Border width Background image Background color

Web Collection: Dreamweaver MX 2004 Chapter E 8Working with Tables Anatomy of a Row Row Vertical alignment Horizontal alignment Width Height Text Wrap Border color Border width Background image Background color

Web Collection: Dreamweaver MX 2004 Chapter E 9Working with Tables Anatomy of a Table Rows Columns Width Cell padding Cell spacing Alignment Border color Border width Background color Background graphic table

Web Collection: Dreamweaver MX 2004 Chapter E 10Working with Tables Create a Table Column text box Table Width Table Border Rows Text Box Summary Text Box

Web Collection: Dreamweaver MX 2004 Chapter E 11Working with Tables Layout View Draw Layout Cell button Layout Table button Layout mode button Expanded Tables mode Button Standard mode button Layout category Table displayed in Layout mode

Web Collection: Dreamweaver MX 2004 Chapter E 12Working with Tables Accessibility

Web Collection: Dreamweaver MX 2004 Chapter E 13Working with Tables Resize, Split and Merge Cells 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

Web Collection: Dreamweaver MX 2004 Chapter E 14Working with Tables Resize Cells (resize column width) Selected Cell Click and drag column Enter value into the W text box

Web Collection: Dreamweaver MX 2004 Chapter E 15Working with Tables Resize Cells (resize row height) Resizing pointer - Drag or specify in Properties

Web Collection: Dreamweaver MX 2004 Chapter E 16Working with Tables Split Cells Number of Rows text box Split cells into rows option button Split cells into rows or columns button

Web Collection: Dreamweaver MX 2004 Chapter E 17Working with Tables Merge Cells Merges selected cells using spans button

Web Collection: Dreamweaver MX 2004 Chapter E 18Working with Tables Table HTML Colspan tag

Web Collection: Dreamweaver MX 2004 Chapter E 19Working with Tables Add Graphics to a Table 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

Web Collection: Dreamweaver MX 2004 Chapter E 20Working with Tables Add Graphics to a Table Cell tripsmart.jpg packing_cube.jpg Passport_holder.jpg headphones.jpg

Web Collection: Dreamweaver MX 2004 Chapter E 21Working with Tables Aligning Graphics in Table Cell You can align both horizontally and vertically within a cell Vertical alignment

Web Collection: Dreamweaver MX 2004 Chapter E 22Working with Tables Align Graphics in a Table Cells Cascading Alignment –Text –Cell –Image

Web Collection: Dreamweaver MX 2004 Chapter E 23Working with Tables Align Graphics in a Table Cells Centered banner Centered image Align Center button

Web Collection: Dreamweaver MX 2004 Chapter E 24Working with Tables Inserting Text Type Copy/Paste Import delimited text file Where is your cursor?

Web Collection: Dreamweaver MX 2004 Chapter E 25Working with Tables Importing Text Delimited text file –Export as delimited text from: Spreadsheet programSpreadsheet program Database programDatabase program –Import tabular data to Dreamweaver

Web Collection: Dreamweaver MX 2004 Chapter E 26Working with Tables Insert Text Headings Description text Page heading

Web Collection: Dreamweaver MX 2004 Chapter E 27Working with Tables Format Cell Content Formatted text Font list arrow Color Icon Size list arrow

Web Collection: Dreamweaver MX 2004 Chapter E 28Working with Tables Format Cells Formatted text Table tag Columns are spaced further apart now CellSpace =12

Web Collection: Dreamweaver MX 2004 Chapter E 29Working with Tables Web Site Maintenance Broken links (Link Checker) Orphaned files (Link Checker) Unused images (assets panel) Web-safe colors (assets panel)

Web Collection: Dreamweaver MX 2004 Chapter E 30Working with Tables Web Site Maintenance Untitled documents (reports) Alternative text (reports) Navigational structure (site map) Testing pages on a variety of environments

Web Collection: Dreamweaver MX 2004 Chapter E 31Working with Tables Reports Dialog Box Report on List arrow

Web Collection: Dreamweaver MX 2004 Chapter E 32Working with Tables Link Checker No broken links Your total number of files and links differ

Web Collection: Dreamweaver MX 2004 Chapter E 33Working with Tables Orphaned files Two orphaned files listed

Web Collection: Dreamweaver MX 2004 Chapter E 34Working with Tables Assets panel All colors are Websafe

Web Collection: Dreamweaver MX 2004 Chapter E 35Working with Tables Reports - Untitled Documents Report on list arrow Untitled Documents Check box

Web Collection: Dreamweaver MX 2004 Chapter E 36Working with Tables Reports - Missing Alt Text Missing Alt Text check box checked

Web Collection: Dreamweaver MX 2004 Chapter E 37Working with Tables Reports - Missing Alt Text Two missing “alt” tags found

Web Collection: Dreamweaver MX 2004 Chapter E 38Working with Tables Test in a variety of environments Platforms Browsers Monitor size Connection speed Processor speed

Web Collection: Dreamweaver MX 2004 Chapter E 39Working with Tables Chapter E Summary Working with Tables Resize, split and merge cells Add and align graphics in table cells Add text and format cell content Perform Web site maintenance