Frames - part 2Imagine you want to split the page up into four frames. You don't want four columns though or four rows, you want two columns AND two rows. There is an example of a page like this at http://www.usheen.com/s101_frs/grid.htm. If you want a grid with two rows and two columns, of equal size and in a grid-like layout you would write <frameset rows="*,*" cols="*,*"> or if you wanted 3 rows and 4 columns :: <frameset rows="*,*,*" cols="*,*,*,*"> So the code for grid.htm would be: <html> <frameset rows="*,*" cols="*,*"> <frame src="red.htm"> <frame src="blue.htm"> <frame src="blue.htm"> <frame src="red.htm"> </frameset> </html> The first <frame> reference is for the top left frame, after that the <frame> references reference the frame top the right of the previous one. When the end of the row is reached it goes on to the next line (row). Now for the tricky part. What if you want more than two frames, with a mixture of rows and columns that aren't in a grid like layout. For an example check out http://www.usheen.com/s101_frs/notgrid.h... it is quite important that you look at this example before continuing. Primarily the document is made up of three columns, the left most column contains two more frames (rows) and the rightmost column contains three more frames (rows also). Imagine first of all that we only want three columns, our code would look like this. <html> <frameset cols="*,*,*"> <frame src="blue.htm"> <frame src="pink.htm"> <frame src="blue.htm"> </frameset> </html> However instead of just one frame on the left we want to insert two more frames, in rows. The code for these frames is: <frameset rows="*,*"> <frame src="blue.htm"> <frame src="red.htm"> </frameset> This code should be inserted INSTEAD OF the original code for the first column (i.e. <frame src="blue.htm">) so as the new code will look like this. <html> <frameset cols="*,*,*"> <frameset rows="*,*"> <frame src="blue.htm"> <frame src="red.htm"> </frameset> <frame src="pink.htm"> <frame src="blue.htm"> </frameset> </html> The second column remains the same but the third column is split into three more rows the code for which is. <frameset rows="*,*,*"> <frame src="red.htm"> <frame src="blue.htm"> <frame src="red.htm"> </frameset> This should be inserted instead of the original code for the third frame (i.e. <frame src="blue.htm">) so as the finished code is. <html> <frameset cols="*,*,*"> <frameset rows="*,*"> <frame src="blue.htm"> <frame src="red.htm"> </frameset> <frame src="pink.htm"> <frameset rows="*,*,*"> <frame src="red.htm"> <frame src="blue.htm"> <frame src="red.htm"> </frameset> </frameset> </html> This can seem a little bit confusing at first but don't panic. If you are having trouble read over the article again, study the code for the page at http://www.usheen.com/s101_frs/notgrid.h... and if you like you can read my frames tutorial at http://www.usheen.com/html/tut7.htm. See Ya Soon Oisin
The copyright of the article Frames - part 2 in HTML Lessons is owned by Oisin Prendiville. Permission to republish Frames - part 2 in print or online must be granted by the author in writing.
Go To Page: 1 2 Articles in this Topic Discussions in this Topic |