Frames

Introduction

When they first came out, frames were used almost anywhere, sometimes regardless of their importance; until webmasters started to think of ways to use or ignore them.
Frames are used to divide your web screen in different parts that can each behave independently. For example, one part of the screen could display and change data regardless of what the other screen(s) is (are) displaying. You can also make different frames depend on each other.

Frame Structure

By default, frames are not parts of the body of an HTML page. Therefore, they don't require a <body> tag. Frames are arranged in columns and rows, and that's how you define their layout. Since frames are independent, each requires its own file. And each frame should have a name that will distinguish it from the other frames. To occupy a frame, you tell the browser what file should load in what frame. Therefore, there are two pieces of information the browser needs from you: a name for the frame and which file you want displayed in that frame. The name of the frame is given as an HTML classic file and the name of the frame is considered a target. 

The word "target" anticipates a "goal" for the file, this means "where the file will be displayed".
To create frames on a page, first declare a <frameset> tag, define each needed frame inside of a frameset using the <frame> tag, then close the frameset with the </frameset> tag. You define each frame by providing the width and/or the height of frames to control their dimensions. The width or the height is specified in pixels or by percentage.
We will first create the files necessary for this lesson.
 
Practical Learning: Creating Frames

  1. Start your text editor.
  2. In your text editor, type:
    <html>
    <head>
    </head>
    <body bgcolor="#cc6500">

    <font color="white"><b>Top Frame</b></font>

    </body>
    </html>
  3. On the main menu of your text editor, click File -> Save As…
  4. In the Save As dialog box, click the arrow of the Save In combo box and select Desktop.
  5. On the toolbar of the Save As dialog box, click the Create New Folder button 
  6. Type Frames and click OK
  7. Click the arrow of the Save As Type combo box and select All Files(*)
  8. In the File Name box, type top.htm
  9. Click Save.
  10. Back in your text editor, change the file with the following:
    <html>
    <head>
    </head>
    <body bgcolor="#99ccff">
    Left
    </body>
    </html>
  11. On the main menu, click File -> Save As…
  12. In the File Name, type left.htm
  13. Make sure the Frames folder is displaying in the Save In combo box and click Save.
  14. Change the content of the file as follows:
    <html>
    <head>
    </head>
    <body bgcolor="#ffcc99">
    <center>Bottom</center>
    </body>
    </html>
  15. Save the file as bottom.htm in the Frames folder
  16. Change the file as follows:
    <html>
    <head>
    </head>
    <body bgcolor="#33cc33">
    Right
    </body>
    </html>
  17. Save the file as right.htm in the Frames folder.
  18. Change the file's content as follows:
    <html>
    <head>
    </head>
    <body>
    <center><font face="Wingdings, Wingding, Times New Roman" size="7" color="#0000ff">{ &amp; {</font>&nbsp; &nbsp;<font face="Westminster, Helvetica, Verdana" size="7">Main Area</font></center>
    </body>
    </html>
  19. Save the file as main.htm in the Frames folder.
  20. Two-Frames: At its basic layout, you can have a screen made of two frames. To get two vertical frames, you define a page as having two columns. Here is an example of a screen divided in two vertical frames:
    <html>
    <head>
    <title>A Two-Frame Page</title>
    <head>
    <frameset cols="15%,75%">
      <frame src="file1.htm" name="leftframe">
      <frame src="file2.htm" name="rightframe">
    </frameset>
    </html>
    		  
  21. Here is an example of a two horizontally framed page:
    <html>
    <head>
    <title>A Two-Frame Page</title>
    <head>
    <frameset rows="15%,75%">
      <frame src="file1.htm" name="topframe">
      <frame src="file2.htm" name="bottomframe">
    </frameset>
    </html> 
    		  
  22. In your text editor, change the file content to:
    <html>
    <head>
    <title>Frame Samples</title>
    </head>
    <frameset cols="100,*">
      <frame name="top" src="top.htm">
      <frame name="main" src="main.htm">
    </frameset>
    </html>
    Top Frame
    { Main Area
  23. Save the file as frame1.htm
  24. On the desktop, double-click the Frames folder icon.
  25. Inside of the Frames window, double-click frame1.htm to preview the file
    Maximize Internet Explorer if necessary.
  26. Bring back your text editor and change its content with:
    <html>
    <head>
    <title>Frame Samples 2</title>
    </head>
    <frameset rows="60,*">
      <frame name="leftframe" src="left.htm">
      <frame name="rightframe" src="right.htm">
    </frameset>
    </html>
    		  
  27. Save the file as frame2.htm
  28. Click Internet Explorer on the Taskbar.
  29. On the main menu, click File -> Open…
  30. In the Open dialog, locate the Frames window and click frame2.htm
  31. Click Open and click OK
  32. Bring back your text editor and change its content as follows:
    <html>
    <head>
    <title>Frame Samples</title>
    </head>
    <frameset cols="12%,*">
      <frame name="leftframe" src="left.htm">
        <frameset rows="14%,*">
          <frame name="topframe" src="top.htm">
          <frame name="rightframe" src="right.htm">
        </frameset>
    </frameset>
    </html>
    		  
  33. Save the file as frame3.htm
  34. Preview it in the browser and get back the your text editor.
  35. Change its listing to:
    <html>
    <head>
    <title>Frame Samples</title>
    </head>
    <frameset rows="12%,*">
      <frame name="topframe" src="top.htm">
        <frameset cols="14%,*,14%">
          <frame name="leftframe" src="left.htm">
          <frame name="mainframe" src="main.htm">
          <frame name="rightframe" src="right.htm">
        </frameset>
    </frameset>
    </html>
    		  
  36. Save the file as frame4.htm
  37. Preview it and get back to your text editor
  38. Change its content to:
    <html>
    <head>
    <title>Frame Samples</title>
    </head>
    <frameset cols="12%,*">
      <frame name="leftframe" src="left.htm">
        <frameset rows="14%,*,12%">
          <frame name="topframe" src="top.htm">
          <frame name="mainframe" src="main.htm">
          <frame name="bottomframe" src="bottom.htm">
        </frameset>
    </frameset>
    </html>
    		  
  39. Save the file as frame5.htm
  40. Preview it and get back to your text editor
  41. Change its content to:
    <html>
    <head>
    <title>Frame Samples</title>
    </head>
    <frameset cols="12%,*,12%">
      <frame name="leftframe" src="left.htm">
        <frameset rows="14%,*,12%">
          <frame name="topframe" src="top.htm">
          <frame name="mainframe" src="main.htm">
          <frame name="bottomframe" src="bottom.htm">
        </frameset>
          <frame name="rightframe" src="right.htm">
    </frameset>
    </html>
    		  
  42. Save the file as frame6.htm
  43. Preview it and get back to your text editor
  44. Change its content to:
    <html>
    <head>
    <title>Frame Samples</title>
    </head>
    <frameset rows="12%,*,12%">
      <frame name="topframe" src="top.htm">
        <frameset cols="14%,*,14%">
          <frame name="leftframe" src="left.html">
          <frame name="mainframe" src="main.htm">
          <frame name="rightframe" src="right.htm">
        </frameset>
      <frame name="bottomframe" src="bottom.htm">
    </frameset>
    </html>
    		  

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Related Scripting

Related Posts Plugin for WordPress, Blogger...

Disqus for Functions