Frontpage Basics

This tutorial will teach you the basics of creating a web page by manipulation of the template file above. The things you will learn include:

• Font Manipulation
• Changing the Title
• Creating a Hyperlink
• Inserting Images

Font Manipulation

1. To begin, launch Frontpage and open the template web page in frontpage. (If you are having trouble saving the template web page, right click on the link above and click on "Save Target As" / "Save Link As" option. It would be a good idea to save this file to your W: Drive.)
2. We will be changing this file, so let's go ahead and save it to your W: Drive. If you call the file index, then anyone attempting to view http://business.auburn.edu/~yourname will automatically be shown this page. (If you do not have a file called index.html in your W: Drive then anyone accessing the previous address will be shown a list of the files in your W: Drive. If you plan on using your W: Drive I would strongly recommend at least having a blank index.html file.) Once you've saved your file continue on to the next step.
3. Next, replace the "Full Name" text on the page with your own name. Before we move on, let's play with the text attributes. Highlight your name and right click. A popup menu will display a few options, simply click on Font for now.
4. From the resulting menu, you can manipulate different aspects of the text. Such as the text color, font, and size. (Please Note: Everyone does not have the same fonts installed on their computers, so try not to change your font to anything but the most common of fonts.) I am choosing to change my text Color to a dark blue. Once you have finished customizing your text click "OK."
5. "Department Name, Position" is located directly under your name, take this time to change the text to your appropriate department and position. You may have noticed that this text is a smaller size than your name. The size seems to flow nicely, but let's change something about the text. Instead of using the right click approach to manipulate the font, this time use the "Formatting" toolbar. This toolbar is quite handy for making quick changes to your font. As you can see below, I choose to Italicize my department name. Once you have finished continue to the next step.

1. The next item that needs to be replaced is the "Room#." Simply change the room # to correspond to your office.
2. The next item that needs to be replaced is your Phone #. Replace the four X's with the last four digits of your office phone number.
3. The next step is a little bit different from the last two. First you need to replace "place_email_address_here" text with your current email address. Once you have replace the text, highlight your email address and right click. From the right click menu, click on the "Hyperlink" option. Once a new screen displays, locate and press the "Email address" button on the left. Simply type your email address in the "E-mail address: " field. When you are done it should be similar to "mailto:username@auburn.edu". Once you have a screen similar to the one below, press "OK" to continue.

1. Now you should have completed the top portion of the web page with useful information on how to contact yourself. Let's save our work and take a look at the progress. Once you have saved your file open an internet browser to http://business.auburn.edu/~your_user_name . It should look similar to the picture below. If not then repeat the previous steps.

Changing the Title

1. One thing that you might have noticed by now is the Title of the web page (top of the window where it says "Your Name"). Next you will learn how to change this text. Go back to Frontpage and continue to the next step.
2. To change the Title text simply right click somewhere in your document. Select the "Page Properties" option from the pop up menu. Once the Page Properties screen displays, locate the "Title:" box. Editing the text here will change the title at the top of the internet browser. I changed my title to my name. Once you are done continue to the next step.

1. Save your web page and view it again. You should notice the Title has changed. If not repeat the previous steps.

Creating a Hyperlink

1. Below your personal information you can see a section named "Classes". This is just one of many ways to display important information about your classes. The bulleted list is there to give you an idea of what you might like to list on the web page. Feel free to change these later, but for now I am going to show you how to create a hyperlink to an example syllabus.
2. For the next step you will need to have a file to link to in your W: Drive. If you do not have a syllabus currently available that you wish to link, then feel free to download an example document here: Example Syllabus Once you have a document to link to in your W: Drive continue to the next step.
3. Highlight the "Syllabus" text under Example Class 1. Right click and select the option Hyperlink. When the new screen appears, make sure that "Existing File or Web Page" is selected on the left. Select your file (syllabus.doc) in your W: Drive and click "OK". (Please Note: Only files in your W: Drive will be accessible to the public. Attempting to create a hyperlink to another drive will cause problems.)
4. Save your web page and view it again. This time when you click on the "Syllabus" text, the file you linked to the text (syllabus.doc) will open. If not then repeat the previous steps.

Adding an Image

1. In order to add some more flavor to your web page, you might consider adding a few graphics. The graphic I'm using can be found at COB Logo . Select the line where you want to place you image. In this case, I chose to place the College of Business logo above my personal information. To make room for the image I selected the line of my name and pressed enter. This provided a line above my name. Then I moved the cursor to this line. Once you have the desired place of your image selected continue to the next step.
2. Goto the menu and click "Insert", then go to "Picture", then click "from File." You can select an image from your W: Drive using this new screen, or if you know the internet address of a picture you can type it in for the filename as well. Keep in mind if you put in an internet address that picture may later become unavailable.
3. Now that you have your picture on your web page you can move it around as you please. If you right click on the image, a new option "Picture Properties" becomes available that allows you to further manipulate the image.