Activity 14

Frames

Aims:
  • This activity will introduce you to creating frames in html (splitting the screen)
    In this section we conclude our study of html by looking at ways in which we can present the page in a different way. You are already familiar with frames since they are widely used in the web - what you probably didnt realise was that you were seeing them!

    socnet uses frames to display the page - the menu bar on the left of the screen stays there all the time and if you click on a link in that menu it loads into the right hand section of the screen - check that now and then come back <link to socnet>

    You might wish to use a similar system for your pages. An opeing page for the group might provide links to each individual members site and to the group pages - you might even like to include drop down menus like those used in london-students.com it depends largely on how much time you have and how 'flash' you want to be.

    Splitting the page

    You can achieve this effect by splitting the screen to display two pages at once - in this case the two pages displayed are:
  • page1.htm
    and
  • page2.htm

    This is the html code which produces this effect. This code is contained in another page called split2.htm.


    <FRAMESET rows="75,*" frameborder="NO" border="0" framespacing="0">
    <FRAME src="page1.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    <FRAME src="page2.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    </FRAMESET>

    The result is....

    Not unsurprisingly we can also split the files we now see on screen so that we can show 3 pages, or more, on screen at once.....like this

    Here we have loaded 3 pages - page1, page2 and page 3. The first step is as above to split the acreen into 2. In this case we have loaded 2 pages, page1.htm into the top and split.htm into the bottom BUT split.htm loads two further pages, page2.htm and page3.htm.

    Code for split2.htm (as before):


    <FRAMESET rows="75,*" frameborder="NO" border="0" framespacing="0">
    <FRAME src="page1.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    <FRAME src="split.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    </FRAMESET>

    Code for split.htm:


    <FRAMESET cols="75,*" frameborder="NO" border="0" framespacing="0">
    <FRAME src="page2.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    <FRAME src="page3.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    </FRAMESET>

    You can, of course, load any page you wish into any area of the screen. BEWARE though because if you are creating a menu in one of the small areas and you have a link the page you link to will load into the area of the screen (the frame) that the link appears in. The solution to this is name each of the frames - make this as simple as possible.... Code for split2.htm (as before):


    <FRAMESET rows="75,*" frameborder="NO" border="0" framespacing="0">
    <FRAME src="page1.htm" name=1 noresize frameborder="NO" marginwidth="0" marginheight="0">
    <FRAME src="split.htm" noresize frameborder="NO" marginwidth="0" marginheight="0">
    </FRAMESET>

    Code for split.htm:


    <FRAMESET cols="75,*" frameborder="NO" border="0" framespacing="0">
    <FRAME src="page2.htm" name=2 noresize frameborder="NO" marginwidth="0" marginheight="0">
    <FRAME src="page3.htm" name=3 noresize frameborder="NO" marginwidth="0" marginheight="0">
    </FRAMESET>

    Since area 3 is the largest area I think this is where you will want to load your pages into. So if we have a menu in area 2 (page2) we need to tell any link there to load into area 3.....like this...

    <a href="menuITEM1.htm" target=3>Menu item 1</a>
    <a href="menuITEM2.htm" target=3>Menu item 2</a>
    <a href="menuITEM3.htm" target=3>Menu item 3</a>
    <a href="menuITEM4.htm" target=3>Menu item 4</a>

    In this example the menu would be in area 2 and be called page2.htm