Primer on Using FrontPage

Primer on Using FrontPage to Create and Manage a Website

This document is intended as a brief reference for editing and updating websites using FrontPage.

Download the Testing Starter Web

	Download the "testing" starter web to your local disk (in zip format; if you need one, you can get a zip utility at www.winzip.com)
	Upzip the starter web into a directory, e.g. c:\temp

Launch Microsoft FrontPage

Double-click on the FrontPage icon (either on the desktop or near the Start button)

Open the desired FrontPage web:

if you're entering FrontPage for the first time:

File, New, Page or Web... pick Empty Web from the menu at the right... make sure to enter a logical web name under Specify the Location of the New Web, e.g. C:\Documents and Settings\Your Name\My Documents\My Webs\testing

File, Import... Add File... navigate to the location into which you unzipped the testing starter web, e.g. c:\temp\testing... select all the files... OK

if you've already created the testing web... File, Open Web... select "testing"

Go to the "Folders" view by clicking Folders in the leftmost Views bar

Open an Existing Page

From the Folder List, double-click on the desired .htm file ("hyper text markup" file -- these are the primary 'pages' of a web site)

Example: open the file "index.htm" in the testing web

Note: "index.htm" is a handy special name for a file... if the web visitor enters the address "www.myweb.com/subfolder" into their browser, they will get by default the file "www.myweb.com/subfolder/index.htm". Therefore it is a good practice to name the primary file within a subfolder "index.htm".

Now you can edit this page as you desire (see Adding/Editing Text, Adding/Editing Graphics below)

When editing any file, make sure you save OFTEN!!... File, Save ()

When you're finished... File, Close

Create a New Page

From the Folder List and with the desired folder or subfolder open... right-mouse, New, Page

This creates a file with a name like "new_page_1.htm"... but you can now type a more meaningful name, e.g. "science1.htm" (don't forget the .htm !)

Note: you can at any time change the name of a file by... right-mouse on the file, Rename, type a new name

Double-click the file (e.g. science1.htm) to open it (really just like Open an Existing Page above)

Now you can edit this page as you desire (see Adding/Editing Text, Adding/Editing Graphics below)

When editing any file, make sure you save OFTEN!!... File, Save ()

When you're finished... File, Close

Adding/Editing Text

Adding and editing text in FrontPage is very similar to using a word processor such as Microsoft Word.

Using pre-defined text Styles for headers and subheaders in the document by clicking Style to the left of the Font, e.g.

Our First Science Project

Hypothesis

We believe that the experiment will show...

Changing Font and Font Size

either before you type some text, or after you have typed and then selected (swiped across) the text...

use the Font, Font Size, Bold, Italics, Underline and Justification buttons

Note: Arial, 10pt is a good size for the text in the body of your web page.

Using Bullet lists

this is bullet 1

this is bullet 2

to get sub-bullets, click the Increase Indent button twice

Using automatically Numbered lists

this is item 1

this is item 2

Defining a Page Title (this shows in the browser header and also on Navigation buttons)... right-mouse, Page Properties... type in the Title field, e.g. "Science #1"

Hyperlinks

Hyperlinks are the basic way to allow the visitor to move from document to document when surfing the web.

to add a Hyperlink to some text... select the text... Insert Hyperlink

you now can input the Hyperlink in various ways

click to a file in your web

type in (or cut/paste from your browser) a complete address from someone else's web site

Adding/Editing Graphics

First you may need to "Import" the graphics into your web site

If the graphic is from a digital camera, it may come to you on a Floppy Disk. Put the floppy disk into the floppy disk drive.

	In FrontPage... open the subfolder where you want to put the graphics files
	In FrontPage... File, Import, Add File... change Look in to "3 1/2 Floppy (A:)"... then pick all the files you want to import (you can select more than one by selecting a rectangle around them)... OK
	Note: photos are usually .jpg files... computer images are usually .gif files

If you want to borrow a graphic from an existing page on someone's web site

	go to that page in your browser
	right-mouse on the desired graphic... Save-Picture-As... to say the C:\temp directory
	then in FrontPage... open the subfolder where you want to put the graphics files... File, Import, Add File... change Look in to "C:\temp"... then pick all the files you want to import (you can select more than one by selecting a rectangle around them)... OK

Sometimes after you Import a graphic, you need to Refresh FrontPage... go to Folder view and hit the F5 key

Before you actually add the graphic to your site you may want to do some Graphics Editing such as cropping (cutting out all but a smaller portion of the graphic) and brightness/contrast adjustment. This is usually done in a special purpose "graphics program" and is described in the separate write-up on Using Paint Shop Pro for Graphics Editing.

Now you're ready to add the graphic to your web page in FrontPage

	Insert, Picture, From File... and select the graphic file
	you can also control aspects of the graphic by... right-mouse on the graphic, Picture Properties

Or you might want to insert some existing Clip Art... Insert, Picture, Clip Art... and search and select your desired Clip Art graphic

Using Thumbnail Graphics

Thumbnails are mini representations of larger graphics. When the visitor clicks on the thumbnail he/she is then shown the full-size image.

	first Insert the full-size image onto your web page
	Select the image (by clicking on it)
	then click on the Auto Thumbnail button(or type Control-T)... this creates the mini image and also a hyperlink to the full-size image
	Note: you can control the size of the thumbnail by... Tools, Page Options, Auto Thumbnail... say height=160 pixels

Controlling Page Appearance with Tables

Web page editing does not have the full flexibility of "placement" that word processors have. Often you will want to use Tables to accomplish this.

Table, Insert, Table...

(shown above are some reasonable defaults for alignment, border off, padding, spacing and width)

Changing the Table structure can be very useful

	select a set of table cells, e.g. all cells in the top row, Table, Merge Cell
	select a given cell... Table, Split Cell

You can also change the appearance of the table by

	select inside the Table... right-mouse, Table Properties... change color, spacing, etc
	select a cell... right-mouse, Cell Properties... change color, alignment, etc

You can also insert a table within a table... select inside a cell... Table, Insert, Table

You can of course insert graphics into a table... select inside a cell... Insert, Picture, From file

Here's an example of a table

these are merged cells in the top row

split cell1

split cell 2

this is	a table
within	a table

Shared Borders

Usually there is some information (banner about our organization, copyright info, etc) that we wish to appear on every (or most) pages of our website. This is nicely accomplished with the use of Shared Borders.

	Save and Close all open web pages
	From the Folder List, select all your .htm files (click one to select, then hold the Control key and select the rest)... Format, Shared Borders... Selected pages... toggle on Top and Bottom... OK
	Open your "index.htm" file
	In the lower shared border, enter some text... e.g. Copyright 2002 by BestNonProfit
	In the upper shared border, enter some text... Insert, Horizontal Line... in Heading 2 style, BestNonProfit -- Your One-Stop Charity
	Save... Preview in Browser

Creating and Displaying a Navigation Structure

A web, since it is a linking of interrelated files (via hyperlinks), usually has some desired hierarchy or what in FrontPage is called Navigation structure. FrontPage provides nice ways to describe this structure and then to automatically have buttons generated to help the visitor navigate through the structure of your site.

Go to the "Navigation" view by clicking Navigation in the leftmost Views bar

FrontPage displays the current state of the site hierarchy, which for the imported testing web is currently blank.

To configure the Navigation view:

	drag the index.htm file onto the righthand (cyan colored) area of the screen
	then drag in turn the article1.htm, article2.htm and article3.htm files underneath the main testing article (you'll see the connection lines grab once you move the files into place)

You may have added files to your web site (e.g. the provided subarticle.htm or science1.htm) and now want to indicate where they sit in the hierarchy... simply drag the file from the Folder List into the Navigation hierarchy and drop it where you want it

Now that the navigational structure is defined, we need to have it displayed in a useful way throughout our website.

	go to the Folder View... open index.htm
	in the upper shared border, at the end of the BestNonProfit -- Your One-Stop Charity... hit the Return key (to go to a new line)
	Insert, Web Component... Link Bars, Bars based on navigation structure, Next... scroll down to select a Style, Next... Horizontal, Next... Finish
	select Child pages under home, Home, Parent
	click the Style tab... Use Vivid Colors, Use Active Graphics... OK
	Save... Preview in Browser

Publishing Your Changes to the Internet

To this point you have been making all your changes "locally" on your personal computer. Now we need to "Publish" all these changes to the Internet web server so that the world can see them.

go to the Page View and make sure that you have Saved any pages that you were editing

go to the Folder View

in FrontPage... File, Publish

	make sure that you are publishing to the correct location, e.g.... http://www.bestnonprofit.org/testing
	you may then be prompted for the username/password that allows you to publish to the Internet web server
	it will take a few minutes to publish your changes (depending on how busy the network is)

you should then CAREFULLY check to make sure your changes were published correctly

	open your web browser, e.g. Internet Explorer (either on the desktop or near the Start button)
	go to your site, e.g. http://www.bestnonprofit.org/testing... by typing this address (call a URL) into the Address bar of the browser
	check that your changes are there and that you didn't break anything
	you can return to FrontPage to make any necessary changes... then Publish again

Advanced Topics

(left to the reader's curiosity or future updates to this primer)

	Using Paint Shop Pro for Graphics Editing
	Themes
	Checking Hyperlinks
	Forms
	Databases (very advanced)

Congratulations on becoming an accomplished web designer!

Prepared by: Wayne McClelland, waynemcc@wamware.com

Updated: 23 October 2002