FrontPage 202 Handbook
By Richard Rost
This is the full text listing of one of our handbooks. There is a lot more to this handbook. The full-color screen shots have been removed for this page. This text is simply provided so that the search engines will index the course contents. This is so any customer searching for a topic can find what class it's covered in. If you are interested in more about information about our courses, click here for our complete course listing. For details on how to purchase a handbook, visit our handbooks page.
Microsoft FrontPage 202
Course Handbook Supplement
By Richard Rost
PO Box 1308, Amherst NY 14226 USA
First Printing 8/27/2004
Copyright 2004 by Amicron Computing
All Rights Reserved
Welcome to the 599CD Microsoft FrontPage 202 Handbook. This course follows FrontPage 201.
This handbook is designed to be a supplement to the full 599CD video course for FrontPage 202. We recommend you use this handbook to follow along with the class videos. This handbook is not meant as a stand-alone study guide.
We do recommend that you watch the course videos one time through, paying attention to the lessons covered. Follow along with the course videos using this guide. Take notes on the pages where needed. Then, watch the videos a second time, practicing the examples yourself on your computer.
Table of Contents
Table of Contents 2
Lesson 1. Guestbook 4
Lesson 2. Form Wizard 19
Lesson 3. Order Form, Part One 33
Lesson 4. Order Form, Part Two 50
Lesson 5. Data Validation 66
Lesson 6. Other Form Controls 72
Lesson 7. Review 85
Welcome to Microsoft FrontPage 202, brought to you by MyOnlineLearningPartner.com and 599CD.com. I am your instructor, Richard Rost.
Objectives for today’s class:
In this class we will be using Microsoft FrontPage XP and Windows XP, however this course is valid for any version of Windows, you should have no problems following this course if you are using FrontPage 2000 or 2003. FrontPage 98 users should upgrade to at least XP.
Lesson 1. Guestbook
A guestbook is a page where users can enter in the names, email addresses, and comments about your web site. This information is then posted on a public web page for all to see, in a journal-type format. Begin by opening your Web. Click on File > New > Page or Web.
Now click on Page Templates.
Select Guest Book. Click OK.
First, delete the comment. Click on it and hit delete on your keyboard.
Type in a new heading.
Notice at the bottom of the form is an include page component – the guestlog.htm file that will be created by this form. This is where all of the user comments will go.
Let’s open the Page Properties. Right-click anywhere on the page and select Page Properties.
Change your page title to “Guest Book.” Click OK.
Right-click inside your form and select Form Properties.
Notice the form will save results to the file guestlog.htm. Let’s also have it email the results to us, just so we can check entries for any problem (vulgar language, etc.)
Save your form as guest_book.htm. Preview it in your browser. Fill in some comments.
You’re taken to the Form Confirmation page. Click on the Return to the form link.
If you look at the guestbook form, you might not see your comments. Click on the Refresh button in your browser, and they should show up.
Notice your comments are now at the bottom.
Close your browser. Notice how you don’t see the guestlog.htm file. You might need to click on the Refresh button in FrontPage to bring that up.
Now, notice your guestlog.htm file appears.
You can double-click on this file to open and edit it. Be careful, however, because there is a form component on this page that says, “Form Results Inserted Here.” Don’t delete this component.
Again, let’s open the Form Properties for our guestbook form.
Click on Options.
Change the File Format for the saved file to HTML.
Let’s also save a second file in a text database format so we can pull up all of this information later quickly and easily (and maybe copy and paste it into Excel).
On the Email Results tab, let’s specify a Subject Line and a Reply To Line (even though we don’t have an Email field yet, we’ll add it in a minute).
Set your confirmation page to thankyou.htm.
Finally, let’s not save the Time on the form, and we’ll never have a Username, so check that box off.
Let’s add fields to capture the user’s name and email address. Type in a label:
Let’s put a text box here. Click on Insert > Form > Text Box.
Your text box appears.
Double-click on it to open its properties. Let’s just call it Name.
Do the same for Email, but this time you can just copy (CTRL-C) and paste (CTRL-V) the text box from the Name field. Open the properties, and call this new text box Email.
Save your work. Preview it in your browser. Enter some data.
Submit your form. Notice you’re sent to the thank you page now.
Return to the form and refresh the page. You should see your new comments added to the list.
Refresh your FrontPage file listing. Notice you now have a new file called guestlog-data.txt
Open that file and notice all of your results are in a text database format.
Also, if you load your email program, you should see the information has been emailed to you as well.
Lesson 2. Form Wizard
Click on File > New > Page or Web.
Click on Page Templates.
Click on Form Page Wizard.
A welcome screen appears. Click Next.
Click Add to add a question to your form.
Click on contact information and click Next.
Select which bits of personal information you want. Click Next.
We now have one question group on our form. Click Add to add another.
Select personal information and click Next.
Select the types of information you’d like to gather. I’ll check off Name because we already collected it with the previous question group.
And now you have two question groups on your form. Click add to add one more. Select One of Several Options. Click Next.
Now, enter in a list of options for the customer to pick from. I entered in “PC,” “Mac,” and “Both” to ask the user what kind of computer he uses. I also selected Radio Buttons as much choice of controls, and I gave it a name of “PCOrMac.” Click Next.
We now have three question groups. Click Next.
Now you’re asked how you would like to present these question groups. Leave the default options. Click Next.
How do you want to save your results? I selected text file. Click Next.
We’re done. Click on Finish.
Notice your form has been built for you.
Change the headline to “Marketing Survey.”
I deleted the “explanation” line.
Scroll down and explore the rest of your form.
Let’s take a look at the form properties. Right-click in the form, select Form Properties.
Notice the send to file name is strange. It has an “fpweb” in it. This is just because we haven’t saved our form yet. Don’t worry about that too much.
You can change the filename if you want, but don’t change any of the rest of it. I changed mine to “marketing.txt.”
Click on the form properties Options button. I set up my confirmation page to our standard thankyou.htm page.
Click OK. Save your work. I named this page marketing.htm. Preview the page in your browser.
Your thank you page comes up.
Notice the results file is in your private folder.
Open it up to see your results.
Lesson 3. Order Form, Part One
In this lesson we’re going to build a form from scratch. Start with a new blank page.
Let’s immediately save this page. Call it orderform.htm.
Begin with a simple heading.
Now click on Insert > Form > Form.
A blank new form is inserted into your page.
Hit ENTER a couple of times to give yourself some space inside the form.
Delete the Reset button.
Let’s insert a table to format our form with. Create a 4x2 table using the toolbar button.
Notice your table appears.
Let’s turn the table borders off. Right-click inside the table and select Table Properties.
Set your border size to zero (0). Increase the cell padding to four (4). Click OK. Resize the columns as desired.
Type in a label for the customer’s name:
Click on Insert > Form > Textbox to insert a text box for the first name.
A text box appears.
Resize it (first names aren’t that long).
Double-click on the box to bring up its properties. Let’s call it FirstName.
Now, let’s just copy (CTRL-C) and paste (CTRL-V) this box to create a new box for the customer’s last name.
Double-click on it to edit its properties. Name the box LastName.
Continue to do the same things for fields company, address, city, state, zip, phone, fax, and email fields. Remember to resize the boxes as needed, and to change the properties for each to give it the appropriate name.
Since we’re letting our customers order computer systems, we now want to create a field to allow them to select the type of microprocessor that’s in their computer. Create the following label:
Now create a drop-down box. Click on Insert > Form > Drop-Down Box.
An empty drop-down box appears.
Double-click on it to edit its properties. Change the name to ProcessorType.
Click on the Add button to add some entries.
Start with a (Select One) option, and make it the Selected option.
Add another one.
I’ve added a couple of different processor types.
When you’re done, click OK.
And now our Processor drop-down box is complete.
Let’s create another drop-down for Hard Drive. Just copy-and-paste the Processor box.
Double-click to edit the box. Change the name to HardDrive.
Remove the three processor items, and add a few hard drive types.
Let’s create one more for Memory.
Add the appropriate selections.
Lesson 4. Order Form, Part Two
Let’s create a section to let the customer pick optional components.
Click on Insert > Form > Checkbox.
Your checkbox appears. Type in a label after it as follows:
Double-click on it for its properties. Type in a name. I called mine just DVD.
Let’s set the default state to Checked.
Copy and paste the checkbox and its label to create another one.
Change the label to Keyboard.
Double-click to bring up the properties. Change the name to Keyboard.
Repeat the same steps for a Mouse and a Joystick. I’ve set the joystick to “not checked.”
Now we’ll make a group of option buttons for the customer to select their warranty.
Click on Insert > Form > Option Button.
Your option button appears. Type in a label for it as shown:
Double-click on the option button to bring up its properties. Type in a Group Name of “Warranty.” Remember the group name has to be the same for each option button in the group.
Type in the value. I typed in 1YearPL. This way, when I get my results back, I’ll see “Warranty: 1YearPL” when the customer selects this. Copy and paste this whole thing and create another one. Change it to “2-Year, Parts & Labor.”
Double-click to bring up its properties. Change the value to “2YearPL.” Note that you might need to change the 1YearPL back to the “selected” item.
Repeat the same steps for a 3YearPL button.
I also created a checkbox for an Optional On-Site Warranty.
Next, we’ll need a place for comments.
Click on Insert > Form > Text Area.
A text area box appears. You can resize it if you want to make it bigger or smaller.
Double-click to open its properties. Change the name to Comments.
On the Table Toolbar we can click on the Vertical Alignment Top button to make the “Comments” label line up to the top of the cell it’s in.
Save your work. Now, let’s set up the form properties. Right-click anywhere in your form and select Form Properties. Set the send to filename and email address as shown:
Click on the Options button. Set the file results tab as shown:
Click on the email results and set the options as follows:
Set the confirmation page.
Set the saved fields as shown:
Click OK. Save your work. Preview it in the browser. Fill in a sample order.
Submit your form and you will be taken to your Thank You page. Check your private folder. You should see your orderform-results.txt file.
If you open it up, you should see your data.
Note: you might be tempted to collect credit card data on your web site. We recommend you do not do this. The credit card data is not encrypted because your web is not secured. We will discuss securing your web site in a future class. Secure sites begin with https:// and will have a little lock on the status bar of the browser window.
Lesson 5. Data Validation
Data validation is basically setting guidelines (rules) for what types of information can be submitted on your forms. Let’s begin by looking at the properties for your First Name text box. Double-click on it.
Click on the Validate button.
By default the form validation is set to No Constraints which means people can basically type in anything they want.
You can set a data length (how many characters your name has to be). I’ve set it from 2 to 20 characters.
Click OK, OK. Save your page. Preview it in the browser. Don’t type any data in, and click on Submit. It will tell you that data is required for First Name.
Display Name is simply the name that shows up in the validation error messages. So instead of our users seeing “FirstName” as they did above, we can set it to “First Name” which is a little better.
You can specify what type of data will go into this text box: either text, integer, or number. Integer requires counting numbers (no fractions) and their negatives, whereas Number lets you type in any number you want. In this case, we want text.
You can specify which characters are allowed: letters, digits, whitespace (things like a TAB or SPACE character), or other characters that may be allowed (like apostrophes).
If you were creating a numeric field, you can specify how the digits are grouped (comma, period, space, or none) and whether or not to use a comma or a period for the decimal point. We don’t need those for this field.
For numeric fields, you can specify rules for the values, such as “the value must be greater than or equal to 10.” Play with the values at your leisure.
Text areas have a similar data validation form to text boxes. Checkboxes do not have a validation option – they’re either on or off. Option Buttons only have an option specifying whether or not the field is required (and of course a spot for a display name).
Drop-down boxes also have a display name, a data required option, and an option to disallow the first choice – like our (Select One) choice.
Lesson 6. Other Form Controls
In this lesson we’ll look at some of the non-standard optional form controls. Let’s say you don’t like the standard Submit button that comes with your forms.
We can insert a new button using an image (picture). Now you can either go out to the Web and find another submit button image to “borrow,” or you can make your own using Microsoft Paint. We talked about Paint in our Microsoft Windows courses. Open Paint (it’s in your Start > Programs > Accessories folder). Start off by using the rectangle tool.
Next, use the fill tool, click on the color yellow, and then fill in your box.
Use the text tool to create the word “Submit.” Make it dark blue, Arial, and 12 point.
Now, change the background color to transparent.
And now move the word over the button background.
Let’s zoom in a little bit.
Let’s create a shadow effect. Use the line tool with a grey forground color.
Zoom back out to 1x.
Now, using the rectangle select tool, select your button. Copy it to the clipboard (CTRL-C).
Create a blank new page in FrontPage. Paste it in (CTRL-V). Resize it if needed.
Save your page. We don’t need the page itself. Just call it junk.htm.
We do care about the picture. When it prompts you to save the image, rename it to submit-button.gif and click OK.
Now, click on your submit-button.gif file in the Folder List and cut it out with CTRL-X. We’re going to move it into our images folder.
Right-click on your images folder and select Paste.
Now the picture is in your images folder. Delete your existing submit button. Now click on Insert > Form > Picture.
Browse to the folder that holds your image. You can type in the whole address if you need to: http://www.pcresale.net/images/.
Double-click on your submit-button.gif image.
Notice your submit button image is on the form.
Save the page. Preview it in your browser. Notice the image is now a button.
Let’s take a look at Advanced Buttons. Go ahead and delete the submit button we just created. Click on Insert > Form > Advanced Button.
An Advanced Button appears.
Notice you can type right on the button, and you can change the font attributes.
You can even insert a table and an image inside your button.
Save it. Preview in browser.
Now right-click on the button and pull up the Advanced Button Properties.
Give the button a name. I’ll call mine SubmitButton. Also, change the button type to submit. Click OK.
Next, let’s insert a Group Box. Make some extra room on your form and select Insert > Form > Group Box.
A group box appears. You can click and change the label. I changed mine from “Group Box” to “Options.”
You can open it’s properties and change the alignment of the label from left to center or right.
The group box is really only cosmetic. You can use it to enclose different sections – like a group of option buttons – but they’re not needed.
You can use the label control to make the label text next to a field act like the box itself. For example, highlight the text “DVD Player” along with the checkbox it’s next to.
Now click on Insert > Form > Label.
Nothing appears to happen. However, if you save your work and preview in your browser, you’ll see the difference. Click on the text “DVD Player” now and the box will check on or off. This is because they’re linked.
Lesson 7. Review
Review of topics covered in today’s class.
Tell us what you think. Log on to www.599cd.com/Survey and take a short survey about this course.
Take your skills check quiz at www.599cd.com/Test. If you pass, you can print out a Certificate of Completion.
What’s next? Visit www.599cd.com/FrontPage for our complete list of Microsoft FrontPage courses.
Need Help? Visit www.599cd.com/TechHelp for Microsoft FrontPage assistance.
Make sure you’re on our Mailing List. Go to www.599cd.com/MailingList for details.
Contact Us. If you have any questions, go to www.599cd.com/Contact for information on how you can contact us by phone, email, or live online chat.
This course, handbook, videos, and other materials are copyright 2002, 2003, 2004 by Amicron Computing. All rights reserved. No portion of this course, handbook, videos, or other course materials may be reproduced, copied, edited, or otherwise distributed without the express written permission of Amicron Computing. Amicron Computing shall not be held liable for any errors or omissions in this document.
This document may not be used as part of a training course without express, written permission from Amicron Computing and the purchase of an Instructional License. For details, contact:
PO Box 1308
Amherst NY 14226 USA
Keywords: frontpage handbook