GeoCitiesRank My SiteTake A TourMy GuestbookChat
Pages Like MineSearchSend This PageForums
Email Me
Athens

The Frames Resource

Frames Tips 'n' Tricks

Contents
  1. a simple "links column and main page" layout
  2. linking within frames and to frames
  3. some extra tags and special attributes...



PART ONE, a simple "links column and main page" layout

Many pages have a simple frames layout with a links part on the left side and a large main window in which the various documents will be displayed. It looks loke this:

-----------------------------------------------
            |                                 |
  your      |          variable               |
  links     |         main page               |
            |                                 |
            |                                 |
            |                                 |
-----------------------------------------------

For this design, you need three HTML documents:
Document one: The frameset file - you should call it index.html
Document two: The links file - in my code, I called it links.html, I chose a dimension which serves me well for my links column.
Document three: The main file - in my code it is main.html

Be sure all files reside in the same (sub)directory or folder or use the full URL in the code!

a) the frameset file

And here's the HTML code for that. Annotations in italic letters are not part of the code.

<html>
<head>
<title> [Your Page Title] This is the only title that will be visible in the browser window. </title>
</head>


NO GEOGUIDE HERE! IT WILL MESS WITH THE FRAMESET!

<!-- FRAMESET START -->

<frameset cols="130,*" border="1">

to make the links frame larger, increase the number before the comma. you should not go beyond 250, since some smaller monitors/browser windows would then already be filled over one third with the links frame

<frame src="links.html" name="navigation" scrolling=auto>

<frame src="main.html" name="main" scrolling=auto>

</frameset>

<!-- FRAMESET END -->

you should enter a noframes part here for visitors with older browsers
<noframes>

<!--#geoguide-->

<h1>Welcome to my page</h1>
<p>You are using a browser not capable of displaying frames. &lt;a href="main.html">Click here</a>, to visit my site frameless.</p>

<p>[your Name here]</p>
</noframes>
</html>

b) The other documents

You should write the other documents as normal html files. NO GEOGUIDE in the links.html; just be sure you don't write too long lines (cf. above, you have approx. 130 pixels space, otherwise a scrollbar will appear).


PART TWO Linking in the frameset

In the Links section, you want to link to pages which should appear in the main frame. A simple a href-link will make the page load in the same frame part, so you must use a special command. <a href="yourfile.html" target="main">
This "main" is the frame name specified in the second <frame src ...> line.
To link vice versa it should therefore read
<a href="otherlinks.html" target="navigation">

There are some magic "target" commands, the most important being "_top", which makes your frameset the one on top, overriding any previous frameset (e.g. by the page from where Joe Surfer came to yours...)
You might consider entering the following line on the main.html and on the links.html:

Stuck in anybody else's frame? <a href="index.html" target="_top">Click here to get out</a>.


PART THREE some extra tags and special attributes...

As already stated above, there are some special tags and attributes you can use with frames. (Yes, there are also special Java and JavaScript features, but I'm no Java expert, so I cut that out...)

a) Targeting

General rule: A frame area behaves like a browser window. A normal link leads to the display of a new document in the same window.
To make a link load in another frame area, use the target code with the frame areas's name as stated above. Using a window name not assigned to a frame will cause the link to be loaded in a new browser window which will bear the respective target name.

The "magic" targets and their funtions are:
"_blank" will cause the link to be loaded in a new blank browser window.
"_self" will cause the link to be loaded in the same window the link wos clicked on
"_parent" will cause the link to be loaded in the immediate frameset parent (in the above example that would be the index.html) window, which could be still in another frame.
"_top" will cause the link to be loaded in the foll window, overriding all other framesets.This is useful to enforce the loading of a page outside any previous frameset.

b) borderline stuff

You can determine the appearance of the borders between the frame windows with some commands within the <frameset> and <frame> tags.

The border color: bordercolor="#hhhhhh", with hhhhhh being an hexadecimal code for the color.
The border width: border="n", with n being the desired width in pixels.

The margin between text and borderline (only in the <frame> tag):
marginwidth="n" determining the vertical space in pixels n between contents and border
marginheight="m" determining the horizontalal space in m pixels between contents and border

c) frame sizes

You should keep in mind that the display of your page will vary from browser to browser and from screen to screen. Therefore, you should not enter frame sizes which can only be correctly viewed with large screens (e.g. a width over 600 pixels). It is preferable to let the frames adjust to the different "environments" themselves by using the percent values and the wildcard (*) wherever possible.
In our exaple from part one, the "navigation" frame is being set to 130 pixels, just enough for a brief Link, and the "main" frame is being assigned the rest of the window, however much space that will be.



Back to the index | Back to the first page.

If you have any questions, corrections, criticism or feedback of any kind, please do not hesitate to write me an email.



Made 1998 by wohli (Jan Wohlgemuth).


Hosted by www.Geocities.ws

Welcome to GeoCities!
1