Open Directory Site Microsoft FrontPage Tutorials

 

Our web page looks a bit drab at this point, so let’s add a colorful background, an animation, a sound and a link to a really neat web site.

 

Viewing web pages in a browser

 

So far we have been working only in the Microsoft Page Design View.  We have not really seen how the web page will “really” look to the “world” in a browser.  In the button bar, below the Menu bar, there is a button (see image on right) that will load our web page in a browser (e.g. Microsoft Explorer, Netscape, etc). 

 

Click-on the Preview in browser button.  Or, you can click-on File in the Menu bar and then click-on Preview in Browser.  If you do click-on Preview in Browser, Explorer will ask you to choose a browser that is saved on your computer.  We normally use Microsoft Explorer, as it has proven more reliable of late.  However, if you are a Netscape or other browser user, then choose your favorite browser if this is important to you. After you have made your choice, click-on the Preview button at the bottom of the Preview in Browser Menu Screen.

 

Microsoft Explorer browser, or Netscape browser, will load in your computer and your web page will appear.  It will appear just like it would if someone looked at it in their browser.

 

We’ll use the Microsoft Internet Explorer. Again, you can use the browser of your choice.  We’ll find a background, animation and link on the internet.  You’ll actually “copy” a background color/pattern of your choice, as well as an animation, sound and link to your web page.  To do this we’ll use a couple of handy sites on the World Wide Web. 

 

 

 

 

 

 

 

 

Notice that an Internet “address” has been typed-in the Address: area above.  Click-in the Address area of the Microsoft Explorer (or Netscape) on your screen and type the following:  http://www.wdvl.com.  This will link you to a web site that contains a lot of neat things.  When you have completed typing, simply tap the Enter key and Microsoft Explorer or Netscape will load this site. Once you have typed-in the address, tap the Enter key.

Your browser should now load the web site Web Developer’s Virtual Library.  The screen should look similar to that below.  This screen has changed several times in the past year, so if it does not look just like this, don’t despair.  Trust us, you’ll be OK.  The screen should indicate, at the top, that you are in the Web Developer’s Virtual Library.  You’ll just have to be flexible to find the next correct link.

 

 

 

We want to add a background and an animation from the Web Developer’s Virtual Library to our web page.  To do this we’ll start by clicking-on the Graphics button.  This button/link has moved several times.  At this time it is in a scroll down list on the left side of the screen – it could be on the right if the design changes again. Move down until you see the word Graphics.  Your screen should look something like the one to the left.  Click-on Graphics.  If your screen does not look just like this, look around for Graphics.  When you see it, move your cursor over Graphics, you will see the little pointy hand.  Click-on the word Graphics. 

 

Microsoft Explorer or Netscape will now load the next web page.  It should look something like the one below.

 

 

Use the “elevator bar” on the right side of the screen to move down slowly until you see a link to a background web page.  The link is pretty far down the list.  It should look like the one below. 

 

 

When you move your cursor over Using Background Images on Web Pages and Resources you will see the “little pointy hand”.   When you do, click the left mouse button.  Microsoft Explorer will now take you to the next web page.  The top of the web page should look like the text below.

 

 

 

 

 

 

 

Again, use the elevator bar on the right to move down until you see an area on the web page that looks similar to the one on the left. 

 

 

 

We’ll use the Netscape’s Background Sampler to select our first background.  Click-on this and you will go to a web page with a nice set of basic backgrounds.  The top of the web page should look something like the one below.

 

 

 

The above title will appear at the top of this web page.  Again use the elevator bar on the right side of the page to run down until you see some backgrounds.  Earlier, it was suggested that you use a dark color for your title.  It is now suggested that you use a light color for your background.  This is to assist you in “seeing” your text against the background.  As you become more proficient in text and backgrounds, you can experiment and attain some really “interesting” combinations.  We chose the background below (left) for the tutorial since text is easy to “see” against it.  We also use this tutorial in our computer labs and this image projects well with computer projectors on movie screens.

 

This is a good background as it is light enough to show your text, but also has some color to it.  You choose a light background that you like.  When you have chosen your background, point your cursor arrow at the middle of the background and click the RIGHT mouse button.  A tailored menu screen will appear (like the one at the top of the next page).