Navigation

Hyperlinks

Absolute URL:

When you link to a webpage on a different server you must include the complete URL. Note if a file name is not specified, then the file name is assumed to be index.html.
Example: <a href="www.oocities.org/vuumanj"> My Home Page </a>

Relative URL

When linking to a page on your own website you do not need to include the complete URL. In this case you only need to include the name of the file and its location relative to the URL of the website.
Example: Pages are in the same directory <a href="history.html"> My Home Page </a>
Example: Pages are in different directories <a href="College/Courses/history.html"> My Home Page </a>
This would be an excellent location for a discussion of path and use of folders to organize a large website.

Named Anchor

A named anchor points to a specific location on a webpage and is useful for navigating a long document. To create a named anchor, you must first mark the specific locations on the target web page and then add an anchor to the URL using the # symbol. The named anchor can be viewed as a refinement of a URL.
Example: Setting the target location. <h3><a name="History">History</a></h3>
Example: <a href="background.htm#History">History</a>

Target Windows

Each webpage can be made to open in a separate window by adding a target attribute to the anchor link.
Example: <a href="background.htm" target="newwindow">

Bulleted Lists

Create a bulleted list of hyperlinks.

Tables

Create a table with two columns. Place the hyperlinks in the left column and the content in the right column.

Hyperlinks here

Content here

Create a table with two rows. Place the hyperlinks in the first row and the content in the second row.

Hyperlinks here.

Content here.

Frames

Frames are used to partition a browser window into several sections and display a different HTML file in each section. Frames can be used as a navigational tool. The top frame of the home page could be a banner, the lower left frame could contain hyperlinks. Both of these frames would remain fixed. The lower right frame could contain be used to display the pages whose hyperlinks are in the lower left frame.

Banner
Hyperlinks	Content

In FrontPage go File/New Page or Web/Page Templates/Frame pages and select the frame layout you want. A popular choice layout is the Banner and Contents layout. In each frame you will have the choice of setting an initial page or creating a new page for the frame. There are actually four HTML files associated with layout below. There is the file that sets up the frame and then files for the banner, navigation and content sections.

File: index.htm	File: banner.htm
<html> <head> <title> Frames Page</title> </head> <frameset rows="100," frameborder="0" framespacing="0"> <frame name="banner" src="banner.htm"> <frameset cols="150,"> <frame name="navigation" src="navigation.htm"> <frame name="content" src="overview.htm"> </frameset> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html>	<html> <head> <title>Banner</title> <style> h1 { color: #ff0000; margin-left: 155px } body { background-color: #ffffcc } </style> </head> <body> <h1>Internet and WWW</h1> </body> </html>
File: navigation.htm	File: overview.htm
<html> <head> <title>Navigation</title> <link rel=stylesheet type="text/css" href="wpstyle.htm"> <style type="text/css"> body {background-color: #ffffcc } </style> </head> <ul> <li><a href="overview.htm" target="content">Overview</a></li> <li><a href="background.htm" target="content">Background</a></li> <li><a href="html.htm" target="content">HTML</a></li> <li><a href="colors.htm" target="content">Colors</a></li> <li><a href="graphics.htm" target="content">Images</a></li> <li><a href="css.htm" target="content">CSS</a></li> </ul> </body> </html>	<html> <head> <title>Content</title> <link rel=stylesheet type="text/css" href="wpstyle.htm"> </head> <body> <h1>Internet and WWW</h1> <h2>I. Background</h2> </body> </html>

Graphics

Images can be used as hyperlinks.
Buttons can be used as hyperlinks
Image maps
An image map is an image that has been divided into regions called hotzones. Each hotzone can be linked to a different webpage. The net effect of an image map is that different parts of an image link to different web pages. To create an image map in FrontPage use the Rectangular Hotspot, Circular Hotspot and Polygonal Hotspot buttons on the Drawing toolbar. Example: Suppose you wish to explain how a steam engine works. Find an image of a steam engine and create hotspots for each of its major parts. Link each part to an appropriate explanation.

Shared Borders and Navigation Bars

Shared borders

A shared border is a region that is common to one or more pages in a web. Inside a shared border, include items that you want to appear on each page such as navigation bars, company logos or copyright citations. You can set the borders to be shared independently for each page on the web. To create a shared border in FrontPage use the following steps

Page view
Format/Shared Borders.
Click Current page or All pages.
Specify the borders that you want on this page. Shared borders are added or removed depending on your settings.

Navigation bars

A navigation bar is a set of text or button hyperlinks that a site visitor uses to get to the pages in your Web site. A typical navigation bar might have buttons to the site's home page and to each of the main top-level pages. You can add navigation bars to any page; however, to quickly set up a navigation system for your web, consider using shared borders with navigation bars. To create a navigation bar in FrontPage use the following steps.

In Page view, position the insertion point where you want to place the navigation bar. For example, click inside a shared border region to place a navigation bar inside a shared border.
On the Insert menu, click Navigation Bar.
Under Hyperlinks to add to page, select the type of hyperlinks you want on the navigation bar.
Under Orientation and appearance, specify whether you want the navigation bar to be horizontal or vertical, and whether to display text or buttons. You should only select Buttons if you are using a theme.

To change the pages which are displayed on a navigation bar use (i) In Page view, double-click the navigation bar. (ii) Under Hyperlinks to add to page, specify the hyperlinks you want to display. To exclude a page from the navigation bars (i) In Navigation view, right-click the page you want to exclude. (ii) Click Included in Navigation Bars.

Note: Many of the more dynamic effects in FrontPage such as shared borders, hover buttons,... require the web page to be uploaded to a server with FrontPage server extensions to work properly.