MS FrontPage

A Dedicated Web Page Editor

Instruction Manual for Torrey Pines High School Staff

The District supports both Microsoft FrontPage 98 and 2000. All teachers in the District have a personal web page assigned to them to help them enhance their instructional potential through technology.  Through FrontPage the user can create and publish Internet web sites without the technical expertise of a programmer.   FrontPage is a powerful piece of software that is surprisingly easy to use once you become familiar with its range of functions.  This hands-on manual is designed to make FrontPage quickly accessable for the beginning, intermediate and advanced user.

Peter Evans: TPHS Web Manager (1998-2002)
    
(TPHS x2119 · peter.evans@sduhsd.net)

Contents

          Your Web Page Awaits You

          Beginning Web Site Development
             bd14574_.gif (81 bytes) How to:  log onto your computer and to FrontPage98 and 2000
                 bd14574_.gif (81 bytes) How to:  spell-check and file-save
                 bd14574_.gif (81 bytes) How to:  preview in FrontPage and in the Browser
                 bd14574_.gif (81 bytes) How to:  "refresh" your page
         Intermediate Web Site Development
            bd14574_.gif (81 bytes) How to:  establish email links
                bd14574_.gif (81 bytes) How to:  format fonts and manage text
                bd14574_.gif (81 bytes) How to:  single space
                bd14574_.gif (81 bytes) How to:  format a background
            bd14574_.gif (81 bytes) How to:  insert and manage clipart, symbols and bullets
                bd14574_.gif (81 bytes) How to:  create new web pages, hyperlilnks and bookmarks
                bd14574_.gif (81 bytes) How to: create and mofify tables, create templates and use shared borders
         Advanced Web Site Development
            bd14574_.gif (81 bytes) How to: capture clip art, images and backgrounds from the Internet
                bd14574_.gif (81 bytes) How to:  create watermarks as backgrounds
                bd14574_.gif (81 bytes) How to:  use the Image Toolbar
                bd14574_.gif (81 bytes) How to:  establish hyperlinks to Internet sites
                bd14574_.gif (81 bytes) How to:  convert an image to an Internet hyperlink
                bd14574_.gif (81 bytes) How to:  work with Frames

            bd14574_.gif (81 bytes) How to: use Active Elements (banners, marquees...)
            bd14574_.gif (81 bytes) How to:  import files, folders, grades and PowerPoint presentations to a web page
                bd14574_.gif (81 bytes) How to:  copy and paste Word documents to a web page
            bd14574_.gif (81 bytes) How to:  create and manage a website using Themes and navigation buttons
                bd14574_.gif (81 bytes) How to:   use Theme Designer to create custom themes
        Appendix:
        How to Access Your FrontPage Web From School
        How to Access Your FrontPage Web From Home
        Navigating MS FrontPage
        Keyboard Short cuts
        Highlighting Text
        Practice: Creating a Three-Page Web Site from Scratch
        Connecting Your Web Site to a Server with FTP
        Suggested Bibliography for MS FrontPage & Web Design





 

  *******


Your WebPage Awaits You

You already have a web page on the District Server with your name on it. You can find it on the District Web Site by clicking the Teacher Web Pages button, or at TPHS.NET by clicking on Teachers & Staff. TPHS teachers already have a web template installed for them. Follow the instructions below to access, edit and save your website from any computer on campus or from home. See Appendix for details.

 

*******

Beginning Web Site Development

Accessing and Using Your District Web Page
Complete the Beginning instructions and you will have an active web page

** Note: You must previously have established a FrontPage password with Network Support before proceeding.  To
                establish a FrontPage password for the first time, e-mail "support, network," say you want to submit your
                FrontPage password,  give them a five - or more - character password of your choice (avoid making it the same
                as your Novell log-in password) and give them time to reply. 

Start:

  1) Log-on to the computer (Novell Client login)

  2) If that doesn’t work (for example, if you are in a computer lab at TP), do the
      following to log in:

  3) Double click on the Microsoft FrontPage icon on the screen/desktop. If it’s not there,
      go to Start>Programs>Microsoft FrontPage. This automatically opens FrontPage
      Explorer.

  4) At Getting Started (if it appears) click on More Webs. In the box that says, Select
      a Web server or disk location,
type in teachers.sduhsd.k12.ca.us/username in
      the first box, (where username is your first initial and full last name, all lower case, no
      spaces.)

  5) Click on List Webs (If using FP98). This brings you to the Name and Password box, then type in:

6) Your web folder should open, displaying all its files and images. Double-click on index.html to access your Home Page or      double-click on the page you want to edit. You are now in the FrontPage Editor. The remainder of this manual is designed
    to show you how to use the FrontPage editor to create a web site.

7) Frequently spell check & do FILE-SAVE after entering text

8) Preview work using the Preview command at bottom of screen

9) Preview work using File-Preview command

10) Preview your work using an Internet browser

11) Understand that different Internet browsers can reproduce FrontPage documents
      differently

12) Exit all programs if you are done

                                                                   

                                                                     ******* 

 

Intermediate Web Site Development

Open Your Web Page in FrontPage Editor:

Level 1 -

Establish an E-mail link:

Format Fonts Using the Format-Font Command on Standard Tool Bar

Format Fonts Using Format Tool Bar Options

Position Text and Objects on a Page Using Format Tool Bar

Single Space (note: FrontPage does not automatically single space)

Format Full page Backgrounds / Colors

Format Full Page Backgrounds Using FrontPage Clip Art

Create Watermark Backgrounds using FrontPage Clip Art: Watermark Backgrounds add an artistic flair to background images. They remain stationary while text scrolls independently.

 

Level 2 -

Insert, Size & Delete FrontPage Clip Art

Make Image (clip art, etc.) Background Transparent: images often come with their own background color. You may want to delete this and only have your page background show through.

Make Other Modifications to Clip Art and Images with Image Toolbar

Insert FrontPage Symbols

Create Bullets & Numbers

Convert Clip Art Images into Bullets

 

Level 3 -

Expand Your Web Site: Create New Web Pages and Link them together

Color Hyperlinks

Hyperlinking Using Bookmark for same & different page links:
A web page will often contain a menu to items further down a page. These same-page links are accessed using Bookmark and Hyperlink in the Edit menu.

Same Page Bookmark Links

Different Page Bookmark Links

 

Level 4 -

Tables: Tables is one of the most useful tools for web creation. A close look at web pages reveals that this is how most information on a web page is positioned. Table commands enable you to put information in columns and rows, or to position text and images on a web page in random order so that they seem to float on the page. The Tab key and Space Bar are not reliable formatting tools for these purposes. Table borders are visible in FrontPage, but can be made invisible for the Internet viewer. Tables are modified in FrontPage in the Tables menu under Table Properties or Cell Properties. Practically all FrontPage editing commands can be used in tables.

 

 Level 5 -

Tables and Templates: FrontPage offers a unique set of pre-configured web page template designs for the webmaster in a hurry. They are all based on tables and can be modified like any other table to suit your needs.

Save Your Template In the File > New > Template Menu: any web page can be saved as a Template (this is how all the original TPHS teacher web pages were created and reproduced).

Shared Boarders: this is an easy and effective way to reproduce text, images, menus, links, etc., on each new page of your web site without repeated manual input on each page – a real time saver.

 

                                                                     *******

    

Advanced Web Site Development

Level 1 -

Capture Clip Art off the Internet: routines below apply to FP98 primarily. FP2000 is same, but with a different menu presentation

Capture Backgrounds off the Internet: there are several methods. Below are two (routines below apply to FP98 primarily. FP2000 is same, but with different menu presentation):

Create Watermarks as Backgrounds off the Internet: Watermark Backgrounds add an artistic flair to background images. They remain stationary while text scrolls independently.

Establish Hyperlinks to Internet Sites:

Turn An Image Into a Hyperlink:

 

Level 2 -

Web Page Frames: Frames can be a useful tool for viewing your web site. However, Frames are not viewable in all Internet browsers.

 

Access Active Elements: as the name implies these options give more visual interest to your web site. Test them in Preview or on the Internet. They do not usually operate in the Editor. The example below is for Hover Buttons. Instructions for the other Active Elements are similar.

 

Level 3 -

Import Files and Folders to Your Web Site using FrontPage Explorer: FrontPage allows you to import Word, Excel, PowerPoint, text files, other Microsoft products and web sites into your FrontPage Explore directory. This feature enables you to put documents onto your web site quickly without the manual text input normally required to process information on a web page. Caution: the Internet user must have the same programs on their system to use the imported Microsoft files.

Copy & Paste Documents to a Web Page: most documents can be placed directly onto a web page this way without importing files. The reason for this is that FrontPage converts a pasted file into HTML – the language of Internet browsers. Experiment to see which method – Copy >Paste or Import works best for you. The advantage of Copy > Paste is that you don’t have to create a hyperlink to your file and all Internet users can read your file, not just Microsoft users

Import Grade Reports to a Web Site

Import PowerPoint Presentations to a Web Site

Save PowerPoint Presentations as a Web Page (FrontPage 2000)

 

Level 4 -

Create a Complete Web Site using FrontPage Themes and Navigation Links

 

Level 5 -

Create Your Own FrontPage Theme Design and navigation buttons with THEME DESIGNER: THEME DESIGNER is easy to use and is included in FrontPage 98 (and higher versions). You install it from FrontPage Explorer. See instructor for installation and THEME DESIGNER instruction handout.

 

                                                                             *******
                                                                             *******

 

      r    

 

 

 

Appendix

How to Access Your Website from
Any Computer on Campus

** Note: You must previously have established a FrontPage password with Network Support before proceeding.  To
                establish a FrontPage password for the first time, e-mail "support, network," say you want to submit your
                FrontPage password,  give them a five - or more - character password of your choice (avoid making it the same
                as your Novell log-in password) and give them time to reply. 

 

  1. Log in to the computer (Novell Client login)

    2. If that doesn’t work (for example, if you are in a computer lab on campus), log in as
        follows:

   3.Double click on the Microsoft FrontPage icon on the screen/desktop. If it’s not there, go to
       Start>Programs>Microsoft FrontPage. This automatically opens FrontPage Explorer.

If you are using FrontPage 98:

   4. At Getting Started (if it appears) click on More Webs. In the box that says, Select a web
       server or disk location
,
type in teachers.sduhsd.k12.ca.us/username in the first box,
       (where username is your first initial and full last name, all lower case, no spaces.)

   5 .Click on List Webs. This brings you to the Name and Password box, then type in:

If you are using FrontPage 2000:

   6.  When you enter FrontPage 2000, click on Open.   In the address box at the bottom of the screen type:
        http://teachers.sduhsd.k12.ca.us/username and enter, or click, on the "Open" button.  When the Network
        Password
box appears enter your Username and Password, as indicated above.

   7. Your web folder should open, displaying all its files and images. Double-click on
       index.html to access your Home Page or double-click on the page you want to edit.

  8. In the future when you open FrontPage Explorer, your name will appear by default in the
      Getting Started dialog box. Click on it and you are ready to resume your work in FrontPage

Web Manager: Pete Evans                                                             Web Editor: Sally Sandler

 

                                                                        *******

How to Access Your Website from Home

** Note: You must previously have established a FrontPage password with Network Support before proceeding.  To
                establish a FrontPage password for the first time, e-mail "support, network," say you want to submit your
                FrontPage password,  give them a five - or more - character password of your choice (avoid making it the same
                as your Novell log-in password) and give them time to reply. 

1) Install FrontPage

2) Open the Internet: click on START > click on an Internet Browser > Minimize

3) Open FrontPage Explorer: click on Star t> Program > Microsoft FrontPage Start >
    FrontPage,
or double click on the Microsoft FrontPage icon on the screen/desktop. This
     automatically opens FrontPage Explorer.

If you are using FrontPage 98:

 4) At Getting Started (if it appears) click on More Webs. In the box that says, Select a web
      server or disk location
,
type in teachers.sduhsd.k12.ca.us/username in the first box,
      (where username is your first initial and full last name, all lower case, no spaces.)

5) Click on List Webs. This brings you to the Name and Password box, then type in:

6) Your web folder should open, displaying all its files and images. Double-click on index.html to access your Home Page or
     double-click on the page you want to edit.

7) In the future when you open FrontPage Explorer, your name will appear by default in the Getting Started dialog box. Click
    on it and you are ready to resume your work in FrontPage

If you are using FrontPage 2000:

8)    When you enter FrontPage 2000, click on Open.   In the address box at the bottom of the screen type:
        http://teachers.sduhsd.k12.ca.us/username and enter, or click, on the "Open" button.  When the Network
        Password
box appears enter your Username and Password, as indicated above.

9) . Your web folder should open, displaying all its files and images. Double-click on index.html to access your Home Page 
       or double-click on the page you want to edit.

10) In the future when you open FrontPage Explorer, your name will appear by default in the Getting Started dialog box.
      Click on it and you are ready to resume your work in FrontPage

Web Manager: Pete Evans                                                         Web Editor: Sally Sandler

 

  

******* 

 

NAVIGATING MS FRONTPAGE EDITOR – QUICK REFERENCE TABLE

MENU: MOUSE PT. TOOL BAR ICONS SHORT CUTS KEY STROKES
FILE: New Clear Paper Ctrl N Alt, F, N (Blank Doc)
Open Folder Ctrl O Alt, F, O
Save Disk Ctrl S Alt, F, S
Close     Alt, F, C
Preview in Browser Magnify. Glass / Ü Þ   Alt, F, B
Page Set-up     Alt, F, U
Print Preview     Alt, F, V
Print Printer Ctrl P Alt, F, P
       
EDIT: Cut Scissors Ctrl X or Right Click Alt, E, T
Copy Paper on Paper Ctrl C or Right Click Alt, E, C
Paste Clipboard Ctrl V or Right Click Alt, E, V
Undo Left Arrow (curved) Ctrl Z Alt, E, U
Redo Right Arrow (curved) Ctrl Y Alt, E, R
Clear (delete)   Del Alt, E, A
Select All   Ctrl A Alt, E, A
Find DBL Click Status Bar Ctrl F Alt, E, L
Replace DBL Click Status Bar Ctrl H Alt, E, E
Bookmark     Alt, E, B
Hyperlink Create/Edit Hyperlink Ctrl K Alt, E, K
Unlink     Alt, E, N
Font Properties Font Style & Size Alt Enter Alt, E, I
       
VIEW: (Toolbars)     Alt, V
       
GO: Back Ü Þ   Alt, G, B
Forward Ü Þ   Alt, G, F
Follow Hyperlink   Right Click on Link Alt, G, H
       
INSERT: Line Break   Shift Enter Alt, I, B
Horizontal Line   Dbl Click to Modify Alt, I, L
Symbol     Alt, I, S
Image Image   Alt, I, I
Clip Art     Alt, I, C
Active Elements     Alt, I, E
Form Field     Alt, I, M
Hyperlink Hyperlink Ctrl K Alt, I, K
       
FORMAT: Font Font Style & AÝ Aß Right Click Mouse Alt, O, F
  B (Bold) Ctrl B Alt, O, F
  I (Italic) Ctrl I Alt, O, F
  U (Underline) Ctrl U Alt, O, F
  Ü Indent Þ   Alt, O, P
  Text Color   Alt, O, F
Paragraph Left, Mid, Right Right Click Mouse Alt, O, P
Bullets & Numbers No. & Bullet Box Right Click Mouse Alt, O, N
Animation     Alt, O, M
Theme   Right Click Mouse Alt, O, T
Page Transition     Alt, O, A
Background     Alt, O, K
       
TOOLS: Spelling
  • ABC
F7 Alt, T, S
Options     Alt, T, O
       
MENU: MOUSE PT. TOOL BAR ICONS SHORT CUTS KEY STROKES
TABLE: Insert Table Grid   Alt, A, IT
       
FRAME: New Frames     Alt, R, N
       
HELP:   F1 Alt, H

 

Navigation Tips:

All roads lead to OZ. Some are faster than others depending on the task and your familiarity with the program. Beginners usually prefer Mouse and Tool Bar methods. Experienced users tend to prefer Short Cuts and Key Strokes. Since FrontPage is a dedicated web page editor, Mouse and Tool bar methods are very effective navigation tools for normal tasks. Do what works best for you.

 

KEYBOARD SHORTCUTS FOR MOVING THE INSERTION POINT (CURSOR):

PRESS TO MOVE THE INSERTION POIN
Right Arrow Right one character
Left Arrow Left one character
Down arrow To the next line
Up arrow To the previous line
End To the end of a line
Home To the beginning of a line
Page Down To the next screen
Page Up To the previous screen
Ctrl – Pg Up Up one full page
Ctrl – Pg Dn Down one full page
Ctrl – right arrow To the next word
Ctrl – left arrow To the previous word
Ctrl – End To the end of the document
Ctrl – Home To the beginning of the document

 

METHODS FOR HIGHLIGHTING TEXT:

TO HIGHLIGHT THIS DO THIS
Word Double-click the word
Line Click one time in the left margin beside the line
Sentence Press and hold down Ctrl and click in the sentence
Paragraph Triple-click anywhere in the paragraph

or Double-click in the left margin of the paragraph

Multiple paragraphs Double-click in the left margin beside the paragraph then drag to highlight following paragraphs
Entire document Triple-click in the left margin

or Hold down the Ctrl key and click one time in the left margin

or Choose Select All from the Edit menu

Objects (two or more) Press Shift and click on the objects

 

                                                                      *******

 

PRACTICE: CREATE A THREE-PAGE WEB SITE

(Modify as you see fit & refer to "Instructional Hints" for help)

                                                                      

FIRST PAGE -- HOME PAGE:

  • Open the FrontPage Editor
  • Center text at the top of the page & type: This is My New Web Page
  •   Enlarge fonts using icons on Format Bar
  • Go to FORMAT > BACKGROUND, and follow prompts to select a background from CLIP ART > OK
    • Opt: go to Internet > Yahoo > search for Backgrounds & chose something from the Internet. Follow "Instructional Hints" for inserting Background into web page
  • Highlight & change Font to Ariel, bold, italic & color it maroon (or a color
            in contrast with Background color)
  • Space 3 lines down with ENTER key, center the cursor and type: Home
            Page Main Menu
  • Highlight and change Font to Ariel, size 14, bold, & color it maroon (or whatever you choose)
  • Insert a two column Table two spaces below Home Page Main Menu
  • In the left column cell type: My Most Favorite Page
  • In the right column cell type: My Least Favorite Page
  • Highlight the entire table
  • Go to TABLE > TABLE PROPERTIES
  • Center text in table & color table cells fuchsia > APPLY > OK
  • SAVE AS: INDEX

 

                                                                     

SECOND PAGE:

  • Open a new blank page, center text at top and type: My Most Favorite Page
  • Highlight, change, enlarge, bold and color font
  • Insert a background pattern or color
  • SAVE AS: Page 1
  • Return to Home Page and in the table highlight and hyperlink My Most Favorite Page
  • to the new page with the same name

  • Check hyperlink colors. Go to FORMAT > BACKGROUND > OK
  • Go to bottom of the new page and type: [Return to Homepage]
  • Highlight and Hyperlink back to the Homepage

 

                                                                          

THIRD PAGE:

  • Open another blank page, center text at top and type: My Least Favorite Page
  • Change, enlarge, bold & color font
  • Insert a background pattern or color
  • SAVE AS: Page 2
  • Do same forward & backward linking routine as you did with My Most Favorite Page

 

                                                                       

HOMEPAGE:

  • Center the page two spaces below the Main Menu table on HOMEPAGE
  • Type: [Internet Sites] [Bottom]
  • Cursor down 10 spaces and type: Internet Sites. Then cursor 15 more spaces and type: Bottom
  • Highlight "Bottom" (at bottom of page)
  • Go to EDIT > BOOKMARK > OK
  • Go to [Bottom] (at top of page) & highlight
  • Go to EDIT > HYPERLINK > BOOKMARK (cursor to "Bottom" in dialog box) > OK
  • Do same routine for Internet Sites (at middle & top of page)
  • One space below Internet Sites type: "My favorite E-Mail Address"
  • On the same line follow this by creating a hyperlink. Type: pevans@sduhsd.k12.ca.us. Make sure you add a space after typing this.
  • One line below this type: College Board & highlight this title
  • Go to EDIT > HYPERLINK > BROWSE > YAHOO.COM > "COLLEGE BOARD" , then return to FrontPage. The college board address will appear in the URL box > OK. Now College Board is a linked address
  • One line below this type: http://www.yahoo.com and add a space
  • SAVE, open Internet, click the Preview icon, point and left click on the yahoo address
  • In Yahoo search for "Central Intelligence Agency" > Central Intelligence Agency
  • Right click on the CIA seal and left click on SAVE IMAGE AS
  • Insert image in Home Page document page
  • Point to it and center it just under "This is My New Web Page"
  • Point and left click on it again to resize it (if you like)
  • Finally, a few spaces under the CIA seal center text and type: Webmeister (and your name)
  • Highlight & Bold
  • Resize as you wish
  • Highlight, go to FONT > SPECIAL STYLES > BLINK > APPLY > OK
  • SAVE
  • Test All Links:
    • Click on "Preview" on bottom status line if in FrontPage 98
    • Point to link(s), right click > FOLLOW HYPERLINK
    • Preview all documents and links in Frontpage Preview browser. Follow prompts to open internet

f

 

 *******

 

CONNECTING YOUR WEB SITE TO AN INTERNET SERVER WITH FTP (File Transfer Protocol)*

Most of you can ignore this part, since the District has provided every teacher with a Teacher Web Page. As soon as you save your work it becomes a website.

If you are not a member of this select group you will not actually have a website displayed on the Web until you connect to the SDUHSD (or other) server through something called FTP (File Transfer Program) access. Contact the District Office, Joe McCormick or myself for advice and, if necessary we will set you up with this program and a password.

 

                                                                                     *******

  

                                                             

 

Suggested Bibliography for MS FrontPage & Web Page Design

(These can be found at most book stores. Crown Books gives 10% teacher discounts)

Dornfest, Asha. FrontPage Web Publishing & Design for Dummies. IDG Books, 1997.

Lehto, Kerry A. & Polmsby, Brett W. Microsoft FrontPage 97. Microsoft Press, 1997.

Wang, Wallace & Parker, Roger C. Microsoft Office 97 for Windows for Dummies. IDG Books, 1996.

Jones, Dennis & Randall, Neil. Using Microsoft FrontPage 98, Special Edition. QUE Corp, 1997

Check your bookstore for information on MSFrontPage 2000