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