1 / 16

Frames

Frames. Purpose to split a screen into two or more independent windows, each capable to displaying its own page. Common use to divide a screen into two windows left window serving as a navigation guide and right window showing the contents of a particular page. Examples.

lazzaro-murphy
Download Presentation

Frames

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Frames • Purpose • to split a screen into two or more independent windows, each capable to displaying its own page. • Common use • to divide a screen into two windows • left window serving as a navigation guide and • right window showing the contents of a particular page

  2. Examples • HTML Frame Examples • Java Class Library

  3. Frame Pages • At least 3 separate pages are required to use frames. • Frameset page , which indicates how many frames and describes their layout • Navigation page, which contains a list of links to various pages to be shown in the contents frame Content page, which will display the contents of linked pages

  4. Frameset <html> <head><title>Frameset Demo</title></head> <frameset cols="180,420"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html"> </frameset> <body bgcolor="#ffffff"> <noframe>This page requires a browser that supports frames. </noframe> </body> </html>

  5. Specifying Frame Size by % <html> <head><title>Frameset Demo</title></head> <frameset cols=”44%,*"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html"> </frameset> <body bgcolor="#ffffff"> <noframe>This page requires a browser that supports frames. </noframe> </body> </html>

  6. Navigation Frame <html> <head><title>Navigation Page</title></head> <body bgcolor="#ffffff"> <h2>Navigation Frame </h2> <h3>Animal Farm</h3> <ol> <li><a href="frameAnimals.html“ target="content">Apes</a> <li><a href="frameAnimals.html#bears" target=content>Bears</a> <li><a href="frameAnimals.html#cheetah" target=content>Cheetah</a> <li><a href="frameAnimals.html#dogs" target=content>Dog</a> </ol>

  7. <h3>Plant Farm</h3> <ol> <li><a href="framePlants.html" target=content>Anthuriums</a></li> <li><a href="framePlants.html#bonsai" target=content>Bonsai</a></li> <li><a href="framePlants.html#cabbages“ target=content>Cabbages</a></li> </ol> </body> </html>

  8. Targeting to a Specific Frame • Targetting to Content Frame • Not targetting to Content Frame • Targetting to Parent Frame

  9. Targetting to Various Frames <body bgcolor="#ffffff"> <h2>Navigation Frame </h2> <h3>Animal Farm</h3> <ol> <li><a href="frameAnimals.html" target="content">Apes</a> <li><a href="frameAnimals.html#bears">Bears</a> <li><a href="frameAnimals.html#cheetah” target="_parent">Cheetah</a> </ol>

  10. Page With 3 Frames <html> <head> <title>Multiple Frames (3)</title></head> <frameset rows="80,*"> <frame name="banner" src="frameBanner.html"> <frameset cols="180,420"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html"> </frameset> </frameset> <body bgcolor="#FFFFFF"> </body> </html>

  11. Page With 4 Frames <html> <head><title>Multiple Frames (4)</title></head> <frameset rows="15%,70,15%"> <frame name="banner" src="frameBanner.html" scrolling=no noresize> <frameset cols="180,420"> <frame name=navigate src="framenav.html” border=0> <frame name=content src="frameWelcome.html” border=0> </frameset> <frame name="footer" src="frameFooter.html” scrolling=no noresize> </frameset> <body bgcolor="#FFFFFF"> </body> </html>

  12. Frame Attributes • Default Frames • No Border • (frameborder="0" in both FRAME & FRAMESET) • No Scrolling • (scrolling="no" in FRAME) • No Resize • (noresize in FRAME)

  13. Default Frames <frameset rows="70,*"> <frame name="banner" src="frameBanner.html"> <frameset cols="180,420"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html"> </frameset> </frameset>

  14. No Border <frameset rows="70,*" frameborder="0"> <frame name="banner" src="frameBanner.html"> <frameset cols="180,420"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html"> </frameset> </frameset>

  15. No Scrolling <frameset rows="70,*" > <frame name="banner" src="frameBanner.html"> <frameset cols="180,420"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html” scrolling="no"> </frameset> </frameset>

  16. No Resizing <frameset rows="70,*"> <frame name="banner" src="frameBanner.html” noresize> <frameset cols="180,420"> <frame name=navigate src="framenav.html"> <frame name=content src="frameWelcome.html"> </frameset> </frameset>

More Related