   Lesson 7. Creating a Frameset. Setting out frames, Basic syntax. For the purpose of this exercise we will be using two sample HTML documents, fileone.html and filetwo.html , all documents will be kept in the same directory.  Click
here to download azip of these sample files. fileone.html - code as follows: <HTML> <HEAD> <TITLE> fileone</TITLE> </HEAD> <BODY BGCOLOR="#FF0000" TEXT="#FFFFFF"> <H3>File One Content</H3> </BODY> </HTML> filetwo.html - code as follows: <HTML> <HEAD> <TITLE> filetwo</TITLE> </HEAD> <BODY BGCOLOR="#00FF00" TEXT="#000000"> <H3>File Two Content</H3> </BODY> </HTML> Create these two documents and save them to a directory. Create a new document called myframes.html with only the following in it. <HTML> <HEAD> <TITLE>My Frame Set</TITLE> </HEAD> </HTML> Note that this document has no <BODY> tags in it. It won't need them. Save this to the same directory as the other two. The <FRAMESET> Tag. <FRAMESET> </FRAMESET> The FRAMESET tag is used to split the screen either vertically into columns or horizontally into rows (I know that sounds wrong but it's right if you think about it.) It is used instead of the <BODY> tag. The split can be set either in pixels or as a relative percentage of the available screen size in the following manner: split the screen horizontally in the middle <FRAMESET rows="50%,50%" > </FRAMESET> or split the screen vertically in the middle <FRAMESET cols="50%,50%" > </FRAMESET> or create a 125 pixel fixed width column to the left <FRAMESET cols="125,*" > </FRAMESET> or create a 125 pixel fixed width row to the bottom <FRAMESET rows="*,125" > </FRAMESET> Notice the use of the * as the "wildcard". This allows the remainder of the screen to vary in size depending on the screen resolution being used by any particular visitor to your site. But this is no use without specifying content for the two new frames. The <FRAME> Tag. <FRAME SRC=" "> The FRAME tag is used to specify the content of each frame in turn. The content of the frame is another HTML file, the "Source" file, and it is specified using the SRC="" attribute Using the three documents created at the start of the tutorial, modify the myframes.html document by adding a FRAMESET and some FRAME SRC definitions as follows.... <HTML> <HEAD> <TITLE>My Frame Set</TITLE> </HEAD> <FRAMESET rows="50%,50%" > <FRAME SRC="fileone.html"> <FRAME SRC="filetwo.html"> </FRAMESET > </HTML> Save this document and view it in your browser it should look something like this...... 
You can specify as many rows or columns as you like within one FRAMESET. You CANNOT specify both rows and cols in the same FRAMESET... to do this you have to "nest" framesets. This and other issues are covered in the next lesson. 
|
 HTML Resource Centre Lesson 6 Introducing Frames
Creating a Frameset
Further Frames
Customising Frames
Floating Frames (HTML4 Netscape 5 & Microsoft Explorer ONLY)
|