Documente online.
Zona de administrare documente. Fisierele tale
Am uitat parola x Creaza cont nou
 HomeExploreaza
upload
Upload




Programare WEB - Cadre ( Frames )

Informatica


Programare WEB - Cadre ( Frames )

Cadrele permit împartirea unei ferestre în sectiuni independente între ele, în fiecare dintre acestea fiind posibila încarcarea unui document HTML. Astfel, utilizatorul poate vizualiza simultan mai multe documente.



De exemplu, putem împarti documentul în doua cadre. În primul cadru va fi afisata o bara de navigatie. Selectarea unui meniu al barei de navigatie va determina încarcarea paginii corespunzatoare în cel de-al doilea cadru. Astfel, bara de meniuri va fi vizibila în orice moment al navigarii site-ului.

Pentru structur 343b18d area unui document HTML în cadre sunt utilizate tagurile:

  • <frameset>
  • <frame>
  • <noframe>
  • <iframe>
Organizarea documentului în cadre - Tagul <frameset>

Un document cu cadre se realizeaza similar unui document HTML oarecare, în care tagurile <body>, respectiv </body> sunt înlocuite cu tagurile <frameset>, respectiv </frameset>:

<html>

<head>

</head>

<frameset>

</frameset>

</html>

Asadar, tagul <frameset> permite structurarea documentului principal în cadre. În interiorul perechii <frameset> </frameset> nu pot exista decât elemente <frameset>, <frame>, <noframe>.

Tagul <frameset> accepta urmatoarele atribute:

  • rows - primeste ca parametru o lista de valori, separate prin virgula,  ce reprezinta înaltimea cadrelor orizontale ale documentului principal. Numarul de cadre orizontale este dat de numarul de valori din lista. Valorile sunt exprimate fie prin numere întregi pozitive (înaltime absoluta exprimata în pixeli), fie prin procente din înaltimea cadrului parinte (înatime relativa), fie prin caracterul de puncuatie '*', care semnifica o înaltime relativa.

Observatii:

    1. Nu se recomanda ca toate valorile sa fie absolute, deoarece browserele pot utiliza rezolutii diferite, ceea ce poate duce la distorsiuni ale afisarii;
    2. În cazul utilizarii procentelor, suma acestora nu poate sa depaseasca 100%, în caz contrar, browserul va trunchia toate valorile pâna ce suma va fi 100.
  • cols - permite împartirea cadrului curent în sectoare verticale. Parametrii acceptati respecta aceleasi reguli ca si în cazul atributului rows, numai ca se refera la lungimea cadrului.
  • border - primeste o valoare întreaga nenegativa, reprezentând grosimea, exprimata în pixeli, a chenarului cadrelor. Implicit, grosimea chenarului este de 5 pixeli. Valoarea 0 a atributului border inhiba afisarea chenarelor tuturor cadrelor.
  • bordercolor - permite setarea culorii chenarelor cadrelor. Culoarea poate fi specificata fie printr-un triplet hexa de forma #rrggbb, fie printr-un nume predefinit de culoare.
  • frameborder - controleaza afisarea/ascunderea chenarelor tuturor cadrelor. Atributul poate primi valorile: yes sau 1 (se forteaza afisarea chenarelor), no sau 0 ( se forteaza ascunderea chenarelor);
  • framespacing - permite specificarea distantei, în pixeli, de spatiu liber în jurul tuturor cadrelor.

Observatie:

Ascunderea unui chenar, prin utilizarea perechii frameborder="no" sau border="0", face ca acesta sa nu mai fie vizibil pentru utilizator. Totusi, în Internet Explorer, utilizatorul poate opta pentru redimensionarea cadrului, prin operatia Drag and Drop asupra marginii invizibile. Pentru a inhiba aceasta posibilitate, ascunderea chenarului trebuie însotita de secventa: framespacing

Definirea cadrelor - Tagul <frame>

Tagul <frame> permite definirea unui cadru în interiorul unui set de cadre. El are sens numai atunci când apare în interiorul perechii <frameset> </frameset>.

Atribute acceptate:

  • src - specifica adresa URL a documentului ce va fi încarcat în cadrul respectiv;
  • name - specifica numele cadrului, nume ce va fi utilizat pentru referirea cadrului respectiv atunci când se va încarca în el un alt document HTML, prin intermediul unei hiperlegaturi aflate în alt cadru. Numele este o combinatie de caractere alfanumerice;
  • marginwidth, marginheight - controleaza distanta, exprimata în pixeli, între continutul cadrului si chenarul sau;
  • scrolling - atributul controleaza afisarea/ascunderea barelor de defilare (orizontala sau verticala). Poate primi valorile:
          • yes - se forteaza afisarea barelor de defilare;
          • no - se forteaza ascunderea barelor de defilare;
          • auto - barele de defilare vor fi afisate numai atunci când este necesar (când continutul cadrului depaseste lungimea si/sau înaltimea cadrului va fi afisata bara de defilare orizontala si/sau cea verticala);
  • border - permite setarea grosimii chenarului cadrului curent. Valoarea atributului border aflat în interiorul tagului frame este prioritara fata de valoarea aceluiasi atribut aflat în tagul frameset.
  • noresize - se inhiba utilizatorului posibilitatea de a redimensiona cadrele. Altfel, el are aceasta posibilitate, prin operatia Drag and Drop asupra marginilor cadrelor.
  • frameborder - controleaza afisarea/ascunderea chenarului cadrului curent. Atributul poate primi valorile: yes sau 1(se afiseaza chenarul), no sau 0 (se ascunde chenarul);
  • framespacing - permite specificarea distantei, în pixeli, de spatiu liber în jurul cadrului.
  • bordercolor - permite specificarea culorii chenarului cadrului respectiv.
Browserele vechi - Tagul <noframe>

Tagul <noframe> este utilizat în cazul în care se navigheaza cu un browser mai vechi, care nu suporta cadrele. În aceasta situatie, browserul va afisa continutul inclus în interiorul perechii <noframe> </noframe>. Daca însa, browserul recunoaste cadrele, el va ignora continutul perechii <noframe> </noframe>.

De regula, atunci când un browser nu recunoaste un tag, nu îl interpreteaza. Acest lucru se poate întâmpla si în cazul tagurilor <frameset>, <frame>. Este evident ca daca un browser nu recunoaste tagurile <frameset> si <frame> el nu va recunoaste nici <noframe>. Însa, va interpreta tagurile pe care le recunoaste, adica, în acest caz, cele cuprinse între <noframe> si </noframe>. De fapt, efectul tagului <noframe> este, în cazul browserelor care recunosc cadre, acela de a ignora continutul inclus în interiorul perechii <noframe> </noframe>.

Cadre in-line - Tagul <iframe> (in-line frame)

Tagurile <iframe> sunt similare tagurilor <frame>, cu deosebirea ca se includ în documente HTML obisnuite (nu în documente HTML cu cadre), adica în interiorul perechii <body> </body>.

La ora actuala numai Internet Explorer accepta cadre in-line. Daca un browser nu recunoaste cadre, el va afisa continutul cuprins între <iframe> si </iframe>.

Tagul <iframe> accepta aceleasi atribute ca si tagul <frame>, în plus accepta atribute preluate de la tagul <img>, care controleaza modul de afisare al cadrului în interiorul documentului.

Atribute acceptate:

preluate de la tagul <frame>:

src

name;

scrolling;

border,

bordercolor;

frameborder;

framespacing;

noresize;

marginwidth, marginheight;

preluate de la tagul <img>:

align;

width, height;

vspace, hspace.

Toate atributele mentionate mai sus au semnificatiile si parametrii prezentati în sectiunile anterioare ale cursului .

Exemple:

Realizarea cadrelor orizontale

<!--index.htm-->

<html>

<head>

<title>Grand Garage</title>

</head>

<frameset rows="150,*,20%">

<frame src="antet.htm">

<frame src="continut.htm">

<frame src="adresa.htm">

</frameset>

</html>

<!--antet.htm-->

<html>

<head>

</head>

<body>

<center>

<h3>GRAND GARAGE</h3>

<h3>Auto S.R.L.</h3>

<h3>Dealer DAEWOO</h3>

</center>

</body>

</html>

<!--continut.htm-->

<html>

<head>

</head>

<body>

<p>Noile preturi de la DAEWOO sunt mai mici ca niciodata. </p>

<p>Daca pana acum nu credeai, vino sa vezi! </p>

</body>

</html>

<!--adresa.htm-->

<html>

<head>

</head>

<body>



<p align="center"><b>Bucuresti, Str. L. Negreanu 13, Telefon: 051.144.178.</b></p>

</body>

</html>

Imbricarea cadrelor

<!--index.htm-->

<html>

<head>

<title>Grand Garage</title>

</head>

<frameset rows="120,*,20%">

<frame src="antet.htm">

<frameset cols="100,*">

<frame src="meniu.htm">

<frame src="desprenoi.htm">

</frameset>

<frame src="adresa.htm">

</frameset>

</html>

Cadre imbricate cu chenare colorate de diverse grosimi

<html>

<head>

<title>Cadre imbricate</title>

</head>

<frameset rows="50,*,50%">

<frameset cols="25%,*" border="30" bordercolor="red">

<frame src="Pagina1.htm">

<frame src="Pagina2.htm">

</frameset>

<frameset cols="*,2*,3*" >

<frame src="Pagina3.htm" scrolling="yes">

<frame src="Pagina4.htm" scrolling="auto">

<frame src="Pagina5.htm" scrolling="no">

</frameset>

<frameset cols="*,100" border="15">

<frame src="Pagina6.htm">

<frame src="Pagina7.htm" bordercolor="maroon" noresize>

</frameset>

</frameset>

</html>

Chenare inactive

<!--index.htm-->

<html>

<head>

<title>Grand Garage</title>

</head>

<frameset rows="92,*,20%" frameborder="no" framespacing="0">

<frame src="antet.htm">

<frameset cols="100,*">

<frame src="meniu.htm">

<frame src="desprenoi.htm">

</frameset>

<frame src="adresa.htm">

</frameset>

</html>

Browserele care nu accepta cadre

<!--index.htm-->

<html>

<head>

<title>Grand Garage</title>

</head>

<frameset rows="92,*,20%" border="0" frameborder="0">

<frame src="antet.htm">

<frameset cols="100,*">

<frame src="meniu.htm">

<frame src="desprenoi.htm">

</frameset>

<frame src="adresa.htm">

<noframe>

<h3 align="center">GRAND GARAGE - Auto S.R.L.</h3>

<h3 align="center">Dealer DAEWOO</h3>

<p align="center"><a href="meniu.htm">Bara de navigatie</a></p>

</noframes> 

</frameset>

</html>

Un exemplu complex

<!--index.htm-->

<html>

<head>

<title>Grand Garage</title>

</head>



<frameset rows="92,*,20%" border="0" frameborder="0">

<frame src="antet.htm">

<frameset cols="123,*">

<frame src="meniu.htm">

<frame name="continut" src="desprenoi.htm">

</frameset>

<frame src="adresa.htm">

</frameset>

</html>

<!--meniu.htm-->

<html>

<body>

<p><a href="desprenoi.htm" target="continut">Despre Noi</a></p>

<p><a href="vanzari.htm" target="continut">Vanzari</a></p>

<p><a href="preturi.htm" target="continut">Preturi</a></p>

</body>

</html>

<!--antet.htm-->

<html>

<body>

<h3 align="center">GRAND GARAGE - Auto S.R.L.</h3>

<h3 align="center">Dealer DAEWOO</h3>

</body>

</html>

<!--adresa.htm-->

<html>

<body>

<p align="center"><b>Bucuresti, Str. L. Negreanu 13, Telefon: 051.144.178.</b></p>

</body>

</html>

<!--desprenoi.htm-->

<html>

<body>

<p>Leader pe piata auto romaneasca, societatea noastra, Grand Garage-Auto

S.R.L., comercializeaza autoturisme marca DAEWOO. </p>

<p>Preturile noastre sunt mai mici ca niciodata. Daca pana acum nu credeai, vino sa vezi! </p>

</body>

</html>

<!--vanzari.htm-->

<html>

<body>

<h4>Grand Garage - auto S.R.L. ofera clientilor nostri trei modalitati de plata:</h4>

<ul>

<li>vanzare cu plata integrala la cumparare;</li>

<li>vanzare in rate;</li>

<li>vanzare in sistem leasing.</li>

</ul>

</body>

</html>

<!--preturi.htm-->

<html>

<body>

<table border="1" bgcolor="silver" bordercolor="black" cellpadding="10">

<caption><h4>Preturi autovehicule Daewoo</h4></caption>

<tr><th>Model</th><th>Pret (EURO, toate taxele incluse)</th></tr>

<tr><td>Tico</td><td>4990</td></tr>

<tr><td>Matiz</td><td>4990(E)-6800(SE POWER)</td></tr>

<tr><td>Cielo</td><td>8290(GLE)-9390(Exe.LPG)</td></tr>

</table>

</body>

</html>

Cadre in-line

<html>

<head>

<title>Formate de Imagini</title>

</head>

<body>

<iframe name="cadru" src="Generalitati.htm" width="200" height="100" border="3" align="right">Site realizat cu cadre in-line. Browserul dvs. nu suporta!</iframe>

<b>Formate de Imagini:

<ul>

<li><a href="bmp.htm" target="cadru">BMP</a></li>

<li><a href="jpeg.htm" target="cadru">JPEG</a></li>

<li><a href="tiff.htm" target="cadru">TIFF</a></li>

</ul>

</b>

</body>

</html>



Document Info


Accesari: 985
Apreciat: hand-up

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta

Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site


in pagina web a site-ului tau.



eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare




Copyright © Contact (SCRIGROUP Int. 2025 )