1 / 94

Chapter 3

DREAMWEAVER MX 2004. Chapter 3. Working with Tables. Performance Objectives. Understand tables and table elements. Understand how tables are used for layout control. Create tables in Standard mode. Create proportional-width and fixed-width tables. Select tables and table elements.

orli
Télécharger la présentation

Chapter 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DREAMWEAVER MX 2004 Chapter 3 Working with Tables

  2. Performance Objectives • Understand tables and table elements. • Understand how tables are used for layout control. • Create tables in Standard mode. • Create proportional-width and fixed-width tables. • Select tables and table elements. • Use the Expanded Tables mode to aid table and cell selection. • Use the Tab and arrow keys to navigate inside tables. • Use the Table Property inspector and Table Cell Property inspector to format tables.

  3. Performance Objectives…/2 • Add and delete columns and rows. • Merge and split cells. • Create nested tables. • Format tables using the Format Table command. • Create tables in Layout mode. • Create autostretch tables in Layout mode. • Understand and use spacer images. • Use a grid when working with tables. • Sort table content.

  4. Understanding Tables • Tables are used to control page layout. table borders visible

  5. Table Components • Tables are grids composed of rows and columns. • The intersection of each row and column is a table cell. • The space between cells is cell spacing. • The distance between content and cell borders is cell padding. • Backgrounds can be colored or contain a background image. • Borders can be colored or invisible.

  6. Table Components…/2 column table cell cell padding row table border cell spacing

  7. Table Dimensions • By default, tables will shrink to fit their contents. • Fixed widths are indicated in pixels and content will expand to fit the content. • Proportional widths are indicated in percentages and are relative sizes.

  8. Table Dimensions…/2 unspecified width fixed width proportional width

  9. Table Dimensions…/2 • Manually resize a selected table by dragging its table selection handles. table selection handles

  10. Table Code • Basic tables use table tags (<table>). • Rows use table row tags (<tr>). • Cells use table data cell tags (<td>). • Empty table cells contain a nonbreaking space (&nbsp) to prevent empty cells from collapsing. HTML code and table

  11. Using Tables to ControlPage Layout • Designers try to create layout tables that will maintain their design integrity when viewed across different browser scenarios by using tables with: • fixed widths • proportional widths • a combination of both fixed and proportional widths

  12. Fixed-Width Tables • Fixed-width tables maintain their appearance when viewed using different screen and browser combinations. • On large screens, there can be a lot of wasted space next to or on either side of the table. • On smaller screens, a portion of the table might disappear off the right side of the browser window.

  13. Proportional-Width Tables • The table maintains its relative dimensions regardless of the screen and browser combinations. • The designer loses control over lines and spacing as the table and/or column widths stretch or decrease.

  14. Combination Tables • Tables that contain a combination of fixed and proportional widths are a common compromise solution. • Use fixed widths to maintain control over segments that need to remain stable. • Use proportional widths to allow other segments to flow to fit browser windows.

  15. Table Examples proportional-width table fixed-width table

  16. Table Examples…/2 proportional-width column for text fixed-width column for navigation buttons

  17. Creating Tables • Set the mode to Standard Mode.  click View  point to Table Mode  make sure there is a check mark to the left of Standard Mode

  18. Creating Tables…/2  click the Table button OR  click Insert  click Table

  19. Creating Tables…/3 specify table properties specify accessibility properties

  20. Making Borders Visible  click View  point to Visual Aids  make sure there is a check mark to the left of Table Borders

  21. Selecting Table Elements • Dreamweaver MX 2004 features an Expanded tables mode that temporarily adds cell padding and spacing. Expanded button exit link expanded table

  22. Selecting Table Elements…/2 • Another method to enable Expanded Tables mode is to use the Menu bar.  click View  point to Table Mode  make sure there is a check mark to the left of Expanded Tables Mode

  23. Selecting Tables Using the Table Header • Click inside a table to display the table header.  click the down-pointing arrow  click Select Table

  24. Selecting Tables Using the Mouse • Click a table’s upper or lower border. • The insertion point will transform into a small table grid icon. table grid icon

  25. Selecting Tables Using theTag Selector selected table with selection handles  click the table tag

  26. Selecting Tables Using theMenu Bar  click Modify  point to Table  click Select Table

  27. Selecting Cells Using theTag Selector  click inside the cell  click the table data cell tag

  28. Selecting Cells Using theMenu Bar  click Edit  click Select All

  29. Selecting Cells Using the Keyboard • Hold down the Ctrl key while clicking in a cell. selected cell

  30. Selecting Rows and Columns Using the Mouse • Place the pointer on the outer border of a row or column. • After the selection arrow appears, you can click the mouse button to select. selection arrow selected row

  31. Selecting Rows and Columns Using the Keyboard • Click inside a cell, and without releasing the mouse button, drag the pointer across the cells to be selected. • Click inside a cell, hold down the Shift key, and then click inside another cell to select all cells located between the first and last cell selected.

  32. Selecting Columns Using the Column Header • Click inside a column to display the column header.  click the down-pointing arrow  click Select Column

  33. Selecting Rows Using theTag Selector  click the table row tag

  34. Selecting Nonadjacent Cells • Hold down the Ctrl key, click inside one cell, and then click inside the other cells to be selected. • Click inside a cell that is already selected to deselect it. selected nonadjacent cells

  35. Navigating in Tables Usingthe Tab Key • Pressing the Tab key moves the insertion point to the next cell. • The insertion point travels in a left-to-right, top-to-bottom direction. • Holding down the Shift key while pressing the Tab key reverses the tab direction. • Pressing the Tab key creates a new row when the last cell in a table is reached.

  36. Navigating in Tables Usingthe Arrow Keys • The Up, Down, Left, and Right Arrow keys can be used to navigate inside a table. • The arrow keys first navigate within a cell’s contents and then move on to the next cell. • The arrow keys cannot be used to create new rows.

  37. Using the Property Inspector to Format • When a table is selected, the Property inspector opens in Table Property inspector mode. • When a cell is selected, the Property inspector opens in Table Cell Property inspector mode. • Cell and row background formatting will override table formatting. • The order of precedence is cell, row, table.

  38. Table Property Inspector type a name or number to identify a table specify the number of rows and columns specify the width and height in pixels or percent specify a border color specify a background color use the dimension buttons to clear heights and convert widths specify a background image file location

  39. Table Property Inspector…/2 specify the space between a cell’s contents and its borders specify the space appearing between adjacent cell borders specify table alignment specify table border width in pixels display the CSS class style applied to table

  40. Table Cell Property Inspector specify the horizontal alignment prevents text from wrapping to a new line specify the width and height in pixels or as a percentage specify the vertical alignment

  41. Table Cell Property Inspector…/2 center and bold cell text, and useto create table headers specify a background image file location split a selected cell specify the border color merge selected cells, rows, or columns specify the background color

  42. Adding Rows and Columns Using the Menu Bar  click Modify  point to Table  click an option OR click to open theInsert Rows or Columns dialog box

  43. Adding Rows and Columns Using the Context-sensitive Menu  right-click  point to Table  click an option

  44. Adding Rows or Columns Using the Table Property Inspector type a new value to increase the rows or columns

  45. Adding Columns Using the Column Header • Click inside a column to display the column header.  click the down-pointing arrow  click an option

  46. Deleting Rows and Columns Using the Menu Bar  click Modify  point to Table  click an option

  47. Deleting Rows and Columns Using the Menu Bar…/2 • Select the entire row or column.  click Edit  click Clear

  48. Deleting Rows and Columns Using the Context-sensitive Menu  right-click  point to Table  click an option

  49. Deleting Rows or Columns Using the Table Property Inspector type a new value to decrease the rows or columns

More Related