Beginning FrontPage 2000

• 1. Prerequisites
• 2 .Objectives
• 3. Getting Setup For Class
• 4. Opening FrontPage 2000 and Looking Around

  • Front Page Webs
  • 4.2 Page View
  • 4.3 Opening a Page Options
  • 4.4 Closing a Page Options
  • 4.5 Creating a New Page/Web
  • 4.6 Saving Options
  • 4.7 Development Options
  • 4.8 Menu Format Options
• 5. Creating a Home Page
• 6. Creating a Second Level Page with a Table
• 7. Linking Pages
• 8. More Linking
• 9. Text Formatting
• 10. Inserting Images
• 11. Resizing Images
• 12. Inserting a Date
• 13. Lists
• 14. Inserting a Hover Button
• 15. Inserting a Hover Image

Attachments:

1. Prerequisites

In order to fully participate in this workshop, you must be able to:

If you do not know something listed above, we strongly suggest that you sign up for the prerequisite workshops before taking this workshop.

<back to top>

2. Workshop Objectives

At the end of this workshop, you will be able to:

1. Create/edit an HTML page using FrontPage 2000
2. Use the various properties and menus found in FrontPage 2000
3. Link pages, insert images, and rollover buttons

<back to top>

3. Getting Setup - Exercise Resources

Click on each link below. When the item appears, execute the File/Save As process and save it to a directory on your computer (preferrably some place in the c:\temp directory).

Sample image

GMU Logo

Rollover 1

Rollover 2

Exercise Page

<back to top>

4. Opening FrontPage 2000

Start the Program

• Depending on your installation, it could be located at Start/Programs/Microsoft/FrontPage.
• OR you may find an Icon on your desk top

Front Page Webs

Page View

Opening Files or Webs

Closing Files or Webs

Create New Page or Web

Saving Files

Development Preferences

Menu Options

<back to top>

4.1 Web Pages vs. FrontPage Webs

Web Pages can be described with the following:

• Web pages created using Frontpage 2000
• Series of web pages and images connected using HTML that reside in an arbitrary folder on your hard disk
• Placed on a web server using a tool like WS_FTP
• Maintained using a variety of HTML editors (including Notepad)

FrontPage Webs can be described with the following:

• "FrontPage-based webs...contain files that support FrontPage - specific fuctionality...." which allows FrontPage to manage them more efficiently.
• "A Frontpage web consists of all the individual pages and folders that reside within a specially designated folder on your hard disk or Web server".
• Published to a web server using a built-in Frontpage publishing tool
• No one file or folder can be a member of two Webs -- A Web inside another Web - "operations on one Web will not affect the other." (Jim Buyens, Running Microsoft Frontpage 2000)

  
  FrontPage Web folder icon = little globe

<back to top>

4.2 Page View

When you open Front Page, you will be in Page View:

Other views - the buttons on the left represent other views that are available in FrontPage, but only when you are creating FrontPage webs. They will be discussed in more detail in the Intermediate FrontPage workshop.

Folder View - Provides a view of the files and folder associated with a FrontPage web.

Reports View - Provides access to 14 interactive reports associated with a FrontPage web. Examples include: component errors, slow pages, unlinked files, broken hyperlinks, checkout status, etc.

Navigation View - Provides a way to view the FrontPage web as an organization chart. Does not show links.

Hyperlinks View - Shows how a FrontPage web page is linked to another FrontPage web page.

<back to top>

4.3 Opening a Page Options

Once you have opened Front Page, there are five ways to open a web page:

1. Open - This opens a file from a location of your choice
2. Open Web - This option assumes the file you click on is part of a FrontPage 2000 web. If it is not, it will ask you if you want it to add the necessary data into your files in order to make a FP2000 web.
3. Import - Allows you take an existing web site an make a FrontPage web.
4. Recent Files - Opens files recently used.
5. Recent Webs - Opens FrontPage webs recently used.

   Note: You can turn your existing web site into a FrontPage web by using either "Open Web" and clicking "yes" or "import."

<back to top>

4.4 Closing Options

There are two ways to close a web page:

1. Close - This closes the open file
2. Close Web - Needed to close a FP2000 web. Not available if a FP2000 web is not open. Closing a web, closes the Folders view.

<back to top>

4.5 Create a New Page/Web Options

There are two ways to open/create a new file:

1. New Page -

   Gives you the option of starting from a blank (normal) page or choosing a built in template.

   Note - for some of these templates, you may need to put your web site on a FrontPage server)

2. New Web Options -

• One page
• Empty Web

  The following are FP wizards to help you get started. (for some of these, you may need to put your web site on a Front Page server)

• Corporate Presentation
• Customer Support Web
• Discussion Web Wizard
• Personal Web
• Project Web
• Import Web Wizard

<back to top>

4.6 Saving Options

There are two ways to save a web page:

1. Save - This saves a file to the location of your choice.
2. Save As - This gives the option to save as any number of web page types (e.g., shtml, asp, etc.) or other web-related files, such as:
   • a FP2000 template
   • cascading styles sheet
   • actvie server pages
   • hypertext template

<back to top>

4.7 Development Preferences

Set development level preferences. This is located under Tools>Page options>Compat-ability

Browsers - choose the browser (Netscape, Internet Explorer, etc.) environment that meets your needs.

Versions - Level 3.X or 4.X.

The version number tell you how recent the software is that you are designing for. It is recommended that, in order to be accessible to as many users as possible, you use 3.X or greater.

Servers - MS or Apache.

Every website must be hosted on a server (a computer that "serves" the files to you when you are browsing). Different servers are configured slightly differently. Two of the most common types of servers are Microsoft or UNIX (Apache).

Extensions - Uncheck to disable

Extensions are files that need to be on your server to allow certain FrontPage components to work. If you are not going to be using a server with FrontPage extenstions, don't forget to uncheck this box!

Technologies - Will be checked and unchecked as selections are made with the options above.

Note: You need to choose both a browser and version. If you just choose version without choosing a browser, it won't check and uncheck the right technologies.

<back to top>

4.8 Menu Format Options

To turn off MS Smart menus:

1. Go to Tools>Customize> Options
2. Deselect "Menus show recently used commands first"

<back to top>

5. Make Your Homepage

Step 1 - Create a Page

1. Go to "File" > "New" > "Page" to create a new page.
2. Choose "normal page" from the new page options (you may not be given other options if they are not installed on your computer).
3. Type your name on the page
4. Insert a horizontal line
5. Type the following: Home | Sample Page 2 | Syllabus
6. Type your school location information
7. Right-click over the blank area of the page and select Page Properties
8. Give your page a title
9. Save the file as index.html

Step 2 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

Step 3 - View the Code

1. From FrontPage 2000, click on the HTML tab

<back to top>

6. Second Level Page

Step 1 - Create a Second Level Page

1. Click File>New>Page to create a new page OR click on the new page Icon
2. Right-click over the blank area of the page and select page properties
3. Give your page a title
4. Save the file as page2.htm

Step 2 - Create a table for layout purposes

1. Click Table>Insert>Table
2. Select 2 rows, 2 columns, 0 for borders, 595 pixels
3. Click OK
4. Save your changes (as page2.htm)

Step 3 - Fill the table

1. Type "Sample Page 2" in the top cell on the left
2. Type "Home" in the top cell on the right
   
   
3. Connect the two columns in the second row by first highlighting the two rows and then select Table>Merge Cells
   
4. Insert a horizontal rule into the single row
5. Set the background color of this row by right-clicking in the row and selecting Cell properties. Then choose a background color.
   
   
6. Place cursor into the last row and hit the tab key to create a new row
7. Remove the color of this row by right-clicking on the row and selecting Cell properties. Then choose a background color> Automatic
8. Type the following in the row: "Sample Page 2 | Syllabus"
   
   
9. Insert two more rows using the tab key
10. In the last row type: "Put your mouse over the image"
11. Save your changes (as page2.htm)

Step 4 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

<back to top>

7. Link Pages

Step 1 - Make a Link to another page in your site

1. Return to index.html
2. Highlight "Sample Page 2" in the menu area
3. Click on Insert > Hyperlink
4. Locate the page2.htm file (do not use the first screen, click on the icon with a folder and magnifying glass to see the files for linking) and double click on it
5. Repeat this process to link the sample syllabus
6. Save your changes

   Note: When you make links from one page to another in FrontPage, you should make sure both files are open on your computer. If not, your computer will make a link in such a way that you will have problems when you upload your site (i.e. -- the computer will make absolute instead of relative links).

Step 2 - Make a Link to another page in your site

1. Return to page2.htm
2. Double click on the word "Home" in the menu area
3. Click on Insert > Hyperlink
4. Locate the index.html file and double click on it
5. Repeat this process to link the sample syllabus
6. Save the file as page2.htm

Step 3 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

<back to top>

8.More Linking

Step 1 - Links within a Page

1. Open samplesyllabus.htm
2. To set the bookmark (this is called a "named anchor" in HTML):
   1. Put your cusor before the bold text headers on the page
   2. Click on Inser t> Bookmark
   3. Give it a simple one-word name you can remember
3. Highlight the word in the menu that will receive the link
4. Use Insert > Hyperlink and select the bookmark by clicking on the bookmark menu
5. Repeat this process until all the links are made
6. Save the samplesyllabus.htm file

Step 2 - Make an email link

While in samplesyllabus.htm
1. Scroll to the bottom and highlight the email address
2. Using Insert > Hyperlink and select the envelope icon
3. Enter the email address (e.g., jdoe@gmu.edu)
4. Save the samplesyllabus.htm file

Step 3 - Make web link

While in samplesyllabus.htm
1. Highlight "George Mason University"
2. Using Insert > Hyperlink, go to URL and type www.gmu.edu after the http://
3. Save the samplesyllabus.htm file

Step 4 - Make another menu link

While in samplesyllabus.htm
1. Highlight "Return to Homepage"
2. Click on Insert > Hyperlink
3. Locate the index.html file and double click on it
4. Save the samplesyllabus.htm file

Step 5 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

<back to top>

9. Text Formatting

Step 1 - Web Friendly Fonts

1. If necessary, reopen samplesyllabus.htm
2. Hit Ctrl-A on your keyboard to select all
3. Click on Format > Fonts
4. Select Arial
5. Save the samplesyllabus.htm file

Step 2 - Set a Font Size

1. While still in samplesyllabus.htm
2. Highlight the text that looks like a menu
3. Select a font size of 2 from the drop down box on the formatting toolbar
4. Save the samplesyllabus.htm file

Step 3 - Change Color

1. While still in samplesyllabus.htm
2. Highlight the title of the page
3. Click on the font color icon from the drop down box on the toolbar
4. Select a color
5. Save the samplesyllabus.htm file

Step 4 - Menu Emphasis

1. If necessary, open index.html
2. Highlight "Home"
3. Click on the B (bold) in the toolbar
4. Save the index.html file

Step 5 - Menu Emphasis

1. If necessary, open page2.htm
2. Highlight "Put your mouse over the image"
3. Click on the B (bold) in the toolbar
4. Save the page2.htm file

Step 6 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

<back to top>

10. Insert Images

Step 1 - Insert an Image

1. If necessary, reopen page2.htm
2. Place the curser at the end of the Home link
3. Hit Shift-Enter to insert a line break
4. Click Insert > Picture > From File ...
5. Double click the gmulogo
6. Save the page2.htm file

Step 2 - Make the image a link

1. While still in page2.htm
2. Right click once on the GMU logo
3. Select Picture Properties
4. In the location box, enter http://www.gmu.edu
5. In the text box, enter "GMU Homepage" in the Alt space
6. Save the page2.htm file

Step 3 - Align the content in the cell

1. While still in page2.htm
2. Right click once in the cell with the GMU logo and click on Cell Properties
3. Select Center for the Horizontal alignment
4. Select Top for the Vertical alignment
5. Save the page2.htm file

Step 4 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

<back to top>

11. Resize Images

Step 1 - Insert an Image 

1. From the Window menu, open index.html
2. Place your cursor in the middle of the page and click Insert > Picture > From File ...
3. Select the brown.jpg file and hit OK
4. Save the page

1. Click once on the image to select it (black handles appear)
2. Click the black handle on the right bottom corner of the image and drag left and up diagonally to make the image smaller
3. In the Pictures toolbar located at the bottom of the work area, click on the Resample button (this changes the file size of the picture to match the current display for faster downloading)
4. Save the file -- the Save Embedded Files dialog box appears -- check the following:
1. Make sure the Folder path is correct
2. Set the Action: you can choose to overwrite the original file, which is what reduces the file size, or just have the new image reference the original file when it is displayed, which will not improve download performance.
3. For this exercise, change the file name to brown2.jpg and hit OK
5. Preview your page

Step 3 - Auto Thumbnail

1. Click the Normal tab to return to work on index.html
2. Set your cursor a few spaces below the image and click Insert > Picture > From File ...
3. Click once on the brown.jpg file to select it
4. This time click the Auto Thumbnail button in the Pictures toolbar and observe the change
5. Save the file -- the Save Embedded Files dialog box appears -- observe that a new file name has been automatically created
6. Click OK to save the new image file and the index.html file

NOTE: this will create a new smaller file in addition to the original file. You must upload both files. Download speed will be improved because the first file that is downloaded on opening is the smaller thumbnail picture. The larger picture can be viewed by clicking on the thumbnail picture.

Step 4 - Preview the Page Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on  in the menu or File>Preview in Browser ... 

<back to top>

12. Insert Date

Step 1 - Insert a date

1. From Window in the Main menu, open index.html 
2. Move the mouse to the bottom of the home page and click on the blank screen
3. With the cursor blinking, click the center alignment button and then the italics button in the formatting toolbar
4. Type the following: Last Updated:
5. With the blinking cursor positioned at the end of your text, select Insert > Date and Time from the Main menu
6. In the dialog box, choose a Display option and Format type
7. Click OK
8. Save your changes

<back to top>

13. Lists

Step 1 - Insert a bulleted list

1. Select page2.html from Window in the Main Menu
2. Place the cursor on the page where you want to start your bulleted list, then click the bullet button in the formatting toolbar
3. Type the first item in your list, then hit Enter
4. Type 3 more items and press Enter after each item
5. To stop inserting bullets, press Enter twice
6. Save your changes

Step 2 - Indent items in a bulleted list

1. Place the cursor at the end of the second bulleted item
2. Click the Increase Indent button located in the toolbar twice, then press Enter
3. Type some text and click the Increase Indent button twice again
4. Highlight the item you first indented and click the Decrease Indent button twice to return it to the same level as the major bullets -- observe the result

Step 3 - Insert a numbered list

1. Place the cursor on the page where you want to start your numbered list, then click the numbering button in the formatting toolbar
2. Type the first item in your list, then hit Enter
3. Type 3 more items, hitting Enter after each item
4. To stop inserting numbers, press Enter twice
5. Highlight items #2 and #3, then click the Increase Indent button twice
6. Right-click on the selected items and choose List Properties
7. Make sure the Numbers tab is showing and select the lower case alpha symbols and click OK
8. Save your changes

<back to top>

14. Hover Button

Step 1 - Insert a Hover Button

1. If necessary, reopen page2.htm
2. Click in the first empty table cell after the menu
3. Click Insert > Component > Hover Button
4. In the Button text: field, type: George Mason University
5. In the Link to: field, type: http://www.gmu.edu
6. Choose a Button color
7. Choose Effect > Glow
8. Choose Effect color
9. Change the Width field to 185
10. Save the file in order to make it work

Step 2 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

<back to top>

15. Hover Images

Step 1 - Insert a Hover Image

1. Return to page2.htm
2. Position your cursor after the text in the last cell and hit Shift-enter
3. Click Insert > Component > Hover Button > Custom...
4. In the Custom dialog box, Browse for the initial Button graphic (cursor1.jpg)
5. Browse for the "On Hover" graphic (cursor2.jpg)
6. Click OK and return to the Hover Button Properties box and enter the size of the graphic (360x36)
7. Save the file at page2.htm

Step 2 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - click on in the menu or File>Preview in Browser ...

Step 3 - View the Code and the extra files it created

1. From FrontPage 2000, click on the HTML tab
2. Open Windows Explorer (right click Start, click on Explorer) and open the folder that contains page2.htm. Look for files with the extension .class

NOTE: When uploading the page with the hover image, be sure to upload the files with extensions .class.

NOTE: When inserting a hover image to a new blank page, you must save the page first, and ensure that the images are located in the same directory that holds the new file.

<back to top>

A1. Insert Tools and other Features Matrix

<back to top>

A2. Component Matrix

<back to top>

A3. Graphic Editor Matrix

<back to top>