Frames

Morphmaster · 16-07-2005, 15:39

What Frames Are...

Frames is one of the newer features of HTML
which allows a single browser window to be divided into multiple sections, each with an independent HTML page loaded inside it, and these HTML pages can interact with each other. Each page loaded within each section of the frames window is a separate HTML document.

Example of the code to a simple frames page...

<html>
<head><title>testing frames...</title></head>

<frameset cols="25%,75%">

<frameset>
<frame src="test.html" name="indexbar">
</frameset>

<frameset>
<frame src="main.html" name="main">
</frameset>

</frameset>

<noframes>
This page requires a frames-capable browser... please get one!
</noframes>
</html>

View This Frames Page

The frames page itself in most cases does not actually contain any content, all content is placed on the separate HTML pages loaded within each frame (section). Instead, the frames page acts as a guide, defining which page to be loaded into each frame, and the frame attributes themselves. As you may have noticed, a frames page closely resembles a normal HTML page, except that the body is replaced with frameset, and an additional noframes tag is added.

Using The Frameset Tag...

The frameset tags are used to define the characteristics of the frames, and the noframes tags are used to define what a browser that is not frames-enabled will see. Because the frameset tags are ignored by a non-frames browser, anything within the noframes tags will be considered a normal HTML page. So after the <noframes> tag should be placed the <body> tag, and then any content and tags, then concluded with the </body> tag, followed by the </noframes> tag. The noframes content will not be seen by someone using a frames-enabled browser unless they choose 'view source'.

The frameset tag will be used multiple times throughout a single frames page. The first frameset tag is used to define the number of separate frame columns within the browser window, and what width each of those windows will be. The next set of frameset tags will be used to define how many frame rows will be in the browser window, and each one's height. The row attribute is set separately for each column, for example, your first column may have 4 frames, and your second column may have 2 frames, etc. There is no specific limit on the number of frames you may have within a single browser window, but you must realize that your page will be viewed in different resolutions, from 640 x 480 pixels to 1024 x 768 pixels and greater. My advice is to limit your page to no more than 4 frames within a single browser window.

Defining Columns...

The first frameset tag should read <frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">. This first tag will be closed with a </frameset> tag, but only after the frameset rows for each column are also defined. The SIZE_OF_COLUMN can be one of three numbers...

* x% - each column is set by a percent of the available browser window. (x is a number from 1 to 100)
* x - each column is set by a fixed pixel amount. (not recommended, because pixel widths vary depending on the viewer's resolution) (x is any number)
* * - the * tells the browser to use all available space that is left for this column.

So a frameset reading <frameset cols="20%,80%"> would mean that the first column is the browser window will take up 20% of the browser window's width, and that the second column will take up 80% of the total browser's width. Another example is <frameset cols="120,*"> in which the first column is exactly 120 pixels wide, and the second column takes up all remaining width. Only one column is required, and there is no limit on how many columns can be defined.

Defining Rows...

Within the column defining frameset opening and closing tag are the row defining frameset tags. The number of row defining frameset tags is directly dependent on the number of columns defined in the column defining frameset tag. If there are two columns defined, there will be two separate row defining frameset tags, if three columns are defined, there will be three row defining frameset tags.

The row frameset tag should read <frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">. The SIZE_OF_ROW is defined almost identically to the SIZE_OF_COLUMN... x% is the percent of available browser height, x is a defined pixel value in height, and * is all remaining space. Rows are defined top to bottom, and Columns are defined left to right.

Defining Frames...

Within each row frameset tag comes the frame tag, which defines which page is to be loaded in that frame and a few attributes on that frame. The simple frame tag reads <frame src="document_to_load.html">, where document_to_load is the name of the web page that is to be loaded in that frame, and the frame tag has no closing tag. The frame tag has some other useful attributes:

* SCROLLING="yes|no|auto" - This defines if the frame has a scroll bar or not. By default the frame sets scrolling to auto, which means the browser determines if a scroll bar is needed. If set to yes, the frame will always have a scroll bar, and if set to no, the frame will never have a scroll bar.
* NORESIZE - this attribute states that the user should not be able to resize the frame. By default the user is able to resize all frames within the browser window.
* NAME="x" - this attribute defines the name of the frame, which is used to target pages to be loaded in that frame, which will be explained later. (x is any alphanumerical combination)

If you want scrolling to be disabled, just use the code:
<frame src="document_to_load.html" SCROLLING="no">
or if you want resizing to be disabled just use the code:
<frame src="document_to_load.html" NORESIZE>

Example of a complex frames page...

<html>
<head><title>testing complex frames</title></head>

<frameset cols="33%,33%,33%">

<frameset rows="*,100">
<frame src="page1.html" NAME="index">
<frame src="page2.html" NORESIZE>
</frameset>

<frameset>
<frame src="main.html" NAME="main">
</frameset>

<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html" SCROLLING="no">
</frameset>

</frameset>

<noframes><body>
This page requires a frames-enabled browser!
</body></noframes>

</html>

randomman · 16-07-2005, 16:15

great article i was looking for one on frames and this seems perfect

Morphmaster · 16-07-2005, 16:19

Could always add to my rep

randomman · 16-07-2005, 16:31

since i posted the comment your tut dissapeared and i cant see it, what should i do?

Morphmaster · 16-07-2005, 16:35

Its still here just not on this page :S

randomman · 16-07-2005, 16:37

ok, i found it now

16-07-2005, 15:39	#1 (permalink)
Morphmaster Ultimo Supremo Join Date: May 2005 Location: /public_html/Cgi-bin/ Posts: 1,417 iTrader: 0 / 0%	Frames What Frames Are... Frames is one of the newer features of HTML which allows a single browser window to be divided into multiple sections, each with an independent HTML page loaded inside it, and these HTML pages can interact with each other. Each page loaded within each section of the frames window is a separate HTML document. Example of the code to a simple frames page... <html> <head><title>testing frames...</title></head> <frameset cols="25%,75%"> <frameset> <frame src="test.html" name="indexbar"> </frameset> <frameset> <frame src="main.html" name="main"> </frameset> </frameset> <noframes> This page requires a frames-capable browser... please get one! </noframes> </html> View This Frames Page The frames page itself in most cases does not actually contain any content, all content is placed on the separate HTML pages loaded within each frame (section). Instead, the frames page acts as a guide, defining which page to be loaded into each frame, and the frame attributes themselves. As you may have noticed, a frames page closely resembles a normal HTML page, except that the body is replaced with frameset, and an additional noframes tag is added. Using The Frameset Tag... The frameset tags are used to define the characteristics of the frames, and the noframes tags are used to define what a browser that is not frames-enabled will see. Because the frameset tags are ignored by a non-frames browser, anything within the noframes tags will be considered a normal HTML page. So after the <noframes> tag should be placed the <body> tag, and then any content and tags, then concluded with the </body> tag, followed by the </noframes> tag. The noframes content will not be seen by someone using a frames-enabled browser unless they choose 'view source'. The frameset tag will be used multiple times throughout a single frames page. The first frameset tag is used to define the number of separate frame columns within the browser window, and what width each of those windows will be. The next set of frameset tags will be used to define how many frame rows will be in the browser window, and each one's height. The row attribute is set separately for each column, for example, your first column may have 4 frames, and your second column may have 2 frames, etc. There is no specific limit on the number of frames you may have within a single browser window, but you must realize that your page will be viewed in different resolutions, from 640 x 480 pixels to 1024 x 768 pixels and greater. My advice is to limit your page to no more than 4 frames within a single browser window. Defining Columns... The first frameset tag should read <frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">. This first tag will be closed with a </frameset> tag, but only after the frameset rows for each column are also defined. The SIZE_OF_COLUMN can be one of three numbers... * x% - each column is set by a percent of the available browser window. (x is a number from 1 to 100) * x - each column is set by a fixed pixel amount. (not recommended, because pixel widths vary depending on the viewer's resolution) (x is any number) * * - the * tells the browser to use all available space that is left for this column. So a frameset reading <frameset cols="20%,80%"> would mean that the first column is the browser window will take up 20% of the browser window's width, and that the second column will take up 80% of the total browser's width. Another example is <frameset cols="120,"> in which the first column is exactly 120 pixels wide, and the second column takes up all remaining width. Only one column is required, and there is no limit on how many columns can be defined. Defining Rows... Within the column defining frameset opening and closing tag are the row defining frameset tags. The number of row defining frameset tags is directly dependent on the number of columns defined in the column defining frameset tag. If there are two columns defined, there will be two separate row defining frameset tags, if three columns are defined, there will be three row defining frameset tags. The row frameset tag should read <frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">. The SIZE_OF_ROW is defined almost identically to the SIZE_OF_COLUMN... x% is the percent of available browser height, x is a defined pixel value in height, and is all remaining space. Rows are defined top to bottom, and Columns are defined left to right. Defining Frames... Within each row frameset tag comes the frame tag, which defines which page is to be loaded in that frame and a few attributes on that frame. The simple frame tag reads <frame src="document_to_load.html">, where document_to_load is the name of the web page that is to be loaded in that frame, and the frame tag has no closing tag. The frame tag has some other useful attributes: * SCROLLING="yes\|no\|auto" - This defines if the frame has a scroll bar or not. By default the frame sets scrolling to auto, which means the browser determines if a scroll bar is needed. If set to yes, the frame will always have a scroll bar, and if set to no, the frame will never have a scroll bar. * NORESIZE - this attribute states that the user should not be able to resize the frame. By default the user is able to resize all frames within the browser window. * NAME="x" - this attribute defines the name of the frame, which is used to target pages to be loaded in that frame, which will be explained later. (x is any alphanumerical combination) If you want scrolling to be disabled, just use the code: <frame src="document_to_load.html" SCROLLING="no"> or if you want resizing to be disabled just use the code: <frame src="document_to_load.html" NORESIZE> Example of a complex frames page... <html> <head><title>testing complex frames</title></head> <frameset cols="33%,33%,33%"> <frameset rows="*,100"> <frame src="page1.html" NAME="index"> <frame src="page2.html" NORESIZE> </frameset> <frameset> <frame src="main.html" NAME="main"> </frameset> <frameset rows="50%,50%"> <frame src="page3.html"> <frame src="page4.html" SCROLLING="no"> </frameset> </frameset> <noframes><body> This page requires a frames-enabled browser! </body></noframes> </html> __________________ Thanks Tom Have you ever thought what it's like, to be wanderers in the fourth dimension? Have you? To be exiles?

16-07-2005, 16:19	#3 (permalink)
Morphmaster Ultimo Supremo Join Date: May 2005 Location: /public_html/Cgi-bin/ Posts: 1,417 iTrader: 0 / 0%	Could always add to my rep __________________ Thanks Tom Have you ever thought what it's like, to be wanderers in the fourth dimension? Have you? To be exiles?

16-07-2005, 16:35	#5 (permalink)
Morphmaster Ultimo Supremo Join Date: May 2005 Location: /public_html/Cgi-bin/ Posts: 1,417 iTrader: 0 / 0%	Its still here just not on this page :S __________________ Thanks Tom Have you ever thought what it's like, to be wanderers in the fourth dimension? Have you? To be exiles?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Html Tutorial Part Three*frames	Morphmaster	Programming Articles	1	14-05-2005 21:56

Frames

Frames

Similar Threads