PCC Website Course
Mr. Moegelin

Review FrontPage Toolbar Menu and First Web Page
Lesson 3

Last updated on 

Back to Lesson Index

 

"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 My Webs PCC 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" 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 david_j1.htm (use all lower case letters) in your folder labeled My Webs PCC.

 

4.  Create a table on the davis_j1 page that has 4 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.
 

     
     
     
     

 

5.  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.  The whole table will look like the the
     "Red # Red153, Green 0, Blue 0 shown below.
 

 

 

 

 

 
     
     


 

 6.  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.

 

7.   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.

 

 

Table #1
My Web Page

 

 

You can change the background colors of any of the the cells by "right clicking" inside the cell and selecting cell properties.

Table #2
This is a 3 x 3 table

Table #3

You can change the background colors of any of the the cells by "right clicking" inside the cell and selecting cell properties.

 

Table #3

  You can change the background colors of any of the the cells by "right clicking" inside the cell and selecting cell properties.  
   
 
 

 

 
 

Make the footer red #203

 

 

8. 

     a.   Now lets get creative.  Insert a table consisting of 3 rows and 3 columns into the center white cell.  Make the borders
           invisible.  You will use this kind of 3 x3 table frequently in your web page design.

     b.   Go to Google images and select an animal, plant or object that best represents you.  Insert the image twice into any two
           cells of the table.  "Auto thumbnail" the images by using the "Auto Thumbnail" Icon.  Make sure the borders are
           invisible and then save the web page in your folder.
 

PCC Web Site Course 2011