Microsoft FrontPage 2000 Workshop II

John Elfrank-Dana -- Director Technology & Instruction

Teachers Network

 

Materials Required:

1. Microsoft FrontPage 2000, access to a web server with FrontPage 2000 Extensions. 2. Microsoft Excel or Access (for cgi import section only).

Topics Outline:

CGI Forms

Frames

Forums

 

I.                   Review: Q & A Format. 

 

Create a web on the hard drive.  Name it your initialsweb (First MI Last), e.g. jseweb

 

II.                Introducing CGI Forms - Common Gateway Interface forms have many uses on a web site.  Their most popular use is to collect data from visitors to your web site.  These forms can collect information from names and addresses to student responses on an exam.  These results can then be e-mail to you and stored in text file or database on the web server.

 

Usually the web designer has to be fluent in a programming language called Perl to develop such forms. With FrontPage you can create these forms yourself.

 

Let’s get started

 

 

  1. Click on FILE, NEW. Let’s pretend we are putting together an on-line course evaluation form.  Enter the appropriate heading.
  2. On the menu bar, click on INSERT FORM.  You will notice the menu to the right.  This is where your input options are.  Click on ONE LINE TEXT BOX. This one you use for names, Scrolling Text for long answer (essays, comments, etc.)., Check Box for Yes/No type responses, Radio Button for one answer, Drop Down Menu to choose from a list.
  3. Put the blinking cursor in front of the box that appears, using the table button from the tool bar  drag out two columns and one row (watch me.) Putting the form in a table grid give you more control over the appearance.

f-2

 

 

f-1

 

 

 

Note that you will need to move the submit and reset button below by putting the cursor in front of submit and pressing the enter key a few times.

 

 

Elfrank-Dana, FP Workshop II p.2

 

4.      Put the cursor in the left-hand cell of the table and type “First Name.”  Next click once on the form box, then cut and paste into the right-hand cell.  Hit the TAB key to create another row.  Repeat the above with Last Name, Insert Form, One-line Text Box…

5.      Next, RIGHT CLICK in the table, choose TABLE PROPERTIES, Set the width to 450 Pixels. This gives your table consistency in size regardless of the size of the monitor of the user or resolution setting.

f-3

 

f-4

 

 

f-5

 

 

  1. DROP DOWN MENU -Create another empty row.  In the left-hand cell type a question that would require a choice from a menu (e.g What is your subject area?) Move to the right-hand cell by pressing the TAB key. Click on INSERT, FORM, and choose DROP DOWN MENU. Double click on the Box that appears.

 

7.      CHECK BOX – Create another black row in the table.  Make up a selection that would require a yes or no response. Insert a check box form next to each.

 

8.      RADIO BUTTON – Repeat the same as above except choose Radio Button from the list. 

 

f-6

9.      PROPERTIES – Now that you have created the form, you should go through and make sure that the data will be coming to you in a preferred fashion.

 

You have two tasks: a. to name each field and b. to decide where the data will go.

 

10.  You can make a REQUIRED FIELD by clicking on the VALIDATE button in the Text Box Properties and checking REQUIRIED.

 

 

 

 

 

DECIDING WHERE THE DATA WILL GO:

RIGHT CLICK anywhere in the dashed box area and choose FORM PROPERTIES. Edit the file name to read: _private/yourlastname.txt

Enter your e-mail address in the field below.

 

 

 

NAMING THE FIELDS: DOUBLE CLICK on the first name field. You will notice a box will appear.  Rename the field as below:

 f-7 Do the same for all the fields – renaming them to names that represent the data.  RULE: these characters are not allowed: /, #, ., nor starting with numbers. Use an underscore instead of a space. For the RADIO BUTTONS, be sure that they all have the same group name.

 

Now is a good time to show you the html view in front page. You will notice in your editor (in page view) an html tab at the bottom.  CLICK ONCE on the COMMENTS FIELD, then on the HTML TAB. You will notice the corresponding code to the selected field is highlighted.  This makes trouble shooting easy.

 

Add this line of code to the highlighted area: wrap= “virtual” so that it looks like this: 

and leave the rest alone.  This corrects a problem with Netscape’s inability to wrap text in the scroll box.

 

 

f-8

 

 

 

Let’s test it.  Save this file as: yourlastname.htm

 

Click on FILE, PUBLISH WEB,

Type in this exact location: http://www.elfrank.com/bmcc

Leave all settings at the default and click on PUBLISH.

When prompted enter USERNAME: bmcc  PASSWORD: frontpage  (all lower case).

 

Let’s dress it up with backgrounds and font changes.

 

Retrieving the data with Excel

 

Once you have your form created and there has been one submission, FrontPage automatically creates the file to hold your incoming data.  You named this file when specifying where you want your form results above (see figure f-8). The name of your file was: yourlastname.txt and it resides in the _private directory.  

 

  1. Opening the online web: click on FILE, OPEN, WEB FOLDERS (network places for Windows 2000 users), and type in the address where it asks for file name: http://www.elfrank.com/bmcc 

  2. Login with username: bmcc  password: frontpage, you will click open twice.

  3. Once you see the folders and files fall in the left pane, double click on the _private folder.  Go to your file (lastname.txt) and double click to open.  Choose text editor (notepad) if prompted. You will see your results with quotes and commas.

  4. Save the file to your computer by going FILE, SAVE AS, and save to a convenient location (My Documents or Desktop).  Be sure you save as type "Text Document" and "ANSI" coding if given these options.  FrontPage will export the file from the web server to your computer.  Close the file on the web server if still open.

  5. Launch Excel.  Once in Excel go FILE, OPEN, navigate your way to the directory where you stored the file, select ALL FILES in the "files of type box."  

f-9

 

  1. You will see your downloaded file.  Double click on it to open.  The text import wizard will appear.  Choose DELIMITED as the data type.

f-10

Click on NEXT

  1. Next specify COMMA as the delimiter (FrontPage defaults to comma delimitation). Click on  NEXT until finished.

  2. You will see your results in an Excel spread sheet ready for computation or importation in to Access or any other database.

 

III. Introducing Frames

1. In FrontPage click on FILE, NEW, PAGE and choose the FRAMES PAGES tab. You will notice the preview pains in the lower right corner as you single click on each template. We will start with the Banner and Contents template so double click on it. 

 

 f-11

 
2. You will see four sections in gray.  Each is its own page. Click on NEW PAGE for each section.  Note that you are working on four different files in one view.  Remembering this will help prevent confusion in working with Frames. f-12

3. To create an addition frame put the mouse pointer on the gray border of the top frame.  While holding down the CTRL KEY DRAG THE FRAME BORDER down the page and release about 3/4 of the way.

You will notice a fourth frame has been created.  You can do can also create frames vertically the same way.
4. Save your pages by clicking on FILE, SAVE.  You will notice that you will be prompted to save 4 files.  Name each appropriately (e.g. the top frame you might want to call BANNER, the side frame- CONTENTS, the middle frame- MAIN and the bottom - FOOTER. 

f-13

5. Control of frame sizes is a paramount concern of web masters. You can control the size by specifying Pixels or Percent in the frame properties. This is perhaps the trickiest part of dealing with frames. RIGHT CLICK once in one of your frame areas and choose FRAME PROPERTIES. You will normally be concerned with the height of the banner and footer and the width of the contents frame. I recommend keeping the footer to no higher than 35 pixels and the header no higher than 50 pixels.  The contents frame should generally be around 150 pixels.  This all assumes you want your main frame to be the predominant one.

f-14
6. Simply begin entering your text in its appropriate frame. Create a couple of files that you want to load from the contents frame.

7. Linking so that page load in the correct frame. Highlight the text you want to hyperlink, when prompted add the name of the file to link to, then click on the button shown below.

f-15

8. You will see a diagram appear.  Click once on the frame you want the file to appear in. If you want a non-framed page to load choose "whole page" or "new window."

f-16

copyright © 2000 John Elfrank-Dana, http://www.elfrank.com

Feel free to duplicate for non-commercial use.  Please cite authorship and source.

Date last updated: 02/05/08