1. Chapter 3 Tables and Page Layout
Adobe Dreamweaver CS5
Chapter 3
Tables and Page Layout

2. Objectives Understand page layout Design a Web page using tables
Create a table structure
Modify a table structure
Describe HTML table tags
Add content to a table
Tables and Page Layout

3. Objectives Add a border to a table Format table content Format a table
Add borders to images
Create head content
Tables and Page Layout

4. Project – Formatted Tables with Images
Tables and Page Layout

5. General Project Guidelines
Plan the Web pages
Determine when to insert tables
Lay out Web pages with tables
Determine when to add borders
Identify cells to merge
Plan head content
Tables and Page Layout

6. Displaying the Insert Bar and Selecting the Layout Tab
If necessary, click Window on the Application bar and then click Insert to display the Insert bar
Click the Layout tab to display the Insert bar Layout category
Tables and Page Layout

7. Layout Tab
Tables and Page Layout

8. Inserting a Table
Click the Table button on the Layout tab to display the Table dialog box
Type the desired number of rows and columns, the table width, border thickness, cell padding, and cell spacing in the appropriate text boxes
Type the desired summary in the Summary text box
Click the OK button to insert the table into the Document window
Tables and Page Layout

9. Inserting a Table
Tables and Page Layout

10. Property Inspector Table Features
Tables and Page Layout

11. Selecting and Centering a Table
Click in row 1, column 1 to place the insertion point in the first cell of the table
Click <table> in the tag selector to select the table and to display handles on the lower and right borders of the table
Click the Align button in the Property inspector and then click Center to center the table on the page
Tables and Page Layout

12. Selecting and Centering a Table
Tables and Page Layout

13. Changing Vertical Alignment
Select the cells of which you want to change the vertical alignment
Click the Vert button in the Property inspector to display the Vert pop-up menu and then click the desired vertical alignment option
Tables and Page Layout

14. Changing Vertical Alignment
Tables and Page Layout

15. Specifying Column Width
Select the cells in the column of which you want to change the width
Click the W box in the Property inspector, type the desired width, and then press the ENTER key to set the width for the selected column
Click anywhere in the table to deselect the column
Tables and Page Layout

16. Specifying Column Width
Tables and Page Layout

17. Adding a Table ID
Click <table> in the tag selector to select the table
Click the Table text box and then type the desired ID text
Press the ENTER key to add the table ID
Tables and Page Layout

18. Adjusting the Table Width
If necessary, click in the cell in the links table to make it the active table
Click <table> in the tag selector to select the table
Double-click the W box in the Property inspector to select the width value
Type the desired width and then press the ENTER key
Tables and Page Layout

19. Adjusting the Table Width
Tables and Page Layout

20. Merging Two Cells in a Table
Drag to select the two cells in the table to merge
Click the ‘Merges selected cells using spans’ button to merge the cells
Tables and Page Layout

21. Disabling the Image Tag Accessibility Attributes Dialog Box
Click Edit on the Application bar, and then click Preferences to display the Preferences dialog box
Click Accessibility in the Category list to display the accessibility options
If necessary, click the check boxes to deselect Form objects, Frames, Media, and Images, which disables the Image Tag Accessibility Attributes dialog box
Click the OK button
Tables and Page Layout

22. Disabling the Image Tag Accessibility Attributes Dialog Box
Tables and Page Layout

23. Adding Images to a Table
Click the Expand Panels button to expand the panel groups, and then click the Assets tab to display the assets for this Web site
If necessary, click the Images button and the Site option button in the Assets panel to display the images for this Web site
Position the insertion point where you wish to insert the image
Drag the desired image from the Assets panel to the insertion point
Tables and Page Layout

24. Adding Images to a Table
Change the image width and height in the W and H boxes, respectively, and then press the ENTER key
Enter the desired image ID in the ID text box
Enter the desired Alt text in the Alt box
Tables and Page Layout

25. Adding Images to a Table
Tables and Page Layout

26. Adding Image Borders and a Table Border
Click to select the image of which you want to add a border
In the Border text box, type the desired border thickness
Click the table tag in the tag selector to select the table
Enter the desired border thickness in the Border text box, and then press ENTER to add a border to the table
Tables and Page Layout

27. Adding Image Borders and a Table Border
Tables and Page Layout

28. Head Content Elements Meta Keywords Description Refresh Base Link
Tables and Page Layout

29. Adding Keywords and a Description to a Web Page
Open the desired page
Click Insert on the Application bar, point to HTML, point to Head Tags on the HTML submenu, and then point to Keywords on the Head Tags submenu
Click the Keywords command to display the Keywords dialog box
Type the desired keywords in the Keywords text box, separating each one by a comma
Tables and Page Layout

30. Adding Keywords and a Description to a Web Page
Click the OK button to add the keywords to the head tag and close the Keywords dialog box
Click Insert on the Application bar, point to HTML, point to Head Tags on the HTML submenu, and then click Description on the Head Tags submenu to open the Description dialog box
Type the desired description in the Description text box to describe the Web page
Click the OK button to close the Description dialog box
Tables and Page Layout

31. Adding Keywords and a Description to a Web Page
Tables and Page Layout

32. Publishing a Web Site
Publishing and maintaining your site using Dreamweaver involves the following steps:
Using the Site Setup dialog box to enter the FTP information
Specifying the Web server to which you want to publish your Web site
Connecting to the Web server and uploading the files
Synchronizing the local and remote sites
Tables and Page Layout

33. Chapter Summary Understand page layout Design a Web page using tables
Create a table structure
Modify a table structure
Describe HTML table tags
Add content to a table
Tables and Page Layout

34. Chapter Summary Add a border to a table Format table content
Format a table
Add borders to images
Create head content
Tables and Page Layout

35. Adobe Dreamweaver CS5
Chapter 3 Complete