Microsoft FrontPage 2000 Tutorial

The following tutorial is designed for new users of FrontPage 2000.  
This tutorial makes the following assumptions:

1.  The user has already established a FrontPage accessible account, either on "www.mnstate.edu/youraccount" or on appserv.mnstate.edu/youraccount ". Apply for an account on the www server unless you plan to use online forms with a database.  Those accounts must go on  appserv.

    Note:  If you do not have an account set up you can apply online at:  

http://www.mnstate.edu/home/FORMS/webapp.htm

2.  The user has been given the proper web address, login, and password.

3.  The user has basic knowledge of Windows 95/98.

4.  Microsoft FrontPage 2000 has been installed and is working properly.

All references to FrontPage are for FrontPage 2000 only.  This tutorial may differ somewhat from previous versions of FrontPage.  

Note:  Throughout this tutorial, save your changes often.  None of your changes will be saved until you hit the (save) button.

Contents: 

1.  Logging into FrontPage

If this is the first Time you have logging in with FrontPage then go to the following section For the First Time.  If not, then go to the section Regular Login.

For the First Time:

1.  Click on Start -> Programs -> Microsoft FrontPage (Pic1-A).

Pic. 1-A

2.  FrontPage 2000 will load.

3.  You will see the following screen when it has finished (Pic. 1-B):

Pic. 1-B

4.  Click on File -> Open Web... (Pic 1-C):

Pic. 1-C

5.  The following screen will appear (Pic. 1-D):

Pic. 1-D

6.  Tab to or Click in the text box with the label "Folder name".

7.  Type the address of your website in the text box specified above, which should look something like Pic. 1-E.

Note:  All web addresses must be preceded by a "http://".  Otherwise, FrontPage will not find the address.

Note:  As stated at the beginning, this tutorial assumes that you already have an account set up at MSUM.  If not, please register by going to the online form listed at the top of the page.    

Pic. 1-E

8.  Click the Open button.

9.  The following screen will appear (Pic. 1-F):

Pic. 1-F

10.  Tab to or Click in the text box labeled "User name".

11.  Type in your user name.

12.  Tab to or Click in the text box labeled "Password".

13.  Type in you password, your screen should now look like Pic. 1-G.

Note:  If you want your password saved leave the checkbox checked.  However, if you choose this option any person that sits at that computer can access your website without knowing your password.

Pic. 1-G

14.  Click the OK button.

15.  If the information you typed in is correct the following screen will appear (Pic. 1-H):

Pic. 1-H

You have now successfully logged into FrontPage.

Regular Login

1.  Click on Start -> Programs -> Microsoft FrontPage. (Pic1A)

Pic. 1-A

2.  FrontPage 2000 will load.

3.  You will see the following screen when it has finished (Pic. 1-B):

Pic. 1-B

4.  Click on File -> Open Web... (Pic 1-C):

Pic. 1-C

5.  The following screen will appear (Pic. 1-I):

Pic. 1-I

-Pic. 1-I shows a list of accounts that you have already connected to.   

6.  Click once on the account that you would like to open.

7.  Click the Open button (Pic. 1-J).

Pic. 1-J

-The following screen will appear (Pic. 1-K):

Pic. 1-K

8.  Tab to or Click in the text box labeled "Name".

9.  Type in your user name.

10.  Tab to or Click in the text box labeled "Password".

11.  Type in you password, your screen should now look like Pic. 1-L.

Pic. 1-L

12.  Click the OK button or Push the Enter key.

-The following screen should appear (Pic. 1-H):

Pic. 1-H

-You are now logged into your FrontPage account.

Back to Contents

2.  Creating New Folders in FrontPage

1.  Click on the folder that you would like the new folder to go under.  In the following example it is the accounts root folder: http://classweb.mnstate.edu/youraccount (Pic. 2-A):

Pic. 2-A

2.  Right click on the folder.

3.  Highlight the option New Folder (Pic. 2-B):

Pic. 2-B

3.  Click on the option New Folder.

-A new folder will appear.  It's name will be highlighted in blue (Pic. 2-C):

Pic. 2-C

4.  Type in the New Name of the folder.

5.  Hit the Enter key.

-The new name will now be the name of the folder (Pic. 2-D):

Pic. 2-D

-You have now created a new folder.

Back to Contents

3.  Renaming a folder.

1.  Click on the folder you would like to rename (Pic. 3-A):

Pic. 3-A

2.  Right Click on the folder.

3.  Highlight the option Rename (Pic. 3-B):

Pic. 3-B

4.  Click on the option Rename.

-The name of the folder will be highlighted in blue.

5.  Type in the new name of the folder (Pic. 3-C):

Pic. 3-C

6.  Push the Enter key to accept the new name.

-You have now renamed your folder.

Back to Contents

4.  Creating New Pages in FrontPage

1.  Select File -> New -> Page... (Pic. 4-a):

Pic. 4-A

2.  Click on the option Page....

-The following screen will appear (Pic. 4-B):

Pic. 4-B

3.  Click on the type of page you would like.

-In this example the "Normal Page" option will be selected.

4.  Click on the OK button.

-A blank page will appear on the right hand side of the screen.

5.  Select File -> Save As... (Pic. 4-C):

Pic. 4-C

-The following screen will appear (Pic. 4-D):

Pic. 4-D

6.  Double-Click on the folder that you want the page to be saved in.

-The name of the folder will now appear in the dropdown box labeled Save in: (Pic. 4-E):

Pic. 4-E

7.  Tab to or Click in the text box labeled File name:.

8.  Type in the new name of the file.

-In this example the new name of the file is going to be Assignment1 (Pic. 4-F):

Pic. 4-F

9.  Click the Save button.

-You will now notice that the file Assignment1.htm has been added to the folder Assignments (Pic. 4-G).

Pic. 4-G

-You have now created a new page.

Back to Contents

5.  Renaming a Page

-Let's say that the name Assignment1.htm seems too long and should be shortened to Assign1.htm.

1.  Click on the file Assignment1.htm (Pic. 5-A):

Pic. 5-A

2.  Right Click on the file and a menu will appear.

3.  From the menu select the option Rename (Pic. 5-B):

Pic5-B

4.  Click on the Rename option.

-The name of the file will now be selected.

5.  Type in the new name of the file (Pic. 5-C).

Warning: Do not forget to put the ".htm" (or whatever the previous extension was) back onto the end of the file.  Otherwise the file will not be recognized properly.

Note:  If other pages have links to this page FrontPage will ask you if you want to break the links.  In most cases you would like to keep the links.  

Pic. 5-C

6.  Push the Enter key on you keyboard.

-You have now renamed your file.

Back to Contents

6.  Giving a Page a New Title

-Each new page that is created starts out with the Title New Page 1.  The Title of your page is what appears in the upper left hand corner of your web browser.  It is good web practice to give your pages a title that has meaning.

-This example will change the name of the page Assign1.htm from New Page 1 to Assignment #1.

1.  Double Click on the file Assign1.htm in the Folder List.

-This will bring up the page Assign1.htm in the right side of your screen if it isn't already there.  

2.  Right Click anywhere on the page and a menu will appear.

3.  Select the option Page Properties... (Pic. 6-A):

Pic. 6-A

4.  Click on the option Page Properties...

-The following screen will appear with the text in the text box labeled Title: already highlighted (Pic 6-B).

Pic. 6-B

5.  Type in the text Assignment #1 (Pic. 6-C).

Pic. 6-C

6.  Click on the OK button.

-You have now successfully changed the title of your webpage.

Back to Contents

7.  Changing the Background Color of a Page

-The background color of your web page is set to a default of automatic.  This can be a problem.

-Let's say that you design your website with a white background.  If a person has their default color on their browser set to gray and your background color is set to automatic then the color they will see you site in is gray, not white.

-To fix this problem you should always set a standard color on your websites.  

-The following example will give the web page Assign1.htm a background color of white.

1.  Double Click on the file Assign1.htm in the Folder List.

-This will bring up the page Assign1.htm in the right side of your screen if it isn't already there.  

2.  Right Click anywhere on the page and a menu will appear.

3.  Select the option Page Properties... (Pic. 7-A):

Pic. 7-A

4.  Click on the option Page Properties...

-It will bring up the following screen (7-B):

Pic. 7-B

5.  Click on the tab Background  in the upper left hand corner of the screen.

6.  Click on the down arrow of the dropdown box labeled Background:

7.  Select the color white from the menu.

8.  Click on the the color white (Pic. 7-C).

Pic. 7-C

8.  Click on the button OK (Pic. 7-D).

Pic. 7-D

-You have now successfully set the background color of the web page to white.

Back to Contents

8.  Adding Text

-If you have added text to a Microsoft Word document then this section will seem very familiar.

-Let's give the Assign1.htm page a title at the top.  We will want this centered and in a large font.

1.  Click on the Center button (Pic. 8-A):

Pic. 8-A

2.  Click on the down arrow on the Font Size dropdown box.

3.  Select the Font Size 5 (18 pt) (Pic. 8-B):

Pic. 8-B

4.  Click on the selected Font Size.

5.  Type in the text you want.

-In this example I will type the text "Assignment #1".

-Now lets change the font.

Note:  The fonts that you have available depend on what fonts are installed on your computer.

6.  Type in the text "Assignment #1" (Pic. 8-C).

Pic. 8-C

6.  Highlight the text that you have typed for the title.

7.  Click on the down arrow on the Font dropdown box.

8.  Select the Font called "Comic Sans MS". (Pic. 8-D):

Pic. 8-D

9.  Click on the Font.

-The font will now change to the selected font.

Note:  Double spacing is the standard in FrontPage.  In order to single space you must hold down the "Shift" key then push the "Enter" key. 

Back to Contents

9.  Adding a Hyperlink

I.  To a Local Page

-In this example we will make a hyperlink connection from the Default.htm file to the Assign1.htm file.

1.  Double click on the file named Default.htm in the Folder List.

-This will load up the file Default.htm (Pic. 9-A).

Pic. 9-A

2.  Type the text "To Assignment #1" (Pic. 9-B).

Pic. 9-B

3.  Highlight the text "Assignment #1".

4.  Select the Hyperlink button (Pic. 9-C).

Pic. 9-C

5.  Click on the Hyperlink button.

-The following screen will appear (Pic. 9-D):

Pic. 9-D

6.  Double Click on the folder named "Assignments".

7.   Click on the file named "Assign1.htm" (Pic. 9-E).

Pic. 9-E

-You will now notice that in the text box labeled URL: the "Assignments/Assign1.htm" has been added in.

8.  Click on the OK button.

-The text will now have changed to the color blue, indicating that it is clickable (Pic. 9-F).

Pic. 9-F

Note:  If you would like to go to the Assign1.htm page you can hold down the "Crtl" button and click on the link.

-You have now created a local hyperlink.

Back to Contents

II.  To Another Website

-In this example we will be linking to MSU's main page.

1.  Double Click on the Default.htm page in the Folder List.

-This will load up the Default.htm page.

2.  Type in the text "To Moorhead State University" (Pic. 9-G).

Pic. 9-G

3.  Highlight the text "Moorhead State University".

4.  Click on the Hyperlink button (Pic. 9-H):

Pic. 9-H

-The following screen will appear (Pic. 9-I):

Pic. 9-I

5.  In the text box labeled URL: enter in the text "www.mnstate.edu" after the "http://" (Pic. 9-J).

Pic. 9-J

Warning: The hyperlink will not work correctly if the "http://" is not in the URL.

6.  Click on the OK button.

-The text "To Moorhead State University" will now be blue.

Warning:  Do not use the Ctrl+Click feature when linking to an outside site.  It can cause a lockup.  Instead, preview it in a browser to make sure it works.

-You have now created a link to an outside site.

Back to Contents

10.  Inserting a bookmark

-Bookmarks are used on a web page to allow the user to jump to a different part of a web page.

1.  Type in the text "Grading" on a lower part of the default.htm web page where you would like the page to jump to (Pic. 10-A).

Pic. 10-A

2.  Highlight the text "Grading".

3.  Select Insert -> Bookmark... (Pic. 10-B):

Pic. 10-B

-The screen that appears will already have the word "Grading" picked out as the name of the bookmark (Pic. 10-C):

Pic. 10-C

4.  Click on the OK button to accept the name of "Grading" for the bookmark.

-The text "Grading" will now have a dotted underline underneath it.  This represents the bookmark (Pic. 10-D).

Pic. 10-D

5.  At the top of the page type in the text "Go to Grading" (Pic. 10-E).

Pic. 10-E

6.  Highlight the text "Go to Grading".

7.  Click on the Hyperlink button (Pic. 10-F).

Pic. 10-F

-The following screen will appear (Pic. 10-G):

Pic. 10-G

8.  Click on the down arrow from the dropdown menu labeled Bookmark:.

9.  Select the bookmark "Grading" from the dropdown.

10.  Click on the OK button.

-You have now created a hyperlink that points to the bookmark "Grading" which is lower on the page.

Back to Contents

11.  Importing a File

-There are many times when you will want to import a file.  Whether it is an HTML document or a picture.  

-All documents are imported the same way.

-In this example a picture named "bite2.gif" is going to be imported.

-Make sure that you note where your file is located on your hard drive before you begin.  

1.  Double Click on the folder in the Folder List where you would like the file or files to go (Pic. 11-A).

Pic. 11-A

2.  Select File -> Import... (Pic. 11-B):

Pic. 11-B

3.  On the following screen click on the Add File... button (Pic. 11-C):

Pic. 11-C

4.  Locate the file on your hard drive.

5.  Click on the file (Pic. 11-D). 

Pic. 11-D

5.  Click on the Open button.

-Your file will now be added the the list of files to be imported.

Note:  You can add as many files as you want.  Repeat steps 1-5 to add more files.  You can even add a folder by clicking on the Add Folder... button.

Pic. 11-E

6.  Click on the OK button.

-Your file or files will have been imported to the appropriate folder (Pic. 11-F).

 
Pic. 11-F

Back to Contents

12.  Converting a Word Document to HTML

-This is the quickest way to convert Word documents.  It is not necessarily the best way to convert word documents.

1.  Open your Word document in Word 97 or Word 2000.

2.  In Word 97...

    ...Select File -> Save as HTML...

     In Word 2000...

     ...Select File -> Save as Web Page...

-A screen will appear asking you what you would like to name the file and where you want to save it to.

Note:  This has to be saved locally and then imported into the website later.

3.  Type in a new name for the file.

4.  Select a location for the new file.

5.  Click on the Save button.

-The file will be saved locally.

6.  Import the file to your website.

Back to Contents

13.  Inserting a Picture

-It is rare to find a website that doesn't have pictures.  It is one of the basic fundamentals of designing a web page.

-In this section we will look at how to insert a picture into a website.

-Make sure your picture has already been imported to your website before you begin.

1.  Select the position on your web page where you want your picture inserted (Pic. 13-A).

2.  Select Insert -> Picture -> From File... (Pic. 13-B).

Pic. 13-B

3.  On the following screen Locate your file by using the drop down box labeled Look in:

4.  Click on the picture that you would like to insert (Pic. 13-C).

Pic. 13-C

5.  Click on the OK button.

-The picture will now be inserted into the file (Pic. 13-D).

Pic. 13-D

Note:  Hyper linking a picture can be done exactly like html text.  Just click on the picture and follow the same steps as Adding a Hyperlink.

Note:  See the section Big No-No's for tips on editing pictures.

Back to Contents

14.  Inserting a Table

-Tables are essential in designing a good website.  They can be used as a way to align text, pictures, or anything else that needs to be aligned.

-Spaces and tabs can be unreliable since different web browsers can read them differently and also since different screen sizes can screw up formatting done with tabs or spaces.

1.  Select a place on your page to insert the table.

2.  Select Table -> Insert -> Table... (Pic. 14-A).

Pic. 14-A

-The screen that appears has many options.  I will take some time to explain them (Pic. 14-B).

Pic. 14-B

Columns: -- This is the number columns that span across the top of table.

Rows: -- This is the number of rows that span down the side of the table.

Alignment: -- You can choose if it is aligned left, right, center, or justify.  

Note:  If the table width is set to 100% you will not notice a change in alignment no matter what you set it to.  In order to see the change the table width must be set to less than 100%.

Border size: -- This is how thick you want the border of the table to be.  If you want it to be invisible then set the border size to 0.

Cell padding: -- This is how much space is between the text and the border around it.  The larger the number the more space there will be.

Cell spacing: -- This is the amount of space between each cell in the table.  The larger the number the space there will be.

Specify width: -- You can specify the width of your table on percent or pixels.

In percent -- This is the percentage of the screen that the table will take up.  This can be distorted by the resolution that is used by the individual user.

In pixels -- This is the number of pixels that the table will span and is not distorted by different screen sizes.

-Now that you know what some of the different options with tables are you can set up the table any way you would like.

3.  Click on the OK button.

-Your table will now be inserted into the web page (Pic. 14-C).

Pic. 14-C

Note:  After a table is inserted it can be manipulated by right-clicking on it and selecting Table Properties...

Note:  Individual or groups of cells can be manipulated by: 

1.  Select the cell or cells to be edited.  

2.  Right click over the highlighted cells.

3.  Select Cell Properties...

I.   Inserting Pictures into a table

-Inserting a picture into at table is virtually identical to inserting a picture into a web page.

-The only added step is that you have to click on the cell that you would like the picture to be inserted into.

II.  Inserting Text into a table

-Inserting text into a table is virtually identical to inserting text into a web page.

-The only added step is that you have to click on the cell that you would like the text to be inserted into.

Back to Contents

15.  Moving Files or Folders

-Moving files and folders can be done in page view.  However, it must be done one at a time.

-If you want to move multiple files then switch to the Folders view (Pic 15-A).

Pic. 15-A

-Folders view works just like Windows Explorer on a Windows 95/98/NT system.

-The following example will show how to move files in Page view.

1.  Click and Hold Down on the file or folder you want to move.

2.  Drag the file or folder to the folder that you would like to move the file or folder to (Pic. 15-B).

Pic. 15-B

3.  Release your mouse button and the file or folder will be moved to the new location (Pic. 15-C).

Pic. 15-C

Back to Contents

Extra FrontPage Features

1.  Inserting Counters

-Counters are a nice feature, every time someone views your web page the counter will advance by one.  This gives you an idea of how many people are viewing your site.  

-Let's insert a counter on our default.htm page.

-Counters are generally put at the bottom of web pages.

1.  Select the area on your web page where you would like to insert the counter.

2.  Select Insert -> Insert Component -> Hit Counter... (Pic. 1C-A)

Pic. 1C-A

-the following screen will appear (Pic. 1C-B):

Pic. 1C-B

-From Pic. 1C-B you can choose which style of counter you would like.  

-You can select from their stock counters or have a special counter made for you.

3.  Click on the circle next to the counter style that you would like to use.

-The Reset counter to and Fixed number of digits options are not required.

-Reset counter to resets the counter to whatever number you specify.  

-Fixed number of digits will fix the number of placeholders on your webpage.

4.  Click on the OK button.

-Your counter will be inserted.  All you will see in FrontPage is the following (Pic. 1C-C):

Pic. 1C-C

-To view what the counter actually looks like you will have to open it up in a web browser.

-You have now inserted a counter.

Back to Contents

2.  Inserting Forms

I.   Link to an E-Mail Address

II.  Link to an Access Database

Back to Contents

3.  Using the Include Page Component (Good for Easy Menu Use)

-If you have a menu web page that you would like to use on many different pages but don't want to use frames the Include Page component is a nice component to use.

-If you use this component then when changes need to be made to your menu you just have to do it in one place.  Instead of changing the menu on every page.

1.  Create a web page named "menu.htm".

2.  In this page make a general menu of hyperlinks to all of the most important files in your website (Pic 3C-A).

Pic. 3C-A

3.  Open a page that you would like to insert the menu into.

4.  Select the location on the page that you would like to insert the "menu.htm" file into.

5.  Select Insert -> Insert Component -> Include Page...

Pic. 3C-B

6.  Click on the Browse... button on the next screen (Pic. 3C-C).

Pic. 3C-C

7.  Select the "menu.htm" file that you created (Pic. 3C-D).

Pic. 3C-D

8.  Click on the OK button.

-The file "menu.htm" will now be selected (Pic. 3C-E).

 
Pic. 3C-E

9.  Click on the OK button.

-The "menu.htm" file will now be inserted into the current file.

Pic. 3C-F

Back to Contents

Suggestions for Clean Web Design

 

1.  Organization

-Come up with an organizational plan before you start putting your site together.  Without a proper organizational plan it can become very confusing to update your website in the future.

For Professors on campus I usually come up with the following folder structure (Pic. 1B-A):

Pic. 1B-A

If each class has its own folder with the sub-folders Assignments, Handouts, Syllabus, and What's New then you can easily organize you site because it has a standard layout.

Back to Contents

2.  Big No-No's

Problem

-Do not resize images in FrontPage.  This is a really bad idea.  The problem is that if you shrink a picture in FrontPage the amount of hard drive space that it takes up doesn't decrease.  So if a picture was full screen and you shrunk it to half that size using the little guide markers in FrontPage, it would still take the same amount of time to load as the full size picture. 

Solution

-Resize the picture in an image editor such as Image Composer or Photoshop and then insert it into your web page.  That way your picture takes up less hard drive space and thus loads faster.

Back to Contents

3.  Turning off the annoying dropdown menu option

-When FrontPage 2000 is first installed on your computer there is a menu hide option that is very annoying. 

-What you will notice is that you have to wait for menu items that aren't commonly used to appear.  It is very annoying.

-While this feature is on, your file menu will look something like this (Pic. 3B-A):

Pic. 3B-A

-Do the following to shut it off.

1.  Select View -> Toolbars -> Customize... (Pic. 3B-B):

Pic. 3B-B

2.  Click on the Customize button.

-The following screen will appear (Pic. 3B-C):

Pic. 3B-C

3.  Click on the Options tag.

4.  Click on the Checkbox labeled "Menus show recently used commands first" (Pic. 3B-D). 

Pic. 3B-D

5.  Click on the Close button.

-The annoying "feature" has now been turned off.  Joy!

Back to Contents