Hyperlinks and Framed Websites

Hyperlinks and Framed Websites

This page provides information on the use of framed websites and the behavior of how Hyperlinks function within these framed websites.

Table of Contents

  • Description of Framed Pages
  • Description of the index.html Page
  • How Hyperlinks function within the Framed Pages
  • Controlling the Location of where Hyperlink will open
  • More information

Description of Framed Pages
The following describes how an XLEcom Framed website is constructed.

For a Framed web site, each page displayed within your web browser is composed of four (4) individual frame web pages as named below. A fifth page called index.html, usually located within the root directory of your web site, is a mapping page which calls all four of these individual frame pages together to make up the final web page you view within your browser. These four framed pages include the information shown below.

The index.html file is your Home Page link and is the file you open in your web browser to view the web site. It should be placed in the root directory of your web server.

Top frame: top.html  [Navigation Menus for support pages, Company Name, and Business Slogan]
Left frame: left.html  [Navigation menus for the Product Ad pages, View Cart, and Copyright]
Body frame:  [Area the Product Ad pages (page_xxx.html) and Support pages are displayed]
Bottom frame: bottom.html  [Message, i.e. Company Message or Copyright]

The image below displays the four individual frames used in a framed site.

Description of the index.html Page
The index.html file contains information that defines both the names and sizes of each of each the four individual framed pages. This information is located within the <frameset> tag. The <frameset> tag is located in the <head> section as stated below.

<frameset border=0 framespacing=0 frameborder=0 rows="91,*,38">
<frame name="header" src="./html/top.html" scrolling=auto marginwidth="0" marginheight="0" frameborder=no border="0" NORESIZE>
<frameset border=0 framespacing=0 frameborder=0 cols="176,*">
<frame name="left" src="./html/left.html" scrolling=auto marginwidth="0" marginheight="0" frameborder=no border="0" NORESIZE>
<frame name="shop" src="./html/home.html" scrolling=auto marginwidth=0 marginheight=0>
</frameset>
<frame name="footer" src="./html/bottom.html" scrolling=auto marginwidth="0" marginheight="0" frameborder=no border="0" NORESIZE>
</frameset>

Using the Site Setup utility, you can define the pixel heights of both the Top and Bottom frames and the pixel width of the Left frame as shown in the Site Setup - Site Properties dialog box image below.

The following table lists the frame properties that are defined in the index.html file's <frameset> tag.

Frame

File Name

Frame Name

Height
(pixels)

Width
(pixels)

top

top.html

header

91

-

left

left.html

left

-

176

body

Ad and Support Pages

shop

-

-

bottom

bottom.html

footer

38

-

In XLEcom, the name assigned to the body frame is dependent on two parameters. (1) The Shopping Cart service you choose to utilize, and (2) if you choose to use either the in-page or popup window shopping cart.

The name assigned to the body frame, depending on the options you choose, is shown below:

Paypal Shopping Cart Service
If using Shopping Cart Popup Window, body frame name = shop
If using the body frame for the Shopping cart, body frame name = paypal

Mal's e-commerce Shopping Cart Service
If using Shopping Cart Popup Window, body frame name = shop
If using the body frame for the Shopping cart, body frame name = shop

How Hyperlinks function within the Framed Pages
In order to have all hyperlinks within the website open their results within the body frame of the website, the following line of HTML code is added to the <head> section of each of the three (3) outer framed pages (top.html, left.html, and bottom.html):

    <base target="shop">

By utilizing this line of code in each of the three (3) outer framed pages, all hyperlink that are located within any of the four (4) frames that make up the website and written in the traditional hyperlink format of:

    <a href="page.html">click here to activate hyperlink</a>

will open the results in the body frame of the website.

Note: The body frame does not need to utilize the <base target="shop"> code. All traditional formatted body frame hyperlinks will naturally open in the page they were initially launched from.

When using a framed site, the URL shown in the web browser's address bar will always be the same, and is typically the URL to the home page (index.html) or domain of the website. In other words, if you click on any link within a framed site, the URL shown in the web browser's address bar will not change. This is the standard behavior of a framed web site.

Controlling the Location of where Hyperlink will open
If using a framed website and you want to override the default body frame location of where hyperlinks will open, then add a "target" location statement to the hyperlink's HTML code.

Below are some hyperlink examples:
Note: These Hyperlink formats will work for both file links (policies.html) and web addresses (http://www.xlecom.com).

(1) To open the file policies.html file in the default body frame, use the traditional hyperlink format of:

    <a href="policies.html">Policies</a>

(2) To open the file policies.html file in a new browser window, use the hyperlink format of:

    <a href="policies.html" target="_new">Policies</a>

(3) To open the file policies.html file in either a separate named browser window or within a named frame called "shop", use the hyperlink format of:

    <a href="policies.html" target="shop">Policies</a>

Note: If the three (3) outer framed pages (top.html, left.html, and bottom.html) do not contain a <base target="shop"> statement and the body frame is named "shop" for example, then you can use this named hyperlink method for opening links in the body frame when you want to place custom hyperlinks within any of the three (3) outer framed pages.

(4) To open the file policies.html file in a 600 x 400 pixel sized popup window named "ShowMe", use the hyperlink format of:

    <a href="javascript:void(0)" onclick="window.open('policies.html,'ShowMe','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no,copyhistory=yes, width=600, height=400')">Policies</a>

Keep in mind, you may also want to format the text within the hyperlink by adding a <font> tag formatting statement to obtain a desired visual text result. For example, in using the traditional hyperlink:

    <a href="policies.html"><font face="Arial" size="=1">Policies</font></a>

More information
For more information about framed sites, refer to the following pages:

Sam Raheb
XLEcom Program Developer