Helpful Tips on Using MS Front Page

1. How to Start Front Page Editor
   
2. About The Menu bar and Tool bar
   
3. What is in File menu
   
4. What is in Edit menu
   
5. What is in Insert menu
   
6. What is in Format menu
   
7. Starting a New Page
   
8. Changing the background color of the web page
   
9. Setting default text color
   
10. Bullets and Numbering
    
11. Inserting Hyper Link
    
12. Inserting Images
    
    

 

1. How to start FrontPage Editor

Click on the start button on the windows Task Bar as shown in Fig 1.1. Move your mouse over the program menu find the Front Page Icon and click on it.

 

Clicking on Front Page Icon (Fig 1.2) will start Microsoft FrontPage Explorer. Front Page Explorer is a major component of Microsoft FrontPage. It is used to manage all the files of a web site and it works like Windows 95’s Windows Explorer. In this workshop we will concentrate on FrontPage Editor for developing the web pages .

When MS FrontPage is loaded a getting started with Microsoft FrontPage dialog Box appears Fig 1.3.

(Fig. 1.3)

 

Click on the cancel button to remove the dialog box. To start FrontPage Editor click on the Tools menu and select Show FrontPage Editor Option (Fig 1.4). Or you can click on the FrontPage Editor from Tool Bar.

(Fig 1.4)

FrontPage Editor is the Backbone of Microsoft FrontPage. This is A Web Page Editor that works very much similar to Microsoft word. The purpose of a web page editor is to develop web pages without learning the HTML (Hyper Text Markup Language). This software is very user friendly and many of the professionals today are using this editor or other web page editors to develop Internet Sites.

After the FrontPage Editor is loaded you can see the similarities between MS Word and MS FrontPage. Editor Fig 1.5.

( Fig 1.5 )

 

The menu bar has many option that are also available in MS Word. The Menu and the tool bar will be discussed in next chapters.

There is one very important point that has to clear before working on a web page. An HTML document as it might seems very similar to a Word Document dose not contain all the formatting of a word document. For the simple reason that HTML language doses not support all the formatting commands for example, HTML and Internet browsers do not recognize Tabs command. This will become clear when we you will create a web page.

2. Menu and Tool Bar

As in any other Window based Software there is Two major part of software that helps the user to create an HTML document.

• The Menu Bar (Fig 2.1)
• The Tool Bar (Fig 2.1)

 

If you are familiar with MS Word will recognize most of the options in Menu bar and Icons in Tool bars. But there are few Icons in Tool bars, which are not present in MS Word. These Icon and the options in Menu bar creates it uniqueness as web page editor.

I will try to introduce the most common option used in creating web page from the Menu bar or Tool bar without complicating the task on hand.

 

3. File Menu

The options in File menu are very similar to other windows based program see Fig 3.1.

( Fig 3.1 )

 

Options	And What They Do
New	For starting or creating a new blank web page (Fig 3.2)
Open	Opens an existing HTML document (Fig 3.3)
Close	Closes the current document
Save	Saves the current document. The First time when you save your work the Menu for Save As will appear.
Save As	Saves the document with different name or Format (Fig 3.4)
Preview in Browser	Launches Internet browser to preview your work
Print	Prints the current document
Page Properties	Defines the look of the web for example the background color, Title and Text default color. (Fig. 3.5)

(Fig 3.2)

(Fig 3.3)

(Fig 3.4)

(Fig. 3.5)

4. Edit Menu

The options in Edit menu are very similar to other windows based program see Fig 4.1

(Fig 4.1)

Options	And What They Do
Undo	Undo the last command
Redo	Repeats the last command
Cut	Cuts the selected item and places it on the Clipboard
Copy	Places a copy of selected item on the Clipboard
Paste	To paste the item from Clipboard on to the document
Clear	Deletes the selected item
Hyperlink	Creates a hyperlink (Fig. 4.2)

 

 

(Fig. 4.2)

5. Insert Menu

This is probably the most used menu in developing a web page. Options in Insert menu (Fig. 5.1) are different from Insert menu in MS Word.

(Fig 5.1)

 

Options	And What They Do
Line Break	Create a single line space or starts a new line
Horizontal Line	Draws a horizontal line across the page
Symbol	Inserts a symbol character
Image	Inserts an image
Clipart	Insert a clipart from MS clipart gallery
Hyperlink	Creates a hyper link to a page, e-mail or an Internet site

 

 

6. Format Menu

This menu covers the formatting of a web page (Fig. 6.1).

 

(Fig.6.1)

 

Options	And What They Do
Font	To select the style and type of font to use
Paragraph	Determine the formatting of the paragraph
Bullets and Numbering	Creates bullet or numbered text.
Background	Establish the background color of the web page

 

7. Creating a New Web Page

Before starting a new web page a lot of thought should be put in examining the project. How are you going to arrange the layout of your home page? What should be the title of your page? What should be the main page? How many pages should you need? The page should be clear and esthetically arranged. The color of text and color of the background is the most important part, if they are not selected accurately the web page will not be legible.

Now when you have finished chalking out a plan its time to start the first page. In this workshop we will be creating a web page from scratch. Follow the following steps:

Action Steps

What you do	What happens
1. Click on the File menu	Opens up File menu (Fig 3.1)
2. Click on New	Opens the New FrontPage dialog box (Fig. 7.1)
3. Click on Normal Page	Opens a New Document in the editor.

By default when you start FrontPage Editor it automatically starts a new document so you can skip the above steps. But these steps will come handy if you want to create new page while you have another document open or if you have closed the other document.

 

(Fig. 7.1)

 

8. Changing the Background Color

In previous exercise we started a new page blank web page. By default the background color of the web page is gray. To Change the Background color follow the following steps:

Action Steps

What you do	What happens
1. Click on File menu	Opens the File menu. (Fig. 3.1)
2. Click on Page Properties	Opens the Page Properties Dialog box (Fig. 8.1)
3. Click on the Background Tab	Opens the Background option box (Fig. 8.2)
4. Click on the Background Drop down box.	Opens list of colors available to choose

(Fig. 8.1)

(Fig. 8.2)

9. Setting default Text Color

When you selected the background color you must have an idea to what color font you will use in your page. In this chapter we will set a default color for the page which can be changed using the font option if needed.

Action Steps

What you do	What happens
1. Click on File menu	Opens up the File menu options
2. Click on Page Properties	Opens the dialog box for Page Properties (Fig. 8.1)
3. Click on Background tab	Opens the background dialog box (Fig. 8.2)
4. Click on Text drop down box	Opens the list of colors available to choose

 

10. Bullets and Numbering

The concept of Bullets and Numbered text is same in HTML as it is in any other word processing document. If you are familiar with MS Word you don't need to go through this you can skip this section. To create bullet or numbered text follow the following steps:

Action steps

What you do	What happens
1. Click on Format menu	Opens the Format menu options (Fig. 6.1)
2. Click on Bullets and Numbering	Opens the dialog box (Fig. 10.1)
For Bullets 3. Click on Plain Bullets Tab	Opens the dialog box for selection of bullets. (Fig. 10.2)
For Numbers 3. Click on Numbering Tab	Opens the dialog box for selection of numbering (Fig. 10.3)

(Fig. 10.1)

 

(Fig.10.2)



(Fig. 10.3)

11. Inserting Hyper Links

A Hyper link or just link is the clickable "hot area" on a web page. Web sites are navigated and clicking on the hyper links downloads files. Hyper links can be in the form of text or graphics.

Action Steps

What you do	What happens
1. Click on Insert Menu	Opens the Insert menu option (Fig. 5.1)
2. Click on Hyperlink	Opens the dialog box (Fig. 4.2)
3. Write in the space	Links to file, Internet site, and e-mail

 

12. Inserting Images

Images play the lead role when it comes to the modern web pages. But to have a functional web page one has to avoid unnecessary use of images, which takes  long time to download. Presently only two image type are supported by the Internet browsers JPG and GIF.

Action Steps

What you do	What happens
1. Click on Insert menu	Opens the Insert menu options (Fig 5.1)
2. Click on Image	Opens the dialog box (Fig. 12.1)
3. Write The File Name in the space	Determines the location of file.

(Fig12.1)