Microsoft FrontPage

Beginner Tutorial:
Creating a Basic Website for Your Classroom

 

 

Contents:

Before We Start

 

If followed in sequence, this tutorial will guide you through every step required to create a basic web site!  If you already have a basic web site created, you may want to move on to the Intermediate 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 Webspace from School

Step 1 After you turn on your computer, open Internet Explorer by clicking on the .

 

Step 2 You will use your IMP staff email username to access your web space. In the address bar type hrsbstaff.ednet.ns.ca/template replacing 'template' with your own username:

 

Step 3 Hit the enter or return key on your keyboard.  If you have not used your web space yet, you will see the basic listing with your username:

 

 

Step 4 To begin work on your website, click the Edit button at the top of the screen:

 

 

Step 5 FrontPage will be opened, and a login box will pop up. Enter your username and

password (as for your email), then click the OK button:

Notes:

  • Do not click in the “Remember my password” box if others have access to your computer.

  • If this is the first time you are using this web space, you may get a message stating that 'the specified file or Web does not exist', just click the OK button, or click on the 'X':

 

Your screen will then look similar to this:

 

 

 

 

Step 6 Now you’re ready to begin! Click on the New Page icon, at the top left of your screen and a blank 'page' appears for you to work on:

 

 

Note:

  • If you are unsure of what the icons/pictures are at the top of your screen, hold your mouse cursor over the picture and wait for a text bar to appear that will name the icon:

  • If you are not seeing the toolbar you need at the top of your page, click on 'View', move down to 'Toolbars', and click on 'Standard and 'Formatting':

 

Step 7 Click on the small 'Save' disc icon at the top left of your screen:

 

This window (or something similar) will appear:

On the bottom of this new box, there will be a space for the 'File name'.  In this area type the word index (it may already be typed there for you), then click 'Save'. This  will be the first page people see when they visit your site on the Internet.

 

Notes:

  • You also have an opportunity here to change the title of your page, which appears on the blue bar on the top of your screen when you are looking at the page on the Internet.  Before you press save, click on the 'Change title' button and type in the title you wish to have..."Welcome to Mrs. Smith's website". "Grade 4 Website", etc.  You can use capital letters, spaces, etc.

  • Is it working?  Minimize your FrontPage work using the bar on the right hand corner of your screen

 

Reopen Internet Explorer by clicking on the , and type your website address into the address bar (hrsbstaff.ednet.ns.ca/your username). Instead of the original page that you started with, it should now be a blank white page.  If you do not see the changes, click the 'Refresh' button on the top of your screen:

return to top of page

Background Colour

 

 

Step 1 Click anywhere on your new page, and then click the right mouse button. From the

menu that appears, click (left button) on 'Page Properties':

 

 

Note:

  • On the first part of this new window, under the tab 'General', you can 'Type a Title' for your web page. This will appear in the very top of screen when someone visits your web page on the Internet (and may be picked up by search engines such as 'Yahooligans'). Your title should match your topic, such as “Grade 4 Health”, “My Class Web Page” or “Zany Zoo Webquest”:

 

 

Step 2 Click on the 'Background' tab at the top of the properties box:

 

Step 3 Click on the arrow beside 'Automatic' next to the word 'Background' to choose your colour:

 

 

Click on the colour you want:

Note:

  • Remember lighter shades are generally better for backgrounds and darker shades are better for text.

  • If you do not like the choices offered, you may click on 'More Colors' and choose from the hexagon of colors that appears:

 

 

 

Then click on OK:

Step 4 Save your work by clicking on the disc icon/picture on the top left hand corner of your screen:

 

Notes:

  • If you have chosen royal blue as a background, you MUST change you hyperlink colors before you click OK:

  • Once you have clicked off all of your 'OK' buttons, your page should be the colour you chose.  If you change your mind, you can just start at Step 1 again; you can change the colour of your pages as many times as you like.

  • Is it working?  Minimize your FrontPage work using the bar on the right hand corner of your screen

     

    Reopen Internet Explorer by clicking on the , and type your website address into the address bar (hrsbstaff.ednet.ns.ca/your username).   If you do not see the changes, click the 'Refresh' button on the top of your screen:

return to top of page

 

Inserting a Table

Notes:

  • Tables help you to organize your work on your page.  
  • Tables consist of rows and columns. 
  • Columns are vertical and rows are horizontal.

Step 1 Click on the Insert Table icon at the top of your page and pull your mouse over to the size table you wish to have.  For the purpose of this tutorial, we are going to make a 1 by 2 table; when you have 1 by 2 shaded, click again on your mouse and the table will appear on your page:

Step 2 Place your mouse in the centre of the table and click with your right mouse button.  Click (with your left button) on 'Table Properties:

Step 3 You need to work with 3 items in this new window, the 1. 'Alignment', the 2. 'Specify width' and the 3. 'Borders':

 

 Then Click on OK.

 

Step 4 Save your work by clicking on the disc icon/picture on the top left hand corner of your screen:

Notes:

  • Your table is now in the centre of the page.
  • The border is now invisible when viewed on the Internet.
  • Because the table width has been set at 600 pixels, viewers will not have to scroll back an forth to read your page.

return to top of page

 

Text: Font Style, Size, and Color

 

Step 1Because your mouse is inside the left hand cell (box) of the table, press 'enter or return on your keyboard to put your mouse above the table.  Type a title for you page:

 

Step 2 Highlight the text you want to change by clicking your mouse at the beginning of the first word, holding your mouse button down and dragging it over the words:

 

From the tool bar, you can choose the font style, size, alignment and colour (in some cases by using the 'drop down arrows'):

 

Step 3 Save your work by clicking on the disc icon/picture on the top left hand corner of your screen:

 

Notes:

  • Your page now looks similar to this:

  • If you are not seeing the toolbar you need at the top of your page, click on 'View', move down to 'Toolbars', and click on 'Standard and 'Formatting':

  • Well designed web pages do not use the underline button. Only links should be underlined on web pages.

  • If you use decorative fonts, you may view them without a problem, but other users may not.  Choose a fairly common font ot make sure everyone who views your site sees the style you intended. Times New Roman,  Comic Sans, Ariel and New Courier are on most computers though some Macs may not have them all.

  • A 10 to 12 point size is best for text intended to be read.

  • Is it working?  Minimize your FrontPage work using the bar on the right hand corner of your screen

    Reopen Internet Explorer by clicking on the , and type your website address into the address bar (hrsbstaff.ednet.ns.ca/your username).   If you do not see the changes, click the 'Refresh' button on the top of your screen:

     

return to top of page

 

Inserting Pictures

Note:

  • You need to have a picture saved somewhere on your computer or on a disc in order to put it onto your web page.  If the desired picture is on a web site that has given permission, right click on top of the image (when you are looking at it on the Internet) and then left click on 'save picture as':

  It is often most convenient to save the picture to your 'Desktop' if you are going to use it right away:

 

Step1 Place the cursor in the right hand cell/box of your table and then click on the Insert Picture button:

 

Note:

  • If possible, organize the pictures you want to use, before you start your web page.

Step 2 From the 'Picture' window, you must go looking for the picture you want to insert (such as a class picture off of a disc):

and the result is similar to :

 

 

Step 3 Save your work by clicking on the disc icon/picture on the top left hand corner of your screen:

 

Notes:

  • Pictures used on web sites are generally jpegs (often photos) and gifs (often drawn pictures).

  • Is it working?  Minimize your FrontPage work using the bar on the right hand corner of your screen

    Reopen Internet Explorer by clicking on the , and type your website address into the address bar (hrsbstaff.ednet.ns.ca/your username).   If you do not see the changes, click the 'Refresh' button on the top of your screen:

 

return to top of page

 

Creating Other Pages/Hyperlinks

Notes:

  • You can now go back to Step 6 of Accessing Your Teacher Web Space to create a more pages...each of these would be saved as the subject of the page, such as homework, newsletter, calendar, etc.  As you create and save each page, they should be showing up under the Folder List on the left hand side of your FrontPage screen:

Step1 Enter text into the left hand cell/box in your table indicating the other pages on your web site (homework, calendars, etc.).  Select (highlight) the text you want to be the link:

 

 

Step 2 Click on the link button in the toolbar:

 

Step 3  The 'Insert Hyperlink' box appears. Select a file (a page you created, such as homework) or type a web address, then click OK:

 

Step 4 Save your work by clicking on the disc icon/picture on the top left hand corner of your screen:

 

Notes:

  • The text on the web page will change colour and be underlined.

  • Is it working?  Minimize your FrontPage work using the bar on the right hand corner of your screen

    Reopen Internet Explorer by clicking on the , and type your website address into the address bar (hrsbstaff.ednet.ns.ca/your username).   If you do not see the changes, click the 'Refresh' button on the top of your screen:

  • You will want to put a 'Back' or 'Home'  hyperlink on your secondary pages to allow readers/viewers to navigate between your home page and your other pages.  By following Step 1 through to 3 of Creating Other Pages/Hyperlinks, you should be able to establish a link.

return to top of page

 

Teacher Samples

The following links are to teachers sites in the HRSB that resemble the basic page(s) you have just created.  For other examples from our board, visit hrsbstaff.ednet.ns.ca and use the letter index at the bottom of the screen:

 

http://hrsbstaff.ednet.ns.ca/galbers

http://hrsbstaff.ednet.ns.ca/mboddy/index.htm

http://hrsbstaff.ednet.ns.ca/jpulsife/
http://hrsbstaff.ednet.ns.ca/keatind/

http://hrsbstaff.ednet.ns.ca/cgrandy/

 

Continue on to Intermediate FrontPage!

 

return to top of page