CAP. 9. CADRE

 

9.1. Noţiuni generale

 

        Cadrele vă permit divizarea ferestrei browser-ului în mai multe zone dreptunghiulare, dispuse pe rânduri şi/sau coloane, fiecare dintre acestea conţinând un document web diferit. Fiecare astfel de zonă poartă denumirea de cadru (frame).

Dintre avantajele oferite de folosirea cadrelor amintim faptul că reprezintă cea mai simplă modalitate de a realiza un document ce conţine părţi statice şi părţi variabile (care se pot schimba). Astfel, meniurile, logo-urile, mesajele şi orice alte informaţii mai dorim pot fi inserate într-un cadru ce va rămâne permanent vizibil.

Dezavantajele constau mai ales în faptul că nu toate browserele suportă cadre, prin urmare sunt necesare două versiuni ale aceluiaşi site (cu cadre şi fără cadre) iar motoarele de căutare nu indexează corespunzător un site care conţine cadre.

        O pagină ce conţine cadre reprezintă de fapt un document cu mai multe pagini, fiecare cadru conţinând o pagină web. În afară de acestea, mai există un document web care descrie modul în care va fi împărţită pagina în cadre.

        De exemplu, pentru a crea un document cu două cadre (unul în stânga şi unul în dreapta) este nevoie de trei documente web. În imaginea de mai jos sunt reprezentate aceste documente aşa cum sunt ele afişate de browsere.

 

       

 

        În acest exemplu, doc.html reprezintă documentul care descrie modul în care fereastra browser-ului va fi divizată în cele două zone dreptunghiulare marcate prin cadrele ce conţin celelalte două documente web.

 

        9.2. Structura unei pagini ce defineşte cadre

 

        Definirea cadrelor se realizează prin folosirea elementului <FRAMESET> ce se plasează într-un document web în locul elementului <BODY>.

        Elementul <FRAMESET> descrie modul în care fereastra browser-ului va fi împărţită, mai exact stabileşte numărul şi dimensiunile cadrelor (zonelor dreptunghiulare) dispuse pe rânduri şi/sau coloane. Necesită tag de închidere </FRAMESET>

Atributele acestui element sunt legate de existenţa rândurilor sau coloanelor, precum şi de modul de delimitare a acestora unele de altele:

 

Atribut

Valoare

Descriere

cols

pixels

%

*

Defineşte numărul şi mărimea coloanelor într-un document.

rows

pixels

%

*

Defineşte numărul şi mărimea rândurilor într-un document.

frameborder

yes / no

1 / 0

Stabileşte dacă există sau nu bordură pentru cadre

framespacing

sau

border

pixels

Stabileşte grosimea bordurii cadrelor (framespacing în Internet Explorer şi border în Netscape).

bordercolor

rgb(x,x,x)

#xxxxxx

colorname

Precizează culoarea bordurii cadrelor.

 

        În interiorul elementului <FRAMESET> este elementul <FRAME>, câte unul pentru fiecare cadru,  care are rolul de a stabili documentele corespunzătoare fiecăruia dintre cadre.

        Pentru exemplificare vor crea un document cu două cadre dispuse vertical. În acest sens vor trebui create cele trei documente corespunzătoare.

        Vom crea fişierul doc1.html, corespunzător cadrului 1, cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Documentul 1</TITLE>

</HEAD>

<BODY BGCOLOR="cyan">

  <H3>Documentul 1 in cadrul 1</H3>

</BODY>

</HTML>

 

        Vom crea şi fişierul doc2.html, corespunzător cadrului 2, cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Documentul 2</TITLE>

</HEAD>

<BODY BGCOLOR="yellow">

  <H3>Documentul 2 in cadrul 2</H3>

</BODY>

</HTML>

 

        În final vom crea fişierul test9.html, care va stabili dispunerea cadrelor, cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Folosirea cadrelor</TITLE>

</HEAD>

 

<FRAMESET COLS="40%,60%">

  <FRAME SRC="doc1.html">

  <FRAME SRC="doc2.html">

</FRAMESET>

 

</HTML>

 

        Rezultatul afişat va fi următorul:

 

       

 

        În cazul în care dorim ca cele două cadre să fie dispuse orizontal, fişierul test9.html va avea următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Folosirea cadrelor</TITLE>

</HEAD>

<FRAMESET ROWS="30%,70%">

  <FRAME SRC="doc1.html">

  <FRAME SRC="doc2.html">

</FRAMESET>

</HTML>

 

        iar rezultatul afişat va fi următorul:

 

       

 

 

Pentru realizarea unei structuri combinate, cu trei cadre, dintre care unul pe orizontală şi două pe verticală, vom crea fişierul doc3.html, corespunzător cadrului 3, cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Documentul 3</TITLE>

</HEAD>

<BODY BGCOLOR="beige">

  <H3>Documentul 3 in cadrul 3</H3>

</BODY>

</HTML>

 

iar fişierul test9.html va avea următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Folosirea cadrelor</TITLE>

</HEAD>

<FRAMESET ROWS="30%,70%">

  <FRAME SRC="doc1.html">

    <FRAMESET COLS="30%,70%">

      <FRAME SRC="doc2.html">

      <FRAME SRC="doc3.html">

   </FRAMESET>

</FRAMESET>

</HTML>

 

        Rezultatul afişat va fi următorul:

 

       

 

 

        În final vom analiza şi atributele ce definesc bordura, astfel că vom folosi următoarele exemple:

 

<HTML>

<HEAD>

 <TITLE>Folosirea cadrelor</TITLE>

</HEAD>

<FRAMESET ROWS="30%,70%" FRAMEBORDER="yes" FRAMESPACING="15" BORDERCOLOR="blue">

  <FRAME SRC="doc1.html">

    <FRAMESET COLS="30%,70%">

      <FRAME SRC="doc2.html">

      <FRAME SRC="doc3.html">

   </FRAMESET>

</FRAMESET>

</HTML>

 

        Rezultatul afişat va fi următorul:

 

 

Pentru eliminarea bordurilor, atributele frameborder şi framespacing vor primi valoarea 0, iar rezultatul afişat va fi următorul:

 

 

 

9.3. Atributele cadrelor

 

Elementul <FRAME> defineşte fiecare cadru dintr-un document. Este obligatorie prezenţa acestui element în fiecare secţiune marcată de tag-ul <FRAMESET>. Nu necesită tag de închidere.

Atributele ce caracterizează acest element sunt următoarele:

 

Atribut

Valoare

Descriere

src

URL

Reprezintă link-ul către fişierul ce se va deschide în cadrul respectiv..

frameborder

yes / no

1 / 0

Stabileşte dacă există sau nu bordură pentru cadrul respectiv.

longdesc

URL

Reprezintă link-ul către o descriere lungă folosită pentru browserele ce nu suportă cadre.

marginheight

pixels

Defineşte marginile de sus şi de jos ale cadrului.

marginwidth

pixels

Defineşte marginile din stânga şi din dreapta ale cadrului.

noresize

noresize

Când este setat, acest atribut împiedică ajustarea mărimii cadrului de către utilizatori.

scrolling

yes

no

auto

Determină prezenţa sau absenţa barei de derulare (scrollbar).

name

text

Defineşte denumirea cadrului.

target

_blank

_self

_parent

_top

Specifică unde va deschis URL-ul ţintă:

Ř      _blank – într-o fereastră nouă;

Ř      _self – în acelaşi cadru din care a fost accesat;

Ř      _parent – în cadrul părinte;

Ř      _top - direct în fereastra browser-ului, luând locul documentului existent.

 

Pentru a observa efectele acestor atribute, ne vom folosi de fişierul test9.html cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Folosirea cadrelor</TITLE>

</HEAD>

<FRAMESET ROWS="30%,70%">

  <FRAME SRC="doc1.html">

    <FRAMESET COLS="30%,70%">

      <FRAME SRC="doc2.html">

      <FRAME SRC="doc3.html">

   </FRAMESET>

</FRAMESET>

</HTML>

 

Atributul src a fost folosit în exemplele anterioare, prin urmare nu vom insista asupra lui.

Vom adăuga atributul frameborder="no" cadrului nr. 2 (<frame src="doc2.html" frameborder="no">) şi veţi observa diferenţa:

 

Cadrul 2 cu bordură

 

 

Cadrul 2 fără bordură

 

 

În continuare vom adăuga şi atributul marginheight cadrului nr. 2 (<frame src="doc2.html" frameborder="no" marginheight="0">) pentru a pune în evidenţă modul în care se modifică marginile de sus şi de jos ale cadrului:

 

Cadrul 2 cu margini implicite

 

 

Cadrul 2 fără margini sus şi jos

 

 

 

Adăugând şi atributul marginwidth cadrului nr. 2 (<frame src="doc2.html" frameborder="no" marginheight="25" marginwidth="25">) vom pune în evidenţă modul în care se modifică marginile din stânga şi din dreapta ale cadrului:

 

Cadrul 2 cu margini implicite

 

 

Cadrul 2 cu margini de 25 pixeli

 

 

Pentru a pune în evidenţă atributul noresize, mai întâi încercaţi să poziţionaţi cursorul de la mouse pe bordura dintre cadre, după care, în momentul în care vă apare semnul  " « ", ţinând apăsat pe butonul din stânga de la mouse, mutaţi bordura ce separă cadrele:

 

 

Aplicând atributul noresize (<frame src="doc2.html" noresize>), facilitatea de redimensionare a cadrelor va fi dezactivată, prin urmare nu va mai apărea semnul  " « ", ci doar cursorul normal al mouse-ului, ca în imaginea de mai jos.

 

 

 

Atributul scrolling vă permite afişarea barei de derulare în fiecare cadru. Valoarea implicită este “auto”, caz în care, în funcţie de mărimea conţinutului, browser-ul va decide dacă este necesară afişarea barei de derulare. În cazul atribuirii valorii “yes”, bara de derulare va fi afişată întotdeauna, iar în cazul atribuirii valorii “no”, bara de derulare nu va fi afişată deloc.

Pentru exemplificare, vom adăuga conţinut celor trei documente ce populează cadrele, şi anume doc1.hml, doc2.hml şi doc2.hml.

 

 

Prin folosirea atributului name, cadrelor le pot fi atribuite denumiri, ceea ce va poate ajuta la identificarea mai usoara a acestora.

 

9.4. Destinaţii

 

Când creaţi link-uri într-un document web ce conţine cadre, este necesară folosirea unui atribut suplimentar denumit target. Acesta este corelat cu atributul name prezentat anterior.

Atributul target care poate apărea în următoarele elemente <A>, <AREA>, <BASE> şi <FORM>.

Exemple:

 

 <A HREF="file.htm" TARGET="nume_fereastra">

<AREA SHAPE="RECT" COORDS="5,6,2,4" HREF="file.html" TARGET="nume_fereastra">

<BASE TARGET="nume_fereastra">

<FORM ACTION="cgi-bin/script" TARGET="nume_fereastra">

 

Valorile posibile pentru atributul target sunt:

a)                         numele (valoarea atributului name) unei ferestre deschise de browser sau numele (valoarea atributului name) unui cadru încărcat de browser

b)                         una din următoarele 4 ţinte speciale, ce nu pot fi atribuite atributului name, fiind denumiri rezervate cu funcţii specifice:

§         TARGET="_blank" (documentul va fi încărcat într-o fereastră nouă a browser-ului);

§         TARGET="_top" (documentul va fi încărcat direct în fereastra browser-ului, luând locul documentului existent);

§         TARGET="_parent" (documentul va fi încărcat în fereastra/setul de cadre părinte);

§         TARGET="_self" (documentul va fi încărcat în acelaşi cadru);

 

Pentru exemplificare, vom folosi fişierul test9.html cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Folosirea cadrelor</TITLE>

</HEAD>

<FRAMESET ROWS="15%,85%">

  <FRAME SRC="doc1.html" NAME="sus">

    <FRAMESET COLS="70%,30%">

      <FRAME SRC="doc2.html">

      <FRAME SRC="doc3.html" NAME="dreapta">

   </FRAMESET>

</FRAMESET>

</HTML>

       

Vom folosi fişierul doc1.html, corespunzător cadrului 1, cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Documentul 1</TITLE>

</HEAD>

<BODY BGCOLOR="cyan">

  <H3>Documentul 1 in cadrul 1</H3>

</BODY>

</HTML>

 

În fişierul doc2.html vom insera link-uri către doc4.html cu destinaţii diferite, astfel:

 

<HTML>

<HEAD>

 <TITLE>Documentul 2</TITLE>

</HEAD>

<BODY BGCOLOR="yellow">

  <H3>Documentul 2 in cadrul 2</H3>

 <P><B>Exemplificare destinatii</B><BR>

 <A HREF="doc4.html" TARGET="dreapta"> Documentul 4 in cadrul din dreapta</A><BR>

<A HREF="doc4.html" TARGET="sus"> Documentul 4 in cadrul de sus</A><BR>

<A HREF="doc4.html" TARGET="_self"> Documentul 4 in acelasi cadru din care este accesat link-ul (si anume in Cadrul 2)</A><BR>

<A HREF="doc4.html" TARGET="_parent"> Documentul 4 in cadrul parinte</A><BR>

<A HREF="doc4.html" TARGET="_top"> Documentul 4 direct in browser (in acest exemplu rezultatul este identic ca la optiunea precedenta)</A><BR>

<A HREF="doc4.html" TARGET="_blank"> Documentul 4 intr-o fereastra noua a browser-ului </A>

</BODY>

</HTML>

 

Fişierul doc3.html, corespunzător cadrului 3, va avea următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Documentul 3</TITLE>

</HEAD>

<BODY BGCOLOR="beige">

  <H3>Documentul 3 in cadrul 3</H3>

</BODY>

</HTML>

 

Şi în final vom crea fişierul doc4.html cu următoarea structură:

 

<HTML>

<HEAD>

 <TITLE>Documentul 4</TITLE>

</HEAD>

<BODY BGCOLOR="pink">

  <H3>Documentul 4</H3>

  <P><A HREF="test9.html" TARGET="_top"> Dati click aici pentru a reveni la documentul initial</A></P>

</BODY>

</HTML>

 

        Rezultatele obţinute vor fi următoarele:

 

 

 

Documentul 4 în cadrul din dreapta

 

 

Documentul 4 în cadrul de sus

 

Documentul 4 în acelaşi cadru din care este accesat link-ul (şi anume în Cadrul 2)

 

Imaginea afişată este identică pentru ultimele 3 opţiuni:

-         Documentul 4 în cadrul parinte

-         Documentul 4 direct în browser

-         Documentul 4 într-o fereastra nouă a browser-ului

 

 

9.5. Cadre interioare

 

        Cadrele interioare (in-line) sunt cadre ce pot fi inserate oriunde în interiorul unei pagini web (similar elementelor imagine). Pentru a insera un cadru interior, se foloseşte elementul <IFRAME> ce necesită tag-ul de închidere </IFRAME>.

        Acest element foloseşte toate atributele elementului <FRAME>, cu aceleaşi efecte (şi anume src, frameborder, marginheight, marginwidth, scrolling şi name).

        Existând similaritatea cu elementele imagine, o serie de atribute, specifice elementelor imagine, pot fi utilizate cu elementul <IFRAME> obţinându-se aceleaşi rezultate (şi anume width, height, align, hspace şi vspace).

        Într-o pagină web pot fi adăugate oricâte cadre interioare sunt necesare.

 

        Pentru exemplificare vom modifica doc3.html astfel:

 

<HTML>

<HEAD>

 <TITLE>Documentul 3</TITLE>

</HEAD>

<BODY BGCOLOR="beige">

  <H3>Documentul 3 in cadrul 3</H3>

  <IFRAME SRC="doc4.html" ALIGN="center" WIDTH="200" HEIGHT="150" </IFRAME>

</BODY>

</HTML>

 

        Vom obţine următorul rezultat:

 

       

 

 

9.6. Elementul <NOFRAMES>

 

        Înainte de a încheia şi acest capitol, trebui să aveţi în vedere că încă mai există oameni care folosesc anumite browsere ce nu suportă cadre. În aceste cazuri browserele vor afişa pagini goale.

        Problema aceasta poate fi rezolvată prin inserarea elementului <NOFRAMES> în interiorul elementului <FRAMESET>.

        În interiorul elementului <NOFRAMES> va trebui să inseraţi cod HTML obişnuit prin care puteţi redirecţiona vizitatorii paginilor dvs. către o variantă a site-ului fără cadre (dacă există), sau puteţi să-i atenţionaţi asupra faptului ca documentul dvs. conţine cadre iar browser-ul lor nu suportă aşa ceva.

        De exemplu:

 

<HTML>

<HEAD>

 <TITLE> </TITLE>

</HEAD>

<FRAMESET ROWS="40%,60%" COLS="70%,30%">

      <FRAME SRC="doc1.html">

      <FRAME SRC="doc2.html">

      <FRAME SRC="doc3.html">

      <FRAME SRC="doc4.html">

   <NOFRAMES>

    <BODY>Aceast site contine cadre pe care browser-ul dvs. nu le poate interpreta. Puteti vizita o versiune fara cadre a site-ului la adresa ….

    </BODY>

   </NOFRAMES>

</FRAMESET>

</HTML>

 

9.7. Aplicaţie practică

 

Pentru a pune în practică cele prezentate în acest capitol, dar si in cele anterioare, vom realiza o structură combinată, cu trei cadre, dintre care unul pe orizontală şi două pe verticală. Astfel, cadrul orizontal va fi alocat titlului (antetului), cel din stânga va fi alocat unui meniu, iar cel din dreapta va prezenta conţinutul corespunzător meniului.

 

Structura cadrelor va fi definită în fişierul test_cadre.html ce va avea următorul conţinut:

 

<HTML>

<HEAD>

 <TITLE>Retete culinare</TITLE>

</HEAD>

<FRAMESET ROWS="15%,85%">

  <FRAME SRC="antet_cadre.html" NAME="antet" SCROLLING="no">

    <FRAMESET COLS="30%,70%">

      <FRAME SRC="meniu_cadre.html" NAME="meniu">

      <FRAME SRC="continut_cadre.html" NAME="retete">

   </FRAMESET>

   <NOFRAMES>

   <H1>Retete culinare</H1> Browser-ul dvs. nu suporta cadre? Nicio problema! Puteti vedea continutul site-ului nostru in versiunea

   <A HREF="continut_cadre.html">fara cadre</A>.

   </NOFRAMES>

</FRAMESET>

</HTML>

 

Pentru antet vom crea fişierul antet_cadre.html cu următorul conţinut:

 

<HTML>

<HEAD>

 <TITLE>Titlu</TITLE>

</HEAD>

<BODY BGCOLOR="saddlebrown">

  <H1><FONT COLOR="white">Retete culinare</FONT></H1>

</BODY>

</HTML>

 

Pentru meniu vom crea fişierul meniu_cadre.html cu următorul conţinut:

 

<HTML>

<HEAD>

 <TITLE>Meniu</TITLE>

</HEAD>

<BODY BGCOLOR="wheat">

   <H2>Meniu</H2>

   <A HREF="continut_cadre.html#Aperitiv din branza de burduf" TARGET="retete">Aperitiv din branza de burduf</A><BR><BR>

   <A HREF="continut_cadre.html#Ciorba de caprioara cu smantana" TARGET="retete">Ciorba de caprioara cu smantana</A><BR><BR>

   <A HREF="continut_cadre.html#Friptura de iepure" TARGET="retete">Friptura de iepure</A><BR><BR>

   <A HREF="continut_cadre.html#Coltunasi dulci cu branza de vaci" TARGET="retete">Coltunasi dulci cu branza de vaci</A>

</BODY>

</HTML>

 

Continutul va fi cuprins in fişierul continut_cadre.html astfel:

 

<HTML>

<HEAD>

 <TITLE>Continut</TITLE>

</HEAD>

<BODY BGCOLOR="beige">

<A NAME="Aperitiv din branza de burduf"><H2>Aperitiv din branza de burduf</H2></A>

<B>Ingrediente:</B>

<UL>

<LI>1/2 kg branza de oaie (se poate inlocui cu cas proaspat)

<LI>100 ml smantana

<LI>5 sardele

<LI>ceapa

<LI>chimen

<LI>50-100 ml bere

</UL>

<B>Mod de preparare:</B>

<P>Se piseaza branza cu o furculita (daca e cas atunci se da prin masina de tocat). Peste se toarna berea, smantana. Chimenul se macina si se adauga o lingurita fara varf, iar la final sardelele si ceapa rasa. Se amesteca bine bine si se sareaza dupa gust. De preferat sa se serveasca in aceeasi zi.</P>

<B>Recomandari:</B>

<P>Sa se orneze cu bucatele taiate de gogosari sau masline</P>

<BR>

<A NAME="Ciorba de caprioara cu smantana"><H2>Ciorba de caprioara cu smantana</H2></A>

<B>Ingrediente:</B>

<UL>

<LI>500 g carne de caprioara

<LI>100 g ceapa

<LI>100 g morcovi

<LI>50 g patrunjel

<LI>50 g ulei

<LI>75 g orez

<LI>250 g rosii

<LI>40 ml otet

<LI>200 g smantana

<LI>2 oua

<LI>verdeata

<LI>sare

</UL>

<B>Mod de preparare:</B>

<P>Carnea de caprioara se portioneaza si se pune la fiert in apa cu sare. In timpul fierberii se spumeaza cat este nevoie. Ceapa se toaca marunt, se caleste in ulei, se adauga zarzavatul de supa taiat julien si se mai calesc impreuna cateva minute. Se sting cu apa si se pun in ciorba. Cand carnea este aproape fiarta, se pune orezul fiert separat si rosiile curatate de coaja si seminte si taiate cuburi. Smantana se amesteca cu galbenusurile de ou si doua linguri de otet si se adauga la ciorba. Se mai potriveste o data gustul de sare, iar la servit se presara cu verdeata tocata marunt.</P>

<BR>

<A NAME="Friptura de iepure"><H2>Friptura de iepure</H2></A>

<B>Ingrediente:</B>

<UL>

<LI>1 kg carne de iepure (pulpa)

<LI>50 g slanina afumata

<LI>50 g unt

<LI>sare

</UL>

<B>Mod de preparare:</B>

<P>Carnea de iepure se sterge cu un stergar, se impaneaza cu slanina afumata, se freaca cu sare, se unge cu unt si se asaza intr-o tava cu restul de unt si putina apa, se da la cuptor si se frige la un foc potrivit. In timpul frigerii se stropeste cu sosul format in tava. Se mananca cu garnituri de legume si salate de sezon.</P>

<BR>

<A NAME="Coltunasi dulci cu branza de vaci"><H2>Coltunasi dulci cu branza de vaci</H2></A>

<B>Ingrediente:</B>

<UL>

<LI>500 g faina

<LI>4 oua

<LI>500 g branza de vaci

<LI>40 g coaja rasa de lamaie

<LI>175 g zahar

<LI>sare

</UL>

<B>Mod de preparare:</B>

<P>Din faina, 2 oua, putina sare si putina apa se prepara o coca mai deasa, din care se intinde o foaie si se taie patrate cu latura de 5-7 cm. Branza de vaci se amesteca cu 75 g zahar, 2 oua si coaja de lamaie rasa, se repartizeaza, in mod egal, pe patratele de coca, se indoaie in forma de triunghi si se lipesc bine. Se fierb in apa cu sare, se scurg, se trec printr-un jet de apa rece, se toarna deasupra untul fierbinte si se presara cu restul de zahar. </P>

</BODY>

</HTML>

 

Rezultatul afişat va fi următorul: