Microsoft® Front Page Tutorial

<< return to training home page

Basic Topics

bullet How to Login to website
bulletLogin Problems
bulletHow to publish
bullet How to import an existing site to your computer
bulletHow to edit a page
bulletHow to make / edit a form
bulletHow to insert a picture or clip art
bullet How to upload pictures, audio-video clips, and pdf's
bulletWhat are meta tags

Advanced Topics
 
bulletHow to create subwebs
bulletHow to 'include' files
bullet How to insert javascript
bulletHow to create and insert flash
bullet How to work with existing databases
bullet How to create a database, search page, and results page
bullet How to create Microsoft® Front Page web templates
 


If you'd like to take the full
Microsoft® Front Page Tutorial, start here.

>
Introduction 

> Lesson 1

> Lesson 2

 

 

To jump right in and use the following instructions written by High Tech Ministry, start below.

Instructions to the most commonly asked steps:(it is suggested that you print them out and literally follow them step by step)

How to Login to website: To Open your website with Microsoft front page:

Open front page application. Choose File, Open Web, Click the Web Folders icon, then type in your full url eg. http://www.sacramentointernet.com

Note: If you are creating or using a website on your local drive first, simply click on My Documents instead of Web Folders and find where you store your websites.

You will be asked for your Username and Password. Enter and click OK.

To Publish your website:

With website open, click File, Publish Web, and specify the full url (see above) or the full path of your local drive eg. C:\my documents\webpages\new website.

Click OK.

Note: if you have an existing index.htm file that is different then the one you are publishing....rename the existing index.htm file to something other than index.htm until published, else it will get overwritten. Alternately, rename your 'to be published' index.htm file to something like indexnew.htm.

return to top

How to import an existing site to your computer

To import your existing site into front page on your computer:  

open front page, click file, new web, webtemplates, empty web, specify location of web,
then click file, import, from web, enter www.thewebsite.org  click ok, uncheck boxes, click ok.

Typical Login Problems:

A typical error upon trying to open website tells you that it can't find it or that it is on a protected volume etc. This is because you either TYPED THE WRONG URL, ENTERED THE WRONG USERNAME/PASSWORD, or YOUR PC IS NOT SETUP CORRECTLY.

A typical pc problem is that you aren't online or your pc does not have Microsoft Personal Webserver or Microsoft Client for Networks installed. To determine if you have them installed, open Control Panel and look for an icon Personal Web Server. If it is not there, look in your windows explorer under C:\Program Files\ Personal Web Server. If it is not there, you likely don't have it installed. Install it from the Front Page Install CD.

Also, look in Control Panel for the Networks icon. Open it up and see that you have Microsoft Client for Networks installed. If not, click Add, choose Client, then find the Client for Microsoft Networks. Ok your way out of there. It will likely ask you for your Windows install CD to be put into your CD Rom.

More below...

How to edit a page

Login to site with front page
Double click on the desired page to edit (suggest making copy first! right mouse on file name, click copy, then paste it)
Type text in where appropriate. Format accordingly.
Insert images where desired.( click Insert, Picture, browse either on left window pane, or click on folder on bottom right to browse your pc)
Save.

return to top

How to make or edit a form:

For Contact, Contact Confirmation, Pen Pals, Prayer Request, Prayer Confirmation pages: ( click on the links for pre-designed templates )

Method A
click file, new, page, page templates, form wizard. Now just answer the wizard questions.
Then move down these instructions to Editing and existing form template:

Method B
open the page or start a new page, in front page.

Click Insert, Form, form. Create a couple line spaces within the dotted lines.
Within the dotted lines, Create a table with 2 columns and multiple rows. ( or start with this form template ) Click Table, Insert.

Now inside the left column of the table you will type in the Field Names such as "your name" etc.

Inside the right column you'll insert the field boxes. Click Insert, form, text box.
You must name each field box too. Click on the box, right mouse click, choose form properties, and give it a name to match the typed text name above.


Editing an existing form template:

click in the center of the form,
then click insert, form, form properties
enter the proper email address in the proper field

next, click options in this form properties window
click the email results tab

Under Email Message Header

enter Web Inquiry under subject
enter the email field name under reply to: in this case that is Contact_Email (as found in the 4th tab titled Saved Fields.)

now ok and save everything and send me just this one page back


There are 4 tabs in the Options button of the form properties.

1. File Results - setting should be: File Name = _private/formresults.txt File Format = formatted text

2. Email - email address (watch for typo's), Email Format = formatted text , Subject Line = Web Inquiry and LEAVE THE BOX UNCHECKED, Reply to Line = the name of the email field...in this form it is found on the 4th tab and is should therefore be Contact_Email This can vary from form to form. MAKE SURE TO HAVE THE BOX ON THIS FIELD CHECKED.

3. Confirmation page = either leave blank or insert confirm.htm if you have a confirm page such as in the blank web template.

4. Saved Fields = Date and Time, click the drop down and choose the selection that shows the day of the week, month, day, year.

Now click ok and save.

return to top

 
1. Click on the spot in your page where you want the picture located at
2. Click on file menu - insert, picture, then choose either clip art or from file, browse to the file you want (either clip art or an image file anywhere on your hard drive), select, ok.
2b. If you want a new free image or clip art from Microsoft, try - Click on file menu - insert, picture, then choose clip art, then clips online, and do a search. Select your image or clip art and download it. It will popup in a window and you can then right mouse on the image and choose Insert.

To resize image, make a thumbnail, or clickable picture to another page:

1. Click on image, then drag corners towards picture center. Then click Resample on the image editor bar

2. To make it a thumbnail, click image, then click the autothumbnail icon on the image editor bar. To set the size of the thumbnail BEFORE making thumbnail - click tools, page options, auto thumbnail, then set pixel sizes.

3. To set a hyperlink to another page - click image, click hyperlink icon, type page name or website address in field, save.

How to upload only pictures, media files, or pdf's

Login to website with front page
View Folders
Double click on desired folder to upload to (eg. images, res.pdf, etc)
Click File, Import, Add File,
Browse for desired file to upload and select
Click Ok (watch the status indicator on bottom left)
Done. (no need to save etc.)

return to top

Login Troubleshooter:

If you are having problems logging in with front page:

Please re-verify that

1. you have microsoft clients for networks installed, that you have
2. microsoft clients network login implemented and that
3. you have logon to network installed if you have a dial up modem.

How to do these steps above:

1. go into control panel, click networks, verify that ms clients for networks is installed.
2. While in networks, look at drop down and make sure clients for networks is selected and not family or windows logon. Make sure you have tcp/ip installed in the top window.

if on dial up modem

3. in control panel, click on internet options, click connections tab, highlight your dial up connection, click settings, click properties, click servers tab, check box 'logon to networks' and check 'tcp/ip', uncheck netbeui and ipx/spx UNLESS your computer is networked to another in your office/home and if you require these protocols.

if on cable modem

3. in control panel, click on internet options, click connections tab, highlight your dial up connection, click settings, click properties, click lan settings, check the 'use a proxy server' box and 'bypass..' box and then 'advanced'. in the white box type www.vlbf.org. Save your way out of there.

If you are still having a problem, check to see that you are connecting via http and not ftp in front page:

3. if you received a front page manual, it will tell you how to verify this.

other problems with connecting

1. in front page - click help, about, network test. write down results
2. make sure you have your firewall turned off eg. zone alarm, and/or norton virus program.
 

return to top

What are meta tags?

Meta tags are html code not viewed on the webpage but read by search engine indexing spiders. They are placed after the page code opening tags of <html> and before the <body> tags, in between the <head>  </head> tags. An example of what they might look like is:

<TITLE>Christian Business Resources</TITLE>
 

<META NAME="Description" CONTENT="Christian Internet gateway. Business & ministry resources, reference tools, directories, associations, organizations, support services, news.">
 

<META NAME="Keywords" CONTENT="Christian, business, ministry, reference, resources, financial, associations, organizations, directory, study tools, support services, entrepreneur, education, research, missions, search, men, women, senior, news, sports, commentary, affiliates, pastor, minister, clergy, priest, church, parish, health, fitness, wellness, community, principles, networking, referral, outreach, faith">

The Title tag is the most important as well as the first 50 words of text on your page. The Description and Keywords are secondary.

Have unique and specific page titles for each html page on your site.  Have 10-25 words of descriptive text stuffed with your keywords at the beginning of each page - prior to all your other site info. Make sure your site contains the info that your title and description speak of. 

DON'T list 'welcome to my ministry' or 'home page'

DO
- list 6-8 keywords for that page topic such as "Calvary Baptist Churches, Bishop, CA. - Eastern Sierras, Inyo County" or "High Tech Ministry - free website design for churches, ministries." or "Christian website designers & marketing firm for web sites"

 

Advanced Topics

How to 'include' files

Includes is simply inserting one file into another. It is generally used to insert a flash movie or global navigation for your website or highlight messages. It allows you to have the include on many pages and when you want to change the message or navigation - you only have to change the one include file. Saves much time!

Create a blank page and put your text or page hyperlinks on it,*
Save it as nav.htm or messages.htm*
Open the desired page(s) you want it to appear on
Click where you want to include another file
Click insert, web component, included content, page, browse to the page, ok.

* note that if you already have a flash movie you can skip these steps

How to create subwebs

To access and create a new subweb you can do it 1 of 2 ways. 

1. login and open your website on the webserver (not your local computer) with front page, click tools, server, admin home. It will ask you for your login name and password again. When logged in, choose the appropriate choices to create a subweb.

 
OR
 
Publish the site to the new subweb from your computer by opening the web on your computer, click file, publish web, then where the location is typed in - type in www.yourwebsite.com/newsubwebname   and front page will do the rest. Then to create separate permissions you'll have to login to the admin home ( instructions above )

return to top

How to insert javascript into an html page

open the web page,
copy the javascript from the place that is giving you the script eg. javascript.internet.com,
then click on the page where you want the script to appear,
click edit, paste special, select treat as html, ok, save.

Advanced technique:

Some scripts will require you to place part of the script within the <head> </head> tags.
To do so, open the web page, click html view tab at the bottom
Scroll to the very top of the page
click AFTER the <head> tag, click edit / paste, save

How to create and insert flash

First, you need to buy a flash editor program. Suggest either Swish - Swish Max $100 or Swish2 $50 or CoffeeCup Flash Firestarter 6.5 $ 49.00

Using the editor you will follow it's instructions and create 2 - 3 files - a swf file (the actual flash), the original editor file eg. .swi  and an html file. The html file will 'include' the .swf movie file.  Generally, you either use this html file for your home page or you 'include' it into a spot on another html file.

How to create a database, search page, and results page

There are 3 major phases of getting a webpage to access data in a database. You will need Microsoft® Access software and must be hosting your site on a Windows based web server to get it to work online. You can create everything on your computer but it won't work until you publish to the webserver.

You create the INPUT page first, create the DATABASE second, then the SEARCH & RESULTS page last.

create the INPUT page

Open the website, click insert, form

Click Table, insert, select many rows and 2 columns. One column will be for the label and the other for the form field

Create the input form fields. This will be used later to create the database for you. Be very thorough here and it will save you much work. Plan the data fields that you will want to see and store before starting this form. Note that the fields need to be either text fields or text area fields ( aka memo fields in the dbase ).

Save this page as forminput.asp or similar name with .asp extension.

create the DATABASE

When finished with the form, right click on the form and choose form properties.
Click the radio button - send to database. A new wizard will open.
Choose create database. It will then create the database for you with the field names matching the form fields you created.

then the SEARCH & RESULTS page

This is generally the trickiest part. Creating a basic search and display system is reasonably easy but making the search more relevant can be difficult. Largely, the difficulty is based on the number of fields you created (eg. 5 is easy 50 is hard ) and how many ways you want people to search.

First, create a blank page called search.asp
Click insert, database, results. A wizard will popup.
Follow through the wizard selecting the default choices UNTIL you arrive Step 3 of 4
This step is where you create the search form.
Click Edit List and Add or Remove the fields you want to be searched and displayed. then ok.
Click Options and specify the search criteria.

Choose Criteria, Add, then choose the drop down selection to one of the fields,
Choose 'contains' in the next drop down,
Type in search in the field "use this search field" and choose drop down of OR. Now ok.

Now click Ordering and Add the fields you want the results to be sorted by. One field is usually sufficient.

Now click Defaults, click Search, click Edit, then type in   isnull

Now move on to the Next step.

at Step 4 of 5 Choose List ( in the drop down ) and Paragraph ( in the other drop down )
Click next, on Step 5 of 5 choose Split Records, and enter 10, and make sure the Add Search Form box is checked.
Click finish.

Clean up the search form now. Format the label text as desired. Add a statement as to what items the search form will search for. eg. search by company name, company industry.

You may clean up the results display too by formatting the field names and even moving them around in whatever format you want them arranged in.

You will now be able to enter data into the dbase by using your browser and going to your forminput.asp page created above. Again, this only works for published sites.

The search.asp page will allow you to use your browser and see the information in the dbase.

To manage the database, see above  Note that if you have problems, please email me.

Advanced Database Techniques:

To create a webpage that allows you to modify or delete items in the database using your browser is a more advanced technique.

return to top

 

How to insert, modify EXISTING database contents: (you must have ms access on your computer)

Login to site with front page
View Files
Double click on the fpdb folder
Double click on the [database].mdb database. (It will open up on your desktop)
Open table and edit
Save
Close MS Access
Multitask back to front page and click on front page (the dbase will automatically upload and overwrite)
View changes on the display page for the database in your browser.

return to top

 

How to create Microsoft® Front Page web templates

You will create a design you like and then save it as a template.

File, save as, click file type drop down, choose  .tem
To use your new template, click File, New, Page or Web, then choose website templates ( on the right ) and select the name you gave your template.

Another way to do this is to open an existing template or theme, modify it, and save it as your new name. Note that you may need to create new images to be used for buttons or rules or dots. You will need to do this with a separate image editor.
 

To start, open a new web, choose a one page web, click format, theme, click all pages, select a theme that has some of the characteristics you'll want to modify.
Then click modify, and click around in the appropriate places making your changes. *
Then click Save As and give it a name.

* note that if you want to modify an image or choose a different image you'll need to create it. To do this, you will need to open your front page web, click folder list view, click tools, web settings, advanced, show hidden files.

Then, go into the _themes folder and find the image you want to replace. Note the name. eg. vbtn.gif  ( You may be able to double click the image and have it open up in your image editor to get started )

Create a new image and save it to that same location and overwrite it.

 

return to top