Note: The examples that are used in this tutorial will be opened in a
new window!
Here is a tutorial about frames.
Short introduction to frames:
Frames can be used to arrange the layout on a website. It's not a simple way to arrange the layout, but with this tutorial I will try to explain as clear as possible how frames-pages are
build.
Things you need to remember by setting up a frames-page:
Before you begin to setting up a frames-page you must know that for every frame you build, you need to have another web page to show in that frame. The frames-page will be a separate web page. Let me explain what I say by giving an example.
Example:
When you want to set up a frames-page with 3 frames (1 Title-page, 1 Navigation-page and 1 Content-page) you must be sure that you create all the 3 pages (Title, Navigation and Content) before you set up the frames-page. When you've created the 3 pages you can set up the frames-page. So in the end of this you will have 4 web pages (The frames-page, the Title-page, the Navigation-page and the Content-page).
Some other thing you need to know about frames-pages is that it's clever to give every frame an own name. Because if you don't do that and you give two or more the same name, then you get problems with the links (I will explain more about this later on). If you give every frame an own name you know for sure that linking will work correctly.
Creating a simple frames-page:
Before you create a frames-page make sure how you want to arrange the layout of your website. With this I mean that you must know where you want to put what. For instance: If you want a website with on the left side a navigation menu and on the rest the content of the pages. Then the code of the frames will be like
this:
<frameset cols="100,*">
<frame name="navigation" src="Navigation1.html" scrolling="auto" noresize>
<frame name="content" src="Content1.html" scrolling="auto">
<noframes>
<body>
<p>On this page are frames used, but your browser doesn't support frames.</p>
</body>
</noframes>
</frameset>
</html>
Explanation of the code:
With the cols-attribute in the frameset-tag you set how many columns your frames-page has. So in this example it's a frames-page with 2 columns. The first column has a width of 100px, the second column is set to a variable so that it will always fill up the rest of the screen. With the attribute noresize in the frame-tag you make sure that the size of the frame can't be resized. With the attribute scrolling in the frame-tag you can set the kind of scrolling. There are 2 kinds of scrolling (no scrolling and auto scrolling, an explanation about this will come up later in this tutorial). With the attribute name we give the frames a name. This name will be used for the links, but this will be explained later in this tutorial. Between the tags <noframes> and </noframes> you set the text that will show if the browser doesn't support frames.
<frameset rows="100,*">
<frame name="title" src="Title1.html" scrolling="auto" noresize>
<frame name="content" src="Content1.html" scrolling="auto">
<noframes>
<body>
<p>On this page are frames used, but your browser doesn't support frames.</p>
</body>
</noframes>
</frameset>
</html>
Explanation of the code:
With the rows-attribute in the frameset-tag you set how many rows your frames-page has. So in this example it's a frames-page with 2 rows. The first row has a height of 100px, the second column is set to a variable so that it will always fill up the rest of the screen.
Another example is that if you want to have a combination of both examples, then you could use the following code:
<html>
<head>
<title>The frames-page</title>
</head>
<frameset rows="64,*">
<frame name="title" scrolling="no" noresize src="Title1.html">
<frameset cols="100,*">
<frame name="navigation" src="Navigation1.html" scrolling="auto" noresize>
<frame name="content" src="Content1.html" scrolling="auto">
</frameset>
<noframes>
<body>
<p>On this page are frames used, but your browser doesn't support frames.</p>
</body>
</noframes>
</frameset>
</html>
Explanation of the code:
When you want to have this kind of frames-page you always give up how many rows the frames-page must have. When you've done that, then you can set where you want to have the columns in your page. In this example we have first the Title page and after that we want the 2 columns. So we give for the first row the coding for the Title page and in the second row we give the coding for the frames to divide in 2 columns.
Setting up a frames-page with 4 frames:
The things we need for this set up is:
A total of 5 pages, 1 Frames-page and 5 web pages for the frames.
The layout of the will be as follows:
We will have 1 Title-frame, 2 Navigation-frames, 1 Content-frame and 1 Footer-frame.
The coding of the frames-page is as follows:
<html>
<head>
<title>The frames-page</title>
</head>
<frameset rows="64,*,64">
<frame name="title" scrolling="no" noresize src="Title1.html">
<frameset cols="100,*,100">
<frame name="leftnavigation" src="LeftNavigation1.html" scrolling="auto" noresize>
<frame name="content" src="Content1.html" scrolling="auto">
<frame name="rightnavigation" src="RightNavigation1.html"
scrolling="auto" noresize>
</frameset>
<frame name="footer" scrolling="no" noresize src="Footer1.html">
<noframes>
<body>
<p>On this page are frames used, but your browser doesn't support frames.</p>
</body>
</noframes>
</frameset>
</html>
Explanation of the code:
We've first set up the 3 rows for the frames-page, so that we get a row for the Title-page, a row for the Navigation-page and Content-page and a row for the Footer-page. In the second row we've set up the
3 columns for the LeftNavigation-page, the Content-page and the
RightNavigation-page. The rows that we've created has been arranged that the first and the third row have both a height of 64px. The rest of the windows is for the second row. The columns that we've created has been arranged that the first
and third column have both a width of 100px and the second column will have the rest of the
window.
Setting up a frames-page with 5 frames:
The things we need for this set up is:
A total of 5 pages, 1 Frames-page and 4 web pages for the frames.
The layout of the will be as follows:
We will have 1 Title-frame, 1 Navigation-frame, 1 Content-frame and 1 Footer-frame.
The coding of the frames-page is as follows:
<html>
<head>
<title>The frames-page</title>
</head>
<frameset rows="64,*,64">
<frame name="title" scrolling="no" noresize src="Title1.html">
<frameset cols="100,*">
<frame name="navigation" src="Navigation1.html" scrolling="auto" noresize>
<frame name="content" src="Content1.html" scrolling="auto">
</frameset>
<frame name="footer" scrolling="no" noresize src="Footer1.html">
<noframes>
<body>
<p>On this page are frames used, but your browser doesn't support frames.</p>
</body>
</noframes>
</frameset>
</html>
Explanation of the code:
We've first set up the 3 rows for the frames-page, so that we get a row for the Title-page, a row for the Navigation-page and Content-page and a row for the Footer-page. In the second row we've set up the 2 columns for the Navigation-page and the Content-page. The rows that we've created has been arranged that the first and the third row have both a height of 64px. The rest of the windows is for the second row. The columns that we've created has been arranged that the first column has a width of 100px and the second column will have the rest of the
window.
As you've seen from the two set ups that I've described, you can have as many rows or columns as you like. But be sure that you make clever use of them. The more rows and columns you add the more complex your layout will be.
Adding attributes to the frameset-tag:
Border:
You can add the attribute border to the frameset-tag. When you use this attribute you must keep in mind that if you set a value of 0-4 there will be no border to the frames. If you set a value of 5-9 there will be quite a big one. And if you set a value of 10 or higher you get a really big one. When you put the border attribute it's set for all the borders of the frames that have been created in the frameset-tag.
Example of the border attribute:
<frameset cols="100,*,100" border="5">
Explanation of the code:
Every border in the frameset has been set to 5.
Frameborder:
You can add the attribute frameborder to the frameset-tag. When you use this attribute you must keep in mind that it's only set by 1 digit and only when the value is set to 1 you get a little border. With all the other values there will be no border.
Example of the frameborder attribute:
<frameset cols="100,*,100" frameborder="1">
Explanation of the code:
Every border in the frameset has been set to 1. Due to this there will be a little border.
Note:
When you use the attribute border and the attribute frameborder in the same frameset you must keep in mind that first there will be looked at the value of frameborder and after that at the value of
border. So when the frameborder is set to 1, then the border will be set to the value of the
border attribute. When the frameborder is set to anything else then 1, there will
never be a border. So it doesn't matter to what value you the attribute border set, there will never be a
border.
Example of the border and frameborder attribute in the same frameset-tag:
Explanation of the code:
Because of the fact that the attribute frameborder is set to a value of 1. Then
every border in the frameset has been set to 10.
Explanation of the code:
Because of the fact that the attribute frameborder is set to a value of 0. It doesn't matter in this case to which value the attribute border is set, there will be no border at
all.
Framespacing:
You can add the attribute framespacing to the frameset-tag. This attribute is used to set the space between the frames.
Example of the framespacing attribute:
<frameset cols="100,*,100" framespacing="7">
Explanation of the code:
The space between the frames is set to 7.
Note:
When you use the attribute framespacing and the attribute frameborder in the same frameset you must keep in mind that first there will be looked at the value of frameborder and after that at the value of
framespacing. So when the frameborder is set to 1, then the space between the
frames will be set to the value of the framespacing attribute. When the frameborder is set to anything else then 1, there will never be a
space between the frames. So it doesn't matter to what value the attribute
framespacing is set, there will never be a space between the frames.
Example of the framespacing and frameborder attribute in the same frameset-tag:
Explanation of the code:
Because of the fact that the attribute frameborder is set to a value of 1. Then
the
space between the frames in the frameset has been set to 7.
Explanation of the code:
Because of the fact that the attribute frameborder is set to a value of 0. It doesn't matter in this case to which value the attribute border is set, there will be no border at
all.
Cols:
You can add the attribute cols to the frameset-tag. This attribute is used to create the amount of columns the frameset contains.
Example of the cols attribute:
<frameset cols="100,*,100">
Explanation of the code:
In this example there are 3 columns created in the frameset. The first and the third column have both a width of 100px. The second column is set to fill up the rest of the window. So if the window has a width of 400px, then the second column has a width of 200px. If the window has a width of 640px, then the second column has a width of 440px.
Rows:
You can add the attribute rows to the frameset-tag. This attribute is used to create the amount of rows the frameset contains.
Example of the rows attribute:
<frameset rows="64,*,64">
Explanation of the code:
In this example there are 3 rows created in the frameset. The first and the third row have both a height of 64px. The second row is set to fill up the rest of the window. So if the window has a height of 428px, then the second column has a height of 300px. If the window has a height of 848px, then the second column has a height of 720px.
Bordercolor:
You can add the attribute bordercolor to the frameset-tag. This attribute is used to give every border in the frameset the color that has been set. To set the color of the border you can use eighter the word of the color or the HEX-code of the color.
Example of the bordercolor with the word of the color:
<frameset cols="100,*,100" bordercolor="blue">
Explanation of the code:
The color of every border in the frameset has been set to be blue.
Note:
When you use the attributes rows and cols in a frameset you must know that you can't use both in the same frameset. So if you want to set up a layout of your page with rows and cols, then you first have to set a frameset with the cols attribute in it and then a frameset with the rows attribute in it or first a frameset with the rows attribute in it and then a frameset with the cols attribute in it.
Adding attributes to the frame-tag:
Src:
You have to add the attribute src to the frame-tag. You have to add this attribute, because of the fact that you always have to load another page in the frame.
Example of the src attribute:
<frame src="Content1.html">
Explanation of the code:
The page Content1.html will be loaded in the frame.
Name:
You can add the attribute name to the frame-tag. I can recommend to do this, because if you do this it's a lot easier to set up the links in the pages (how to link in frames-pages shall I explain later on).
Example of the name attribute:
<frame name="content" src="Content1.html">
Explanation of the code:
The name of this frame is set to content.
Note:
Make sure that you don't use name for 2 different frames. If you still do that and you assign a link to 1 of the frames that you've given the same name, then the page whereto is linked is loaded in both frames instead of in the required frame only.
Scrolling:
You can add the attribute scrolling to the frame-tag. There are 3 settings for this attribute. The settings are: Yes (always have a scrolling bar), No (never have a scrolling bar) and Auto (determines if there is a scrolling bar needed or not).
Example of the scrolling attribute:
Explanation of the code:
The attribute scrolling is set to auto. This is done, so that when the page that is loaded in the content frame gets automatically a scrolling bar when it's needed and don't get a scrolling bar if it isn't needed.
Noresize:
You can add the attribute noresize to the frame-tag. This attribute is used to disable the resize of the frame in the browser. So when you don't want that the frame can be resized in the browser, then you add this attribute to that frame-tag.
Example of the noresize attribute:
Explanation of the code:
The attribute noresize is added to this frame-tag. Now it isn't possible to resize this frame anymore in the browser.
Marginwidth:
You can add the attribute marginwidth to the frame-tag. With this attribute you set the side margin from the frame border to the content of the page.
Example of the marginwidth attribute:
Explanation of the code:
The attribute marginwidth is set to 10, so that the side margin from the content of the page to the frame border is 10.
Marginheight:
You can add the attribute marginheight to the frame-tag. With this attribute you set the up and down margin from the frame border to the content of the page.
Example of the marginheight attribute:
Explanation of the code:
The attribute marginheight is set to 10, so that the up and down margin from the content of the page to the frame border is 10.
How to use links in frames-pages:
In this section I want to explain how you can use links in frames-pages.
Link to the same frame:
If you want to load another page in the same frame you can use two kinds of values for the target attribute of a link-tag. The first one that you can use is: _self
Example of a link to the same frame:
<a href="Navigation3.html" target="_self">
The second one that you can use is: the name that you've assigned to the frame in the attribute name.
Another example of a link to the same frame:
<a href="Navigation3.html" target="navigation">
Link to another frame:
If you want to load another page in another frame you can use the following value for the target attribute of a link-tag: the name that you've assigned to that frame in the attribute name.
Example of a link to another frame:
