Tutorial:  Using FrontPage

FrontPage is a web editor used to create, edit, and view pages using a familiar WYSIWYG (What You See Is What You Get) interface similar to word-processing programs such as WordPerfect and Microsoft Word. 
Open the FrontPage Editor

 

  1. Click on the Start button, go to Programs, then to Microsoft Office and click on the Microsoft FrontPage icon .
  2. FrontPage opens and displays "New Page 1."

Open an Existing FrontPage File

  1.  From the File menu, select Open and open (____).htm (You can only open .htm or .html documents in FrontPage.)

Set File Title

 

  1. Click on File and select Properties.  Give your document a title and click OK.

  2. Click on the HTML tab on the bottom left side of the window.

  3. Locate <title>(title you’ve assigned)</title>

  4. Change the title slightly in HTML view if you’d like.

  5. Click on the Normal tab at the bottom to return to the editor.

These are two different methods of changing the title of the page. When editing the document title from within WebCT, you will need to use the second method or the edit titles option with content pages.

When viewing the file with Internet Explorer or Netscape the internal title is shown at the top of the browser window. This is the title that is within the html code for the document. It does not have to be the name of the file that is stored on your computer.

Format Background

On the FrontPage Editor's Format menu, select Background.  You may need to expand the menu to find this option.  The Page Properties dialog box appears.

  1. Click on the box next to Background picture.

  2. Find a background picture you would like to use and save it to disk--or use one of the images in clipart. Browse to find the file you have saved.  Click OK.  Click OK again to return to the FrontPage Editor.

  3. Select the Format > Background option again.

  4. In the Page Properties dialog box, click on the box next to Background Picture to deselect that option and change the background color from "Automatic" to the white selection.  

  5. Click OK again to return to FrontPage

The background color is changed to white.

FrontPage allows you use background image files in your Web pages or to change the page background color.

Saving the File

 

On the File menu, choose Save As.  The Save As dialog box opens. Save to your diskette.

FrontPage saves the file with a three character ".htm" file extension. You now have an HTML file

Inserting a Table

From the Table menu, select Insert > Table. The Insert Table dialog box is displayed.

  1. In the Rows field, enter 1.

  2. In the Columns field, enter 2.

  3. In the Border Size field, enter 0.

  4. In the Width section click on Specify Width and edit the values to be 100 percent.

  5. Cell Padding - The space between the contents and inside edges of a table cell.

  6. Cell Spacing - The amount of space between cells in a table.  Cell spacing is the thickness, in pixels, of the walls of each cell.

  7. Width - The relative (percent) or absolute (pixel) width a table will be.  The value 620 is used to account for a 640x480 resolution.

Click OK.  FrontPage creates a table with one row and two columns within the existing cell.  You can create whatever kind of table you want.  Also play around with the formatting of the tables by doing a right-mouse click.  You will find that you can merge cells, divide them, resize them, etc.

Saving the File

 

On the FrontPage toolbar, click the Save button .

When inserting a table with a border size of zero, Microsoft FrontPage displays a table grid to help you design the layout of the table. This grid is only a guide; when the page is displayed in a Web browser, the grid will not be shown.

If you want the table to appear with borders, right-click anywhere within the table in FrontPage and choose Table Properties.  In this dialog box, you can increase the Border Size value.

Merging and splitting cells You can merge and/or split cells in FrontPage to give a page the look and feel you want.  
  1. Add another row to your table by hitting the tab key.  
  2. Select the new row.
  3. Right-mouse click and select "merge cells".
  4. Practice splitting cells by going through the same process, but choose "split cells" instead of "merge cells".
Adding Text to the Table

Adding text in FrontPage is as simple as clicking in a cell and typing.  You will see options for bolding, italicizing, underlining, etc. in the menu bar at the top.

Inserting an Image
  1. Find a picture you would like to incorporate in your document and save it to disk.

  2. Position the cursor in the cell into which you want to place the picture.  From the Insert menu select Picture > From File…. Navigate to and select your picture file on your diskette.  If you don’t see it, you need to choose All Files from the field Files of Type.

  3. Click OK. The image is inserted into the cell.

Inserting a Horizontal Line
  1. Add another row to your table and merge the cells.

  2. Position the cursor in the new cell.  

  3. From the Insert menu, click on Picture > Clip Art.

  4. Click on the Web Dividers category and select a divider that looks like a line.

  5. Click on the image. When the selection menu comes up, select the top choice to insert the graphic into your document.

  6. With the line image selected, click on the Center align button .  

Inserting Files

Earlier in this lesson you added text to your page by typing it on the page using FrontPage. There may be times, however, when it will be easier to transfer content to your Web pages from other documents.

With Microsoft FrontPage you can insert the following types of files into your pages by cutting and pasting, or by clicking on insert and then file;

  • ASCII Text (TXT)

  • Rich Text Format (RTF)  

  • Adobe Acrobat (PDF)  

  • Hypertext Markup Language (HTM or HTML)  

  • Word Processing (including Microsoft Word)  

  • Spreadsheet (including Microsoft Excel)

Adding a Time Stamp

 

With your document open,

  1. Place the cursor in the bottom cell of the table and type “This page last edited on "
    Leave a blank space after the last word.

  2. From the Insert menu, select Date and Time…

  3. The Date and Time Properties dialog box appears.

  4. Select the radio button next to “Date this page was last edited” and a date format of mm/dd/yy. Leave the time format as (none).

  5. Click OK.

The date is entered at the end of the sentence and will be updated when the page is edited.

Creating an Email Hyperlink

 

With your document open,

  1. Place the cursor in the bottom cell of the table to the right of the time stamp you just entered.

  2.  Press Shift+Enter to create a line break.

  3. Type "Comments? Questions?"

  4. Select all of the text.

  5. Click the Hyperlink button  on the FrontPage toolbar.

  6. Toolbar buttons offer convenient shortcuts to FrontPage menu commands.

  7. In the Create Hyperlink dialog box, click the Email button .

  8. In the Create Email Hyperlink dialog box, type your email address (for example, someone@cccneb.edu).

  9. Click OK. The URL field in the Create Hyperlink dialog box should now contain "mailto:someone@ccc.neb.edu"

  10. Click OK.