In prezent noile metode si tendinte de creare a site-urilor folosesc mai putin frame-uri (cadre). Chiar daca nu le veti folosi, e bine sa cunoasteti aceste elemente deoarece le puteti gasi in alte documente si sa stiti despre ce este vorba.
Cadrele (frame-uri) sunt subferestre ale unei ferestre principale, in care sunt incluse.

1. Crearea cadrelor

Fereastra navigatorului poate fi impartita în mai multe frame-uri (cadre). Un frame este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta în interior un document propriu (in general un document HTML). De exemplu puteti creea doua frame-uri intr-o fereastra, in primul frame puteti incarca o pagina de la o adresa (ex. google.com) iar in al doilea frame o alta pagina, de la alta adresa (ex. yahoo.com).
Crearea de frame-uri apartine limbajului HTML, dar am sa descriu cateva lucruri de baza.
Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

Un exemplu de cod HTML care creaza o pagina cu doua frame-uri este urmatorul:
<html>
<frameset rows="50%,50%">
  <frame src="pagina1.html" name="frame1">
  <frame src="pagina2.html" name="frame2">
</frameset>
</html>
- Proprietatea "row" din eticheta <frameset> aseaza cele doua frame-uri in linie, unul deasupra celuilalt.
Primul frame, de deasupra, incarca si afiseaza "pagina1.html" iar al doilea frame incarca si afiseaza "pagina2.html".
Daca vreti sa asezati cele doua frame-uri in coloana, unul langa altul, inlocuiti cuvantul "row" cu "cols".
Expresia "50%,50%" reprezinta dimensiunea fiecarui cadru, exprimata in procente in raport cu fereastra principala.
Fiecare frame trebuie sa aibe un nume unic, exprimat prin atributul "name" din eticheta <frame>, cu ajutorul acestui nume se poate accesa in JavaScript cadrul dorit.
Pentru mai multe detalii desprea crearea de cadre, vedeti Cadre (lectia 10) din cursul HTML.
Pentru crearea unui cadru cu <iframe> puteti folosi urmatoarea sintaxa: - Unde "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului care va fi folosit de JavaScript.

2. Obiectul Frame

Acest obiect face referire la un cadru (un frame) dintr-o structura de cadre incluse intr-o fereastra.
Intr-o pagina cu mai multe cadre, obiectul "Window" reprezinta de fapt pagina care contine tagul <frameset>, iar celelalte pagini sunt considerate cadre in acest context.

Obiectul frame are urmatoarele proprietati:


Obiectul frame are urmatoarele metode:

3. Frame-uri si JavaScript

Ierarhia elementelor paginii HTML create in primul exemplu (cele 2 cadre "frame1" si "frame2" asezate in linie) este urmatoarea:

Cu ajutorul numelor date cadrelor putem schimba informatii intre cele doua frame-uri impreuna cu fereastra principala, de exemplu putem face un link intr-un frame care sa deschida o pagina in celalalt frame.
In continuare vom studia trei cazuri de relatii si accesari intre ferestrele copil si fereastra parinte.

1. Fereastra parinte acceseaza o fereastra copil
2. Fereastra copil acceseaza fereastra parinte
3. O fereastra copil acceseaza o alta fereastra copil

4. Navigarea prin cadre

Prin "navigarea prin cadre" se intelege deschiderea paginilor intr-un frame sau in fereastra principala printr-un link din alt frame. Acest lucru se poate face prin mai multe metode.
Pentru a intelegere mai bine, vom lua un exemplu concret.
Folosim o pagina cu doua cadre, in al doilea cadru vom avea legaturi catre mai multe pagini, dar care se vor incarca in primul cadru.

<html>
<frameset rows="85%,15%">
  <frame src="prima.html" name="frame1">
  <frame src="meniu.html" name="frame2">
</frameset>
</html>
Pagina "prima.html" reprezinta pagina initiala care va fi incarcata in primul frame, cu numele "frame1" (poate fi orice document HTML).
Pentru pagina care va fi incarcata in al doilea frame (meniu.html) vom folosi codul de mai jos pentru crearea ei.
<html>
<head>
<script language="JavaScript">
<!--
  function load(url) {
  parent.frame1.location.href= url;
}
// -->
</script>
</head>
<body>
<center>
  <a href="javascript:load('test1.htm')">Link1</a> (<i>cu JavaScript</i>) --
  <a href="test2.htm" target="frame1">Link2</a> (<i>cu target="frame1"</i>) --
  <a href="test2.htm" target="_top">Link3</a> (<i>cu target="_top"</i>)
</center>
</body>
</html>
- Pentru a vedea cum functioneaza acest exemplu, click pe acest buton ->
- Se observa diferitele moduri de a incarca o pagina noua. In functie de proiectul dv. puteti decide care varianta e mai potrivita.
Folosind atributul HTML "target" este metoda cea mai simpla.
Solutia JavaScript este recomandata daca doriti sa faceti mai multe lucruri ca o consecinta a click-ului pe un link, de exemplu cand doriti ca printr-un click sa deschideti doua ferestre, in doua cadre diferite. Pentru aceasta puteti utiliza urmatorul script:
<script type="text/javascript">
<!--
function loadtwo() {
    parent.frame1.location.href= "pagina1.html";
    parent.frame2.location.href= "pagina.html";
}
//-->
</script>
- Cand va fi apelata fuctia "loadtwo()", va incarca "pagina1.html" in "frame1" si "pagina2.html" in "frame2".

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Ferestre Frame

Last accessed pages

  1. Bubbles3 (8790)
  2. The Rise Of Atlantis (1521)
  3. Adjective - Exercitii si teste engleza incepatori (553)
  4. Adjectivul in limba engleza - The adjective (1039)
  5. Creare si editare pagini HTML (2259)

Popular pages this month

  1. Bubbles3 (3365)
  2. Gramatica limbii engleze - Prezentare Generala (3170)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2266)
  4. Butterfly Kyodai (2167)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1918)