FrontPage in the Classroom

with Pixel UNIT 2
Your First Web Site
  • Let's Get Started
  • A New View
  • Change Your Look
  • Finishing Touches
  • Cool for School

FrontPage in the Classroom is produced by ACT360 Media Ltd.
in conjunction with Microsoft Corporation.
Copyright 1998. All rights reserved.

See our entire collection of online tutorials
by visiting

Let's Get Started


Okay, first we need to create our FrontPage web site. We'll call ours "Kids Today".

Creating a web site
To create a new FrontPage web site:

    1. Open FrontPage Explorer. You will see the Getting Started dialog box which contains all the web sites you have already created. If you have never created one, this box will be empty.

    2. Click the Create a New FrontPage Web radio button, then click the OK button in the Getting Started dialog box.

    Creating a New Frontpage

    3. The New FrontPage web dialog box will appear. Here is where you choose and name the type of web you want to design.

    4. Click the From Wizard or Template radio button and then click on Personal Web.

    Setting up Your Personal Web

    5. Type a name for your web site into the text box that appears.

    Enter the name of your New Web

    Click the OK button in the New FrontPage Web dialog box. You will notice the FrontPage Server is launched at this time.

    6. Type your FrontPage name and password into the text box that appears and click OK.

A New View

What's this "Views" toolbar?



This allows us to switch views. We can look at the overall structure of our web site, or look at pages individually.

I get it. It's a lot like when I'm painting - sometimes I need to get real close to paint a leaf just right, and sometimes I need to step back to see how the whole forest looks. Hey, does Van Gogh live in this time period?

No, but Spielberg does. You know... the great filmmaker.


Switching views
When FrontPage finishes generating your web site, you will see a Navigation diagram in the top part of a split screen. This flow chart is an outline of your web site, and it shows how the individual web pages will connect to one another. In the lower screen, you will see a list of the files and folders that FrontPage has made for you.

This view shows you how the web pages in your site are arranged.

The Views toolbar shows you seven different ways of looking at your web site.

    1. Click on the first icon of the Views toolbar. Look at the view you are given.

Check out the Folders view

    2. Click on each of the other Views icons. Look at each view one by one, just to check them out.


Okay, now we need to start our first page.

Groovy! Let's make this page all about silly tattoos and the teenagers who later regretted getting them.


In due time. First, let's start off with our main page that will link to the rest of our site.

Working on a web page
To start work on a web page:

    1. Click the Navigation icon on the Views toolbar. The Navigation view flow chart will appear.

    2. Double-click the Home Page icon in the Navigation view flow chart. Your web page will open in FrontPage Editor. By this point, all three parts of FrontPage will be running.

Double-click a page in the diagram and it will appear in FrontPage Editor.

At the top of the FrontPage Editor screen is a Title bar, a Menu bar, a Standard toolbar and a Format toolbar. These bars and toolbars contain all the tools you will need to add and format text.

FrontPage has many toolbars

At the bottom of the screen are three tabs: Normal, HTML and Preview. Always select the Normal tab when working on your page.

Click the Normal tab

You will notice that FrontPage Editor has already started your page for you. On the left side of the screen, you will see a navigation bar with links to the three other pages in your web site. You will also see the title of the page, a line of three buttons and some sample text. At the bottom of the screen, you will see a special line of text that tells your visitors when you last updated your page.

FrontPage starts you off with a basic web page

Change Your Look


Now we need to insert some text.

Sounds painful.


Thanks to FrontPage, it isn't. We can create a title and a little paragraph to explain what our web page is about.

Adding and formatting text

    1. Insert the cursor into the sample text area of FrontPage Editor.

    2. Press the Enter key and type in a new sentence.

    Editing Text

Formatting text
You can create different effects by changing the font, size, color and alignment of your text.

To customize the text:

    1. Use your mouse to select the text you want to customize.

    2. Click the Change Font button on the Format toolbar. You will see a drop-down list containing the names of different types of fonts.

    There are lots of fonts to choose from

    3. Select a font by clicking on a font name.

    4. To make the text larger, click the Increase Text button on the Format toolbar. To make the text smaller, click the Decrease Text button.

    Make the font larger or smaller

    5. To change the color of the text, click the Text Color button on the Format toolbar. A Color property box will open.

    Change the color of the font

    6. Click the color you want, then click OK.

    Choose a color for your font

    7. To center text on the page, click the Center button on the Format toolbar.

    Voila! Centered text.


Okay, it's time to change our background color. Hey, Pixel, make sure our background color is different than our text color. Otherwise, our text is going to be difficult to read.

Duh... everybody knows that, Blip.


You'd be suprised. The World Wide Web has incredible web pages, but it also has some really lame ones. With careful planning and the help of FrontPage, ours is going to be stellar.

Changing backgrounds

    1. Click Format on the menu bar and select Background. You will see the Page Properties dialog box.

    Select Background from the Format menu

    2. Click the Background tab, then click the Background drop-down list. Choose a color from the list, then click OK on the Page Properties dialog box.

Select a background color from the drop-down list

Finishing Touches

Hey, Blip! Don't forget - we'd better save our web page. We don't want to do all this work over again if our computer crashes.


Saving your page

    1. Click the Save button on the Standard toolbar.

It's so easy to save your web page. ** So, do it often! **

Hey, can we preview what we've done so far?



We've barely even started! But you're right. Previewing is a good idea. We want to make sure that what we've done so far looks good when we put it on the World Wide Web.

As long as we use my artwork, it will look terrific. Trust me.

Previewing your page
When visitors visit your web site, they will look at it through an Internet browser like Internet Explorer or Netscape Navigator. When viewed through these browsers, your page will look somewhat different than it does in FrontPage Editor.

There are two ways to preview what your visitors will see:

    Option 1. Click the Preview tab at the bottom of the screen. The broken lines dividing your web page will disappear. This view is similar - but not exactly the same - to what your web site visitors will see.

    Click the Preview tab

    Option 2. Click the Preview button on the Standard toolbar. This action will open your Internet browser and display your web page in it. This option gives you the most accurate view of what your web site visitors will see.

Click the Preview button to view your page in a web browser

Okay, I'm done. I've just typed a short introduction to our web site. Can we go to the mall now?



Good job, Pixel, but you'd better run the Spell Checker. Some of those words don't look right. For example, view should be spelled V-I-E-W, not V-E-I-W.

Aww... so spelling isn't my strong suit. Isn't that why FrontPage has a Spell Checker?

Checking your spelling
FrontPage Editor has a spell checker that can be used on all your web pages. To check your spelling:

    1. Click the Check Spelling button on the Standard toolbar.

    Do some spell checking using this button

    2. If the program finds a word that is not in its dictionary, a Spelling dialog box will appear showing you a list of similar words. Click on the word you want to use, then click the Change button in the Spelling dialog box.

    Select a word from the Suggestions list

cool for school 2

Organizing classes and class projects

To organize (Oxford definition): give orderly structure to, systematize; initiate or make arrangements for, enlist (person or group) in this.

Organization. So great when it's there, so stressful when it isn't - much like that first coffee of the day. It seems people are always trying to organize things - be it a bedroom closet, glove compartment, filing cabinet, desk drawers, or even corporate structures. Organization makes life flow along more smoothly. Let's face it - it's quicker and easier to get a job done when you know where to find the tools you need to do it. Organization is just as important to Web site creation. In fact, it's absolutely critical. A Web site is made up of so many different folders and documents, so it's vital to be able to find the information you are looking for.

It all comes down to naming folders and files. Let's say you're making a Web site that features one poem by each student in five classrooms. You can name the opening page file of the Web site: poetry. The folder for each class can be named: Grade 1, Grade 2, Grade 3, Grade 4 and Grade 5. Each Web page file for each student can simply be named after the student. This will make it a lot easier to find, edit and update pages in the future. If you think carefully and use names that will make sense in the future, you'll be riding high as you click your way through your interesting, well-organized Web site.