1. Chapter A - Getting Started with Dreamweaver MX 2004

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

3. 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

4. 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

5. 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

6. 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

7. 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

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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

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

18. 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

19. 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

20. 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

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

22. 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

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

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

25. 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

26. 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

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

28. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
FIGURE 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

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

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

31. 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

32. 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

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

34. 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

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

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

37. 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

38. 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

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

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

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

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

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

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

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

46. 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

47. 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