Computers in Geology    GEOL 372

FrontPage Lesson 1 - Creating a Simple Web Page

FrontPage Resources

FrontPage Workbooks (CSULA Student Scholar's Training Program) - nuts-n-bolts
FrontPage Tutorials (Electric Teacher) - short-n-sweet; good tips on working with images

Introduction to FrontPage

Web pages are documents created in HTML (Hypertext Markup Language).  HTML is what makes linkages between pages possible.  An HTML page contains tags - embedded commands that define the appearance, content, and structure of a web page.  Experienced web developers create their web pages from scratch by writing HTML code.

FrontPage is an HTML editor. There are a number of others.  FrontPage and other HTML editors allow you to create web pages without knowing HTML.  In FrontPage, you enter the contents of your web page in a not-quite WYSIWYG ("what you see is what you get") environment that resembles a word processor.  Meanwhile, the program adds the HTML tags for you so that, once your page is "published" on a server, others can translate and view your content using a web browser, such as Explorer or Netscape.  A server is simply a networked computer that is dedicated to holding all of the files related to one or more particular web sites.

Some Common Tasks in FrontPage

Opening a web

  1. Go to File on the menu bar and go down to New and click on Web.
  2. Click on the one page web icon. Type in the location where  you want your web to reside locally on your machine. 
  3. Click on next.
  4. Your new web will open with a blank page if you were in page view when you created the web. 
  5. You can begin designing your new web. 

Editing an existing web page in FrontPage

With the desired page open in IE, go to File>Edit with Microsoft FrontPage.

Using Page Views

Click on the tabs at the bottom of the page.

Previewing your page in Microsoft IE

Go to File>Preview in Browser

Entering and formatting text and lists

Basically use the same techniques you use in MS Word.  There are some differences with respect to formatting that take some getting used to.

See the FrontPage Workbook Part 1, Lesson 3 for more basic text tips.

Entering and formatting tables

  1. Go to Table on the menu bar and down to insert and click on table.
  2. The Insert Table dialog box will open. Type in the number of rows and columns you want to add. 
  3. Click on OK.
  4. The table will be added to your page.
There are several non-conventional uses of tables.  For example, a table can be used to group together an image with its caption.
Fall reminds me of school!

See the Electric Teacher tutorials for more tips on working with tables.

Inserting horizontal lines

Insert>Horizontal Line

Inserting clip-art

  1. Go to Insert on the menu bar and go down to Picture and click on Clip Art.
  2. The Insert Clip Art Gallery will open. Click on the category that you want to use. You can also type a keyword in the search for clips box. Hit enter.
  3. Right click on the image you want to use and click on insert or click on the image you want to use and click on the insert clip icon.
  4. Your image will appear on your page. ( Images in Front Page work a lot like text. You can align them, put them in a table or click and drag them to a location.) You can resize them by clicking on the corner handle and moving out to enlarge and in to decrease the size. ( You do not need to hold the shift key down it will keep the picture in proportion automatically.)

Inserting an image

  1. Go to Insert on the menu bar and go down to Picture and click on From File.
  2. The Picture dialog box will open.  
  3. Click on the file folder with the magnifying glass in the bottom right hand corner. The Select File dialog box will open.
  4. Click on the file for the image you want to use. You can use various file types but once inserted into FrontPage they will be converted to either JPEG or GIF.
  5. Click on OK.
  6. Your image will be added to your page.

HINT- It is a good idea not to have spaces in your image file names.

"Thumbnailing" an image

You can display "thumbnails" of large images on your web page to speed up load times for people viewing your web page.  If the person wants to see the full-sized image, they simply click on the thumbnail.

Here is an example of a thumbnail image.  Go ahead - click it! 

  1. Click on the image you want to convert to a thumbnail.
  2. Click on the Auto Thumbnail button from the pictures' toolbar which is located at the bottom of the screen. 
  3. Your image will automatically convert to a thumbnail and it becomes a hyperlink.

Resampling an image

When you insert an image into FrontPage it will retain the original size of the image. If you resize the image by clicking and dragging, it will appear smaller but the size of file will remain the same thus affecting the download time of your page. If you resize an image smaller than its original size you need to use the resample button after resizing. This will reduce the file size of the actual image.

  1. Click on the image and click on a corner handle. Drag inward to make the image smaller.
  2. Click on the resample button.   It is found on the Pictures toolbar on the bottom of the screen.
  3. Your image file size will now be reduced.

Cropping an image

  1. Click on an image that you want to crop.
  2. Click on the cropping tool icon from the Pictures' toolbar which can be found on the bottom of your screen.
  3. You image will now have a dotted line with handles around it.
  4. Click on the handles and drag them until the dotted lines are around just the portion of the image that you want to display.
  5. Click on the crop tool one more time to crop your image.

Adding text on an image

  1. Click on the image that you want to add text to.
  2. Click on the text icon from the Pictures' toolbar on the bottom of your screen.
  3. A text box will appear on your image. Type the text you want to add. You can move the text and format it like  you would any text box.

Adding hyperlinks to text or images

  1. Select the text or image that you want to add a hyperlink to.
  2. Click on the Hyperlink icon on the standard toolbar. 
  3. The create hyperlink dialog box will open. Type in the URL  that you want to link to in the URL box. 
  4. Click on OK.
  5. Your text or image will now be hyperlinked. When in the preview mode or after you publish you will see that when you click on the text or image it will jump to the URL you typed in.

Creating bookmarks (also known as "anchors")

  1. Select the text that you will want to jump to. 
  2. Go to Insert on the menu bar and click on Bookmark.
  3. The bookmark dialog box will open. The text that you selected will be placed in the bookmark name. You can type your own name for this if you wish.
  4. Click OK.
  5. When you get to the part of your page that you want to hyperlink to that bookmark select it and click on the hyperlink icon from the standard toolbar.
  6. Click on the down arrow next to bookmarks. Select the bookmark that you want to link to.
  7. Click on OK.

Adding an email hyperlink

Web pages should include an email link so that if someone visiting has questions or comments they have a contact. You can create an email hyperlink using either text or images. To create an email hyperlink follow these steps:

  1. Select the text or image that you want to add the email hyperlink to.
  2. Click on the Hyperlink icon on the standard toolbar. 
  3. Click on the little envelope icon.
  4. Type the email address you want the messages addressed to.
  5. Click OK and then OK again.