Programming the World Wide Web |
Fejezet2 |
| << 2.10. Űrlap-példa |
2.11. Frame-ek (lapkeretek)
A frame-ek használata lehetővé teszi, hogy egyetlen bögészőablakban több HTML oldalt jelenítsünk meg. Mindegyik HTML oldalt frame-nek hívjuk, és ezek függetlenek egymástól.
A frame-ek használatának hátrányai is vannak:
- egyszerre több HTML oldalt kell nyilvántartania a fejlesztőnek, ami nehézkes lehet
- nehéz kinyomtatni a teljes weboldalt
Nézzünk néhány példát:
Vízszintes frame-ek:
A fenti példa kódja a vizszintes_framek.htm állományban található. Forráskódja:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head><title>vizszintes framek</title></head>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>
<body>A bongeszod nem kezeli a frame-eket!</body>
</noframes>
</frameset>
</html>
A fenti példa (és a továbbiak is) használja a frame_a.htm, frame_b.htm, illetve frame_c.htm HTML oldalakat. Ezeknek a tartalma hasonló. Itt láthatjuk pl. a frame_a.htm forráskódját:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>A form</title></head>
<body style="background:#00AABB">
<h1>A</h1>
</body>
</html>
Vegyes frame-ek:
A fenti példa kódja a vegyes_framek.htm állományban található. Forráskódja:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head><title>vegyes framek</title></head>
<frameset rows="50%,50%">
<frame src="frame_a.htm" noresize="noresize">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>
Navigációs sáv:
A fenti példa kódja a navigalo_pl.htm állományban található. Forráskódja:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head><title>navigalo pl.</title></head>
<frameset cols="120,*">
<frame src="kiprobal.htm">
<frame name="showframe" src="frame_a.htm" >
</frameset>
</html>
iframe:
A fenti példa kódja a iframe-et_hasznalo_oldal.html állományban található. Forráskódja:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<!-- iframe-->
<h2>Beágyazott HTML - iframe</h2>
<p>Az alábbi hivatkozásokra kattintva megváltoztatható a beágyazott HTML tartalma: </p>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a>
<a href="http://www.ubbcluj.ro" target="iframe_a">www.ubbcluj.ro</a></p>
<iframe src="iframe_demo.htm" name="iframe_a" width="600" height="300"></iframe>
</body>
</html>
Kezdetben az iframe_demo.htm XHTML oldal van betöltve az iframe-be, melynek kódja:
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>iframe demo</title>
</head>
<body>
<h1>iframe demo</h1>
... ez egy önálló HTML oldal...
</body>
</html>