FrontPage 1.0 for Macintosh

Computing Center

Academic Computing's Guide to

Microsoft Frontpage 1.0

for the Macintosh

1) Introduction
2) Accessing Microsoft FrontPage
3) Getting Started
4) FrontPage Explorer and Editor
5) Writing Text
6) The Format Bar
7) Horizontal Lines
8) Adding Special Characters
9) Page Properties
10) The Tool Bar

1) Introduction

What is FrontPage? FrontPage is authoring and publishing software that makes it easy for you to create and maintain world wide web pages. FrontPage is used in much the same way that you use a word processor: you concentrate on the content of the pages--the text, images, and links you might want--and FrontPage takes care of the computer code necessary to create what you want.

2) Accessing Microsoft FrontPage

From the Macintosh HD, open the Lab Applications folder. In here, you will find the Microsoft FrontPage folder, . Open this folder and double-click on to launch the application.

3) Getting Started

When you start the FrontPage Explorer, the first window you see is a "Getting Started" window.

From here, you can OPEN an existing web, or CREATE a new one. For this example, we will create a new web. Click on "Create a New FrontPage Web From a Wizard or Template" and then click OK.

FrontPage will now give you a host of options:

Normal Web generates a web site consisting, initially, of a single blank page.
Customer Support Web generates a web site with initial formatting designed to provide information about or assistance in using a business product.
Empty Web allows you to generate a web from scratch. It does not create even a single blank page for you to work with.
Personal Web generates a web site with initial formatting designed for you to fill in to provide particular information about yourself on the web page.
Project Web generates a site with initial formatting designed to allow you to track the status of an ongoing project.

We'll start with the simplest form of web: a web with only a single blank page. To create this "normal web":

Select Normal Web.
Click OK.

FrontPage will then ask you to specify where you want to save your web and the name of your web. By clicking on the down arrow, you can select the desired web server or file location.

When you have selected a server/location and named your web, click OK.

4) FrontPage Explorer and Editor

The Explorer is the control center of the FrontPage web-design process. It allows you to view the organization of your site--the pages and the links between them. It also keeps track of all your files that you save for your web. If you select a "Normal Web", it will automatically take you to the Explorer, where you can visually see the navigation of your web.

This navigational tool makes moving throughout your web pages visually easy. You can simply double-click on the desired page (home page, page 1, or page 2 in the above graphic) and start writing in the text and graphics of your web page.

To launch the FrontPage Editor, double-click on these pages in the navigational part of the Explorer, or select "Show FrontPage Editor" under the Tools menu, or simply click the Editor button, , on the toolbar. The Editor works much like any word processing program. You use a series of menu and button bar commands to create and save the documents you want. All we now have is one blank web page. The next step is to use the FrontPage Editor to add text, links, and images to that page.

5) Writing Text

Adding text to you web page is as simple as putting the cursor at the beginning of the page and starting to type. There are many different tools and options for you to use to make your web page more to your preference.

Menu Bar - this contains all the tools and functions of the program.

Tool Bar - this contains only some of the tools and functions that the application is capable of. The toolbar buttons make it easier to select tools and perform operations; the purpose of the toolbar is for easy access. The functions of these buttons will appear when you point to them for a few seconds with your mouse arrow.

Format Bar - this bar allows you to change the style of the text layout.

6) The Format Bar

The Change Style Box	To perform change style operations: Point the cursor at the arrow on the right side of the Change Style box and click. Scroll down to the operation you wish to perform. Left-click on the desired style. Change style operations include:
	Address	The address style is intended for you to use to add your name and address to the bottom of your web page(s). Address paragraphs are usually displayed in italics and are sometimes indented. The address style looks like this.
	Bulleted List	this is a bulleted list
	Defined Term	This is a defined term and this indented line is its definition.
	Definition	A definition is an indented line which follows a defined term.
	Directory List	this is a directory list
	Formatted	All white space (such as tabs and spaces) is displayed by the browser. In other text styles, extra white space may be ignored by the browser.
	Headings Types are 1 through 6	This is a Heading 1 line This is a Heading 3 line This is a Heading 6 line
	Menu List	this is a menu list
	Normal	Normal is the selection you will use. It simply creates a line of text with no special attributes.
	Numbered List	this is a numbered list

The Font Selection Box

The Font Selection arrow allows you to select the font(s) you want for your web page.

To select a new font:

Point the cursor at the arrow on the right side of the Font Selection box and click.
Scroll down to the font you wish to use.
Click on the desired font.

Among the fonts available are:

Arial, Book Antiqua, Century Gothic, Courier, Times New Roman,
and many more.

When designing a web page, it is best not to use too many different fonts, and to use fonts that are widely available whenever possible.

To change the font of existing text:

Using the mouse, highlight the section of text you want to rejustify.
Following the directions above, select the font you want the text changed to.

You can also select fonts, make text bold, italicized, or underlined, and select font size and text color by selecting "Font" in the Format menu.

Other Format Bar Operations

	increasing text size	increases to desired size
	decreases text size	decreases to desired size
	bold, italics, and underline	You can bold, italicize, underline, or do all three
	Changing text color	You can even create a custom color for text or background, if you don't like the ones that come defined in FrontPage. Just click on "Define Custom Colors" to create a custom color. You can also select fonts, make text bold, italicize or underline, and select font size and text color by selecting "Font" in the Format menu.
	left justify	To change the justification of existing text, images, or tables: Using the mouse, highlight the section of text you want to rejustify. Click on the left justify, center, or right justify button. You can also adjust your text alignment by selecting "Paragraph" in the Format menu.
	center
	right justify
	creates numbered lists	You can change bullet or numbering style by selecting "Bullets and Numbering" in the Format menu.
	or bulleted lists

7) Horizontal Lines

-Adding a Horizontal Line to Your Page

To add a horizontal line to you web page:

Move the cursor to the place on the page where you want the horizontal line to appear.
Click once. This sets the cursor in position.
From the Insert menu, select "Horizontal Line".

A horizontal line will appear at the cursor location.

-Changing the Look of a Horizontal Line

You can make a horizontal line shorter or longer, wider or thinner, or change its color. To change the look of a horizontal line:

Point the cursor to the horizontal line.
Hold down the CONTROL key while clicking on the horizontal line.
Select "Horizontal Line Properties".
Change the width, height, alignment, and color as desired.
Click OK.

As long as your browser can support them, the changes you requested will appear.

8) Adding Special Characters

The symbols feature allows you to add percent signs, copyright symbols, or characters from different languages.

To insert a special character onto your web page:

Move the cursor to the place on the page where you want the character to appear and click once (this sets the cursor location).
Select "Symbol" from the Insert menu.
When the window appears, move the cursor to the character you want.
Click once and the character you selected will appear in the box next to "Insert".
Then click "Insert".

The character you selected will be placed on the web page at the cursor location.

9) Page Properties

-Changing the Background Color

FrontPage makes it easy to change colors of various aspects of your web page, such as the background, text, and hyperlinks.

To work with your web page's background:

Select "Page Properties" from the File menu.
To work with your page's background, click once on the Background tab. (1)
To select a background color, click on the arrow to the right side of the box labeled "Background". (2)
A list of colors will appear. Select the color you want.
Click OK.

Your page will be redisplayed, using the background color you have just selected.

-Changing the Default Text Color

FrontPage normally displays text in black. If you change the background color, black text might not be readable. To change the default color for text on the page you are currently working on:

Click once on the Background tab, using the illustration from above. (1)
To select a background color, click on the arrow to the right side of the box labeled "Text". (3)
A list of colors will appear. Select the color you want.
Click OK.

Your page will be redisplayed. Any text for which you have not specifically selected a color will be changed to the new text color you have selected.

-Changing Hyperlink Colors

Again, using the illustration above, you can change the colors in which hyperlinks appear on your web page (4). However, this is generally not a good idea, as people are familiar with the standard colors and changing them might confuse your users.

10) The Tool Bar

	New - To create a new empty page, click on this button on the Tool Bar.
	Open - To open an existing web or web page, click on this button on the Tool Bar.
	Save - To save the web page you are working on, click on this button on the Tool Bar.
	Print - To print the web page you are working on, click on this button on the Tool Bar.
	View Your New Web Page - To view your new web page on a web browser, click on this button on the Tool Bar. FrontPage will open the web browser it has been told to use, and will display the page you were working on when you clicked on the button.
	Spell-Check - To check the spelling on your new web page, click on this button on the Tool Bar.
	Cut Text To cut text from your web page: Highlight the section of text that you wish to cut, using the mouse. Click on the Tool Bar button that matches the icon picture to the left. note: The cut text is moved to the clipboard. It can be retrieved from the clipboard by performing a paste operation (see below) at any time before* you do another cut or copy operation.
	Copy Text To copy text from your web page: Highlight the section of text that you wish to cut, using the mouse. Click on the Tool Bar button that matches the icon picture to the left. note: The copied text is moved to the clipboard. It can be retrieved from the clipboard by performing a paste operation (see below) at any time before* you do another cut or copy operation.
	Paste Text To paste text into your web page: Use a cut or copy operation to put the text you want onto your clipboard. Move the cursor to the exact position in your web page where you want the text to appear. Click once. This will set the cursor position. Click on the Tool Bar button that matches the icon picture to the left. *note: Even though you have pasted this text, it will remain on the clipboard until you do another cut or copy operation.
	Undo - To reverse whatever action you last did, click on this button on the Tool Bar.
	Redo - If you undo something, then decide you really did want to do it, click on this button on the Tool Bar. This will redo the last action that was undone.
	Show FrontPage Explorer - To switch to the FrontPage Explorer, click on this button on the Tool Bar.
	Insert FrontPage Component - FrontPage components will be covered in an advanced workshop.
	Insert Table To add a table to your web page: Move the cursor to the exact position in your web page where you want the table to appear. Click once. This will set the cursor location. Click on the Tool Bar button that matches the icon picture to the left. To make a table with three columns and four rows, place the cursor to the position as shown in the illustration, and click. If you want to make a table larger than this, select "Insert Table" from the Table menu, and adjust the number of columns and rows accordingly. The table will appear at the cursor location.
	Insert Image To insert an image: Move the cursor to the exact position in your web page where you want the image to appear. Click once. This sets the image location. Now click on the Tool Bar icon that matches the icon pictured to the left. FrontPage will present a box which will allow you to select an already-saved image. Select the image you want and click OK. The image you selected will appear on your page.
	Create or Edit Hyperlink Hyperlinks are links that allow someone reading your web page to jump from your page to: Another web page (yours of someone else's) Another location on the same web page. You can attach a hyperlink to either text or an image on your page. If the link is attached to text, the text usually appears in blue and underlined when someone views your page, as "Add links" probably did on the page you used to access this one. The text might appear differently if the viewer has altered their web browser to use colors other than the ones it was originally set up with. To add a link from text on your page to another location on the same page: Using the mouse, highlight the section of text you want the viewer to click on. This can be a word, a sentence, or part of a sentence. Click on the Tool Bar icon that matches the icon pictured to the left. FrontPage will present a window called "Create Hyperlink" which will allow you to select the page you wish to link to. Click on a page or a file to make it the target of the hyperlink. If you want to browse the contents of a folder, double-click it. To make the target link's page appear in a frame in a frameset, select the frame in the "Target Frame" field. Then click OK. To add a link from text on your page to another web page: You need to identify the location--the exact place on the page--that you want to be able to jump to. You must set a bookmark. To set a bookmark, move the cursor to the exact location on your page that you want to be able to jump to. Click once. This sets the location for the bookmark. Then click on this Create or Edit Hyperlink button on the Tool Bar. To link to a bookmark on the page you selected, type the name of the bookmark in the "Bookmark" field. You can create a hyperlink to a bookmark on an open page by selecting a page first, then choosing its bookmark from the list located in the "Create Hyperlink" window.
	Back - FrontPage tracks the pages you work on during each session. To return to the previous page you were working on during this session, click on this button on the Tool Bar.
	Forward - FrontPage also tracks the pages if you have backed up a page (see above). Click on this button on the Tool Bar to return to the page you were working on before you backed up.
	Refresh - To refresh the current page or to revert to the last-saved version of the page, click on this button on the Tool Bar.
	Stop - To stop a network operation (such as following a hyperlink), click on this button on the Tool Bar.
	Show (or Hide) Line Breaks, Outlines, and Other Guides - FrontPage assists you with editing by inserting markers for line breaks, bookmarks, tables, and forms. To hide those markers while you work on your page, click on this button on the Tool Bar. To show the markers again, click on this button on the Tool Bar again.
	Help - To get help on any function in FrontPage, click on this button on the Tool Bar, and then click on the function you need help with. This will call up a help window on that particular function.

This is a Heading 1 line

This is a Heading 3 line

This is a Heading 6 line