Ferestre Frame

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:

<frameset> , <frame> si <iframe>

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:

<iframe src="url_pagina" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="nume_frame"> </iframe>

- 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:

document - reprezinta documentul curent incarcat in interiorul unui cadru
frames - tablou ce contine referiri la cadrele copil
length - lungimea tabloului de cadre (nnumarul de elemende)
name - atributul "name" al etichetei <frame>
parent - fereastra principala sau cadrul principal din care sunt create cadrele copil
self - reprezinta referire la cadrul curent
top - fereastra de browser care executa scriptul
window - face referire la fereastra curenta sau la cadrul curent

Obiectul frame are urmatoarele metode:

blur() - dezactiveaza cadrul
clearInterval() - anuleaza o executie repetata
clearTimeout() - anuleaza orice executie intarziata
focus() - activeaza un cadru
print() - apeleaza caseta de dialog "Print"
setInterval() - stabileste planificarea functiei pentru executare repetata
setTimeout() - stabileste planificarea functiei pentru executare intarziata

3. Frame-uri si JavaScript

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

fereastra browser (parinte), care este in varful ierarhiei, aceasta contine doua cadre copii - "frame1" si "frame2"

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

Daca aveti un script in fereastra parinte, ca sa se acceseze prin el frame-urile trebuie doar folosit numele frame-ului.
De exemplu:
- frame1.document.write("Mesaj de la fereastra parinte");

2. Fereastra copil acceseaza fereastra parinte

Acest procedeu e util cand vreti sa eliminati cadrele din fereastra principala. Eliminarea structuri de cadre se face prin incarcarea unei pagini noi in locul paginii principale care a creat frame-ul (aici fereastra parinte).
Se poate accesa fereastra parinte din interiorul unei ferestre copil cu ajutorul expresiei "parent". Pentru a incarca un document nou in fereastra parinte se foloseste "location.href", caruia ii dam un nou URL, ca in exemplul urmator:
- parent.location.href = "http://adresa_url"; (adresa_url este adresa noi pagini care va fi incarcata)

3. O fereastra copil acceseaza o alta fereastra copil

Nu exista legatura directa intre cele doua cadre, primul frame nu cunoaste existenta celuilalt.
Pentru fereastra parinte, al doilea cadru (frame) este numit "frame2" iar fereastra principala, vazuta din primul frame este numita "parent". Astfel, pentru a avea acces din primul frame la obiectul "document" al celui de-al doilea frame trebuie sa scriem urmatoarele:
- parent.frame2.document.write("Apel de la cadrul frame1");

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">

</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>

- Se observa diferitele moduri de a incarca o pagina noua.

- Primul link (Link1) foloseste functia "load()" dintr-un script
- Al doilea link (Link2) foloseste atributul "target", metoda standard HTML pentru cadre
- Al treilea link (Link3) foloseste tot atributul "target", de data aceasta prin valoarea "_top" va incarca pagina noua direct in fereastra principala, eliminand astfel cadrele.

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">

</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

Care tag defineste zona de click intr-o harta creata dintr-o imagine?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?

display overflow position

#id {
  overflow: auto;
}

Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".

who which whoever

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".

que quien cuyo

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.