Lucrul cu mai multe cadre

Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) 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 cadre intr-o fereastra, in primul cadru puteti incarca un document HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

<frameset> si <frame> sau <iframe>

1. Configurarea cadrelor

Pentru inceput se adauga un element <FRAMESET> ... </FRAMESET> in interiorul documentului HTML, în sectiunea HEAD.
<FRAMESET> determina cat din spaţiul ferestrei este atribuit fiecărui cadru, folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.
Acesta va conţine elemente <FRAME>, cate unul pentru fiecare divizare a ferestrei din browser.

ROWS

Determina numarul de linii si marimea cadrelor care vor fi asezate in linie, începând de sus.
Pot fi folosite urmatoarele valori:
- - pixeli absoluti ; ex : "360,120"
  - procente din inaltimea ecranului ; ex : "75%,25%"
  - valori proportionale, folosind (*). Acesta putând fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

COLS

Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane, începând din stanga.
Pot fi folosite urmatoarele valori:
- - pixeli absoluti ; ex : "380,120"
  - procente din lungimea ecranului ; ex : "33%,77%"
  - valori proportionale, folosind (*). Acesta putând fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

Alte atribute ale elementului <FRAMESET>

FRAMEBORDER - Stabileste afisarea sau nu a unei borduri in jurul cadrelor. Posibile valori: 0, 1 sau YES, NO.
FRAMESPACING - Acest atribut este specificat in pixeli. Daca FRAMEBORDER este 0 atunci si acesta trebuie sa aiba valoarea 0
BORDER - Marginea cadrelor. Valori posibile: 0 sau 1
BORDERCOLOR - Acest atribut permite sa alegi culoarea bordurii.

Elementul <FRAME>

Acest element defineste un singur cadru , este scris in interiorul elementului <FRAMESET>
Pentru fiecare cadru trebuie scris cate un element <FRAME>
Acesta are urmatoarele atribute:
- SRC - Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
- NAME - Aici trebuie scris numele de identificare al cadrului.
- MARGINWIDTH - Atribut optional, valoare in pixeli. Determina spatiul orizontal dintre continutul cadrului si marginea acestuia
- MARGINHEIGHT - Atribut optional, valoare in pixeli. Determina spatiul vertical dintre continutul cadrului si marginea acestuia.
- SCROLLING - Afiseaza un Scroll Bar in cadru. Valori posibile: YES (permite afisarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) si AUTO (browser-ul va decide daca este nevoie de Scroll Bar. Aceasta valoare este cea mai indicata)
- NORESIZE - Optional, impiedica utilizatorul sa modifice marimea cadrului, prin selectarea marginii acestuia si mutarea in stânga sau dreapta ori sus sau jos.

Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77%

<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>

De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane.
In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului "<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide spatiul ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>" trebuie urmat de inca doua elemente "<FRAME>"
- Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o pagina ce contine trei cadre:

<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="baner.htm">
<FRAMESET COLS="120,*">
<FRAME SRC="Meniu.htm" NAME="meniu">
<FRAME SRC="Continut.htm" NAME="date">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>

2. Atributul target

Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de specificarea unui atribut in eticheta de link "<a>" numit target, acesta spune browser-ului in ce cadru sa deschida pagina.
Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in care se va deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care vrem sa deschidă pagina Doc3.htm in spaţiul in care se afla celalat cadru, de exemplu Continut.htm; codul HTML pentru link va arata astfel in Meniu.htm:

<a href="Doc3.htm" target="numele cadrului Continut.htm"> Numele link-ului </a>

- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent
- atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si atributul NAME din FRAME-ul in care se doreste afisarea paginii.

Special Target:

Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare are o functie speciala.
target="_top"
- - acesta va încarca link-ul in toata fereastra browser-ului, disparând astfel cadrele.
target="_blank"
- - acesta va încarca link-ul intr-o noua fereastra de browser, astfel ramanand deschisa si vechea fereastra.
target="_self"
- - acesta va încarca link-ul in aceeasi fereastra de unde a fost actionat.
target="_parent"
- - cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru, daca acesta nu exista atunci link-ul se va deschide in actuala fereastra de browser.

3. Adaugarea cadrelor iframe

Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca exemplu, urmatoarea sintaxa (aceasta se adauca in sectiunea BODY, in locul unde doriti sa apara frame-ul):

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

- Unde "iframe" este elementul principal care indica adaugarea unui frame in pagina.
- "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 (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este folosit de JavaScript).

<<-XHTML - Tag-uri si ..

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag afiseaza textul oblic?

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Clic pe metoda ce returneaza primul element indicat de selectorii specificati.

getElementsByName() querySelector() querySelectorAll()

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicati variabila PHP ce contine datele din formular trimise cu method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".

I They We

We speak english.
- Noi vorbim engleza.

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".

Ellos Vosotros Nosotros

Nosotros hablamos español.
- Noi vorbim spaniola.