Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,691 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

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>

×