FrontPage Tutorial: Your First Page!

To get you used to FrontPage©, let's start off by letting you create your own home page. There are 3 main sections on this page, each dealing with several topics. To begin, start with Title and scroll down from there.

• The Title- The first thing we are going to need is a title, or heading, across the top of your page. Just like any newspaper, most pages should have some sort of title at the top. So, let's put one on your home page.

1. First, look on the button bar and find the paragraph formatting button that looks like this: . This contains all the formatting options for paragraphs.
   
2. Click on the arrow and you will get a list of options to choose from:
   
   
   
3. Click on Heading 1 ( that will give you a large font to work with)
   
   
   
   
4. Now, in the page area, type in a title. Most people put something like "John Doe's Home Page", and that's fine, but be creative. :)
   
   

Let's center your title now. All you have to do is

1. Highlight the title using the mouse.
2. In the button bar, click the centering button. ( )

There you go! You have a title that is noticeable and is centered. Now let's move on to the body of your home page. Move the cursor to the end of your title by clicking after the last letter, then press enter to begin a new line.

Example page so far:

• The Body- We are now going to move on to the body of your page. This part of your page contains information on whatever subject you want. Just remember that other people might stumble onto your page from other pages, so think over what type of material you want on your page.

The body of most web pages usually contains some eye-friendly font size because if the entire page was the size of your title, that would leave some people who read your page with some pretty painful eyes :). In the paragraph formatting box, you will see it still says Heading 1. Go ahead and click on the arrow, then select Normal. This will give you that eye-friendly font size to work with.

 

 

Let's try putting some text into your home page now. In the page area type "Hi, my name is <your name here> and this is my first web page using FrontPage." Basically, whatever you type is what the person will see when they view your page (remember WYSIWYG?).

You can also change the color of the text, the size, and anything else you can do in a word processor. To format text, simply:

1. Highlight the text you want to format.
2. Click on the Format menu at in the Menu bar
3. Click on Characters... (this will bring up the Character Styles window which gives you many options in formatting text)
4. This is the Character Styles window that just opened: Simply click on the appropriate checkboxes and/or drop-down menu items, then click the button to apply the style to the text that you highlighted.

The Character Styles window as you noticed has several options, you can make text blink, create a strikethrough, change the font size, change color, create a ^superscript or a _subscript, and use any of the other options in that window.

You can also click on one the buttons in the button bar to do the same thing. The Character Styles window has more options, but for quick or repetitive formatting, you can click on one of the following buttons located in the button bar:

 - Bold, Italic, and Underline 
 - Typewriter font.
 - Change the color.
 - Increase/Decrease the size of the font.
 - |Left    |/| Center |/|   Right| justify the text.

Remember, all you have to do to format text is highlight it with the mouse, and then go to the Character Styles window, or click on one of the buttons, but try to be eye-friendly. If people can comfortably look at your page, they will come back. Basically, try to avoid doing something like this. ;)

• Images- Right now I'm sure you are wondering "Isn't the web supposed to be all colorful, and graphic? I want pictures!! I want pictures!!" OK OK, then let's try inserting a picture, or image, into your page :) . For now, we'll use a Bitmap that came with windows because everyone who is using Windows should have at least 1 in their c:\windows directory, but whenever you get a picture in the future that you want to put on your page, you can follow the same steps as below.
  Push ENTER to start a new line and type "This is a graphic." Now, using either the keyboard or mouse position the cursor after the word "graphic." FrontPage will insert the picture wherever your cursor is located.

1. Click on the Insert menu in the Menu bar.
   
   
2. Select Image...
   
   
   
   
   
   
   
   
   
3. On the window that popped up, click on the button at the lower right.
   ( this means that the image you are getting is actually on your computer )
4. Now you will get a file browsing window. Next to a caption reading File of Type: at the bottom of the window, there is a drop-down menu. Click on the drop-down menu, and select Windows & OS/2 BMP from the list because we are going to be using a Bitmap.
   (for future reference, if the image you wanted to insert was a JPEG, GIF, or other format of image, you can select those types of files from the same drop-down menu as you see here )
5. In the File name: text box, type c:\windows in the text box
   and press ENTER because that is where the images we will be using are located on your computer.
6. Finally, double-click on any of the files with the icon next to it ( you may have to scroll right using the scroll bar to view the icons ).

Now you have a picture on your page! But, let's be a little picky, and make it so that the text next to the picture isn't at the bottom of the picture but rather in the middle.

1. Double-click on the picture and you will get the Image Properties window. This window controls pretty much everything that has to do with formatting a picture and the text next to the picture.
2. In that window, you will see the Alignment: drop-down menu. Click on the arrow, and select absmiddle from the list
   
   
   
   
3. Click the button
   
   

Notice what that did? The text along-side of the picture is now aligned in the middle of the picture.

Updated example page:

I can sense you are a little anxious now to go off and start doing your own in-depth homepage that includes a list of your 245 CD collection of Depeche Mode singles and albums, favorite recipes, and, of course, a picture of yourself on your page, but there is 1 more important thing that makes the web "surfable": hyperlinks.

• Hyperlinks- (links for short) You've seen them on most every page you've visited. They are the words/pictures that you click on to "surf the web." Now, you get to make your one. For this example, we will create a link to UNR's web page.

Start a new line on your page by pressing ENTER. Type "This is a link to UNR's web page." Now let's make a link:

1. With your mouse, highlight the words "UNR's web page"
2. At the top of the screen, you will notice a chain that turned blue when you highlighted those words ( ). That is the Create/Edit Link button. Go ahead and click on it..
3. In the Create/Edit Link window that just opened up, click on the tab near the top of the window that says World Wide Web.
4. Type "www.unr.edu" after the "http://" in the URL text box. The entire line in the text box should now read:
   This is where the link will take us when someone clicks on the text.
5. Click the button.

The text should now read UNR's web page. That indicates that you have successfully created a link. If you were to be viewing your page in a web browser (such as Netscape or Microsoft Internet Explorer) and you clicked on UNR's web page, then you would be linked to UNR's main web page. Whatever you highlight before you click on the Create/Edit Link button will become the link. It doesn't matter if it is a word, 2 words, an entire paragraph, or even a picture!

• Finishing up your page- The last thing to do is to put your name at the bottom of your page, along with the date that you last modified the page (this helps people who view your page know when something new has been put on it).

Before typing in the information, let's put in a horizontal line to visually break the page up into a different section.

1. Click on the Insert menu.
   
   
   
   
2. Click on Horizontal Line.

 

 

Move to the next line so you can put in the final information. Usually, the information at the end of a web page is specially formatted to look somewhat like a footnote. We can use the Address formatting because it works so well.

1. In the drop-down menu where Normal and Heading 1 are, select the Address option.
   
   
   
   
2. Type in your name and today's date.

 

 

 You're done! Good job, and now I'm sure you are ready to run off a create your own personalized web page but if you get stuck, just come back here for references. There are also more features of FrontPage that are discussed in this tutorial.

University of Nevada, Reno
Please direct questions to: webmaster@unr.edu
URL of this document: http://www.unr.edu/.html
Last Modified: September 19, 1996