Click on any linked lesson below 
                           
 
Contents:

• Before We Start
• Accessing your Teacher Web Space from Home
• Background Pictures
• Tables
  • Adding and Deleting Rows, Columns, and Cells
  • Background Colors
• Picture Manipulation
  • Transparent
  • Alt Representation Text Tags
  • Rotating
  • Thumbnails
  • Picture Gallery
• Hyperlinks
  • To 'Outside'/External Sites
  • Internal Link
  • Bookmark
  • Email Addresses
  • Rollover Styles
  • Target Frames
• Marquees
• Forms
  • Search Page
  • Inserting a Form
  • One Line Text Box
  • Option Button
  • Check Box
  • Text Area
  • Drop Down Box
  • Confirmation Pages
  • Sample Forms Page
• Date and Time Stamp
• Counter
• Page Transitions
• Changing your Password

Before We Start

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: 

• This method to access your website requires a few extra steps than is found in the Microsoft FrontPage Beginner Tutorial and is only necessary to do this method if FrontPage is not your default editor.
• Obviously, you need Microsoft FrontPage installed on your computer!

Step 1 Open up FrontPage (FP) by clicking on the FP icon on your desktop:

Note:

• If the FP icon is not on your desktop (and you know the program is definitely installed on your computer), click on the start button on the bottom left hand corner of your screen, slide your mouse over to 'all programs':   

Slide over and click on the FP icon/listing.  If you cannot locate FP, do a 'Search' of all your files and folders (also off of the start bar as shown above).

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:

• If 'My Webs' does not appear in the 'Look in:' box at the top of this window, click on the drop down arrow beside this box and choose 'Web Folders' or 'My Webs':

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.:

return to top of page

Background Pictures

Note:

• You must have a background picture saved in order to put it on your web page. 

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:

• If you click on the box next to 'Watermark', it will allow your page's words, pictures, etc. to 'slide' over the background when it is viewed on the Internet, the background will be stationary when the page is scrolled up and down.

return to top of page

Tables

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:

• When you right click on your table and click 'Table Properties', a new 'window' pops up.  In this new window, there are 3 items that are commonly addressed:

return to top of page

Adding and Deleting Rows, Columns, and Cells

Note:

• One of the quickest ways to work with tables is to have the table toolbar on your screen.  If you do not have it, click on 'View' at the top of your screen, scroll down to 'Toolbars' and click on 'Tables'.

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.

return to top of page

Background Colors

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:

 

return to top of page

Picture Manipulation

Notes:

• In order to work with a picture, the picture must be highlighted.  In order to highlight a picture, click directly on it; boxes or 'handles' should appear in each corner of the picture.  By clicking and dragging on a handle, you can stretch, shrink, widen, etc. the appearance on the picture.
•  Toolbar Commands will provide you with several tools to work with your images

return to top of page

Transparent

Many pictures can be made to appear without a background outline or box around them:

This:  as opposed to

this:

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'    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. 

Note:

• Some pictures cannot have their background changed, most notably animated pictures.

return to top of page

Alt Representation Text Tags

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':

return to top of page

Rotating

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'    icon you need.

Note:

•  You can always undo immediately if you need to. 

return to top of page

Thumbnails

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'    icon.

return to top of page

Picture Gallery

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:

• You may choose at this point to enter captions for each of the pictures.  As you click on each picture name, you have the opportunity to decide on the font styles, and then type in the caption for each:

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:

return to top of page

Hyperlinks

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:

External:	A link that will take you to another site on the Internet/World Wide Web.
Internal/Bookmarks:	Link that is associated with another area in the same web.
E-mail:	This  link allows you to send e-mail from your web page.

 External Hyperlink

To create an external hyperlink, highlight or select the text or picture that you want to link,  click on hyperlink icon () on your Standard Toolbar (see Toolbar Commands for further details), and type the URL address of the desired site into the URL/address box at the bottom of this new window.  You can also copy the address from the address bar on the Internet and paste it into this box.  Then click OK:

Note:

• As noted above, you can copy and paste an address into the Hyperlink Address box rather than type it all in (especially handy with very long addresses).  Locate the site/page you want to link to on the Internet and highlight the address in the address bar.  Right click on the address and click on 'Copy', or press 'Ctrl' and 'C' on your keyboard:

Back in FrontPage, click your mouse/cursor into the Hyperlink address box, and press 'Ctrl' and 'V' on your keyboard.  See Keyboard Commands for other keyboard shortcuts).

return to top of page

Internal Hyperlink

To create an internal hyperlink, highlight or select the picture or text you want to link, then click on the hyperlink icon on your 'Standard Toolbar (see Toolbar Commands for further details).Highlight the file you want to link to and press OK:

Note:

• Right clicking on top of a word or picture will also allow you to choose the option to Hyperlink, rather than using the icon on the 'Standard Toolbar'.

return to top of page

Bookmarks

Note:

• the top of this page is bookmarked and links to that 'Bookmark' are dispersed throughout the page labeled return to top of page).

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.

If a location (rather than text) is bookmarked, the bookmark is indicated by . If text is bookmarked, the text is displayed with a dashed underline. The Bookmark 'flag' or dashed underline is only visible in FrontPage, visitors to your site will not see them.

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 () at the top of your screen.

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':

return to top of page

Email Hyperlinks

Email hyperlinks allow your viewers/visitors to click on the link and send email without having to type an email address.

Note:

• The easiest way to create an email link is to type your email address and hit space or enter.

Step 1Highlight text or a picture and click on the hyperlink icon .  Click on the e-mail option:

Step 2 Type in the e-mail address (that will receive the mail) in the new window  and press OK:

return to top of page

Forms

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!

Search Page

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:

• You can preview your search page but you can only test or use it when you are viewing your page on the Internet.

return to top of page

Inserting a Form

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'.

return to top of page

One Line Text Box

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:

• You could now create a series of one line text boxes if you are looking for a series of specific 'fill in the blank' answers.

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.:

return to top of page

Option Button

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:

• You also have the option here of 'not selecting a particular option button- the visitor to your site will not have any pre-selected buttons.

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.:

return to top of page

Check Box

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:

•  The value set will be ON. This means that if the box is checked by the viewer, it is ON or has been selected.

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.:

return to top of page

Text Area

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.:

return to top of page

Drop-Down Box

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:

• Take a look at the Sample Forms Page to see the above forms in 'action'.
• You cannot adequately preview your forms in FrontPage.  You must try out your own forms online to test their responses.

return to top of page

Creating a Confirmation Page

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.

return to top of page

Date and Time Stamp

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):

return to top of page

Counter

A counter allows you to keep track of how many visitors you have to your site from any given time:   There have been visitors to this site since January 1, 2005

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:

• The hit counter will only appear when your site is viewed on the Internet.  When you are working on the site in FrontPage, only the words will appear.

Step 3You can now insert text around the hit counter, such as "You are the to our site", etc.

return to top of page

Page Transitions

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:

return to top of page

Changing Your Password

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:

return to top of page

Rollover Styles

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:

return to top of page

Target Frames

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:

• You can make your chosen target frame the default for your page- all of the hyperlinks you create will take on that target frame...very helpful if you are creating a list of resources that are not part of your site.

return to top of page

Marquees

This is a marquee!

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.):

 

return to top of page

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!