|
Microsoft FrontPage
Intermediate
Tutorial:
Contents:
Please note that this is not meant to be a step by step tutorial. This site is intended to give you, the more advanced FrontPage user, an opportunity to add 'extras' to your site and steps to do so are located under the appropriate heading. If you have basic questions, review the Microsoft FrontPage Beginner Tutorial . If you already have a web site created, you may want to move on to the Advanced FrontPage Tutorial.
Throughout the tutorial there are notes in red italics to help you troubleshoot, or do an extra step, if you wish to.
Pictures appear after almost every step for your clarification.
Although there is one approach shown for each feature, there are several possible routes to take when working on your web page, including toolbar icons and keyboard commands.
On your mouse you will see that there are two buttons that you can click on. Unless otherwise stated, you are clicking on the left button.
While it may not be noted at every step in the tutorial, it is imperative that you make a habit of saving your work as you go. Once the page is originally saved, continuing to save ongoing work is as easy as clicking on the small 'Save' disc icon at the top left of your screen:
Accessing your Teacher Web Space from Home
Notes:
Step 1 Open up FrontPage (FP) by clicking on the FP icon on your desktop:
Note:
Step 2 Once FP is open, click on 'File', then 'Open'. In this new window, type your address into the 'File name' box (http://hrsbstaff.ednet.ns.ca/yourusername):
Note:
Step 3 Type in your username and password. Your web folder should then open up, allowing you access to your site to make changes, add pages, etc.:
Note:
Step 1In FP, right click onto the page you wish to change the background and click on 'Page Properties':
Step 2 In the new window, click on the 'Background' tab, then click on the box beside 'Background picture':
Step 3 Click on the 'Browse' button, then choose the location of your picture:
Click on the picture you want, then click 'Open' on that window, then click on 'OK':
Note:
To insert a table, click on the 'Insert Table' icon at the top of the screen, hold the mouse button down and drag over the squares to 'draw' the size table you wish (ie. 2 by 3, etc):
Note:
Adding and Deleting Rows, Columns, and Cells Note:
Highlight the cell, row or column you want to work with before clicking on the command (insert row, etc.). Refer to Toolbar Commands for further actions. There are also specific commands under the word 'Table' at the top of your screen.
Step 1 Right click on the table you have created and click on 'Table Properties':
Step 2 Go to 'Background', and using the drop down arrow, choose the color you wish:
Notes:
Many pictures can be made to appear without a background outline or box around them:
Step 1 Highlight the picture by clicking on it, which will automatically call up your Picture Toolbar (see Toolbar Commands for further details).
Step 2 On the picture toolbar click on the
'Set Transparent Color'
Note:
An 'Alt Representation Text' Tag is a small tag that appears when you hold your mouse/cursor over a picture on an Internet site. Tags can act as clarification, introductions, etc. Hold your cursor over the picture below to see the example:
Step 1 After inserting a picture, right click on top of it and click on 'Picture Properties':
Step 2 In the new window, click on the 'General' Tab and enter your Alt. Text Tag in the 'Alternative representations /Text' area. Click 'OK':
Step 1 Highlight the picture by clicking on it, which will automatically call up your Picture Toolbar (see Toolbar Commands for further details).
Step 2 On the picture toolbar, choose then
click on the 'Rotate/Flip'
Note:
The 'Auto Thumbnail' option shrinks the size of your picture to allow for faster viewing time on the Internet (large pictures can slow a page down). Viewers can then click on the picture they want to view in detail to get the 'bigger picture'. Thumbnails are especially useful when you have a number of pictures (such as those from a school event) to display.
Step 1 Highlight the picture by clicking on it, which will automatically call up your Picture Toolbar (see Toolbar Commands for further details).
Step 2 On the picture toolbar, click
on the 'Auto Thumbnail'
Picture Gallery is a FrontPage option that allows you to have your pictures arranged and thumb nailed automatically with captions if desired.
Step 1 Click on the word 'Insert' at the top of your screen and slide down to 'Picture' and over to 'New Picture Gallery':
Step 2 In the next window, click on 'Add', and choose the location of your pictures. Continue doing this until you have all of the desired pictures listed:
Note:
Step 3 Click on the 'Layout' tab. You may now choose the layout for your pictures; notice that there is a sample and description for each of the layouts. Click 'OK' when you are done:
Hyperlinks are like a launch pad that sends you to another place inside your site or out onto the World Wide Web. You can create three types of links:
To create an external
hyperlink, highlight or select the text or picture that you want to
link, click on hyperlink icon (
Note:
To create an
internal
hyperlink, highlight or select the picture or text you want to
link, then click on the hyperlink icon
Note:
Bookmarks are a type of internal link that links to a specific spot on a page. A bookmark is a location or selected text on a page that you have marked. You can use bookmarks as a destination for a hyperlink. For example, if you want to display a certain section of a page to the site visitor, add a hyperlink with the bookmark as its destination. When the site visitor clicks the hyperlink, the relevant part of the page is displayed, rather than the top of the page. You can also use one or more bookmarks to find locations on a page. For example, add a bookmark to each main heading on a page. When you are editing the page, you can quickly find each section by going to the corresponding bookmark.
Step 1. Position the insertion point where you want to create a bookmark, or select the text to which you want to assign the bookmark. Step 2. On the 'Insert' menu, click 'Bookmark':
Step 3. In the 'Bookmark name' box, type the name of the bookmark (spaces are allowed) and click 'OK':
Step 4.
To hyperlink to a bookmark, select
what you want to link to and then click your hyperlink icon
( Step 5. In the resulting pop-up box, click on 'Bookmark' or 'Place in this Document':
Click or select the Bookmark you are hyperlinking to and press 'OK':
Email hyperlinks allow your viewers/visitors to click on the link and send email without having to type an email address. Note:
Step 1Highlight text or a picture
and click on the
Step 2 Type in the e-mail address (that will receive the mail) in the new window and press OK:
A form allows visitors to your site to give feedback directly from your page or site, search your site for specific information, take an on-line test, an interactive WebQuest – the possibilities are unlimited! A search page allows viewers of your site to search for specific material. Step 1Open a new page. Format your colours, background, etc. Step 2At the top of your page select 'Insert' and click on 'Web Component'. In the new window that pops up, click on 'Web Search':
Step 3Click 'Finish'. A window will appear that will allow you to change the properties/settings on your search form, although it is not necessary to change anything:
If you would like to change the label of the form and the buttons on the form do so in the first tab. Click on the 'Search Results' tab. It is here that you can have the FrontPage component display the results with date, file size, etc. Save your page. Note:
Step 1Select 'Insert', 'Form', 'Form':
Step 2If you would like a heading on your form, press 'Enter' to insert a line and move up to that new line:
The next step is to add fields to your form. A field can be a one-line text box (good for short answers), a text area (good for long responses), a check box (generally for yes or no answers and might be a part of a group of responses where more than one answer can be submitted), a drop down menu (to give a selection of specific answer choices) and an option button (which is most often used in a group where only one response can be selected). Take a look at the Sample Forms Page to see the above forms in 'action'. Step1From the top of your screen, click 'Insert', 'Form', 'Text Box'. A box will appear at the point where you placed your cursor. You can type instructions or an identifier (such as 'name') beside the text box:
Note:
Step 2 Right click in the form and select 'Form Properties'. In the new window, you have the option of deciding where the results of your form will go. FP automatically defaults it to your 'Private' folder in your web site (see that folder in your folder list to the left of your screen), but you can also send it to an email address, etc.:
Step1From the top of your screen, click 'Insert', 'Form', 'Option Button'. A button, along with 'Submit' and 'Reset' buttons will appear at the point where you placed your cursor. You can type instructions or an identifier beside or above the option button. Repeat this step to continue inserting as many option buttons as you need:
Step 2Right click directly on each of the radio buttons in turn and select 'Form Field Properties' from the menu. A window will appear that allows you to place a name (rather than 'R1') on your radio button so that you will be able to read results from the page. Click 'OK' after you name each button:
Note:
Step 3 Right click in the form and select 'Form Properties'. In the new window, you have the option of deciding where the results of your form will go. FP automatically defaults it to your 'Private' folder in your web site (see that folder in your folder list to the left of your screen), but you can also send it to an email address, etc.:
Step1From the top of your screen, click 'Insert', 'Form', 'Check Box' . A check box, along with 'Submit' and 'Reset' buttons will appear at the point where you placed your cursor. You can type instructions or an identifier beside or above the check box. Repeat this step to continue inserting as many check boxes as you need:
Step 2Right click directly on each of the check boxes in turn and select 'Form Field Properties' from the menu. A window will appear that allows you to place a name (rather than 'C1') on your check box so that you will be able to read results from the page. Click 'OK' after you name each check box:
Note:
Step 3 Right click in the form and select 'Form Properties'. In the new window, you have the option of deciding where the results of your form will go. FP automatically defaults it to your 'Private' folder in your web site (see that folder in your folder list to the left of your screen), but you can also send it to an email address, etc.:
Step1From the top of your screen, click 'Insert', 'Form', 'Text Area'. A box will appear at the point where you placed your cursor. You can type instructions or an identifier (such as 'comments') beside the text area:
Step 2 Right click in the form and select 'Form Properties'. In the new window, you have the option of deciding where the results of your form will go. FP automatically defaults it to your 'Private' folder in your web site (see that folder in your folder list to the left of your screen), but you can also send it to an email address, etc.:
Step1From the top of your screen, click 'Insert', 'Form', 'Drop-Down Box'.
Step 2Right click directly on the drop down box and select 'Form Field Properties' from the menu. A window will appear that allows you to place a name (rather than 'D1') on your drop down box so that you will be able to read results from the page. Step 3While still in the 'Form Field Properties' for the drop-down box click the 'Add' button. Type the items you would like in your drop down menu. Continue adding items to your drop down menu and press the OK button when you are done:
Step 4Right click in the form and select 'Form Properties'. In the new window, you have the option of deciding where the results of your form will go. FP automatically defaults it to your 'Private' folder in your web site (see that folder in your folder list to the left of your screen), but you can also send it to an email address, etc.:
Notes:
FrontPage automatically creates a confirmation page for the viewer. However, if you would like to customize your confirmation page follow these steps. Step 1Click the new page button to start a new page. Insert what you would like the viewer to see after they have submitted the form. Step 2Right click in the form you have created on your forms page and select 'Form Properties' . In this new window, click on the 'Options' button and then on the 'Confirmation Page' tab. 'Browse' through your folder to click on the address of your confirmation page. Click 'OK' your way back to your page.
A date and time stamp is a record for both you and your site visitors to see how up to date you site is: This page was last edited on Friday June 17, 2005
Step 1At the top of your screen click on 'Insert', then select 'Date and Time':
Step 2 In this new window, select the format for both the date and the time (if you want viewers to also know this):
A counter allows you to keep track of how many
visitors you have to your site from any given time:
There have been
Step 1At the top of your screen click on 'Insert', then select 'Web Component'. From the options given , select 'Hit Counter' and click finish:
Step 2When the new window pops up, select the counter style that suits your site:
Note:
Step 3You can now insert text around the
hit counter, such as "You are the
Page transition is a special effect that you can place on your site that affects the way the site/page is entered or exited. The 'Page Transition' example page shows one effect.
Step 1At the top of your screen, click on 'Format', then 'Page Transition'. Choose your effect from the new window:
Step 1At the top of your screen click on Tools, then 'Server' and 'Change Password':
Step 2 The Internet window that opens up is fairly straight forward:
Rollover is a special effect for hyperlinked text. The links on this page have a bold effect when the mouse/cursor is held over them.
Step 1Right click on your page and go to 'Page Properties'. Step 2 Click on the 'Background' tab at the top of the new window. Step 3Click on the checkbox next to 'Enable hyperlink rollover effects', then the 'Rollover Style' button:
Step 4 Choose the style/effect you want for your page's hyperlinks, click 'OK' and save:
Target Frames allow the hyperlinks on your page to open in different ways. The most common target is a new window (such as the one for the Keyboard Commands link). This is especially useful when you are sending people to external links that you have no control of as far as content. It allows your viewers to easily return to your page without using 'back', and it also may indicate to your viewers that you did not create the material for that link.
Step 1Right click on a hyperlinked picture or text and go to 'Hyperlink Properties': Step 2In the new window, click on 'Target Frame':
and in the new window that opens up, choose your Target Frame':
Note:
Step 1At the top of your screen click on 'Insert', then 'Web Component':
Step2Click on 'Marquee' and 'Finish':
and fill in the form with the information you wish to 'Marquee' (you can also specify directionality, background color, speed, etc.):
If you have any questions, comments, concerns, ideas for other items you'd like to see in this tutorial, please contact Nancy Barkhouse. Good Luck! |
||||||||
tool, then click onto the white background that you are trying to
eliminate. A box may pop up warning that changing the
background of the picture may alter its' appearance, but you can try
it and then undo
immediately if you don't like it.
icon you need.
icon.
) 
on your 'Standard Toolbar (see
. If
text is bookmarked, the text is displayed with a dashed
underline. 
will
appear.
