Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE
Chapter 5 Lessons <ul><li>Create a table </li></ul><ul><li>Resize, split, and merge cells </li></ul><ul><li>Insert and ali...
Tables <ul><li>Are placeholders made up of small boxes (cells), into which you can insert text and graphics </li></ul><ul>...
Inserting Graphics and Text in Tables <ul><li>Control placement of elements in relation to each other </li></ul><ul><li>Sp...
Create a Table <ul><li>Understanding table modes </li></ul><ul><li>Creating a table in standard mode </li></ul><ul><li>Pla...
Understanding Table Modes <ul><li>There are two ways to create a table: </li></ul><ul><li>Click Table on the Insert bar </...
Anatomy of a Table Cell Border Row Cell Spacing
Anatomy of a Cell <ul><li>Vertical alignment </li></ul><ul><li>Horizontal alignment </li></ul><ul><li>Width </li></ul><ul>...
Anatomy of a Row <ul><li>Vertical alignment </li></ul><ul><li>Horizontal alignment </li></ul><ul><li>Width </li></ul><ul><...
Anatomy of a Table <ul><li>Rows </li></ul><ul><li>Columns </li></ul><ul><li>Width </li></ul><ul><li>Cell padding </li></ul...
Standard Mode <ul><li>Useful when you want to create a table with a specific number of columns and rows </li></ul><ul><li>...
Planning a Table <ul><li>Sketch a plan for a table that shows its location on the Web page and the placement of text and g...
Accessibility Preferences <ul><li>To make a table more accessible to visually handicapped viewers, add </li></ul><ul><ul><...
Drawing a Table in Layout Mode <ul><li>Ideal when placing elements on a Web page without specifying number of rows and col...
Fig. 3: Sketch of Table on Café Page
Fig. 4: Table Dialog Box Table properties Header options Accessibility options
Expanded Tables Mode <ul><li>Allows you to change to a table view with expanded table borders and temporary cell padding a...
Fig. 6: Expanded Tables Mode Displays more space between cells for easier editing
Fig. 8: Table in Layout Mode Table displayed in layout mode Layout tab Standard mode button Expanded mode button
Resize, Split and Merge Cells <ul><li>You can resize the rows or columns manually or by entering numbers in the properties...
Fig. 9: Selecting a Cell Cell tag icon W text box Selected cell
Fig. 10: Resizing the Row Height Resizing pointer
Fig. 11: Splitting a Cell into Two Rows Number of rows text box Splits cell into Rows or Columns button
Fig. 12: Splitting One Cell into Two Two cells split from one
Fig. 14: Code View for Merged Cells colspan tag
Insert Images in Table Cells <ul><li>Use the Image command on the Images Menu on the Insert bar </li></ul><ul><li>Drag it ...
Aligning Images in Table Cells <ul><li>You can align graphics horizontally and vertically within a cell </li></ul><ul><ul>...
Fig. 16: Vertically Aligning Cell Contents Vertical alignment options
Fig. 18: Images Inserted into Cells cafe_logo.gif cheesecake.jpg
Fig. 20: Aligning Images in Cells Centered banner and navigation bar Centered logo Centered cheesecake photo Left-aligned ...
Inserting Text in a Table <ul><li>Type </li></ul><ul><li>Copy/paste </li></ul><ul><li>Import </li></ul>
Format Cell Content <ul><li>Easier to do in Standard mode than in Layout mode </li></ul><ul><ul><li>Select the contents in...
Formatting Cells <ul><li>Different than formatting cell content </li></ul><ul><li>Can include setting properties that visu...
Fig. 21: Property Inspector Showing Options for Formatting Cell Contents Image selected inside a cell Properties for selec...
Fig. 22: Property Inspector Showing Options for Formatting a Cell Properties for selected  cell,  not image Insertion poin...
Fig. 23: Importing and Typing Text  into Cells Imported text describing the cafe Text typed into cell
Importing Text <ul><li>Can import delimited text file </li></ul><ul><ul><li>Export as delimited text from </li></ul></ul><...
Fig. 25: Adding Nested Tables Top row header Nested table
Fig. 27: Formatting Cells Using Horizontal Alignment Vert and Horz list arrows Insertion point inside cell with no element...
Fig. 29: Hiding Visual Aids Hide all visual aids option Visual aids button Dotted lines show borders  are hidden
Chapter 5 Tasks <ul><li>Create a table </li></ul><ul><li>Resize, split, and merge cells </li></ul><ul><li>Insert and align...
Upcoming SlideShare
Loading in …5
×

Dreamweaver Ch05

1,557 views
1,481 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,557
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver Ch05

  1. 1. Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE
  2. 2. Chapter 5 Lessons <ul><li>Create a table </li></ul><ul><li>Resize, split, and merge cells </li></ul><ul><li>Insert and align images in table cells </li></ul><ul><li>Insert text and format cell content </li></ul>
  3. 3. Tables <ul><li>Are placeholders made up of small boxes (cells), into which you can insert text and graphics </li></ul><ul><li>Consist of cells </li></ul><ul><ul><li>Arranged horizontally in rows and vertically in columns </li></ul></ul><ul><li>Give you control over the placement of each object </li></ul>
  4. 4. Inserting Graphics and Text in Tables <ul><li>Control placement of elements in relation to each other </li></ul><ul><li>Specify amount of space between each page element </li></ul><ul><li>Always plan how your table will look with all the text and graphics in it </li></ul><ul><ul><li>Even a rough sketch will save you time </li></ul></ul>
  5. 5. Create a Table <ul><li>Understanding table modes </li></ul><ul><li>Creating a table in standard mode </li></ul><ul><li>Planning a table </li></ul><ul><li>Setting table accessibility preferences for tables </li></ul><ul><li>Drawing a table in layout mode </li></ul>
  6. 6. Understanding Table Modes <ul><li>There are two ways to create a table: </li></ul><ul><li>Click Table on the Insert bar </li></ul><ul><li>Click View, Table Mode, Layout Mode; then click the Draw Layout Table button or the Draw Layout Cell button </li></ul>
  7. 7. Anatomy of a Table Cell Border Row Cell Spacing
  8. 8. Anatomy of a Cell <ul><li>Vertical alignment </li></ul><ul><li>Horizontal alignment </li></ul><ul><li>Width </li></ul><ul><li>Height </li></ul><ul><li>Text Wrap </li></ul><ul><li>Border color </li></ul><ul><li>Border width </li></ul><ul><li>Background image </li></ul><ul><li>Background color </li></ul>Cell
  9. 9. Anatomy of a Row <ul><li>Vertical alignment </li></ul><ul><li>Horizontal alignment </li></ul><ul><li>Width </li></ul><ul><li>Height </li></ul><ul><li>Text Wrap </li></ul><ul><li>Border color </li></ul><ul><li>Border width </li></ul><ul><li>Background image </li></ul><ul><li>Background color </li></ul>Row
  10. 10. Anatomy of a Table <ul><li>Rows </li></ul><ul><li>Columns </li></ul><ul><li>Width </li></ul><ul><li>Cell padding </li></ul><ul><li>Cell spacing </li></ul><ul><li>Alignment </li></ul><ul><li>Border color </li></ul><ul><li>Border width </li></ul><ul><li>Background color </li></ul><ul><li>Background graphic </li></ul>table
  11. 11. Standard Mode <ul><li>Useful when you want to create a table with a specific number of columns and rows </li></ul><ul><li>Use the Table dialog box to set: </li></ul><ul><ul><li>Rows, columns, border thickness, table width, cell padding, and cell spacing </li></ul></ul>
  12. 12. Planning a Table <ul><li>Sketch a plan for a table that shows its location on the Web page and the placement of text and graphics in its cells </li></ul><ul><li>Decide whether to include borders around the tables and cells. </li></ul><ul><ul><li>Setting the border value to 0 causes the table to appear invisible, so that viewers will not realize that you used a table for the page layout unless they look at the code </li></ul></ul>
  13. 13. Accessibility Preferences <ul><li>To make a table more accessible to visually handicapped viewers, add </li></ul><ul><ul><li>Table caption </li></ul></ul><ul><ul><li>Table summary (does not appear on screen) </li></ul></ul><ul><ul><li>Table headers </li></ul></ul><ul><ul><ul><li>Can be placed at the top or sides of table </li></ul></ul></ul><ul><ul><ul><li>Are automatically centered and bold </li></ul></ul></ul>
  14. 14. Drawing a Table in Layout Mode <ul><li>Ideal when placing elements on a Web page without specifying number of rows and columns </li></ul><ul><li>Draw Layout Cell button </li></ul><ul><li>Layout Table button </li></ul>
  15. 15. Fig. 3: Sketch of Table on Café Page
  16. 16. Fig. 4: Table Dialog Box Table properties Header options Accessibility options
  17. 17. Expanded Tables Mode <ul><li>Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing </li></ul><ul><li>Easier to actually see how many rows and columns you have in your table </li></ul><ul><li>The Expanded Tables mode allows you to see each cell clearly </li></ul>
  18. 18. Fig. 6: Expanded Tables Mode Displays more space between cells for easier editing
  19. 19. Fig. 8: Table in Layout Mode Table displayed in layout mode Layout tab Standard mode button Expanded mode button
  20. 20. Resize, Split and Merge Cells <ul><li>You can resize the rows or columns manually or by entering numbers in the properties inspector </li></ul><ul><li>You can also take one cell and split it into two or more cells </li></ul><ul><li>You can take two or more cells and merge them into one cell </li></ul>
  21. 21. Fig. 9: Selecting a Cell Cell tag icon W text box Selected cell
  22. 22. Fig. 10: Resizing the Row Height Resizing pointer
  23. 23. Fig. 11: Splitting a Cell into Two Rows Number of rows text box Splits cell into Rows or Columns button
  24. 24. Fig. 12: Splitting One Cell into Two Two cells split from one
  25. 25. Fig. 14: Code View for Merged Cells colspan tag
  26. 26. Insert Images in Table Cells <ul><li>Use the Image command on the Images Menu on the Insert bar </li></ul><ul><li>Drag it from the Assets panel into cell </li></ul>
  27. 27. Aligning Images in Table Cells <ul><li>You can align graphics horizontally and vertically within a cell </li></ul><ul><ul><li>Use the Horz (or Vert) alignment option in the Property inspector </li></ul></ul><ul><li>To control spacing between cells, use cell padding and cell spacing </li></ul>
  28. 28. Fig. 16: Vertically Aligning Cell Contents Vertical alignment options
  29. 29. Fig. 18: Images Inserted into Cells cafe_logo.gif cheesecake.jpg
  30. 30. Fig. 20: Aligning Images in Cells Centered banner and navigation bar Centered logo Centered cheesecake photo Left-aligned cafe photo
  31. 31. Inserting Text in a Table <ul><li>Type </li></ul><ul><li>Copy/paste </li></ul><ul><li>Import </li></ul>
  32. 32. Format Cell Content <ul><li>Easier to do in Standard mode than in Layout mode </li></ul><ul><ul><li>Select the contents in the cell, then apply formatting to it </li></ul></ul><ul><li>Can format each item individually or select the entire cell and format it </li></ul>
  33. 33. Formatting Cells <ul><li>Different than formatting cell content </li></ul><ul><li>Can include setting properties that visually enhance the cell appearance </li></ul><ul><ul><li>Cell width, background color, alignment </li></ul></ul><ul><li>Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector </li></ul>
  34. 34. Fig. 21: Property Inspector Showing Options for Formatting Cell Contents Image selected inside a cell Properties for selected graphic
  35. 35. Fig. 22: Property Inspector Showing Options for Formatting a Cell Properties for selected cell, not image Insertion point in cell
  36. 36. Fig. 23: Importing and Typing Text into Cells Imported text describing the cafe Text typed into cell
  37. 37. Importing Text <ul><li>Can import delimited text file </li></ul><ul><ul><li>Export as delimited text from </li></ul></ul><ul><ul><ul><li>Spreadsheet program </li></ul></ul></ul><ul><ul><ul><li>Database program </li></ul></ul></ul><ul><ul><li>Import tabular data to Dreamweaver </li></ul></ul>
  38. 38. Fig. 25: Adding Nested Tables Top row header Nested table
  39. 39. Fig. 27: Formatting Cells Using Horizontal Alignment Vert and Horz list arrows Insertion point inside cell with no elements selected
  40. 40. Fig. 29: Hiding Visual Aids Hide all visual aids option Visual aids button Dotted lines show borders are hidden
  41. 41. Chapter 5 Tasks <ul><li>Create a table </li></ul><ul><li>Resize, split, and merge cells </li></ul><ul><li>Insert and align images in table cells </li></ul><ul><li>Insert text and format cell content </li></ul>

×