Frontpage Table Exercise 2:  Use a template to create a webpage using tables to organize the Title, Links, and Context.

Most web pages today follow a standard "3 Column" format for organizing pictures, text, and links.   Organizing your context in tables preserves consistancy in the rendering of your web page in different browsers.  Almost all web sites today use tables to organize the content.  Most tables have invisible borders selected so the user does not see the frames of the cells.

Cell 1 with visable border
 Cell 2 with visable border


Cell 1 with invisable border
 Cell 2 with invisable border


Basic Website Layout Terms:

  • Title or "Header": What the page or web site is about.  Usually has the organization name and logo.  (Don't confuse this with the "Title Bar" - the Text that goes on the top of the browser window.)
  • Icons or Graphics:  Associated with the logo located up in the Title or Header Area. Usually in corners of page.
  • Links to Pages in Website: Located along the left hand side of the page.  Also located in icon format along the top of the page.
  • Content: Located in the center block of the page.  Contains the main information or pictures for a given page.

Layout Examples:


Nebo Music Web Site: (Note the table structure is hidden with invisible frames.)


Examine these websites to identify the Basic Website Layout:

Paulding County Public Schools
Weather Channel
AJC Online

Web Page Construction Tip:  To look at the underlying Table structure of a page:
  1. Open up Internet Explorer and go to the page you want to examine.
  2. Select "File-Edit with Frontpage" (Or another HTML editor)
  3. Frontpage will open the file and you can examine the table structure.
  4. Invisable cell borders are shown as dotted lines or in red.


Exercise 2: Create a web page using tables from a template.

1.  Right click on this link:   Table Template for Web Page
2.  Select "Save Target As"
3.  Navigate to your Tech 3 folder and then your Web Pages Folder. 
4.  Change the name of your file to "Lastname Front Page Table Exercise 2.htm"
5.  Click Save.



6. Open Frontpage and navigate to where you saved Exercise 2 and open the file.  It should look like this:



7.  In the "Title Area" of the page,  Erase "Title of Page" and type:

Ms. Lastname's Class



8. Left Click in the upper left hand cell.  Select "Insert-Picture-Clipart" from the menu bar and select a clipart icon to put into your page.  (This process is very similar to Powerpoint.)




9.  Left Click in the "Content" area of the page.  Type a short paragraph about your class or position.  This should be the welcoming paragraph for your web site.




10.  Make up some links for the left side of the page.  These can be links to other pages in your website or areas in your classroom or subjects in your grade.  We are not going to do the actual hyperlinks in this exercise, but this is where you typically put your links.



11.  Insert some pictures into the picture cells below the title bar.  These can be clipart, pictures from the internet, or your photographs.  You can use copy and paste for pictures from the internet.  Insert at least three pictures.  You might need to resize your pictures to make them fit the page. 



12.  You have now used a template to create a web page.  Save your work (Click "File-Save") and test your page using Internet Explorer. 

Note on inserting pictures: If you used clipart or pasted images from the internet, you might be prompted with a window asking you to save embedded pictures.  Select "OK" and Frontpage will attempt to put your picture files in the same directory as your web page file.

13.  Is that all???  No, you can do many more things to make your page more complicated and fancy!
Take time and experiment with your pages to learn new techniques!