Lesson 1 Creating Web Pages

---

In this lesson, you’ll create a Web site that provides information about a fictional teacher at South Girard named Mrs. Loreman. The site will contain class information, class pictures, and links back to SGS’s webpage as well as PCBOE.

Overview

You will learn how to:

· Open FrontPage.

· Create Web pages.

· Work with text and hyperlinks.

· Insert pictures and files.

· Position objects.

· Use Thumbnails

Opening FrontPage

To run Microsoft FrontPage, do one of the following:

· On the Windows taskbar, click the Start button , point to Programs, and then click Microsoft FrontPage.

· Click on the Icon on your Desktop (Blue with a blue arrow) named Microsoft FrontPage.

If this is the first time you’ve used FrontPage, the program opens and displays a blank page ready for editing.

Workspace Overview

FrontPage 2002 has an integrated interface that helps you create and edit Web pages as well as manage entire Web sites within one application. All toolbars and menu behaviors are consistent with Microsoft Office XP programs, so toolbars and menus can be fully customized. You can also use convenient keyboard shortcuts to accelerate common tasks such as opening Web sites and pages, printing, and many other commands.

The graphic and table below highlight some of the commonly used elements of the FrontPage 2002 interface.

Item	Description
Page Tab	An easy way to select the page you want when you have several pages open.
Title Bar	Displays the name of the current page, and its location in your Web site.
Menu Bar	Contains menus like File, Edit, View, and Insert, and is the starting point for many of the tasks you will undertake in FrontPage.
Ask a Question Box	To find more information about a procedure in FrontPage, type a question in the Ask a Question box, which accesses the online Help system.
Close Page	This button closes the page that is currently in view.
Scroll Bars	These let you move the page so a different portion is displayed.
Status Bar	Represents the state of a current task. For instance, the Status Bar may display the text “Retrieving Index.htm” when opening the home page, or show the destination of a hyperlink when you move your mouse cursor over a link in the Normal pane.
Page View Panes	These represent the different panes of the workspace. For example, the Normal pane is where you will do most of your work in this tutorial. Other panes are the HTML pane and the Preview pane.
Progress Indicator	Shows the status of a current action.
Estimated Download Time	Gives you an idea of how long it will take a user to view your page in a Web browser.
Task Pane	A pane within Office XP programs that provide commonly used commands. Its location and small size allow you to use these commands while still working on your files.
Standard and Formatting toolbars	Displayed by default. They provide easy access to the commands you will use most often when working in FrontPage.
Views bar	What you see in the main program window depends on the currently selected view. The icons on the Views bar provide different ways of looking at the information on your page or in your Web site.

To create a home page

The home page is the front door to your personal Web site. It provides information about the content or subject matter of your site in order to spark interest in your site visitors. The home page also contains the links to the other pages in your Web site.

1. On the blank page in Page view, type Welcome to Mrs. Loreman’s Class! and then press ENTER.

Just like in a word processor, pressing ENTER puts the cursor on a new line. (To single space, hold down the SHIFT key and press ENTER).

2. Next, type the sentence I am excited to have your child in my class this year! Please check back frequently, as we will add new pictures and news weekly!

3. Press ENTER.

Most of the content for your teacher site is already created. When you’re ready to make your own Web site, FrontPage lets you import any of your existing documents directly onto your Web pages without having to retype anything.

Your page should now look like this:

Next, you will add a picture to the Web page. Pictures can be scanned photographs, drawings, or computer graphics created in a drawing or image-editing program.

For this example, the picture I’ve inserted is a graphic of a bulldog:

To insert a graphic on the home page

1. On the Insert menu, point to Picture, and then click From File.

FrontPage displays the Picture dialog box.

2. Next to Look In, select the location you have the picture saved

(You most likely save your pictures in My Documents/My Pictures Folder.)

3. I saved the bulldog picture on my Desktop for easy access.

4. Click the file and then click Insert.

Frontpage then inserts the picture you have selected.

5. Press ENTER to create a new line.

Your page should now look like this:

Merely inserting a picture of a button doesn’t mean that anything will happen when someone clicks it in a Web browser. To make a picture or a word clickable, it must have a hyperlink associated with it.

A hyperlink is a pointer from text or from a picture to another page or file on the World Wide Web or on an intranet. On the World Wide Web, hyperlinks are the primary way to navigate between pages and other Web sites.

In the next steps, you’ll create a hyperlink from the graphic you just placed on the home page.

To create a hyperlink from a picture

1. On the home page, click the picture you inserted.

When a picture is selected, it is shown with file handles — eight small squares around the outline of the picture. These can be used to resize a picture or change its appearance. When a picture is selected, FrontPage also displays the Pictures toolbar. The Pictures toolbar provides picture editing and formatting tools, which you’ll learn about later.

Note   If the Pictures toolbar doesn’t appear automatically, on View menu, point to Toolbars, and then click Pictures.

2. On the Insert menu, click Hyperlink.

FrontPage displays the Insert Hyperlink dialog box. Here, you specify the target of the hyperlink you are creating.

In the Address box, type www.pcboe.net/sgs

Notes

o Notice that FrontPage automatically adds an HTTP prefix. HTTP stands for Hypertext Transfer Protocol. This is the Internet protocol that allows World Wide Web browsers to retrieve information from Web servers.

o Because you’re creating a hyperlink from picture that has a bulldog, when you click on it, you will be taken to South Girard’s Webpage.

Click OK to finish creating the hyperlink.

You may notice that the appearance of the button itself hasn’t changed. Unlike text hyperlinks, which are generally blue and underlined, picture hyperlinks do not automatically indicate the presence of the hyperlink. This is intentional, because changing the appearance of the picture could obscure the intended page design in some cases.

You can quickly check the existence of a hyperlink from a picture by moving the mouse pointer over the picture. If a hyperlink is present, FrontPage displays the URL of the hyperlink in the status bar.

Next, you’ll insert another picture at the top of the page (I’ve used the South Girard logo)

Insert a picture on the home page

1. Press CTRL+HOME to quickly jump to the beginning of the current page.

Tip   The key combination CTRL+HOME places the cursor in the home position — the top left margin on the current page.

2. On the Insert menu, point to Picture, and then click From File.

This time, FrontPage immediately displays the contents of the last folder you used. For the duration of each work session, FrontPage remembers the names and locations of the folders you’ve already navigated to.

3. Double-click the picture you want to insert.

FrontPage inserts the graphic on the current page.

4. Press ENTER to move the welcome text to the line below.

Your page should now look like this:

To finish the home page, you’ll center the text and pictures on it.

To center elements on a page

1. On the Edit menu, click Select All.

FrontPage selects everything on the current page.

2. On the Format menu, click Paragraph.

FrontPage displays the Paragraph dialog box. Here, you can change the alignment of selected elements, and apply indentation and custom spacing for text and graphics.

3. In the Alignment list, click Center, and then click OK.

FrontPage centers the text and the pictures on the home page.

5. Click anywhere on the page to deselect all page elements.

YOUR SCREEN SHOULD NOW LOOK LIKE THIS:

To make thumbnails out of pictures

Most of the time we want to add as many pictures of our classes as we can, so that everyone’s parents can see them online and no one gets their feelings hurt J But if we add all the pictures we want, it would take the webpage forever to load. So webmasters often use “thumbnails.” Thumbnails are small pictures that when clicked on, open up larger in a new window.

1. First you insert the picture. Go to Insert and click Picture, and then From File.

2. Select the picture or pictures you want to use

**Note: You can select more than one picture to add at a time by selecting one, and holding the CTRL key and selecting the others. (For example, we are adding Peer reading pictures, so I would click on pr1, and hold the CTRL key and click on pr2, pr3, etc, so that all of them are highlighted.)

3. Now click Insert.

**Note that often pictures that are taken with a digital camera are huge, so they would have to be resized anyway.

4. To make the pictures thumbnails. Right click on the picture you have chosen to make a thumbnail. Select AutoThumbnail. Continue doing this until you have done all the pictures you added.

YOUR SCREEN SHOULD LOOK LIKE THIS:

Now if you wanted to view one of the pictures in a larger window, click the PREVIEW tab at the bottom of the page.

Now you’ll notice that when you put the mouse over the thumbnails, the hand appears and you are able to click on one. Click on one of them.

YOUR SCREEN SHOULD LOOK LIKE THIS! (Sorry Mrs. Goshea)

To get back to working on the page and viewing it normally, simply click on the Normal Tab and continue working.