2. Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera

3. What This Lecture Covers In this fifth lecture on HTML 4.0 Tables I will introduce the idea of using a Web Page Generator such as Dreamweaver CS4 to Create your Tables. Note: For a more complete instruction on Dreamweaver, please register for the CIS 127 Generating Web Sites and then the CIS 137 Managing a Successful Web Project classes. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 2

4. Dreamweaver CS4 Interface This is the current Design View interface as seen in the Designer Layout. A Table Dialog box can be found in the INSERT menu > Table. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 3

5. Start With the Table Dialog Box The Table dialog box appears with choices for Rows, Columns, Width, Border, Header styles, white space, and Accessibility features because it was turned on in the Dreamweaver Settings. Note: These dialog box settings can be changed later in the Properties panel. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 4

6. Table Dialog Box With Content The results from these dialog settings will produce a Table that will stretch across the Web page and have 3 rows and 5 columns, it will also include a bold, centered heading row as well. This Table features a Caption and a Summary to keep it accessible. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 5

7. Dreamweaver Design View After clicking OK in the Dialog box Dreamweaver will produce a Table with rows and columns to fill. This table shows the Caption at the top. Note: The Summary is always hidden from normal view. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 6

8. Dreamweaver Code View For those of you who are not intimidated by HTML, you can switch to Code view to see how the Table is progressing along. Note: The Blue highlighting was produced by clicking on the Table in Design view. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 7

9. Dreamweaver Split View Working in Split View sometimes can be helpful when trying to track-down possible errors. Note: It does take up a lot of working space, and I don’t recommend using it regularly. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 8

10. Dreamweaver Live View Dreamweaver CS4 introduced Live View to approximate what your page will look like in a Web Browser. Note: This is a real time-saver when building pages! Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 9

11. Editing the Table in Design View When working with the Table in Design View, you can select elements in the table to make changes as needed in the Properties panel. Note: You can select the Table or individual Columns. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 10

12. Editing the Table in Design View All of the data entered into the Table dialog box is now available in the Properties panel at the bottom and can be changed here if needed. Basic elements such as Cell Padding, Cell Spacing, Alignment, Borders are available for a quick fix. CSS Class Files can be added if you have made them too. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 11

13. Use Placeholder Text in The Cells Start filling the cells with placeholder text as seen here. Using the Row and Column marker idea (R1C1), I dis- cussed in an earlier lecture will help you layout your table. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 12 Notice that the first row is showing a Heading style, and is written with tags.

14. Adding More Rows to the Table Adding another row to your table is as simple as placing your mouse cursor in the last cell on the bottom-right side of the Table and then hitting the [Tab] key. You can add as many rows as you need in this way, however, there are other options available in Dreamweaver too. In the INSERT menu > Layout tab you will find more tools to Insert Row Above or Below, and Insert Column to the Left or Right. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 13

15. Add a Row of Spacer GIFs If desired, you may add a row of width alignment as was shown in an earlier lecture. Drag a spacer gif into the bottom left cell. Note: Save time by using Copy and Paste to complete the row. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 14 This is the spacer code from the image above:

16. The Alignment Row Now Complete The resulting effect from adding this row will be that the table will now feature five columns of equal width. Another option would be to vary the widths to match your needs. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 15

17. Add Footer Row Below Add a Row to become Merged into once long cell to be used as a Footer. Highlight the Row and notice the Properties panel below. Look for the icon below the word Row Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 16

18. The Dreamweaver Merge Button Click the Merge button to create one long row at the bottom of the Table. If you ever want to change your mind about the merge, the button directly on the Right will be activated to add columns back into the space. Note: You will only have the Merge button or the Split Cells button active for this row now. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 17

19. Merge the Last Row for the Footer Click the Merge button to turn the five columns in the last row into a one cell long row. Place any Footer information in this cell such as Date Modified, Contact Info, Copyright, etc.. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 18

20. Viewing the New Footer Row The Footer Row is now in place below the Alignment row. Note: This Table still has the Border lines active, which will be fine while editing, but should be removed before publishing to the Internet. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 19

21. What This Lecture Covered In this fifth lecture on HTML 4.0 Tables I introduced the idea of using Dreamweaver to Create your Tables. The intent of this lecture was to show you how generators such as Dreamweaver can help you build Tables with a dialog box. It was not the intent to be a definitive lecture on Dreamweaver and Layout Tables, that subject is best served in the CIS 127 Generating Web Sites class. My hope is that some of the mystery of Web page Tables has now been made clearer for you. Dreamweaver for Web Page Tables by Professor Al Fichera http://profal2.com 20