![[IMAGE] IU SLIS logo](../Images/slis_logo_06.gif){kind=logo}
|
|
Since this is a section on working with frames, why don't we move to a frames version of this page?
Frames are a feature supported by Netscape 2.0 (and higher) Internet Explorer 3.0 (and higher) and a few other browsers. Frames allow you to divide the screen into independent windows - different areas (squares and rectangles) or frames - each of which can be used in different ways to display information
This addition to html involves a new set of tags that allow you to experiment with different ways of presenting information. Frames allow you to provide the user with information about your site and effective navigation tools to explore your digital collection
Each frame that you create can have its own html document, because you get to define the content of the frame. Frames can include text, images, multimedia, and usable links. Using frames you can display different documents in a specific window within the larger browser window or even open up new browser windows
Working with frames involves a shift in thinking, because you must work in two distinctly different ways:
First, you must set up a page that will contain the markup which determines the sizes in heights and widths (or percentages of the screen area) of the frames you want. This document, called the frameset provides the structure and placement of the frames within the larger browser window
The contents of this document are not displayed on the screen because they are really just a set of instructions for the browser - only the results are seen
Second, you must set up pages that will appear in the frames you have created. These pages provide the content that will be displayed using frames. In addition to the typical markup of these pages, you also have to provide the html tags that will instruct the browser to display them in the specific frames you designate
Frames allow you to create links among the pages of your digital collection so that they are displayed in the order and arrangement that you specify. For example, you can create frames where one or more windows remain static while others change as the user clicks on the links you have created. For example, you can look at the frames version of my resume. Close the window to return to these pages
How can you do this?
You are now working with a new set of paired and unpaired tags:
<frameset></frameset> This paired tag is the equivalent of the <body> tag and serves a similar purpose. It marks the beginning and the end of the markup used to structure and lay out the frames that will be displayed by a frames-capable browser. The information you provide within these tags defines the number and sizes of the frames within the frameset
To create more complex arrangements of windows, you can nest framesets, a feature which will be described below
At the moment, the frameset tags only support two attributes: <cols> and <rows>
<cols="X%,Y%,Z%"> This is a critical attribute of the <frameset> tag because it divides the screen into columns, each taking up a designated amount of the browser window
For example, to divide the screen into two columns, one of which (the lefthand column) takes up 30% of the available screen and the other (the righthand column) 70%, you would use the following markup:
<frameset cols="30%,70%">
To have three columns, you would use this markup:
<frameset cols="20%,40%,40%">
It is possible to specify the size of columns (and, as is indicated below, rows) by a number representing a fixed pixel size. This will cause the frame to remain stable no matter the size of the browser window used by your viewer. This might look like:
<frameset cols="40,60,60">
It is also possible to specify the size of columns (and, as is indicated below, rows by a markup tag representing a relative size, which means that the browser figures out how to define the frames according to instructions you give in the markup.
To do this, you use the value <*> with either the <cols> or <rows> attributes. Alone, it takes the value of the other values used (either size or percentage. You can also use the value with a specific number <n*>. It would look like this:
<frameset cols="1*,2*,3*">
Remember your fractions? This markup would instruct the browser to use 1/6 of the available browser window for the first column, 2/6 for the second, and 1/2 for the third. As the browser window changes size, the frames change size, but do so in the proportions specified in the attribute
Note: you can combine these different ways of defining the size of the frames, for example:
<frameset cols="100,*,80">
This markup would instruct the browser to allocate a width of 100 pixels for the first column, 80 pixels for the third column, and the middle column is allotted whatever is left
<rows="X%,Y%,Z%"> This is a second critical attribute of the <frameset> tag because it divides the screen into rows, each taking up a designated percentage of the screen
To divide the screen into two rows, one of which (the top row) takes 30% of the available screen and the other (the bottom row) takes 70%, you would use the following markup:
<frameset rows="30%,70%">
Or three rows:
<frameset rows="20%,40%,40%">
<cols> and <rows> are not mutually exclusive attributes. Within a single paired <frameset> tag, you may divide the window into a grid made up of columns and rows, by using both
To create a three-by-three grid, the markup would look like this:
<html>
<head>
<title>Frames Demo</title>
</head>
<frameset cols="33%,33%,33%" rows="33%,33%,33%">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
<frame src="4.html">
<frame src="5.html">
<frame src="6.html">
<frame src="7.html">
<frame src="8.html">
<frame src="9.html">
</frameset>
</html>
This markup would produce the following set of frames. Close the window to return here
You may have more than one <frameset> tag in your markup. This involves nesting framesets, a feature similar to what you do when you nest lists
Also, you may begin your frameset with either columns or rows. Unlike tables, where you have to begin by defining rows, frames can be defined in the way that best suits your purposes
Combining these attributes allows you to define rows within a column or columns within a row. This involves nesting the attributes within a series of <frameset> tags. For example, to divide the window into two columns, one of which with two rows and the other with four rows, you would use the following markup:
<html>
<head>
<title>Frames Demo</title>
</head>
<frameset cols="40%,60%">
<frameset rows="30%,70%">
<frame src="Frame1.html">
<frame src="Frame2.html">
</frameset>
<frameset rows="25%,25%,25%,25%">
<frame src="Frame3.html">
<frame src="Frame4.html">
<frame src="Frame5.html">
<frame src="Frame6.html">
</frameset>
</frameset>
</html>
This markup would produce the following set of frames.
Here's what happened. This link will open a new browser window. Close it to return here
Next, we have to look at the tags used within the frameset
<frame src="somepage.html"> This is an unpaired tag that will place a specific page in a specific frame window. This is the page that the user will see when she first comes upon your frameset
The <frame src=> tag acts as a frames version of a link, because it instructs the browser to locate a specific page and display it in a specific location
Using the first example above, if you wanted a page called FrameCon.html to appear in the left column (the 30% column) and a page called Frameint.html to appear in the right column (the 70% column),you would use the following markup (which includes all of the major tags needed to set up a simple frames based page, with two important exceptions (discussed below):
<html>
<head>
<title>Frames Demo2</title>
</head>
<frameset cols="30%,70%">
<frame src="FrameCon.html">
<frame src="FrameIntro.html">
</frameset>
</html>
<name="Youchooseit"> This attribute is added to the <frame src=> tag and acts as a destination or target for pages that you want to appear in specific frames. The use of the <name=> tag is a lot like the <A name=> tag we used when creating within page links - the browser needs this tag to know where to place the specified page (which requires its own tag defining it as the page to be placed in the proper window in the frameset)
In the example above, if you wanted to make the second frame (the 70% frame) the one where all other pages appeared, you would use the following markup:
<html>
<head>
<title>Frames Demo</title>
</head>
<frameset cols="30%,70%">
<frame src="FrameCon.html">
<frame src="FrameIntro.html" name="MAIN">
</frameset>
<html>
Now the window where Frameintro.html intially appears has been defined as a target called MAIN. Now, with additional markup, any number of other pages can appear in this window
<target="Youchooseit"> This is the attribute that the browser uses to place the page in the appropriate frame, which has been designated as the target with the <name=> attribute. This tag is similar to the <a href="#..."> tag we used to define the take off point in within-page links. The documents that have the target tag are found by the browser and placed in a your frameset in the appropriate windows (which are designated with the name= tag
Any number of pages can be directed towards the same target frame. This attribute is very useful for navigation, as in the case of a frame containing a table of contents
To show how it works, you have to set up the FrameCon.html page, which will be a listing of the pages that you want to see in the FrameIntro.html frame
Let's put three pages into the "FrameCon.html" frame:
<html>
<head>
<title>Contents</title>
</head>
<body>
<p>
<a href="Page1.html" target="MAIN">Page 1</a>
</p>
<p>
<a href="Page2.html" target="MAIN">Page 2</a>
</p>
<p>
<a href="Page3.html" target="MAIN">Page 3</a>
</p>
</body>
</html>
FrameCon.html is a standard web page, placed into the frameset because of the frame src="FrameCon.html"
Each of the three pages (Pages 1, 2, and 3) is also a standard web page. However, when you access the main frame page, the FrameCon.html frame will display the listing of these pages as links. When you click on a link, that page will appear in the FrameIntro frame because of the name="MAIN" and target="MAIN" attributes.
Again, here's what it looks like.
| OK, so here's a question:
How many documents do we need to create a dynamic frameset with three documents cycling through the active frame? And here's the answer. |
It is possible to use four values with the table attribute that will cause the specified page to displayed in different ways
target="_blank" will cause the browser to display the specified page in a new browser window that is not part of the frameset. Don't forget to use the underscore character before the value
target="_self" will cause the browser to display the specified document in the same window as the document with the link. The original page is replaced by the specified page
target="_top" will cause the browser to display the specified page in the entire window taken up by the frameset. The specified page is then the only page that can be seen
target="_parent" will have the same effect as _top except in the case where nested framesets are used. In this case, the specified page replaced the specific frameset, the parent, within which the link is found
You can find examples of these targets in the first frames example
<base target="Youchooseit"> If you are going to have a set of documents all load into the same window, you can use an attribute that will be placed in the frameset markup once and applied to all documents listed below it. The <base target=> tag works a lot like the base href tag we used to set a specified URL that would be used for all of the relative URLs in the document
The markup would look like this:
<html>
<head>
<title>Contents</title>
<base target="MAIN">
</head>
<body>
<ul>
<li><a href="Page1.html">Page1</a><li><br />
<li><a href="Page2.html">Page2</a><li><br />
<li><a href="Page3.html">Page3</a><li><br />
</ul>
</body>
</html>
<noresize> This is an attribute that prevents the viewer from changing the size of a specific frame. This is a useful attribute because the frameset will change in size depending on the size of the user's monitor and browser window, unless the size of the frames is set in pixels. Most advertising banners or address information that you see in frames will use this attribute. Use this one with care!
You use the noresize attribute with one or all of the frames in the frameset
To prevent the user from changing the size of the "FrameCon.html" frame, you can use the following markup:
<frameset rows="30%,70%">
<frame src="FrameCon.html" noresize>
<frame src="FrameIntro.html">
</frameset>
<scrolling="yes/no/auto"> This is the attribute that instructs the browser to place (or not place) horizontal and vertical scroll bars in a specified frame. The browser will do this automatically if the contents of the frame exceed the amount of space allotted by your markup. You can leave it up to the browser by using the auto value or by not including a value
To prevent a scrollbar from being displayed in FrameCon.html and provide one in FrameIntro.html markup would look like this:
<frameset rows="30%,70%">
<frame src="FrameCon.html" scrolling="no">
<frame src="FrameIntro.html" scrolling="yes">
</frameset>
<marginwidth="x"; marginheight="y"> These attributes can be used to change the width and height of the margins of a specified frame. The default margin is 8 pixels, so you can make the margins larger or smaller on the sides of the frame with marginwidth and on the top and bottom with marginheight. This affects the distance between the contents of a frame and its inner margin. If the margins are set = 0, the contents of the frame are displayed in the upper left corner of the frame
To make the margins smaller in FrameCon.html and larger in FrameIntro.html the markup would look like this:
<frameset rows="30%,70%">
<frame src="FrameCon.html" marginwidth="5" marginheight="5">
<frame src="FrameIntro.html marginwidth="7" marginheight="7">
</frameset>
<border="n"> This attribute allows you to change the thickness of the borders of the framesin the frameset. The default border size is 5 pixels, which is what is displayed if you don't use a <border="n"> attribute. It is used in the outermost <frameset> tag, and takes values in pixels
To make the borders smaller in FrameCon.html, the markup would look like this:
<frameset rows="30%,70%" border="2">
<frame src="FrameCon.html">
<frame src="FrameIntro.html>
</frameset>
<frameborder="n"> This attribute allows you to determine whether the borders of the frameset will be visible. This attribute can be used at different levels of the frameset document:
Inside a <frame src=> tag, <frameborder="n"> is used to determine whether the frame has visible borders. It takes two sets of values, yes and no or 1 and 0 (the use of the numbers is better because it tends to work across platforms. At this level, it only affects theframe, and all adjacent frames must have the same value. The default is <frameborder="yes">
Inside a <frameset=> tag, <frameborder="n"> affects all frames in the frameset
To remove the borders in FrameCon.html, the markup would look like this:
<frameset rows="30%,70%">
<frame src="FrameCon.html" frameborder="no">
<frame src="FrameIntro.html">
</frameset>
Since there are two frames in this frameset, and they share a border, there's no need to change the border of the second frame. Changing one changes them both
<bordercolor="#rrggbb"> The Netscape browser recognizes an attribute that allows you to control the color of the frame border. You can place this attribute in the opening frameset tag, and the color of all of the borders will change. You can place it in a nested frameset to change the borders within the frameset. You can also place it in specific frame tags
The browser will use the lowest level of bordercolor= tags that it finds. This means that the order is frame --> nested frameset --> opening frameset. The browser will also change the color of any other frame's borders that share the ones you have changed
To make the borders red around FrameCon.html the markup would look like this:
<frameset rows="30%,70%">
<frame src="FrameCon.html" bordercolor="#ffOOOO">
<frame src="FrameIntro.html">
</frameset>
OK, what else?
Many browsers do not support frames, so, out of kindness, there is a way to help them understand why your page looks like junk on their screen
<noframes> </noframes> This paired tag allows you to leave a message for the cool browser impaired, serving a function similar to that of the alt="text" attribute you used with images.
It works like this:
<noframes>
<body>
This page contains frames and if you're reading this, your browser is puny. You can try the <a href="http://internet.address/~username/punyfile.html">puny non frames</a> version. Now go away.
</body>
</noframes>
It's a good idea to place this at the bottom of the main frames page just before the closing </frameset> tag
So, here's another page outlining and explaining the basic markup used in frames
This link will open a new browser window. Close it to return here
Want to know more? We have a short collection of useful links. You can use these when creating your own pages
So much for that! Looks like Javascript is next!
| Demo Page Navigation: |
DemoPage contents | About html | UNIX help | HTML tags | Lists | Links | Images |
| Imagemapping | Tables | Forms | Frames | Javascript | CSS (style sheets) | XML |
|---|
| Page by Howard Rosenbaum | |
| Find me at hrosenba@indiana.edu | http://www.slis.indiana.edu/hrosenba/www/Demo/Demo5.html |