_________________ | ___ _______ | | | | | | | | | | | | | | | | |_______| | | | | _______ | | | | | | | | | | | | | | |___| |_______| | |_________________| |
Frames |
_________________ | ___ _______ | | | | | | | | | | | | | | | | |_______| | | | | _______ | | | | | | | | | | | | | | |___| |_______| | |_________________| |
It is possible to sub-divide a browser window into separate parts. For this, you have to make a frameset, a so-called 'layout' document in which you describe how large you want the separate parts to be. In this frameset you also indicate which pages you want to be shown in the frames at the start. A frameset document looks like this:
<html> <head> <title>Frameset document example</title> </head> <frameset rows="45,*,45" border="0" frameborder="0"> <frame border="0" src="title.html" name="TITLE" /> <frame border="0" src="mainframeset.html" name="MAIN" /> <frame border="0" src="footer.html" name="FOOT" /> </frameset> <noframes> <p>This is a frameset document. If you cannot read it as such, it would be best to upgrade your browser.</p> </noframes> </html>
As you can see, this frameset has another frameset inside it ('mainframeset.html'), which could look like this:
<html> <head> <title>Sub-frameset document example</title> </head> <frameset cols="150,*" border="0" frameborder="0"> <frame border="0" src="navigation.html" name="NAV" /> <frame border="0" src="intro.html" name="MAINMAIN" /> </frameset> </html>
Because the frameset, the layout document, is the absolute first one the browser gets to see, and it is always there as the background to all the documents with the actual text, the title of the frameset stays at the top of the browser window. It is therefore quite important to make it a sensible title.
A frameset document does not have a body. It is not meant to contain text which is directly visible to the reader. You can, however, include text within <noframes> tags, which would be shown if a reader has a browser which can not cope with frames. Quite a friendly thing to do, really.
In the first example above, the browser window is divided into three horizontal parts. The first part is 45 rows high, the third part is 45 rows high, and the part in between occupies the rest of the window, indicated by the '*'. It is a good idea to let the browser sort out the size of at least one of the frames in each direction, so that your frameset fills the browser window completely.
Apart from the pixel values, 45 in this case, you can use percentage values to divide the window.
In the second example, the 'MAIN' part of the first frameset is further divided into two vertical parts, the left part 150 cols wide, and the right part occupying the rest of the window. Again, it is left to the browser to fill up the whole browser window.
It would have been just as logical to have the left part occupy 10% of the browser window, rather than a fixed 150 pixels.
The <frame src> refers to the text page which will be shown in that particular frame. 'title.html' could contain the title of your website, which could stay up on the screen permanently, whatever happens to the rest of the frames. 'footer.html' could contain information on who wrote the site, with maybe an email address, which could also stay on the screen permanently, like the title information. 'navigation.html' could be a vertical list of links, from which the reader could get to all the other pages in the website, navigating his or her way around the site. 'intro.html' would contain an introduction to what the website is all about. This way of setting up a frameset is quite common. Especially the navigation, on the left-hand-side of the browser window, is seen very often.
By giving each separate frame its own name, you can direct other text pages into those particular frames by using a target="NAME" attribute inside the <a href> tag of a hyperlink, or by replacing a whole frameset with another with the same names for the frames. Once a frame has a certain name, and you do not replace the frameset with another, you can refer to this frame by its name indefinitely.
Frames can have borders, just like tables. I don't like them, but they may have their use.
With the examples above, make a frames setup to your liking. Maybe you are going to write a book, the title of which stays at the top of the window. Your name stays at the bottom. In the middle, you will have hyperlinks to all the chapters, with the first chapter displayed when the frameset is loaded into the browser. Make a file with the second chapter, too, which comes up instead of chapter 1 when the link to chapter 2 is clicked in the navigation frame.
| Click | here | to see the example I have made, in a separate browser window. But try to do it yourself, first! |
What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces
| Course created by Maria Turkenburg | TurkenburkiePower!!!©2001-2005 |