1. Open the folder where you saved your webpage.
2. Open the default.html webpage.
3. After Navigator has opened on the screen, select Edit Page from the File menu.
4. Composer will open on the screen.
5. Position your cursor on a blank line on the screen.
6. Hit the return key several times to move the cursor down the page a bit.
7. Note: The table will be inserted at the point where your cursor is located so it is important to position the cursor on an empty line with some space above (and below) the table insertion point.
8. Click on the Table button in the toolbar (Hint: It looks like a waffle).
9. The Table dialog box will appear.
10. Change the Number of rows to 2 and Number of columns to 2.
11. Click on the Center Alignment radio button.
12. Click on OK and a new table will appear on the webpage.
    
    Adding Text and HyperText Links to the Table
    
    
13. Click in the top left cell of the table. Note: the boxes on a table are called "cells".
14. Type Library of Congress.
15. Press the right arrow to move to the top right cell.
16. Type The White House.
17. Click once in the lower left cell.
18. Note: you can move between cells of a table by using the arrow keys or by positioning the cursor in a new cell and clicking the left mouse button.
19. Type The National Archives.
20. In the lower right cell, type The Smithsonian Museums.
21. You will now create hypertext links for the text in your tables.
22. Select Library of Congress (hold the left mouse button down while you drag across the text).
23. Click on the Link toolbar button and enter this address:
    http://www.loc.gov
24. Click on OK to activate the link.
25. Select The White House, click on the Link button and build a link to: http://www.whitehouse.gov
26. Select The National Archives and build a link to: http://www.nara.gov
27. Select The Smithsonian Museums and build a link to:
    http://www.si.edu
28. Save the changes you made.
29. Click on the Preview button to view your webpage with Navigator. Test the links.
30. Close Navigator by clicking on the close box to return to Composer.
    
    Formatting Your Tables
    
    
31. You can apply formatting to both your table and to the text and links in the table that will make your webpage more attractive. The next steps will show you how to reformat the table and the text within each cell of the table.
32. Select the text in each cell.
33. Select a different font and font size for each cell.
34. Position the cursor in the top left cell of the table.
35. Select Table Info from the Format menu.
36. When the dialog box appears, click on the Cell tab if it is not already selected
37. Click on the Color checkbox and click on the color chip to select a background color for the cell.
38. Click on OK and notice the changes that have taken place on your table.
39. Position the cursor in the second cell of your table.
40. Select Table Info from the Format menu and this time click on the Center radio buttons in both the Horizontal Alignment and Vertical Alignment rows.
41. Select a new Cell Background color.
42. Click on OK and note the changes.
43. Position the cursor in the lower left cell.
44. Select Table Info from the Format menu, this time click on the Row tab at the top of the box.
45. Click on the Use Color checkbox and select a new color for the row. This time, you will apply the changes to all the cells in the selected row instead of just to one cell.
46. Click on OK to save the changes.
47. Notice the changes that have taken place on the webpage.
    
    If you are observant, you will often see tables used by webpage designers to control the placement of text and graphics on webpages. In fact, the links you created are all to websites that make extensive use of tables in their layout scheme.
    
    
48. Revisit each linked page.
49. With the webpage visible in the Navigator window, select Edit Page from the File menu.
50. The invisible tables used on the webpages will appear.
51. Close the new Composer Window to return to Navigator.
    
    Using Tables to Position Graphics on the Webpage
    
    
52. Next you will discover how to use tables to place graphics and colored boxes on your webpage. Follow these steps.
53. Click once on a blank space below your current table.
54. Hit the return key several times to move the cursor down the page a bit.
55. Click on the Table toolbar button and create a new table with 3 rows and 3 columns.
56. Change the Border Line Width from 1 pixel to 0 pixels.
57. Change the Pixel Spacing Between Cells and Pixel Padding Within Cells to 5 pixels.
58. Click on OK to add the new table to the webpage. You will notice that this time the cells are shown with dotted lines instead of solid lines.
59. Click on the Save toolbar button.
60. Click on the Preview button and notice that the new table is invisible when viewed with Navigator.
61. Close Navigator to return to Composer.
62. Position the cursor in one of the middle table cells.
63. Select Table Info from the Format menu.
64. Click the Cell tab and add a Cell Background color.
65. Click OK.
66. Type some text in the cell (or press the space bar if you want to have an "empty cell" with no text).
67. Click the Save button.
68. Click the Preview button to view your changes.
69. Close Navigator to return to Composer.
70. Now, position the cursor in one of the cells on the right side of the table.
71. Click on the Image toolbar button.
72. Click on the Choose File button.
73. Navigate to the folder where earlier you saved the images you downloaded from the web and select an image.
74. Click on OK to insert the image into the table cell.
75. Click on the Save toolbar icon. Notice that Composer is automatically saving a copy of the image you selected to your floppy disk.
76. Click on the Preview icon to see what your webpage looks like.
77. Close Navigator and return to Composer.
78. Click once in the cell where you added the image.
79. Select Table Info from the Format menu (and the Cell tab if necessary) from the menu that appears and experiment with the Horizontal and Vertical Alignment of the image.
80. Remember to save the changes you make before previewing the webpage in Navigator.

That wraps up this activity. Spend a few minutes experimenting with the tables already on your webpage. Feel free to add some more if you want to experiment further. If you want to remove the tables, drag across the table while holding down the mouse button and press the delete key.

Fresno Pacific University | School of Professional Studies 
Website maintained by Bob Jost | Copyright © 1999-2000 All rights reserved