This document provides an overview of tables and page layout in Adobe Dreamweaver CS5. It discusses how to create and modify table structures, add content and borders to tables, format tables and images, and add head content like keywords and descriptions. The objectives are to understand page layout, design pages using tables, and create, insert and format table structures in Dreamweaver.

1. AdobeDreamweaver CS5 Chapter 3 Tables and Page Layout

2. 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 Objectives Tables and Page Layout 2

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

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

5. 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 5 General Project Guidelines

6. 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 6 Displaying the Insert Bar and Selecting the Layout Tab

7. Tables and Page Layout 7 Layout Tab

8. 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 8 Inserting a Table

9. Tables and Page Layout 9 Inserting a Table

10. Tables and Page Layout 10 Property Inspector Table Features

11. 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 11 Selecting and Centering a Table

12. Tables and Page Layout 12 Selecting and Centering a Table

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

14. Tables and Page Layout 14 Changing Vertical Alignment

15. 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 15 Specifying Column Width

16. Tables and Page Layout 16 Specifying Column Width

17. 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 17 Adding a Table ID

18. 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 18 Adjusting the Table Width

19. Tables and Page Layout 19 Adjusting the Table Width

20. 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 20 Merging Two Cells in a Table

21. 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 21 Disabling the Image Tag Accessibility Attributes Dialog Box

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

23. 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 23 Adding Images to a Table

24. 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 24 Adding Images to a Table

25. Tables and Page Layout 25 Adding Images to a Table

26. 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 26 Adding Image Borders and a Table Border

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

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

29. 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 29 Adding Keywords and a Description to a Web Page

30. 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 30 Adding Keywords and a Description to a Web Page

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

32. 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 32 Publishing a Web Site

33. 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 Chapter Summary Tables and Page Layout 33

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

35. Chapter 3 Complete Adobe Dreamweaver CS5