CTLE Online Tutorials / Technology Tutorials

Creating Student Web Pages:
Microsoft FrontPage

Microsoft Frontpage is a powerful tool used to create web pages. It allows you to make changes to a document, and edits the HTML for you. With FrontPage, you can create tables, add images, and much much more. In this tutorial, you will create three pages. A Home Page (default), an "About Me" page, and a page pertaining to a Writing course (i.e. Writing 218). You will learn how to add and manipulate text, add images, create hyperlinks, and create and manipulate tables. Screen shots of sample web pages that you will create through this tutorial are listed below. To view them in full size, click "large image" below each screen shot.

Creating the Home Page (Default page)

Play video

Sample Homepage [large image]

1. Open MS Frontpage
2. From the FILE menu choose New › Page or Web OR if a menu appears on the right side of the screen, under NEW choose BLANK PAGE.
3. Click at the top of the page and add a title, such as: "Your Name's Page."
4. Center the text by highlighting the text and clicking this icon on the toolbar.
5. Modify the Font Type and Size by highlighting the text and then from the Format menu choose Font. Scroll through the list and highlight one to choose it. Then choose the size. For example, Bradley Hand ITC, 18pt. You can also change the Font Color by clicking on the drop down box and choosing a color. Click OK to close the window once you've made your choices.
6. To change the background color, go to Format and choose Background. Here you can change the background color, as well as you hyperlink colors, and text color for the whole page.
7. Creating a Table – Next you are going to create a table that has 3 rows, 2 columns, and has a width of 755px. To do this:
   • Go to the Table menu, and choose Insert › Table.
   • Make a table that is 3 rows, and 2 columns.
   • The Table width should be 755px.
   • You can also change the border width and colors.
8. Merge Cells - To have all the cells in the 2nd column of the table appear as one large cell, highlight the 2nd column and from the Table menu choose Merge Cells.
9. Go to File › Save As... and save it as default.html by typing that into the filename field. Your homepage MUST be named this so that it appears when you access your web site.
    
   * Note: You should save your work frequently to prevent losing it.

Sample Homepage 2 [large image]

Now that you have a home page created, there are a number of things that you can do. In this section you will learn how to create hyperlinks and add your e-mail address.

1. In the first cell of the first column in the table, you will make a hyperlink called "Home." Right click in the cell and choose Hyperlink from the drop-down menu.
2. In the "Text to display" field, type "Home."
3. In the "Address" field, type "default.html." Click OK.
4. In the second cell of the first column in the table, you will create another hyperlink. Right click in the cell and choose Hyperlink from the drop-down menu.
5. In the "Text to display" field, type "About Me."
6. In the "Address" field, type "aboutme.html." Click OK.
7. In the third cell of the first column in the table, you will create a third hyperlink. Right click in the cell and choose Hyperlink from the drop-down menu.
8. In the "Text to display" field, type "Writing 218."
9. In the "Address" field, type "writing218.html." Click OK.
10. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
    • * Note: If you want to create hyperlinks between web pages or add images to pages, be sure that the files (html and graphics) are saved in the same directory, otherwise the address will be incorrect.
11. Next, you will create an E-mail Link on your home page so people can send you email.
12. Place the cursor below the table and type "Email me at:". Right click and choose Hyperlink from the drop-down menu.
13. On the left below the "Link To:" area click "E-mail Address."
14. In the Text to Displayfield and the E-mail Address field, type your full email address (i.e. smithj1@scranton.edu). Click OK.
15. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
16. You can view your page by going to File and choosing Preview in Browser.

Creating the "About Me" Page

Play video

Sample "About Me" Page [large image]

In creating this page, you will learn how to add clip art and images, and make an unordered (bulleted) list.

1. From the file menu choose New › Page or Web OR if a menu appears on the right side of the screen, under NEW choose BLANK PAGE.
2. Click at the top of the page and add a title, "About Me."
3. Format the text by highlighting it and choosing options from the Format menu. You can center it, choose a font type and size and change the font color as you previously did.
4. Format the background color, text color, and hyperlink colors as you previously did.
5. Go to File › Save As... and type aboutme.html as the filename to save it as.
6. Next, you will add a pictureto your page. Go to Insert › Picture › Clipart. The clipart menu appears on the right hand side of the screen.
7. Click on the "Search Text" field and type "Sports." Next, click the Search button to begin searching the library of pictures.
8. Thumbnail pictures will be displayed on the right side of the screen.
9. Choose a picture and add it to your page by double clicking it, or dragging it into place.
   • If you have your own picture that you want to add (.jpg or .gif), from the File menu choose Insert › Picture › File. It would be best if beforehand, you put the picture in the same folder as your web page, so there are no problems viewing the pictures.
   • *NOTE: When you add an image to a web page, you must upload the page AS WELL AS the picture.
10. To resize the picture, click once on the picture and it will be outlined with small black boxes. By placing your mouse over one of the corner boxes, the icon will change into a double arrow. Click and hold the mouse button down and drag it down to increase it and up to decrease it.  Release the mouse once you have the desired size.
11. To move the picture, click once on the picture and it will be outlined with small black boxes. Click inside the black boxes and hold the mouse button down while dragging it to the desired location. Release the mouse.
12. Next, create a bulleted list to highlight some of your interests. Place your cursor below the picture and type the text: "Some of my interests are:" and press enter.
13. Click on this icon to start a bulleted list. Type text for each bullet. Add a new item by pressing Enter. Click the icon again to end the list.
    *TIP: When creating bulleted lists, it is best to keep them left aligned, so all the bullets line up. If you would like to have a centered list, simply make a table with one cell, borders equal to 0, and the table aligned center. Then put the list (still left aligned) inside the table.
14. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
    NOTE: You will be prompted with a dialog box asking if you want to Save Embedded Files (pictures) in your file. Check to make sure the filename of the picture DOES NOT contain any "brackets" or "numbers within brackets" in the filename. If it does, click the Rename button and remove the brackets and/or numbers. Then click OK.
15. You can view your page by going to File and choosing Preview in Browser.

Creating the "Writing 218" Page

1. From the file menu choose New › Page or Web OR if a menu appears on the right side of the screen, under NEW choose BLANK PAGE.
2. Add a title: "WRITING 218."
3. Modify the Font Style and Size. Center the title.
4. Add a Background Color- RIGHT CLICK anywhere on the page and choose Page Properties. Click the Background Tab and change the color.
5. Add text describing the page. For example, "This is a page for my Writing 218 course. You can view all of my assignments by click on the links below.
6. Now, add a hyperlink. Press enter to move the cursor down a line. Right click and choose Hyperlink from the drop-down menu. In the "Text to display" field, type "Assignment 1 - 5/20/04." In the "Address" field, type "assn1.html". Click OK.
7. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
8. You can view your page by going to File and choosing Preview in Browser.

You have just completed creating three web pages (default.html, aboutme.html, writing218.html). The next step is to upload these web pages to your directory on the Academic server. Click here to view the Upload Your Files Tutorial (FTP) tutorial.

Other things you can try:

• Adding a Scrolling Marquee: Go to Insert › Web Component › and under Dynamic Effects, choose Marquee.
• Making a Picture the Background: Go to Format › Background and check off Background Picture, and then browse for a picture. Remember: all images and pages should be in the same folder.