Microsoft FrontPage

Advanced Tutorial:
 Ideas and Features for Your School Site

 

 

Contents:

Before We Start

 

This site is intended to give you, the advanced FrontPage user, an opportunity to expand your site and steps to do so are located under the appropriate heading.  Many of the items we will cover are for a large school site, project site, or a 'static' site that is not being revised frequently .   If you have basic questions, review the Microsoft FrontPage Beginner Tutorial  or Intermediate FrontPage tutorial.

 

Throughout the tutorial there are notes in red italics to help you troubleshoot, or do an extra step. 

 

Pictures appear after several steps 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:

 

 

Themes

 

Themes allow the web designer to co-ordinate and  standardize colours, buttons, banners, backgrounds, etc. throughout the entire website with just 'one-click'.

 

Step 1Click on 'Format' and then 'Theme'.

Step 2 Choose the theme you are going to use for your site:

 

Note:

  • You may also choose here to apply a theme to just one page of your site rather than the entire web site.  Themes can be restrictive, so you may not want to format your entire web site at once.

 

Navigation Bars

Navigation Bars

Navigation bars create links to your other pages using the theme you choose. These are particularly useful if you move pages to other folders or areas – FrontPage relinks them to the selected page. You must first link your pages together using the Navigation tool in the Views Toolbar.

Step 1: First, click on 'View', then 'Navigation':

Step 2: You will see a list of files in your web inside the left hand side of your screen and your index.htm (it may say the title of your page, such as 'Welcome') as an icon in the right side. To link your pages together, simply click and HOLD the file in the left hand frame and drag it over to the right frame until a dotted line appears linking it to your index page. Do this for all your other pages:

Step 3: To insert a navigation bar, click 'Insert', 'Navigation', and then 'Bar based on navigation structure':

:

A menu will appear that asks you to choose if you want to use the theme:

Choose the orientation of your Navigation bar and 'Finish':

At this point you choose what level of pages you want to have in the navigation bar:

Note:

  • You may also want to click on 'Home page' to include a home button if you plan on putting your navigation bar into a shared border.

  • Navigation Bars may be centered as if they were text.

Your online page should now have a row or column of the pages on your site.  To have that 'bar' appear on all of your main pages, go to 'Shared Borders'.

 

Banners

Step 1To put a banner on your theme page, click 'Insert' and 'Page Banner'.  Select whether you would like the banner to be a picture or text and type in the name or title you wish:

 

Note:

  • Choosing 'Picture' will give you a banner that uses the theme colours and style.

  • Banners may be centered as if they were text.

Buttons

 

When you are using a theme, buttons are placed on your page when you create a Navigation Bar.  When you are choosing a theme, samples are given:

 

 

Headings

 

Headings are simply text that is set to assume specific attributes of a theme.

Step 1: Type you text.

Step 2: Highlight the text, and on your formatting toolbar, set the 'Style' for 'Heading':

Hyperlinks/Bullets/Horizontal Lines

 

Each of these items are set, in terms of style and colour by the theme you have chosen:

 

 

Scheduling a Web Page or Picture to Appear

 

Step 1: Position the insertion point where you want to display another page or picture.

Step 2: Under 'Insert', click 'Web Component'.

Step 3: In the left pane, click 'Included Content'.

Step 4: In the right pane, double-click either 'Page Based on a Schedule' or 'Picture Based on a Schedule'.

  • In the 'During the scheduled time' box, type the address of the page or picture to include, or click 'Browse' to locate it.
  • To specify a page or picture to display outside the specified time period, in the 'Before and after the scheduled time' box, type the URL of the page or picture you want to include, or click 'Browse' to locate it.
  • In the drop-down boxes after 'Starting', specify the year, month, day, and time at which you want to start displaying the page or picture.
  • In the drop-down boxes after 'Ending', specify the year, month, day, and time at which you want to stop displaying the page or picture.

Note:

  • The web server's clock is used to determine the time period.

Frames

 

Frames are similar to Shared Borders in that it allows you to display some features consistently from page to page.  The difference is that frames are set up as different web pages appearing to be on the same page.

 

Note:

  • Your frames page must be your home or index page.  Content from a previously created 'normal' pages may be copied and pasted for transfer over.

Step 1: Click on the drop down arrow beside the 'new page' icon on your Standard Toolbar (see Toolbar Commands for further ideas)

 

Step 2: Click on the 'Frames' tab and choose the frames page you wish to have:

 

Note:

  • The format chose above is commonly used to create a menu or 'content' list on the left, a school name at the top ('banner'), and the 'main' frame (initially a welcome page) displays the pages you choose from the left content menu.  Because it is a framed page, the left and top frames will stay constant:

 

 

Step 3: You will see that each section of the frames page is ready to be created as its own web page.  Click new page to create that frame's content.  Remember to treat each section as its own page...for instance, to change a background colour, you would need to go to page properties for each section.

 

Notes:

  • You may insert previously created pages into a frame by clicking on 'Set Initial Page' and browsing for it.  Or you may simply copy and paste content (such as hyperlinks) from other pages.

  • If you are using a theme on your site you may want to remove it from part or all of your framed page to prevent a cluttered look.  Click on the page or section you wish to remove it from, go to 'Format' and 'Theme', choose 'No Theme' and apply it to the 'Selected pages':


 

Step 4: Save your work.  You will see how each section is saved independently:
 

Notes:

  • Be sure to save the final whole page as 'index':

 

 

Shared Borders

 

Shared Borders allow specific components of your site (banners, navigation bars, pictures, etc.) to appear on every page of your site.

 

Step 1: Click 'Format', then 'Shared Borders:

 

Step 2: Select where you want to share the same information on each page:

 

Step 3:Highlight and drag, or copy and paste, any component you wish to have in the shared borders.

 

Note:

  • If you are using Navigation Bars, you may choose to highlight and drag the bar into a shared border.  If the orientation (vertical/horizontal) does not fit the border you wish to place it in, double click on you navigation bar, then click on the 'Style' tab:

 

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!