Making a simple web page with Microsoft FrontPage

 

 

This tutorial assumes you have a basic knowledge of using files such as: 

 

When you start up FrontPage this is the screen you should see:

 

 

If yours looks slightly different don’t worry.

 

If you haven’t had much experience with FrontPage, familiarize yourself with the different toolbars and the workspace in general. You’ll find it is a lot like Microsoft Word. However, don’t stress out because you don’t know what every single thing on the screen does. We will go through the basic steps necessary to make an attractive, functional web page. Once you learn these basics the rest will become easier to use and make more sense.

 

O.K.  Let’s learn about some of the basic navigation functions in FrontPage to help you get around. These are the view selector buttons:

 


 

You can see the three options are “Normal”, “HTML”, and “Preview”.

 

Alright, let’s get started. Make a new folder on your desktop called “my web page”. This is where we will save your files. Once you’ve opened FrontPage, go to File > Save as… and click the “my web page” folder. Then click the “Open” button.

 

 

 

You should see nothing in this folder and in the “File name:” box, you should see “index.htm”. Click the “Save” button. The tab at the top of your page should now say “index.htm”:

 

 

Let’s set up your page now. Web pages are best displayed inside a table. A table is just a set of rows and columns on the screen that tell the web browser in what order to display things. It keeps all your text and pictures organized the way you meant for them to look.

 

Click on the “insert table” button located in the toolbar. You will see a table drop down with rows and tables available to choose from. Slide the mouse down and to the right to select 1 row and 3 columns.

 

 

This is what you should now see on your screen. A table with 1 row and 3 columns:

 

 

Generally we don’t want our table to show on the web page. To remove the black borders from the table, click on the table to make sure it’s highlighted. Then, click on Table > Table properties > Table:

 

 

You should see the dialog box shown below:

Click on the down arrow of the “Size:” box in the “Borders” section to change it from 1 to 0.

 

Now your table should look like this with dotted lines for borders:

 

 

The dotted lines won’t show up on your web page. They only act as a guide while you’re building the page to show you where you table borders are. To verify this, click on the Preview view button and see the borders become invisible.

 

Now we will insert some content. If you don’t have a picture to use you can get one by clicking here. To save the picture to your “my web site” folder, right-click on the picture of President Hinckley and click “Save Picture As…” You should see this:

 

 

Then, in the dialog box, select your “my web page” folder on the desktop and save it inside there. Now, close Internet Explorer and go back to FrontPage. Make sure the first column of the table is selected and click on Insert > Picture > From file…

 

 

This will open up an explorer window and ask you to find the file to insert. Go to your “my web page” folder and find the picture you save called “hinckley_message.jpg” and click the “Insert” button.

It should now look like this:

 

 

Alright, now we want to add some contact information to the top area of the page. Click in the center column now. Here you can type whatever you’d like, just like in Word.

For example:

 

 

Now, the text is quite far away from the picture. We can adjust the size of the table borders by clicking and dragging them. If you move the mouse pointer over the border between the text and the picture you should see a double-headed arrow. When you see this, click and drag the border over so that it lines up with the left edge of the picture:

 

 

You can see how it resized the table borders to where you wanted them to go.

 

Now we want to add another table below the first one where we can insert some links. Make sure your cursor is below the first table outside of the table borders by clicking anywhere below the first table. Go to the table button and pick 1 row and 3 columns. This will make a new table below the first. Change the borders to invisible by clicking on Table > Table properties > Table and changing border size from 1 to 0.

It should now look like this:

 

 

O.K. We want the links to be centered inside the cell rather than justified left. To center the text, highlight the whole row by clicking and dragging the mouse from the first cell to the last.

 

It should look like this:

 

 

Now click on the “Center Justify” button here:

 

 

When you type in a cell now, it should align all the text in the center of that cell.

Enter some text that you want to make into links. Highlight the text in the first cell like this:

 

 

Then, click on the “Insert Hyperlink” button here:

 

It should bring up this dialog box:

 

 

Here, you can either type in an address for a different web site.

Now we’ll make a link to a page within your own site. First, we need a page to which we can link. Click on File > New > Page or Web… and it will bring up this screen:

 

 

Click on “Blank Page” and you’ll see this:

 

 

Now, click on File > Save as…  Make sure you’re in your “my web site” folder and type in the name “contact.htm” in the “File name…” text box. Click “Save”. Go back to your main page by clicking on the index.htm tab:

 

 

Highlight the word contact in your lower table. Click on the “Insert Hyperlink” button and select the “contact.htm” page from the list. If you don’t see “contact.htm” make sure you’re looking in the “my web page” folder on your desktop. Click “OK”.

 

 

You’ve now linked to a page in your own website and a page outside of it.

 

That’s it for this tutorial.