Macromedia Dreamweaver MX 2004 Design Professional WORKING WITH

Macromedia Dreamweaver MX 2004 Design Professional WORKING WITH Tables

Working 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 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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