printeditindex

Creating Your Index Page

For this tutorial you will need a web set. I made mine in PSP and saved it into a folder that I created in my web site root folder.
(A root folder is the main folder in your My Webs folder. My root folder is called 'new web' and is situated in D:/My Documents/My Webs)
Go to your root folder and create a new folder for your web set.

*Please Note: This is my own page design and is for guidance only to show you how to use tables and add tiles etc. Once you're familiar with the way everything works, you can make your own page designs*

Open Front Page

Double click on the index page which is in the folder list. This opens the page.

(Now go back to the folder list and right click on the index page. Click on Preview in browser.

Internet explorer will open and you can see how your page will look to others when they view it. It will be blank at the moment but minimise it so that each time you make a change to the page, save it by clicking on the icon and open the preview page. Click the refresh button and you'll see each new change. It really helps to do this because the way the page looks in FrontPage is not always the way it looks on the web.)

Right click on the page and go to page properties.

We're just going to concentrate on adding backgrounds and tables at the moment.
Click on the Formatting tab. Click on Browse

and browse to the folder that holds your background tiles. Click on the tile you want to use as your page background and click Open.

Your page will now have your tile as the background.

We're now going to add our first table.

Go to Table > Insert > Table

When the window opens, set the Rows and columns to 1

Specify the width to 80 and make sure In Percent is selected.

Set the cell padding to 5. This determines how much of the table you want showing when you put your next table on top.

Browse to the folder that holds your tiles and choose the tile you want to use.

Click OK

Your page will look like this:

Click inside your first table and add another table. Set your Rows and Columns to 1 and this time, Specify your width to 100 in percent. this ensures your new table fills the first table.

Browse for your tile and click OK.

Your page will now look like this:

You can use the Insert Table icon to quickly add another table inside the last one you made.
Click on the icon and move your mouse over the first square

Click once and this will add a table.

Right click on the table and go to table properties. Check that the width is set to 100%.
Browse for your tile and click OK.

You will now have this:

Ok, we're going to add 3 images to this table. Our banner with the site name and 2 decorations.

To keep them in the correct place on the page, we're going to use a table that is split into cells.

Go to Table > Insert > Table

Set the Rows to 1 and the Columns and 3.
We're not going to use a background tile this time so all you have to do now is click OK.

You will now have a table that is split into 3 columns (also known as cells)

Go to the folder list and open the folder that contains your banner and decorations by clicking on the plus at the side.

To get the banner onto the page, all you have to do is click on it, keep the mouse button pressed and drag it onto your page where you want it.

Do the same with the decorations.

Put the banner in the middle column and a decoration in each side column. (You don't need to make 2 decorations, just click on the file and drag from the folder to the page, as many times as you need.

You will now have something similar to this:

Now let's add tables underneath our banner table for the main content of the page.

Click at the side of the table and press the enter key on your keyboard to make the cursor go below the top tables.

Add a table using the following settings:

You will now have this:

Right click in the left column and go to cell properties

Specify the width to 100 in pixels and click OK

Repeat for the right column.

Click back in the left column and add a table using the following settings:

Repeat for the middle and right columns.

You will have something like this:

Click in the left column and add a table which will hold the site menu.

Use the following settings:

Repeat in the right column using the same settings.

You will have something like this:

Add your text, or buttons if you have them, to each of the cells in the left and right tables.

We now need to make sure that all 3 columns will be the same height.

To do this, put your mouse to the left of the first column and when it turns into a
dark arrow, click once and the set of tables will be selected.

Right click anywhere on the dark part and go to table properties.

Set the height to 357 In Pixels (Please note: you might need a different height depending on the content of your menu. I just try different heights until I find the one I like. Each time I make a change, I click the save icon and go to my preview internet page. I then click the refresh button and view my changes.)

Click OK

Repeat this for all 3 columns and your page will look like this:

Select your text by dragging your mouse over it and set your font size and style. Remember, not everyone will be able to see all the fonts you've put in your fonts folder. They'll only be able to see the font you've chosen if you use a font that comes with every pc or if they have the same font in their font folder.

Keeping your text selected, click on the arrow at the side of the Text Colour icon

Click on More Colours

You will now have the following window:

Click on the colour you want your text and click OK.

I added another set of tables underneath my main content tables, for my page credits.

You will have something like this:

I decided I liked it better without the spaces in between the sets of tables so I deleted them!

This is how it looks in FrontPage:

And this is how it looks on the web.

You now have a choice of tutorials. You can follow the one that shows you how to add an inline frame to your welcome page.
(An inline frame would go in the middle column and each time you click on a menu item, it will open in the middle column.)

If you don't want to use an inline frame, you can create new pages for each of your menu items and link to them from the welcome page.