PCC Website Course
Mr. Moegelin

Review FrontPage Toolbar Menu and First Web Page
Lesson 3

"Designing web page layouts has a lot to do with tables within tables within tables."
(Unless you're using CSS)
 

1.  If you haven't already, create a Web Page Folder labeled firstname_last initial e.g., dan_m on your USB drive.  Follow
      directions in Lesson 2

2.  Open Microsoft FrontPage 2000 from the icon on your desktop, or from the list of "All Programs" and make sure that you have
      the tool icons numbered 1, 2, 3, 4 in the picture below on your FrontPage toolbar.  If not, go to Tools on the FrontPage toolbar,
      then to "Customize", then to "Commands", "Table."  Scroll down and drag and drop the tool icons for 3 an 4 onto your
      FrontPage tools menu.

      Now go to "Tools", "Customize", "Format" to get the tool icons for number 2 below.  Most likely you already have the "Undo"
      and "Redo" tool icons, number 1, on your Tool Bar.  If not, add them from the Tools menu as above.

3.  Now click on the white "New Page" icon as shown above to create a New Page.   Immediately save the new page
     as dan_m2.htm (use all lower case letters) in your folder labeled dan_m1.

4.  Create a table on the dan_m2 page that has 1 rows, 3 columns, alignment center, cell border 0, cell padding 0, and cell
     spacing 0, with a width of 900 pixels like the one shown directly below without the borders.
 

Next Step is Very Important!

5. 
        a.  "Right click" anywhere inside the table to confirm that it is 900 pixels wide.   Now right click inside each cell and set each
        cell to 300 pixels in width.
 

        b.   Now drag the cell borders to make the left and right cells 117 pixels wide each.  Check to be sure that
        the width of the middle cell is what it should be.  What should it be? 

        c.   Now insert three rows below the original table so that it looks like the one below without visible borders.

 

6.  Drag the borders so that it looks like the table below and is approximately the same size.  In order to color the table, right
     click anywhere in the table and select Table Properties.   Use the drop down menu for Background and select "More Colors." 
     The More Colors Menu will look like the picture below.   Select the color shown (red #153).  The whole table should look like
     the one below with "Red #153, Green 0, Blue 0 shown below.
 

7.    Place the cursor in the big center cell of your table.  Right click and choose Cell Properties.  Select white for the background
       color.  Check with me when you reach this point.

8.   Now lets add some borders to the center white cell.  Right click in the center cell and select Cell Properties.  Select Style on
       the bottom of the dialogue box , Format, Borders, ridge, Color white, and adjust the width and cell padding as shown in the
       diagram below.

   Your web page should now look like the the one below without the black bordered table in it and without the tiger pictures.