Creating a web page from scratch using Front Page 2003

Tables pg 3

This is what our completed 3x3 table will look like when we are finished. Scroll on down the page to see how this is accomplished using FP2003 tables.

When you first insert this 3x3 table onto the page, it will look like the one you see directly below.

Next right click anywhere on the table and select "table properties". In the tables properties window that opens, set the width to 760 pixels, alignment to center, cell padding to 0, cell spacing to 0, and the border to black.

The next thing we want to do is to set the cell properties. Highlight the column on the left and set the cell properties width to 130 pixels, Highlight the center column and set the cell properties to 610 pixels wide, and highlight the right column and set the cell properties to 20 pixels wide. The table will now look like the one below

130	610	20
130	610	20
130	610	20

Next, set the background color blue for the cells that you see below. To do this, you have to highlight the cell and set the background color to blue.

In the remaining 3 white cells, we will use a background image. To place the image in the cell as a background, right click on the cell and then click on cell properties, and "use background picture". Notice that we use the same image in both of the left cells and a light blue squares image for the content area.


same image	content background image
same image

The next image that we will add is the logo. It is important when placing images in tables that you are very conscious of the width of the image because any combination of text and images on the same line that exceeds 760 pixels in total width will expand the width of the table and will end up causing a horizontal scroll bar when being viewed at 800x600 resolution. I made the cell properties 130 pixels wide in the left column so that it would accommodate the logo image which is 128 pixels in width. After adding text in the top center column, our table will now look like the one directly below.

As you add content, the page will expand downwards. There is no need to specify a height as the page will automatically adjust for height.

Creating a web page from scratch using Front Page 2003

The next thing we have to do is add the navigation buttons, the header and the copyright. I used 3 "includes" pages for this purpose. You can check out what an include is and how to use includes here. The advantage of using and includes page is that you can create a single table, put all the buttons in it, and make the hyperlinks and then place the include on any page that you want.

If you scroll back up to the top of this page, you will see how we started with a blank page, created a table, set the table and cell properties, added our content and ended up with a simple web page made from scratch. This process is the same whether it be a simple layout or one that is much more complex. As you move along, you will find various other components that you want on your page. Check out our How Do I ? page for specific answers to some of the most asked questions.

< back