The following instructions for webpage design using FrontPage on the Monmouth College Computer System were provided by Marcie Beintema of the MC Information Systems Office.

Webs

Open your Personal Web

  1. Open FrontPage by clicking on the Start button and selecting Programs - General Programs - Internet - Microsoft FrontPage. FrontPage opens.

  2. Click on the File menu and select Open Web. The Open Web window appears.

  3. In the Web name field, enter your full web address (e.g., http://personal.monm.edu/[your user name]).

  4. Click on the Open button. The Folder List appears. Note: If you do not see the Folder List, click on the View menu and select Folder List.

    Note: The Enter Network Password may appear when you open your web. In the User Name field, enter NT1\[your user name].

Display the Folder List - Click on the View menu and select Folder List.

Create a New Folder

  1. Click once on the top folder in the Folder List (the name of this folder begins with "http://"). The folder is selected.

  2. Click on the File menu and select New – Folder. The new folder appears in the Folder List.

  3. Enter a new name for the folder.

  4. Press the Enter key. The folder is re-named.

Web Pages

Create a New Web Page - Click on the Create a new normal page  toolbar button.

Save a Web Page

  1. Click on the Save  toolbar button. The Save As window appears.

  2. In the File name field, enter a file name for the web page.

    Note:         You can name files whatever you’d like, except for the home page. The home page must have a file name of index.htm or default.htm. Also, type file names in all lower case letters and separate multiple words with a hyphen or period.

  3. Click on the Change title button. The Set Page Title window appears.

  4. Enter a title for the web page.

  5. Click on the OK button. The Save As window appears.

  6. Click on the Save button. The page is saved and appears in the Folder List.

Change the Page Title

  1. Right-click on the page and select Page Properties. The Page Properties window appears.

  2. In the Title field, enter the new page title.

  3. Click on the OK button. The page title is changed.

Change the Page Background

To change the background color:

  1. Right-click on the page and select Page Properties. The Page Properties window appears.

  2. Click on the Background tab.

  3. In the Colors area, click on the Background down arrow and select a color.

  4. Click on the OK button. The background color is changed.

To add a graphic or image file to the background:

  1. Copy and paste the graphic or image file into the graphics or images folder.

  2. Right-click on the page and select Page Properties. The Page Properties window appears.

  3. Click on the Background tab.

  4. In the Formatting area, click on the Background picture checkbox.

  5. Click on the Browse button. The Select Background Picture window appears.

  6. Click on the file that you want to use for the background.

  7. Click on the Open button. The Page Properties window appears.

  8. Click on the OK button. The graphic or image is added to the background.

Hyperlinks

Create a Hyperlink to another Page in your Web

  1. Create and save the page to which you want to link (this can be a blank page).

  2. Select the text or picture that you want to make into a hyperlink.

  3. Click on the Insert Hyperlink  toolbar button. The Insert Hyperlink window appears.

  4. Under Link to, make sure that Existing File or Web Page is selected.

  5. Click on the page that you want to link to. The file name appears in the Address field.

  6. Click on the OK button. The hyperlink appears on the page.

Create Hyperlink to a Page Outside of your Web

  1. Select the text or picture that you want to make into a hyperlink.

  2. Click on the Insert Hyperlink  toolbar button. The Insert Hyperlink window appears.

  3. In the Address field, enter the full address of the page to which you want to link (e.g., http://www.monm.edu).

  4. Click on the OK button. The hyperlink appears on the page.

Create an E-Mail Hyperlink

Note: FrontPage will automatically create an e-mail hyperlink when you type in an e-mail address (e.g., jdoe@monm.edu). To create an e-mail link out of text that is not an e-mail address, follow the steps below.

  1. Select the text or picture that you want to make into a hyperlink.

  2. Click on the Insert Hyperlink toolbar button . The Insert Hyperlink window appears.

  3. Under Link to, click on E-mail Address.

  4. In the E-mail address field, enter the e-mail address that you want to link to (e.g., jdoe@monm.edu).

  5. Click on the OK button. The hyperlink appears on the page.

Create a Hyperlink to a Word or PowerPoint File

To link to a Word or PowerPoint file, you can copy and paste the .doc or .ppt file into your main web folder and then link to the .doc or .ppt file just as you would another page in your web. When you use this approach, the Word or PowerPoint document will open in Quick View Plus.

If you don't want the Word or PowerPoint document to open in Quick View Plus, then open the document in Word or PowerPoint and save it as a web page. Note: When you save the Word or PowerPoint document as a web page, an .htm file will be created. If your document contains pictures, then a corresponding folder containing web files also will be created. Copy both the .htm file and the folder into your main web folder. Then, create a link to the .htm file just as you would another page in your web.

Change the Hyperlink Colors

  1. Right-click on the page and select Page Properties. The Page Properties window appears.

  2. Click on the Background tab.

  3. In the Colors area, click on the Hyperlink, Visited hyperlink, and/or Active hyperlink down arrows and select a new color.

  4. Click on the OK button. The hyperlink colors are changed.

Text, Pictures, & Horizontal Lines

Keep Lines of Text Together - Press and hold the Shift key and then press the Enter key.

Add a Picture to a Web Page

  1. Click on the Insert menu and select Picture – From File. The Picture window appears.

  2. Click on the file that you want to insert.

  3. Click on the Insert button. The picture appears on the page.

  4. Save the page. The Save Embedded Files window appears.

  5. If desired, click on the Rename button and re-name the picture file.

  6. If necessary, click on the Change Folder button and select the graphics or images folder.

  7. Click on the OK button. The picture file is saved and appears in the graphics or images folder.

Re-size a Picture

To re-size a picture, you can either click on the picture to select it, and then drag one of the corner handles or you can right-click on the picture, select Picture Properties, and enter values for the width and height on the Appearance tab.

Specify Alternate Text for a Picture

  1. Right-click on the picture and select Picture Properties. The Picture Properties window appears.

  2. Click on the General tab.

  3. Under Alternative representations, in the Text field, enter a description for the picture.

  4. Click on the OK button. The text description appears when you position the cursor over the picture in the browser window.

Add Clip Art to a Web Page

  1. Click on the Insert menu and select Picture – Clip Art. The Insert Clip Art window appears.

  2. Under Search For, in the Search text field, enter a term on which to search for clip art.

  3. Under Other Search Options, click on the Search in down arrow and make sure that Everywhere is selected.

  4. Click on the Results should be down arrow and select the type of clip art files that you want displayed.

  5. Under Search For, click on the Search button.

  6. Click on the piece of clip art that you want to insert. The clip art appears on the page.

  7. Save the page. The Save Embedded Files window appears.

  8. Click on the Rename button and enter a more meaningful name for the clip art file.

  9. If necessary, click on the Change Folder button and select the graphics or images folder.

  10. Click on the OK button. The clip art file is saved and appears in the graphics or images folder.

Insert and Format a Horizontal Line

To insert a horizontal line, click on the page where you want to insert a horizontal line and then click on the Insert menu and select Horizontal Line. The horizontal line appears.

To format a horizontal line, right-click on it and select Horizontal Line Properties.

Tables

Insert a Table

  1. Click on the Table menu and select Insert – Table. The Insert Table window appears.

  2. In the Size area, specify the number of rows and columns for the table.

  3. In the Layout area, specify the alignment (select Center if you want to use the table for the page layout), border size (enter 0 if you do not want the borders to be visible), cell padding, cell spacing, and width (specify 600 pixels if you want use the table for the page layout).

  4. Click on the OK button. The table appears on the page.

Change the Background Color of a Table

  1. Right-click in the table and select Table Properties. The Table Properties window appears.

  2. Under Background, click on the Color down arrow and select a color.

  3. Click on the OK button. The table background color is changed.

Change the Background Color of a Cell

  1. Right-click in the cell and select Cell Properties. The Cell Properties window appears.

  2. In the Background area, click on the Color down arrow and select a color.

  3. Click OK. The cell background color changes.

Resize a Row or Column

To resize a row or column, drag the row or column edge to the desired height or width.

Insert a Row or Column

  1. Click in the table where you want to insert a new row or column.

  2. Click on the Table menu and select Insert – Rows or Columns. The Insert Rows or Columns window appears.

  3. Specify the number of rows that you want to insert and whether you want the row(s) inserted above or below the selected row.

  4. Click on the OK button. The row(s) is inserted.

Merge and Split Cells

To merge cells, select the cells that you want to merge, and click on the Table menu and select Merge Cells. The cells are merged.

To split a cell, select the cell and then click on the Table menu and select Split Cells.

Change the Horizontal and/or Vertical Alignment in a Cell

  1. Right-click in the cell and select Cell Properties.

  2. Click on the Horizontal alignment and/or Vertical alignment down arrows and select the desired alignment.

  3. Click on the OK button. The content is re-aligned in the cell.

Server-side Includes

Create a Server-Side Include - Create a new web page that contains the content that you want to insert on other pages in your web.

Insert a Server-Side Include

  1. Click on the page where you want to insert the server-side include.

  2. Click on the Insert menu and select Web Component. The Insert Web Component window appears.

  3. Under Component type, click on Included Content.

  4. Under Choose a type of content, click on Page.

  5. Click on the Finish button. The Include Page Properties window appears.

  6. Click on the Browse button. The Current Web window appears.

  7. Click on the page that you want to include.

  8. Click on the OK button. The Include Page Properties window appears.

  9. Click on the OK button. The content of the page appears.