Bellarmine College

Frontpage 98
Basic Web Page Design

You can create effective Web pages with just a few essential Web elements. With the judicious use of hyperlinks, images, lists, and horizontal lines, you can design a well-organized page that provides visitors with loads of useful information. In addition, you may select page backgrounds and font formats to make the page appealing and easy for visitors to read. The basic elements described on this page are listed below. Click on the desired element for more information.

Hyperlinks

A hyperlink is used to link text or images on a Web page to a location on the same page, to a site on the World Wide Web, to another page in your own Web, to an image, or to a sound. These external destinations may be located within your Web (the Web you are working on from within Frontpage) or may be located on the World Wide Web.

Linking to World Wide Web Site

  1. To generate a hyperlink to an external Web page, first select the text or object (such as an image) to be hyperlinked. To do this, use the mouse to move the cursor to the immediate left of the object to be selected. Depress the left mouse button and hold it down as you drag the cursor until the entire area to be selected is highlighted. Release the mouse button.
  2. Now select the hyperlink button at the top of the Editor window. It looks like this: Linkbutton.jpg (2040 bytes). A window like the one pictured below will appear.

    wpe6.jpg (28438 bytes)
  3. If you know the URL (uniform resource locator - a fancy name for the Web page address), type it into the text box and select OK.
  4. If you don't know the URL, select the button with Internet icon (looks like Webbutton.jpg (1950 bytes)). This will open up the Internet Explorer browser. Search the Internet for you hyperlink site. Once you've found it return to Frontpage editor (do not close Internet Explorer). You will note that the URL of the site you've selected has been entered automatically in the appropriate hyperlink dialog box.  Select OK.
  5. The hyperlinked text should now be underlined and should be a colored differently than normal text. To check your hyperlink, switch the editor to the Preview mode by selecting the Preview tab at the bottom of the page. After your page has been loaded into the Preview window, click on the hyperlinked text. The external page you selected should then be loaded into the Preview window. To get back to the editing mode, select the Normal tab at the bottom of the page.

[Return to top of page]

Linking to a Page in Your Web

Suppose you are developing a Web page on nocturnal crime fighters. On your introductory page you may want to include hyperlinks to information you've compiled on such superheroes as Batman, Robin, and Batgirl. To maintain a well-organized site, you will probably want to produce a separate page on each of these figures. Follow the instructions below to generate hyperlinks to other pages you have developed.

  1. Initially, the procedure is the same as it would be if you were linking to a page on the World Wide Web. Following steps 1 and 2 in the section above, open the Create Hyperlink window.
  2. If you are generating a link to an existing page in your Web, simply navigate through folder lists to select the designated file and click the OK button. This returns you to the editor. Elvis has left the building - you have successfully created a hyperlink to another page -  and you may skip the remaining steps in this section.
  3. If you are generating a link to an existing page that does not exist in your Web, but exists elsewhere on your computer, click on the explore button (FPExpbutton.jpg (2137 bytes)) and navigate through your computer to select the designated file. Click OK to return to the editor and skip the remaining steps in this section.
  4. If you haven't created the destination page yet, click the new page button (FPNewPage.JPG (1657 bytes)). This will create a new page in the Frontpage editor. You may now create, edit, and develop to your heart's content. When you save the new page, it will be linked automatically to your original page.

[Return to top of page]

Linking to a Location on the Same Page

You may bookmark text or images within your page to serve as hyperlink destinations. For example, when you click on the text top of page, you will be directed to the top of this page where I have placed a bookmark. Let's first assign a bookmark to a section of the page.

Bookmark Instructions

  1. Select the text or object to be bookmarked.
  2. Select Bookmark from the Edit Menu. Enter an appropriate Bookmark name in the text box that opens (notice that current Bookmarks are also listed). Select OK to activate the name.
    Bookmark Name Window
  3. You may now generate a hyperlink to this Bookmark.

[Return to top of page]

Linking to a Bookmark

  1. First select the text or object to be hyperlinked.
  2. Now click on the hyperlink button - Linkbutton.jpg (2040 bytes) - in the toolbar at the top of the page. The Create Hyperlink (click on this to go to the figure above) window will open.
  3. Note that there is an area labeled Optional at the bottom of the Create Hyperlink window. Click on the arrow next Bookmark box. A pop-up menu will appear that lists all bookmarked areas on the current page (see figure below). Select the appropriate bookmark and click on OK.
    bkwindow.jpg (33883 bytes)
  4. You have now created a hyperlink to a Bookmark.

[Return to top of page]

Images

The careful use of images can enliven your page while providing important visual information. Image file formats may be either GIF (Graphics Interchange Format, *.gif ) or JPEG (Joint Photographic Experts Group, usually *.jpg). Avoid large image files because they can take a long time to download, particularly over slow (modem) connections. To insert an image in your page, follow the instructions below.

  1. Move your cursor to the point on the page where you want to insert an image.
  2. Click on the Insert Image button (Imgbutton.jpg (1982 bytes)) at the top of the Frontpage Editor. The image window (shown below) should open.
    ImageWin.jpg (107055 bytes)
  3. If the file already exists on your Web, navigate through your Web to find the appropriate file. Once you've selected it, click on the OK button.
  4. If the file exists on your hard drive, click on the explore button (FPExpbutton.jpg (2137 bytes)) and navigate through your hard drive to find the image file.
  5. The image should now be embedded in your Web page.

[Return to top of page]

Lists

Lists are very useful organization elements. There are two types of lists, bulleted and numbered. Bulleted lists have the following appearance:

Numbered lists are lists that are numbered (surprise, surprise, surprise!). You may also select the numbering format (1,2,3; I, II, III; A, B, C; a, b, c; etc.). Examples include

  1. Baltimore Orioles
  2. Boston Red Sox
  3. New York Yankees  - ugh!

To create a bulleted list,

  1. Select the insertion point on your page.
  2. Click on the bullet button(Bullets.jpg (1622 bytes)) from the second row toolbar.
  3. A bullet should appear on your page. Begin typing your list.
  4. When you are finished typing a list item, press return. A bullet should appear on the next line. Begin typing your next list item.
  5. When you are finished typing the list, click on the bullet button (Bullets.jpg (1622 bytes)) again. The text and indentation will revert to the normal format.

To create a numbered list,

  1. Select the insertion point on your page.
  2. Click on the numbered list button(Bullets.jpg (1622 bytes)) from the second row toolbar.
  3. The number 1. should appear on your page. Begin typing your list.
  4. When you are finished typing a list item, press return. The next number should appear on the following line. Begin typing your next list item.
  5. When you are finished typing the list, click on the numbered list button (Bullets.jpg (1622 bytes)) again. The text and indentation will revert to the normal format.

Now, you may also change the numbering format of your list. To do this,

  1. Right-click at any point within a list.
  2. From the pop-up menu that appears, select (left-click on) List Properties....
  3. The following window should appear.

    ListProp.JPG (72925 bytes)

  4. You may select any of formats shown in this window. Notice that you may also choose to start at a number other than 1. Simply enter the appropriate number in the box located in the upper right-hand corner.
  5. Select OK to go back to your Web page. Your list should now appear in the format you selected.

[Return to top of page]

Horizontal Lines

You may use horizontal lines to divide your page into separate sections. To insert a horizontal line

  1. Select the position for your line.
  2. Go to the Insert menu and select Horizontal Line.
  3. You've done it.

[Return to top of page]

Themes

You may make your pages more attractive by selecting a theme for backgrounds, font styles, buttons, navigation bars, etc. Embedded within Frontpage are a collection of themes that you may use for this purpose. For aesthetic reasons, it's generally a good idea to apply a common theme to your entire collection of Web pages. However, if you wish, you may apply different themes to individual pages. To apply a theme

  1. Go to Frontpage Explorer
  2. Select the themes icon:
  3. A list of themes will appear in the window to the right. You may view specific theme elements by clicking on a theme name.
  4. If you find a theme you like, click on the Apply button at the bottom of the window.

[Return to top of page]

Send questions or comments to pholt@bellarmine.edu