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:

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".
Obiectul window 2 <<-- Anterior --- Urmator -->> Cookie-uri 1

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag adauga imagine in pagina web?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS afiseaza textul inclinat?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Clic pe functia jQuery care ascunde animat un element HTML.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Clic pe functia definita corect in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).
have walked have been walking be walking
I have been walking for 5 hours.
- Merg pe jos de 5 ore.
Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.
será sería fui
Yo fui entrenador.
- Am fost antrenor.
Ferestre Frame - Tutorial JavaScript