Chapter A - Getting Started with Dreamweaver MX 2004

Chapter A - Getting Started with Dreamweaver MX 2004 OVERVIEW Chapter Lessons 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 Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 INTRODUCTION Tables Are placeholders made up of small boxes (cells), into which you can insert text and graphics Consist of cells Arranged horizontally in rows and vertically in columns Give you control over the placement of each object Macromedia Dreamweaver 8 Revealed

Inserting Graphics and Text in Tables Chapter A - Getting Started with Dreamweaver MX 2004 INTRODUCTION Inserting Graphics and Text in Tables Control placement of elements in relation to each other Specify amount of space between each page element Always plan how your table will look with all the text and graphics in it Even a rough sketch will save you time Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 INTRODUCTION 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 alternate text Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Create a Table Understanding table modes Creating a table in standard mode Setting table accessibility preferences for tables Drawing a table in layout mode Planning a table Macromedia Dreamweaver 8 Revealed

Understanding Table Modes Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Understanding Table Modes Standard mode To create a table press Table button on Insert bar Layout mode To create a table click the Layout Table button or the Draw Layout Cell button Expanded mode Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Anatomy of a Table Cell Border Row Cell Spacing Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Anatomy of a Cell Vertical alignment Horizontal alignment Width Height Text Wrap Border color Border width Background image Background color Cell Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Anatomy of a Row Vertical alignment Horizontal alignment Width Height Text Wrap Border color Border width Background image Background color Row Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Anatomy of a Table Rows Columns Width Cell padding Cell spacing Alignment Border color Border width Background color Background graphic table Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Standard Mode Useful when you want to create a table with a specific number of columns and rows Use the Table dialog box to set Rows, columns, border thickness, table width, cell padding, and cell spacing Macromedia Dreamweaver 8 Revealed

Accessibility Preferences Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Accessibility Preferences To make a table more accessible to visually handicapped viewers, add Table caption Table summary (does not appear on screen) Table headers Can be placed at the top or sides of table Are automatically centered and bold Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Drawing a Table Draw a table in Layout mode Ideal when placing elements on a Web page without specifying number of rows and columns Draw Layout Cell button Layout Table button Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Planning a Table FIGURE 1 Sketch of table on cafe page Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 FIGURE 2 Table dialog box Table properties Header options Accessibility options Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 FIGURE 3 Table dialog box Summary text box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 FIGURE 6 Table in Layout mode Layout Table button Draw Layout Cell button Table displayed in layout mode Macromedia Dreamweaver 8 Revealed

Resize, Split and Merge Cells Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 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 Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 FIGURE 7 Selecting a cell Selected cell Cell tag icon W text box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 FIGURE 8 Resizing the height of a row Resizing pointer Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 FIGURE 9 Splitting a cell into two rows Split cell into Rows option button Splits cell into Rows or Columns button Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 FIGURE 10 Merging selected cells into one cell Resulting merged cell Merges selected cells using spans button Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 FIGURE 11 Code view for merged cells colspan tag Macromedia Dreamweaver 8 Revealed

Insert Graphics in Table Cells Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Insert Graphics in Table Cells You can insert a graphic in a table cell by Using the Image command on the Images Menu on the Insert bar Dragging it from the Assets panel into cell Macromedia Dreamweaver 8 Revealed

Align Graphics in Table Cells Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Align Graphics in Table Cells You can align graphics horizontally and vertically within a cell Use the Horz (or Vert) alignment option in the Property inspector To control spacing between cells, use cell padding and cell spacing Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 FIGURE 13 Vertical alignment options in the Property inspector Vertical alignment options Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 FIGURE 16 Graphics inserted into table cells Banner and navigation bar copied from index page cafe_logo.gif cheesecake.jpg cafe_foto.jpg Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 FIGURE 17 Aligning images in cells Centered banner and navigation bar Centered logo Centered cheesecake photo Left-aligned cafe photo Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 Insert Text Type Copy/paste Import Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 Importing Text Can import delimited text file Export as delimited text from Spreadsheet program Database program Import tabular data to Dreamweaver Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 Format Cell Content Easier to do in Standard mode than in Layout mode Select the contents in the cell, then apply formatting to it Can format each item individually or select the entire cell and format it Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 18 Property inspector showing options for formatting cell contents Graphic selected inside a cell Properties for selected graphic Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 Formatting Cells Different than formatting cell content Can include setting properties that visually enhance the cell appearance Cell width, background color, alignment Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 19 Property inspector showing options for formatting a cell Insertion point in cell Properties for selected cell Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 20 Importing and typing text into cells Imported text describing the cafe Text typed into cell Macromedia Dreamweaver 8 Revealed

Perform Web Site Maintenance Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 Perform Web Site Maintenance Broken links (Link Checker) Orphaned files (Link Checker) Unused images (Assets panel) Websafe colors (Assets panel) Macromedia Dreamweaver 8 Revealed

Perform Web Site Maintenance Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 Perform Web Site Maintenance Untitled documents (Reports) Alternative text (Reports) Navigational structure (site map) Testing pages on a variety of environments Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 27 Reports dialog box Scope of report choices Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 28 Link Checker panel displaying no broken links No broken links Total number of files and links may differ Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 29 Link Checker panel displaying no orphaned files No orphaned files listed Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 30 Assets panel displaying Websafe colors Both colors are Websafe Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 31 Reports dialog box with Untitled Documents option selected Report on list arrow Untitled Documents check box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 32 Reports dialog box with Missing Alt Text option selected Missing Alt Text check box checked Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 33 Site Reports panel displaying missing “alt” tags Three missing “alt” tags found on two pages Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 Testing Pages Test in a variety of environments Platforms Browsers Monitor size Connection speed Processor speed Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 SUMMARY Chapter 5 Tasks 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 Macromedia Dreamweaver 8 Revealed